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,12 +127,40 @@ const FirstLevelFolder = memo(({ item }: { item: IFolder }) => {
   )
 })
 
+const LanguageList: FC<{
+  items: IFileOrFolder[]
+  setExpanded: React.Dispatch<React.SetStateAction<boolean>>
+}> = ({ items, setExpanded }) => {
+  const { current, setCurrent } = useSidebar()
+
+  return (
+    <SC.StyledLanguageList>
+      {items.map(item => (
+        <SC.Language
+          key={item.title}
+          className={current === item.title ? "active" : ""}
+          onClick={() => {
+            setCurrent(item.title)
+            setExpanded(false)
+          }}
+        >
+          {item.title}
+        </SC.Language>
+      ))}
+    </SC.StyledLanguageList>
+  )
+}
+
 const AllLanguages: FC<{
   items: IFileOrFolder[]
   expanded: boolean
   setExpanded: React.Dispatch<React.SetStateAction<boolean>>
 }> = ({ items, expanded, setExpanded }) => {
-  const { current, setCurrent } = useSidebar()
+  const { current } = useSidebar()
+
+  if (!current) {
+    return <LanguageList items={items} setExpanded={setExpanded} />
+  }
 
   return (
     <SC.ExpandLanguages>
@@ -141,21 +169,7 @@ const AllLanguages: FC<{
       >
         Expand languages {expanded ? <SC.CollapseIcon /> : <SC.ExpandIcon />}
       </SC.ExpandLanguagesHeader>
-      {expanded && (
+      {expanded && <LanguageList items={items} setExpanded={setExpanded} />}
-        <SC.ExpandLanguagesList>
-          {items.map(item => (
-            <SC.Language
-              className={current === item.title ? "active" : ""}
-              onClick={() => {
-                setCurrent(item.title)
-                setExpanded(false)
-              }}
-            >
-              {item.title}
-            </SC.Language>
-          ))}
-        </SC.ExpandLanguagesList>
-      )}
     </SC.ExpandLanguages>
   )
 }
@@ -170,8 +184,7 @@ export const ResourcesSidebar: FC<HTMLAttributes<HTMLDivElement>> = props => {
     languages
   )
 
-  const currentLanguage =
+  const currentLanguage = sortedLanguages.find(lang => lang.title === current)
-    sortedLanguages.find(lang => lang.title === current) || sortedLanguages[0]
 
   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;