Fixed the problems

src/components/AppLayout.tsx

@@ -24,6 +24,7 @@ import {
   useIs1ColumnLayout,
   useIsScreenAtLeast,
 } from "hooks/useContainerQuery";
+import { useOnResize } from "hooks/useOnResize";
 
 /*
  *                                         ╭─────────────╮
@@ -82,6 +83,9 @@ export const AppLayout = ({
     setSubPanelOpen,
     toggleMainPanelOpen,
     toggleSubPanelOpen,
+    setScreenWidth,
+    setContentPanelWidth,
+    setSubPanelWidth,
     langui,
     currencies,
     languages,
@@ -91,6 +95,10 @@ export const AppLayout = ({
   const is1ColumnLayout = useIs1ColumnLayout();
   const isScreenAtLeastXs = useIsScreenAtLeast("xs");
 
+  useOnResize(AnchorIds.Body, (width) => setScreenWidth(width));
+  useOnResize(AnchorIds.ContentPanel, (width) => setContentPanelWidth(width));
+  useOnResize(AnchorIds.SubPanel, (width) => setSubPanelWidth(width));
+
   const handlers = useSwipeable({
     onSwipedLeft: (SwipeEventData) => {
       if (menuGestures) {

src/contexts/AppLayoutContext.tsx

@@ -5,16 +5,15 @@ import React, {
   useLayoutEffect,
   useState,
 } from "react";
-import { useLocalStorage } from "usehooks-ts";
 import { useRouter } from "next/router";
+import { useLocalStorage } from "usehooks-ts";
 import { isDefined, isDefinedAndNotEmpty } from "helpers/others";
 import { LibraryItemUserStatus, RequiredNonNullable } from "helpers/types";
 import { useDarkMode } from "hooks/useDarkMode";
 import { Currencies, Languages, Langui } from "helpers/localData";
 import { useCurrencies, useLanguages, useLangui } from "hooks/useLocalData";
 import { getDefaultPreferredLanguages } from "helpers/locales";
-import { useOnResize } from "hooks/useOnResize";
+import { useStateWithLocalStorage } from "hooks/useStateWithLocalStorage";
-import { AnchorIds } from "hooks/useScrollTopOnChange";
 
 interface AppLayoutState {
   subPanelOpen: boolean;
@@ -29,12 +28,6 @@ interface AppLayoutState {
     React.SetStateAction<AppLayoutState["configPanelOpen"]>
   >;
 
-  searchPanelOpen: boolean;
-  toggleSearchPanelOpen: () => void;
-  setSearchPanelOpen: React.Dispatch<
-    React.SetStateAction<AppLayoutState["searchPanelOpen"]>
-  >;
-
   mainPanelReduced: boolean;
   toggleMainPanelReduced: () => void;
   setMainPanelReduced: React.Dispatch<
@@ -89,8 +82,19 @@ interface AppLayoutState {
   >;
 
   screenWidth: number;
+  setScreenWidth: React.Dispatch<
+    React.SetStateAction<AppLayoutState["screenWidth"]>
+  >;
+
   contentPanelWidth: number;
+  setContentPanelWidth: React.Dispatch<
+    React.SetStateAction<AppLayoutState["contentPanelWidth"]>
+  >;
+
   subPanelWidth: number;
+  setSubPanelWidth: React.Dispatch<
+    React.SetStateAction<AppLayoutState["subPanelWidth"]>
+  >;
 
   langui: Langui;
   languages: Languages;
@@ -106,10 +110,6 @@ const initialState: RequiredNonNullable<AppLayoutState> = {
   setConfigPanelOpen: () => null,
   toggleConfigPanelOpen: () => null,
 
-  searchPanelOpen: false,
-  setSearchPanelOpen: () => null,
-  toggleSearchPanelOpen: () => null,
-
   mainPanelReduced: false,
   setMainPanelReduced: () => null,
   toggleMainPanelReduced: () => null,
@@ -150,8 +150,13 @@ const initialState: RequiredNonNullable<AppLayoutState> = {
   setLibraryItemUserStatus: () => null,
 
   screenWidth: 0,
+  setScreenWidth: () => null,
+
   contentPanelWidth: 0,
+  setContentPanelWidth: () => null,
+
   subPanelWidth: 0,
+  setSubPanelWidth: () => null,
 
   currencies: [],
   languages: [],
@@ -167,7 +172,9 @@ interface Props {
 }
 
 export const AppContextProvider = (props: Props): JSX.Element => {
-  const [subPanelOpen, setSubPanelOpen] = useLocalStorage(
+  const router = useRouter();
+
+  const [subPanelOpen, setSubPanelOpen] = useStateWithLocalStorage(
     "subPanelOpen",
     initialState.subPanelOpen
   );
@@ -182,7 +189,7 @@ export const AppContextProvider = (props: Props): JSX.Element => {
     initialState.mainPanelReduced
   );
 
-  const [mainPanelOpen, setMainPanelOpen] = useLocalStorage(
+  const [mainPanelOpen, setMainPanelOpen] = useStateWithLocalStorage(
     "mainPanelOpen",
     initialState.mainPanelOpen
   );
@@ -217,11 +224,6 @@ export const AppContextProvider = (props: Props): JSX.Element => {
 
   const [menuGestures, setMenuGestures] = useState(false);
 
-  const [searchPanelOpen, setSearchPanelOpen] = useLocalStorage(
-    "searchPanelOpen",
-    initialState.searchPanelOpen
-  );
-
   const [libraryItemUserStatus, setLibraryItemUserStatus] = useLocalStorage(
     "libraryItemUserStatus",
     initialState.libraryItemUserStatus
@@ -235,10 +237,6 @@ export const AppContextProvider = (props: Props): JSX.Element => {
     setConfigPanelOpen((current) => (isDefined(current) ? !current : current));
   };
 
-  const toggleSearchPanelOpen = () => {
-    setSearchPanelOpen((current) => (isDefined(current) ? !current : current));
-  };
-
   const toggleMainPanelReduced = () => {
     setMainPanelReduced((current) => (isDefined(current) ? !current : current));
   };
@@ -273,9 +271,7 @@ export const AppContextProvider = (props: Props): JSX.Element => {
   const languages = useLanguages();
   const currencies = useCurrencies();
 
-  const router = useRouter();
   useEffect(() => {
-    console.log("I'm in preferredLanguages update");
     if (preferredLanguages.length === 0) {
       if (isDefinedAndNotEmpty(router.locale) && router.locales) {
         setPreferredLanguages(
@@ -283,10 +279,17 @@ export const AppContextProvider = (props: Props): JSX.Element => {
         );
       }
     } else if (router.locale !== preferredLanguages[0]) {
-      console.log("I'm rerouting you");
+      /*
+       * Using a timeout to the code getting stuck into a loop when reaching the website with a
+       * different preferredLanguages[0] from router.locale
+       */
+      setTimeout(
+        async () =>
           router.replace(router.asPath, router.asPath, {
             locale: preferredLanguages[0],
-      });
+          }),
+        250
+      );
     }
   }, [
     preferredLanguages,
@@ -314,16 +317,11 @@ export const AppContextProvider = (props: Props): JSX.Element => {
     }%`;
   }, [fontSize]);
 
-  useOnResize(AnchorIds.Body, (width) => setScreenWidth(width));
-  useOnResize(AnchorIds.ContentPanel, (width) => setContentPanelWidth(width));
-  useOnResize(AnchorIds.SubPanel, (width) => setSubPanelWidth(width));
-
   return (
     <AppContext.Provider
       value={{
         subPanelOpen,
         configPanelOpen,
-        searchPanelOpen,
         mainPanelReduced,
         mainPanelOpen,
         darkMode,
@@ -340,7 +338,6 @@ export const AppContextProvider = (props: Props): JSX.Element => {
         subPanelWidth,
         setSubPanelOpen,
         setConfigPanelOpen,
-        setSearchPanelOpen,
         setMainPanelReduced,
         setMainPanelOpen,
         setDarkMode,
@@ -354,13 +351,15 @@ export const AppContextProvider = (props: Props): JSX.Element => {
         setLibraryItemUserStatus,
         toggleSubPanelOpen,
         toggleConfigPanelOpen,
-        toggleSearchPanelOpen,
         toggleMainPanelReduced,
         toggleMainPanelOpen,
         toggleDarkMode,
         toggleMenuGestures,
         toggleSelectedThemeMode,
         toggleDyslexic,
+        setScreenWidth,
+        setContentPanelWidth,
+        setSubPanelWidth,
         languages,
         langui,
         currencies,

src/helpers/formatters.ts

@@ -239,10 +239,7 @@ export const prettyDuration = (seconds: number): string => {
   return result;
 };
 
-export const prettyLanguage = (
+export const prettyLanguage = (code: string, languages: Languages): string => {
-  code: string,
-  languages: Languages
-): string => {
   let result = code;
   languages.forEach((language) => {
     if (language.attributes?.code === code)

src/helpers/others.ts

@@ -112,12 +112,6 @@ export const iterateMap = <K, V, U>(
   return toList.map(([key, value], index) => callbackfn(key, value, index));
 };
 
-export const mapMoveEntry = <K, V>(
-  map: Map<K, V>,
-  sourceIndex: number,
-  targetIndex: number
-): Map<K, V> => new Map(arrayMove([...map], sourceIndex, targetIndex));
-
 export const arrayMove = <T>(
   arr: T[],
   sourceIndex: number,

src/hooks/useDarkMode.ts

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
-import { useLocalStorage } from "usehooks-ts";
 import { usePrefersDarkMode } from "./useMediaQuery";
+import { useStateWithLocalStorage } from "./useStateWithLocalStorage";
 
 export const useDarkMode = (
   key: string,
@@ -11,9 +11,9 @@ export const useDarkMode = (
   React.Dispatch<React.SetStateAction<boolean>>,
   React.Dispatch<React.SetStateAction<boolean>>
 ] => {
-  const [darkMode, setDarkMode] = useLocalStorage(key, initialValue);
+  const [darkMode, setDarkMode] = useStateWithLocalStorage(key, initialValue);
   const prefersDarkMode = usePrefersDarkMode();
-  const [selectedThemeMode, setSelectedThemeMode] = useLocalStorage(
+  const [selectedThemeMode, setSelectedThemeMode] = useStateWithLocalStorage(
     "selectedThemeMode",
     false
   );

src/hooks/useStateWithLocalStorage.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+import { isDefined } from "helpers/others";
+
+export const useStateWithLocalStorage = <T>(
+  key: string,
+  initialValue: T
+): [T, React.Dispatch<React.SetStateAction<T>>] => {
+  const [value, setValue] = useState<T>(initialValue);
+  const [isFromLocaleStorage, setFromLocaleStorage] = useState<boolean>(false);
+
+  useEffect(() => {
+    try {
+      const item = localStorage.getItem(key);
+      if (isDefined(item)) {
+        setValue(JSON.parse(item) as T);
+      } else {
+        setValue(initialValue);
+      }
+      setFromLocaleStorage(true);
+    } catch (error) {
+      console.warn(`Error reading localStorage key “${key}”:`, error);
+      setValue(initialValue);
+    }
+  }, [initialValue, key]);
+
+  useEffect(() => {
+    if (isFromLocaleStorage) localStorage.setItem(key, JSON.stringify(value));
+  }, [value, key, isFromLocaleStorage]);
+
+  return [value, setValue];
+};

src/pages/about-us/index.tsx

@@ -41,11 +41,7 @@ const AboutUs = (props: Props): JSX.Element => {
             url="/about-us/sharing-policy"
             border
           />
-          <NavOption
+          <NavOption title={langui.contact_us} url="/about-us/contact" border />
-            title={langui.contact_us}
-            url="/about-us/contact"
-            border
-          />
         </SubPanel>
       }
       {...props}