Trying to make localdata works #39

Merged
DrMint merged 3 commits from localdata into main 2022-08-27 20:43:02 +00:00
7 changed files with 80 additions and 55 deletions
Showing only changes of commit 119794a236 - Show all commits

View File

@ -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) {

View File

@ -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 { AnchorIds } from "hooks/useScrollTopOnChange";
import { useStateWithLocalStorage } from "hooks/useStateWithLocalStorage";
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");
router.replace(router.asPath, router.asPath, {
locale: preferredLanguages[0],
});
/*
* 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,

View File

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

View File

@ -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,

View File

@ -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
);

View File

@ -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];
};

View File

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