Merge pull request #255 from the-programmers-hangout/feat-resources-avoid-default-language

feat(resources): avoid a default language

src/components/ResourcesSidebar/index.tsx

@@ -127,24 +127,17 @@ const FirstLevelFolder = memo(({ item }: { item: IFolder }) => {
   )
 })
 
-const AllLanguages: FC<{
+const LanguageList: FC<{
   items: IFileOrFolder[]
-  expanded: boolean
   setExpanded: React.Dispatch<React.SetStateAction<boolean>>
-}> = ({ items, expanded, setExpanded }) => {
+}> = ({ items, setExpanded }) => {
   const { current, setCurrent } = useSidebar()
 
   return (
-    <SC.ExpandLanguages>
-      <SC.ExpandLanguagesHeader
-        onClick={() => setExpanded(prevState => !prevState)}
-      >
-        Expand languages {expanded ? <SC.CollapseIcon /> : <SC.ExpandIcon />}
-      </SC.ExpandLanguagesHeader>
-      {expanded && (
-        <SC.ExpandLanguagesList>
+    <SC.StyledLanguageList>
       {items.map(item => (
         <SC.Language
+          key={item.title}
           className={current === item.title ? "active" : ""}
           onClick={() => {
             setCurrent(item.title)
@@ -154,8 +147,29 @@ const AllLanguages: FC<{
           {item.title}
         </SC.Language>
       ))}
-        </SC.ExpandLanguagesList>
-      )}
+    </SC.StyledLanguageList>
+  )
+}
+
+const AllLanguages: FC<{
+  items: IFileOrFolder[]
+  expanded: boolean
+  setExpanded: React.Dispatch<React.SetStateAction<boolean>>
+}> = ({ items, expanded, setExpanded }) => {
+  const { current } = useSidebar()
+
+  if (!current) {
+    return <LanguageList items={items} setExpanded={setExpanded} />
+  }
+
+  return (
+    <SC.ExpandLanguages>
+      <SC.ExpandLanguagesHeader
+        onClick={() => setExpanded(prevState => !prevState)}
+      >
+        Expand languages {expanded ? <SC.CollapseIcon /> : <SC.ExpandIcon />}
+      </SC.ExpandLanguagesHeader>
+      {expanded && <LanguageList items={items} setExpanded={setExpanded} />}
     </SC.ExpandLanguages>
   )
 }
@@ -170,8 +184,7 @@ export const ResourcesSidebar: FC<HTMLAttributes<HTMLDivElement>> = props => {
     languages
   )
 
-  const currentLanguage =
-    sortedLanguages.find(lang => lang.title === current) || sortedLanguages[0]
+  const currentLanguage = sortedLanguages.find(lang => lang.title === current)
 
   return (
     <Sidebar {...props}>
@@ -180,7 +193,7 @@ export const ResourcesSidebar: FC<HTMLAttributes<HTMLDivElement>> = props => {
         expanded={expandedLanguages}
         setExpanded={setExpandedLanguages}
       />
-      <Tree item={currentLanguage} firstLevel={true} />
+      {currentLanguage && <Tree item={currentLanguage} firstLevel={true} />}
     </Sidebar>
   )
 }

src/components/ResourcesSidebar/styles.tsx

@@ -130,7 +130,7 @@ export const ExpandLanguagesHeader = styled.div`
   }
 `
 
-export const ExpandLanguagesList = styled.div`
+export const StyledLanguageList = styled.div`
   padding: 8px 0;
   display: flex;
   flex-direction: column;