init project

src/lib/app/contexts/language.jsx

@@ -0,0 +1,99 @@
+import { FA_DATATABLE_LOCALIZATION } from "&/locales/fa/datatable";
+import { useRouter } from "next/router";
+import { createContext, useEffect, useState } from "react";
+import useUser from "../hooks/useUser";
+
+export const LanguageContext = createContext();
+
+export const LanguageProvider = ({ children }) => {
+  const router = useRouter();
+  const languageList = [
+    {
+      key: "fa",
+      dir: "rtl",
+      name: "فارسی",
+      fontFamily: `IRANSans, sans-serif`,
+      tableLocalization: FA_DATATABLE_LOCALIZATION,
+    }
+  ];
+  const { user, userChangedLanguage, changeLanguageState } = useUser();
+  const [languageIsReady, setLanguageIsReady] = useState(false);
+  const [languageApp, setLanguageApp] = useState();
+  const [directionApp, setDirectionApp] = useState(
+    process.env.NEXT_PUBLIC_DEFAULT_DIRECTION
+  );
+
+  useEffect(() => {
+    const lang = localStorage.getItem("_language");
+
+    if (!lang && !languageApp) {
+      setLanguageApp(process.env.NEXT_PUBLIC_DEFAULT_LANGUAGE);
+    } else if (lang) {
+      setLanguageApp(lang);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!languageApp) return;
+
+    const lang = localStorage.getItem("_language");
+
+    if (!lang) {
+      localStorage.setItem("_language", languageApp);
+    } else {
+      if (languageApp != lang) {
+        localStorage.setItem("_language", languageApp);
+      }
+    }
+  }, [languageApp]);
+
+  useEffect(() => {
+    if (!router.isReady) return;
+    if (user.user_language) {
+      if (user.user_language != languageApp) {
+        setLanguageApp(user.user_language);
+        return;
+      }
+    }
+
+    if (languageApp != router.locale) {
+      router.replace(
+        { pathname: router.pathname, query: router.query },
+        router.asPath,
+        {
+          locale: languageApp,
+        }
+      );
+      return;
+    }
+    for (const lang of languageList) {
+      if (languageApp != lang.key) continue;
+      setDirectionApp(lang.dir);
+      document.dir = lang.dir;
+    }
+
+    const timer = setTimeout(() => {
+      changeLanguageState(false);
+      setLanguageIsReady(true);
+    }, 1000);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [router.locale, router.isReady, userChangedLanguage, languageApp]);
+
+  return (
+    <LanguageContext.Provider
+      value={{
+        languageApp,
+        setLanguageApp,
+        directionApp,
+        languageIsReady,
+        setLanguageIsReady,
+        languageList,
+      }}
+    >
+      {children}
+    </LanguageContext.Provider>
+  );
+};

src/lib/app/contexts/loading.jsx

@@ -0,0 +1,14 @@
+import LoadingHardPage from "@/core/components/LoadingHardPage";
+import { createContext, useState } from "react";
+
+export const LoadingContext = createContext();
+
+export const LoadingProvider = ({ children }) => {
+  const [loadingPage, setLoadingPage] = useState(false);
+  return (
+    <LoadingContext.Provider value={{ loadingPage, setLoadingPage }}>
+      <LoadingHardPage loading={loadingPage} />
+      {children}
+    </LoadingContext.Provider>
+  );
+};

src/lib/app/contexts/user.jsx

@@ -0,0 +1,144 @@
+import {
+  GET_USER_ROUTE,
+  SET_LANGUAGE
+} from "@/core/data/apiRoutes";
+import axios from "axios";
+import { createContext, useCallback, useEffect, useReducer } from "react";
+
+const initialUser = {
+  isAuth: false,
+  userChangedLanguage: false,
+  token: null,
+  user: {},
+};
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case "CLEAR_USER":
+      return { ...state, user: {} };
+    case "CHANGE_USER":
+      return { ...state, user: action.user };
+    case "CHANGE_USER_LANGUAGE":
+      return {
+        ...state,
+        user: { ...state.user, user_language: action.language },
+      };
+    case "CHANGE_AUTH_STATE":
+      return { ...state, isAuth: action.isAuth };
+    case "CHANGE_LANGUAGE_STATE":
+      return { ...state, userChangedLanguage: action.userChangedLanguage };
+    case "CLEAR_TOKEN":
+      localStorage.removeItem("_token");
+      return { ...state, token: null };
+    case "SET_TOKEN":
+      localStorage.setItem("_token", action.token);
+      return { ...state, token: action.token };
+    default:
+      return state;
+  }
+};
+
+export const UserContext = createContext();
+
+export const UserProvider = ({ children }) => {
+  const [state, dispatch] = useReducer(reducer, initialUser);
+
+  const clearUser = useCallback(() => {
+    dispatch({ type: "CLEAR_USER" });
+  }, []);
+
+  const changeUser = useCallback((user) => {
+    dispatch({ type: "CHANGE_USER", user });
+  }, []);
+
+  const changeUserLanguage = useCallback(
+    (language) => {
+      dispatch({ type: "CHANGE_USER_LANGUAGE", language });
+      axios
+        .post(
+          SET_LANGUAGE,
+          { language: language },
+          {
+            headers: {
+              authorization: `Bearer ${state.token}`,
+            },
+          }
+        )
+        .then(() => {
+          getUser((data) => {
+            changeUser(data);
+          });
+        });
+    },
+    [state.token]
+  );
+
+  const changeAuthState = useCallback((isAuth) => {
+    dispatch({ type: "CHANGE_AUTH_STATE", isAuth });
+  }, []);
+
+  const changeLanguageState = useCallback((userChangedLanguage) => {
+    dispatch({ type: "CHANGE_LANGUAGE_STATE", userChangedLanguage });
+  }, []);
+
+  const clearToken = useCallback(() => {
+    dispatch({ type: "CLEAR_TOKEN" });
+  }, []);
+
+  const setToken = useCallback((token) => {
+    dispatch({ type: "SET_TOKEN", token });
+  }, []);
+
+  const getUser = useCallback(
+    (callback = () => {}) => {
+      axios
+        .get(GET_USER_ROUTE, {
+          headers: { authorization: `Bearer ${state.token}` },
+        })
+        .then(({ data }) => {
+          if (typeof callback === "function") callback(data);
+        });
+    },
+    [state.token]
+  );
+
+  useEffect(() => {
+    const localToken = localStorage.getItem("_token");
+    if (localToken) dispatch({ type: "SET_TOKEN", token: localToken });
+  }, []);
+
+  useEffect(() => {
+    if (!state.token) {
+      clearUser();
+      changeAuthState(false);
+      changeLanguageState(false);
+      return;
+    }
+    getUser((data) => {
+      changeUser(data);
+      changeAuthState(true);
+      changeLanguageState(true);
+    });
+  }, [state.token]);
+
+  return (
+    <UserContext.Provider
+      value={{
+        isAuth: state.isAuth,
+        userChangedLanguage: state.userChangedLanguage,
+        token: state.token,
+        user: state.user,
+        getUser,
+        clearUser,
+        changeUser,
+        changeUserLanguage,
+        changeAuthState,
+        changeLanguageState,
+        clearToken,
+        setToken,
+      }}
+    >
+      {children}
+    </UserContext.Provider>
+  );
+};