add user account fetching

package.json

@@ -6,7 +6,7 @@
         "@craco/craco": "^7.0.0",
         "@emotion/react": "^11.10.5",
         "@emotion/styled": "^11.10.5",
-        "@frontend/kitui": "^1.0.54",
+        "@frontend/kitui": "^1.0.55",
         "@mui/icons-material": "^5.10.14",
         "@mui/material": "^5.10.14",
         "@mui/x-date-pickers": "^6.16.1",

src/App.tsx

@@ -16,8 +16,8 @@ import { ResultSettings } from "./pages/ResultPage/ResultSettings";
 import MyQuizzesFull from "./pages/createQuize/MyQuizzesFull";
 import Main from "./pages/main";
 import EditPage from "./pages/startPage/EditPage";
-import { clearAuthToken, getMessageFromFetchError, useUserFetcher } from "@frontend/kitui";
+import { clearAuthToken, getMessageFromFetchError, useUserAccountFetcher, useUserFetcher } from "@frontend/kitui";
-import { clearUserData, setUser, useUserStore } from "@root/user";
+import { clearUserData, setUser, setUserAccount, useUserStore } from "@root/user";
 import { enqueueSnackbar } from "notistack";
 import PrivateRoute from "@ui_kit/PrivateRoute";
 
@@ -26,59 +26,75 @@ import { Restore } from "./pages/startPage/Restore";
 dayjs.locale("ru");
 
 const routeslink = [
-  { path: "/list", page: <MyQuizzesFull />, header: false, sidebar: false },
+    { path: "/list", page: <MyQuizzesFull />, header: false, sidebar: false },
-  { path: "/questions/:quizId", page: <QuestionsPage />, header: true, sidebar: true },
+    { path: "/questions/:quizId", page: <QuestionsPage />, header: true, sidebar: true },
-  { path: "/contacts", page: <ContactFormPage />, header: true, sidebar: true },
+    { path: "/contacts", page: <ContactFormPage />, header: true, sidebar: true },
-  { path: "/result", page: <Result />, header: true, sidebar: true },
+    { path: "/result", page: <Result />, header: true, sidebar: true },
-  { path: "/settings", page: <ResultSettings />, header: true, sidebar: true },
+    { path: "/settings", page: <ResultSettings />, header: true, sidebar: true },
 ] as const;
 
 export default function App() {
-  const userId = useUserStore((state) => state.userId);
+    const userId = useUserStore((state) => state.userId);
-  const location = useLocation();
+    const location = useLocation();
-  const navigate = useNavigate();
+    const navigate = useNavigate();
 
-  useUserFetcher({
+    useUserFetcher({
-    url: `https://hub.pena.digital/user/${userId}`,
+        url: `https://hub.pena.digital/user/${userId}`,
-    userId,
+        userId,
-    onNewUser: setUser,
+        onNewUser: setUser,
-    onError: (error) => {
+        onError: (error) => {
-      const errorMessage = getMessageFromFetchError(error);
+            const errorMessage = getMessageFromFetchError(error);
-      if (errorMessage) {
+            if (errorMessage) {
-        enqueueSnackbar(errorMessage);
+                enqueueSnackbar(errorMessage);
-        clearUserData();
+                clearUserData();
-        clearAuthToken();
+                clearAuthToken();
-      }
+            }
-    },
+        },
-  });
+    });
-  if (location.state?.redirectTo)
-    return <Navigate to={location.state.redirectTo} replace state={{ backgroundLocation: location }} />;
 
-  return (
+    useUserAccountFetcher({
-    <>
+        url: "https://squiz.pena.digital/customer/account",
-      <ContactFormModal />
+        userId,
-      {location.state?.backgroundLocation && (
+        onNewUserAccount: setUserAccount,
-        <Routes>
+        onError: (error) => {
-          <Route path="/signin" element={<SigninDialog />} />
+            const errorMessage = getMessageFromFetchError(error);
-          <Route path="/signup" element={<SignupDialog />} />
+            if (errorMessage) {
-          <Route path="/restore" element={<Restore />} />
+                enqueueSnackbar(errorMessage);
-        </Routes>
+                clearUserData();
-      )}
+                clearAuthToken();
-      <Routes location={location.state?.backgroundLocation || location}>
+                navigate("/signin");
-        <Route path="/" element={<Landing />} />
+            }
-        <Route path="/signin" element={<Navigate to="/" replace state={{ redirectTo: "/signin" }} />} />
+        },
-        <Route path="/signup" element={<Navigate to="/" replace state={{ redirectTo: "/signup" }} />} />
+    });
-        <Route path="/restore" element={<Navigate to="/" replace state={{ redirectTo: "/restore" }} />} />
-        <Route element={<PrivateRoute />}>
-          {routeslink.map((e, i) => (
-            <Route key={i} path={e.path} element={<Main page={e.page} header={e.header} sidebar={e.sidebar} />} />
-          ))}
 
-          <Route path="edit" element={<EditPage />} />
+    if (location.state?.redirectTo)
-          <Route path="crop" element={<ImageCrop />} />
+        return <Navigate to={location.state.redirectTo} replace state={{ backgroundLocation: location }} />;
-          <Route path="/view" element={<ViewPage />} />
+
-        </Route>
+    return (
-      </Routes>
+        <>
-    </>
+            <ContactFormModal />
-  );
+            {location.state?.backgroundLocation && (
+                <Routes>
+                    <Route path="/signin" element={<SigninDialog />} />
+                    <Route path="/signup" element={<SignupDialog />} />
+                    <Route path="/restore" element={<Restore />} />
+                </Routes>
+            )}
+            <Routes location={location.state?.backgroundLocation || location}>
+                <Route path="/" element={<Landing />} />
+                <Route path="/signin" element={<Navigate to="/" replace state={{ redirectTo: "/signin" }} />} />
+                <Route path="/signup" element={<Navigate to="/" replace state={{ redirectTo: "/signup" }} />} />
+                <Route path="/restore" element={<Navigate to="/" replace state={{ redirectTo: "/restore" }} />} />
+                <Route element={<PrivateRoute />}>
+                    {routeslink.map((e, i) => (
+                        <Route key={i} path={e.path} element={<Main page={e.page} header={e.header} sidebar={e.sidebar} />} />
+                    ))}
+
+                    <Route path="edit" element={<EditPage />} />
+                    <Route path="crop" element={<ImageCrop />} />
+                    <Route path="/view" element={<ViewPage />} />
+                </Route>
+            </Routes>
+        </>
+    );
 }

