fix: opening auth only pages, without auth

now they are redirecting to the login page in that case

TODO.md

@@ -81,7 +81,7 @@
 
 ## Баги
 
-- некоторые страницы можно открыть без авторизации, но они будут пустые
+- ...
 
 ## Другое
 

app/pages/Bookmarks.tsx

@@ -7,9 +7,13 @@ const fetcher = (...args: any) =>
 import { useUserStore } from "#/store/auth";
 import { BookmarksList } from "#/api/utils";
 import { ENDPOINTS } from "#/api/config";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
 
 export function BookmarksPage() {
   const token = useUserStore((state) => state.token);
+  const authState = useUserStore((state) => state.state);
+  const router = useRouter();
 
   function useFetchReleases(listName: string) {
     let url: string;
@@ -28,19 +32,24 @@ export function BookmarksPage() {
   const [delayedData] = useFetchReleases("delayed");
   const [abandonedData] = useFetchReleases("abandoned");
 
+  useEffect(() => {
+    if (authState === "finished" && !token) {
+      router.push("/login");
+    }
+  }, [authState, token]);
+
   return (
     <main className="container flex flex-col pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
-      {!watchingData ||
-      !plannedData ||
-      !watchedData ||
-      !delayedData ||
-      !abandonedData ? (
-        <div className="flex items-center justify-center min-w-full min-h-screen">
-          <Spinner />
-        </div>
-      ) : (
-        ""
-      )}
+      {authState === "loading" &&
+        (!watchingData ||
+          !plannedData ||
+          !watchedData ||
+          !delayedData ||
+          !abandonedData) && (
+          <div className="flex items-center justify-center min-w-full min-h-screen">
+            <Spinner />
+          </div>
+        )}
       {watchingData &&
         watchingData.content &&
         watchingData.content.length > 0 && (

app/pages/BookmarksCategory.tsx

@@ -9,6 +9,13 @@ import { Dropdown, Button } from "flowbite-react";
 import { sort } from "./common";
 import { ENDPOINTS } from "#/api/config";
 import { BookmarksList } from "#/api/utils";
+import { useRouter } from "next/navigation";
+
+const DropdownTheme = {
+  floating: {
+    target: "w-fit md:min-w-[256px]",
+  },
+};
 
 const fetcher = async (url: string) => {
   const res = await fetch(url);
@@ -26,8 +33,10 @@ const fetcher = async (url: string) => {
 
 export function BookmarksCategoryPage(props: any) {
   const token = useUserStore((state) => state.token);
+  const authState = useUserStore((state) => state.state);
   const [selectedSort, setSelectedSort] = useState(0);
   const [isLoadingEnd, setIsLoadingEnd] = useState(false);
+  const router = useRouter();
 
   const getKey = (pageIndex: number, previousPageData: any) => {
     if (previousPageData && !previousPageData.content.length) return null;
@@ -63,12 +72,11 @@ export function BookmarksCategoryPage(props: any) {
     }
   }, [scrollPosition]);
 
-  const DropdownTheme = {
-    floating: {
-      target:
-        "w-fit bg-blue-600 enabled:hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 text-center dark:bg-blue-600 dark:enabled:hover:bg-blue-700 dark:focus:ring-blue-800",
-    },
-  };
+  useEffect(() => {
+    if (authState === "finished" && !token) {
+      router.push("/login");
+    }
+  }, [authState, token]);
 
   return (
     <main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
@@ -80,6 +88,7 @@ export function BookmarksCategoryPage(props: any) {
           label={sort.values[selectedSort].name}
           dismissOnClick={true}
           arrowIcon={false}
+          color={"blue"}
           theme={DropdownTheme}
         >
           {sort.values.map((item, index) => (

app/pages/Favorites.tsx

@@ -8,6 +8,13 @@ import { useUserStore } from "../store/auth";
 import { Dropdown, Button } from "flowbite-react";
 import { sort } from "./common";
 import { ENDPOINTS } from "#/api/config";
+import { useRouter } from "next/navigation";
+
+const DropdownTheme = {
+  floating: {
+    target: "w-fit md:min-w-[256px]",
+  },
+};
 
 const fetcher = async (url: string) => {
   const res = await fetch(url);
@@ -25,8 +32,10 @@ const fetcher = async (url: string) => {
 
 export function FavoritesPage() {
   const token = useUserStore((state) => state.token);
+  const authState = useUserStore((state) => state.state);
   const [selectedSort, setSelectedSort] = useState(0);
   const [isLoadingEnd, setIsLoadingEnd] = useState(false);
+  const router = useRouter();
 
   const getKey = (pageIndex: number, previousPageData: any) => {
     if (previousPageData && !previousPageData.content.length) return null;
@@ -60,12 +69,11 @@ export function FavoritesPage() {
     }
   }, [scrollPosition]);
 
-  const DropdownTheme = {
-    floating: {
-      target:
-        "w-fit bg-blue-600 enabled:hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 text-center dark:bg-blue-600 dark:enabled:hover:bg-blue-700 dark:focus:ring-blue-800",
-    },
-  };
+  useEffect(() => {
+    if (authState === "finished" && !token) {
+      router.push("/login");
+    }
+  }, [authState, token]);
 
   return (
     <main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
@@ -77,6 +85,7 @@ export function FavoritesPage() {
           label={sort.values[selectedSort].name}
           dismissOnClick={true}
           arrowIcon={false}
+          color={"blue"}
           theme={DropdownTheme}
         >
           {sort.values.map((item, index) => (

app/pages/History.tsx

@@ -7,6 +7,7 @@ import { useScrollPosition } from "#/hooks/useScrollPosition";
 import { useUserStore } from "../store/auth";
 import { ENDPOINTS } from "#/api/config";
 import { Button } from "flowbite-react";
+import { useRouter } from "next/navigation";
 
 const fetcher = async (url: string) => {
   const res = await fetch(url);
@@ -24,7 +25,9 @@ const fetcher = async (url: string) => {
 
 export function HistoryPage() {
   const token = useUserStore((state) => state.token);
+  const authState = useUserStore((state) => state.state);
   const [isLoadingEnd, setIsLoadingEnd] = useState(false);
+  const router = useRouter();
 
   const getKey = (pageIndex: number, previousPageData: any) => {
     if (previousPageData && !previousPageData.content.length) return null;
@@ -58,6 +61,12 @@ export function HistoryPage() {
     }
   }, [scrollPosition]);
 
+  useEffect(() => {
+    if (authState === "finished" && !token) {
+      router.push("/login");
+    }
+  }, [authState, token]);
+
   return (
     <main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-4">
       {content && content.length > 0 ? (

app/store/auth.ts

@@ -6,6 +6,7 @@ interface userState {
   isAuth: boolean
   user: Object | null
   token: string | null
+  state: string,
   login: (user: Object, token: string) => void
   logout: () => void
   checkAuth: () => void
@@ -15,12 +16,13 @@ export const useUserStore = create<userState>((set, get) => ({
   isAuth: false,
   user: null,
   token: null,
+  state: "loading",
 
   login: (user: Object, token: string) => {
-    set({ isAuth: true, user: user, token: token });
+    set({ isAuth: true, user: user, token: token, state: "finished" });
   },
   logout: () => {
-    set({ isAuth: false, user: null, token: null });
+    set({ isAuth: false, user: null, token: null, state: "finished" });
     removeJWT();
   },
   checkAuth: () => {