Radiquum/AniX
1
0
Fork 0
mirror of https://github.com/Radiquum/AniX.git synced 2025-04-05 07:44:38 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat: add disclaimer on first launch

Browse source 
fix: check store hydration before loading pages
fix: check user store before loading pages
This commit is contained in:
Kentai Radiquum 2024-08-11 16:49:39 +05:00
parent a64e4f2036
commit 2c8460c6b0
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
4 changed files with 92 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
TODO.md
View file

@ -2,7 +2,6 @@
## Важное
- [ ] Уведомление о том что мы не связаны с аниксарт при первом открытии
- [ ] Кнопка сброса всех настроек
- [ ] Список изменений при входе

58
app/App.tsx
View file

@ -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 (
<body
className={`${inter.className} overflow-x-hidden dark:bg-[#0d1117] dark:text-white h-screen flex justify-center items-center`}
>
<Spinner />
</body>
);
}
if (userStore.state === "loading") {
return (
<body
className={`${inter.className} overflow-x-hidden dark:bg-[#0d1117] dark:text-white h-screen flex justify-center items-center`}
>
<Spinner />
</body>
);
}
return (
<body className={`${inter.className} overflow-x-hidden dark:bg-[#0d1117] dark:text-white`}>
<body
className={`${inter.className} overflow-x-hidden dark:bg-[#0d1117] dark:text-white`}
>
<Navbar />
{props.children}
<Modal show={preferencesStore.params.isFirstLaunch}>
<Modal.Header>Внимание</Modal.Header>
<Modal.Body>
<p>
Данный сайт не связан с разработчиками приложения Anixart, это
неофициальная имплементация веб клиента для этого приложения.
<br />
<br />
Используя данный веб-сайт вы принимаете что мы не несём
ответственности за ваш аккаунт.
<br />
<br />
На сайте могут присутствовать ошибки и не доработки, а так-же
отсутствующий функционал.
</p>
</Modal.Body>
<Modal.Footer>
<Button
color={"blue"}
onClick={() => {
preferencesStore.setParams({ isFirstLaunch: false });
}}
>
Принимаю
</Button>
</Modal.Footer>
</Modal>
</body>
);
};

36
app/store/auth.ts
View file

@ -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<userState>((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<userState>((set, get) => ({
} else {
get().logout();
}
}
_checkAuth()
};
_checkAuth();
} else {
get().logout();
}

11
app/store/preferences.ts
View file

@ -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<preferencesState>()(
persist(
(set, get) => ({
_hasHydrated: false,
flags: {
// saveSearchHistory: true,
saveWatchHistory: true,
@ -31,6 +34,11 @@ export const usePreferencesStore = create<preferencesState>()(
params: {
isFirstLaunch: true,
},
setHasHydrated: (state) => {
set({
_hasHydrated: state,
});
},
setFlags(flags) {
set({ flags });
},
@ -40,6 +48,9 @@ export const usePreferencesStore = create<preferencesState>()(
}),
{
name: "preferences",
onRehydrateStorage: (state) => {
return () => state.setHasHydrated(true);
},
}
)
);