src/stores/user.ts

@@ -1,4 +1,4 @@
-import { User } from "@frontend/kitui";
+import { User, UserAccount } from "@frontend/kitui";
 import { produce } from "immer";
 import { create } from "zustand";
 import { createJSONStorage, devtools, persist } from "zustand/middleware";
@@ -6,12 +6,13 @@ import { createJSONStorage, devtools, persist } from "zustand/middleware";
 interface UserStore {
     userId: string | null;
     user: User | null;
-    //   userAccount: UserAccount | null;
+    userAccount: UserAccount | null;
 }
 
 const initialState: UserStore = {
     userId: null,
     user: null,
+    userAccount: null,
 };
 
 export const useUserStore = create<UserStore>()(
@@ -19,12 +20,11 @@ export const useUserStore = create<UserStore>()(
         devtools((set, get) => initialState, {
             name: "User",
             enabled: process.env.NODE_ENV === "development",
-            trace: true,
+            trace: process.env.NODE_ENV === "development",
         }),
         {
             version: 2,
             name: "user",
-            storage: createJSONStorage(() => localStorage),
             partialize: (state) => ({
                 userId: state.userId,
                 user: state.user,
@@ -46,3 +46,5 @@ export const setUser = (user: User) =>
     );
 
 export const clearUserData = () => useUserStore.setState({ ...initialState });
+
+export const setUserAccount = (userAccount: UserAccount) => useUserStore.setState({ userAccount });

yarn.lock

@@ -1407,10 +1407,10 @@
   resolved "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz"
   integrity sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==
 
-"@frontend/kitui@^1.0.54":
+"@frontend/kitui@^1.0.55":
-  version "1.0.54"
+  version "1.0.55"
-  resolved "https://penahub.gitlab.yandexcloud.net/api/v4/projects/21/packages/npm/@frontend/kitui/-/@frontend/kitui-1.0.54.tgz#0235d5a8effb9b92351471c3c7775f28cb2839f6"
+  resolved "https://penahub.gitlab.yandexcloud.net/api/v4/projects/21/packages/npm/@frontend/kitui/-/@frontend/kitui-1.0.55.tgz#6e02f80b2c13828142ffeacaf9704e50e54324d0"
-  integrity sha1-AjXVqO/7m5I1FHHDx3dfKMsoOfY=
+  integrity sha1-bgL4CywTgoFC/+rK+XBOUOVDJNA=
   dependencies:
     immer "^10.0.2"
     reconnecting-eventsource "^1.6.2"