Changes to code style

Author: ACR1209

cspell-dict.txt

@@ -1,2 +1,3 @@
 quicksnip
 slugifyed
+sublanguage

src/components/LanguageSelector.tsx

@@ -4,19 +4,28 @@ import { useAppContext } from "@contexts/AppContext";
 import { useKeyboardNavigation } from "@hooks/useKeyboardNavigation";
 import { useLanguages } from "@hooks/useLanguages";
 import { LanguageType } from "@types";
+
 import SubLanguageSelector from "./SublanguageSelector";
 
 // Inspired by https://blog.logrocket.com/creating-custom-select-dropdown-css/
 
 const LanguageSelector = () => {
   const { language, setLanguage } = useAppContext();
   const { fetchedLanguages, loading, error } = useLanguages();
-  const allLanguages = useMemo(() => 
-    fetchedLanguages.flatMap((lang) =>
-      lang.subLanguages.length > 0
-        ? [lang, ...lang.subLanguages.map((subLang) => ({ ...subLang, mainLanguage: lang, subLanguages: [] }))]
-        : [lang]
-    ), 
+  const allLanguages = useMemo(
+    () =>
+      fetchedLanguages.flatMap((lang) =>
+        lang.subLanguages.length > 0
+          ? [
+              lang,
+              ...lang.subLanguages.map((subLang) => ({
+                ...subLang,
+                mainLanguage: lang,
+                subLanguages: [],
+              })),
+            ]
+          : [lang]
+      ),
     [fetchedLanguages]
   );
 
@@ -32,7 +41,7 @@ const LanguageSelector = () => {
   const { focusedIndex, handleKeyDown, resetFocus, focusFirst } =
     useKeyboardNavigation({
       items: allLanguages,
-      isOpen, 
+      isOpen,
       openedLanguages,
       onSelect: handleSelect,
       onClose: () => setIsOpen(false),
@@ -53,7 +62,9 @@ const LanguageSelector = () => {
     if (open) {
       setOpenedLanguages((prev) => [...prev, openedLang]);
     } else {
-      setOpenedLanguages((prev) => prev.filter((lang) => lang.name !== openedLang.name));
+      setOpenedLanguages((prev) =>
+        prev.filter((lang) => lang.name !== openedLang.name)
+      );
     }
   };
 
@@ -109,9 +120,16 @@ const LanguageSelector = () => {
           onKeyDown={handleKeyDown}
           tabIndex={-1}
         >
-          {fetchedLanguages.map((lang, index) => (
+          {fetchedLanguages.map((lang, index) =>
             lang.subLanguages.length > 0 ? (
-              <SubLanguageSelector key={index} mainLanguage={lang} afterSelect={()=>{ setIsOpen(false)}} onDropdownChange={handleOpenedSublanguage}/>
+              <SubLanguageSelector
+                key={index}
+                mainLanguage={lang}
+                afterSelect={() => {
+                  setIsOpen(false);
+                }}
+                onDropdownChange={handleOpenedSublanguage}
+              />
             ) : (
               <li
                 key={lang.name}
@@ -129,7 +147,7 @@ const LanguageSelector = () => {
                 </label>
               </li>
             )
-          ))}
+          )}
         </ul>
       )}
     </div>

src/components/SublanguageSelector.tsx

@@ -1,6 +1,7 @@
+import { useEffect, useState } from "react";
+
 import { useAppContext } from "@contexts/AppContext";
 import { LanguageType } from "@types";
-import { useEffect, useState } from "react";
 
 type SubLanguageSelectorProps = {
   mainLanguage: LanguageType;
@@ -11,7 +12,7 @@ type SubLanguageSelectorProps = {
 const SubLanguageSelector = ({
   mainLanguage,
   afterSelect,
-  onDropdownChange
+  onDropdownChange,
 }: SubLanguageSelectorProps) => {
   const { language, setLanguage } = useAppContext();
   const [isOpen, setIsOpen] = useState(
@@ -28,7 +29,7 @@ const SubLanguageSelector = ({
 
   useEffect(() => {
     onDropdownChange(isOpen, mainLanguage);
-  }, [isOpen]);
+  }, [mainLanguage, onDropdownChange, isOpen]);
 
   return (
     <>

src/hooks/useKeyboardNavigation.ts

@@ -49,7 +49,13 @@ export const useKeyboardNavigation = ({
           break;
         case "Enter":
           if (focusedIndex >= 0) {
-            onSelect(items.filter((item) => !item.mainLanguage || openedLanguages.includes(item.mainLanguage))[focusedIndex]);
+            onSelect(
+              items.filter(
+                (item) =>
+                  !item.mainLanguage ||
+                  openedLanguages.includes(item.mainLanguage)
+              )[focusedIndex]
+            );
           }
           break;
         case "Escape":