From 2c8460c6b03d315288906cc8d7342a7a909f8ba1 Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Sun, 11 Aug 2024 16:49:39 +0500 Subject: [PATCH] feat: add disclaimer on first launch fix: check store hydration before loading pages fix: check user store before loading pages --- TODO.md | 1 - app/App.tsx | 58 ++++++++++++++++++++++++++++++++++++++-- app/store/auth.ts | 36 +++++++++++++++++-------- app/store/preferences.ts | 11 ++++++++ 4 files changed, 92 insertions(+), 14 deletions(-) diff --git a/TODO.md b/TODO.md index db45f20..3da99da 100644 --- a/TODO.md +++ b/TODO.md @@ -2,7 +2,6 @@ ## Важное -- [ ] Уведомление о том что мы не связаны с аниксарт при первом открытии - [ ] Кнопка сброса всех настроек - [ ] Список изменений при входе diff --git a/app/App.tsx b/app/App.tsx index e908c30..82b59e2 100644 --- a/app/App.tsx +++ b/app/App.tsx @@ -1,20 +1,74 @@ "use client"; import { useUserStore } from "./store/auth"; +import { usePreferencesStore } from "./store/preferences"; import { Navbar } from "./components/Navbar/Navbar"; import { Inter } from "next/font/google"; -import { useEffect } from "react"; +import { useEffect, useState } from "react"; +import { Button, Modal } from "flowbite-react"; +import { Spinner } from "./components/Spinner/Spinner"; const inter = Inter({ subsets: ["latin"] }); export const App = (props) => { + const preferencesStore = usePreferencesStore(); const userStore = useUserStore((state) => state); + useEffect(() => { userStore.checkAuth(); }, []); + if (!preferencesStore._hasHydrated && !userStore._hasHydrated) { + return ( + + + + ); + } + + if (userStore.state === "loading") { + return ( + + + + ); + } + return ( - + {props.children} + + Внимание + +

+ Данный сайт не связан с разработчиками приложения Anixart, это + неофициальная имплементация веб клиента для этого приложения. +
+
+ Используя данный веб-сайт вы принимаете что мы не несём + ответственности за ваш аккаунт. +
+
+ На сайте могут присутствовать ошибки и не доработки, а так-же + отсутствующий функционал. +

+ + + + + ); }; diff --git a/app/store/auth.ts b/app/store/auth.ts index 590f1e5..2c3ab47 100644 --- a/app/store/auth.ts +++ b/app/store/auth.ts @@ -3,26 +3,40 @@ import { create } from "zustand"; import { getJWT, removeJWT, fetchDataViaGet } from "#/api/utils"; interface userState { - isAuth: boolean - user: Object | null - token: string | null - state: string, - login: (user: Object, token: string) => void - logout: () => void - checkAuth: () => void + _hasHydrated: boolean; + isAuth: boolean; + user: Object | null; + token: string | null; + state: string; + login: (user: Object, token: string) => void; + logout: () => void; + checkAuth: () => void; } export const useUserStore = create((set, get) => ({ + _hasHydrated: false, isAuth: false, user: null, token: null, state: "loading", login: (user: Object, token: string) => { - set({ isAuth: true, user: user, token: token, state: "finished" }); + set({ + isAuth: true, + user: user, + token: token, + state: "finished", + _hasHydrated: true, + }); }, logout: () => { - set({ isAuth: false, user: null, token: null, state: "finished" }); + set({ + isAuth: false, + user: null, + token: null, + state: "finished", + _hasHydrated: true, + }); removeJWT(); }, checkAuth: () => { @@ -37,8 +51,8 @@ export const useUserStore = create((set, get) => ({ } else { get().logout(); } - } - _checkAuth() + }; + _checkAuth(); } else { get().logout(); } diff --git a/app/store/preferences.ts b/app/store/preferences.ts index d0ec4d8..9e7621a 100644 --- a/app/store/preferences.ts +++ b/app/store/preferences.ts @@ -3,6 +3,7 @@ import { create } from "zustand"; import { persist } from "zustand/middleware"; interface preferencesState { + _hasHydrated: boolean; flags: { // saveSearchHistory: boolean; saveWatchHistory: boolean; @@ -16,6 +17,7 @@ interface preferencesState { // accent: string; // } }; + setHasHydrated: (state: boolean) => void; setFlags: (flags: preferencesState["flags"]) => void; setParams: (params: preferencesState["params"]) => void; } @@ -23,6 +25,7 @@ interface preferencesState { export const usePreferencesStore = create()( persist( (set, get) => ({ + _hasHydrated: false, flags: { // saveSearchHistory: true, saveWatchHistory: true, @@ -31,6 +34,11 @@ export const usePreferencesStore = create()( params: { isFirstLaunch: true, }, + setHasHydrated: (state) => { + set({ + _hasHydrated: state, + }); + }, setFlags(flags) { set({ flags }); }, @@ -40,6 +48,9 @@ export const usePreferencesStore = create()( }), { name: "preferences", + onRehydrateStorage: (state) => { + return () => state.setHasHydrated(true); + }, } ) );