fix: авторизация + user_id

habralab · Nov 9, 2023 · b6820c3 · b6820c3
1 parent 21a9be9
commit b6820c3
Show file tree

Hide file tree

Showing 25 changed files with 465 additions and 221 deletions.
diff --git a/src/app/providers/layout/AuthProvider.tsx b/src/app/providers/layout/AuthProvider.tsx
@@ -1,28 +1,43 @@
 import { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 
-import { AuthContext } from '~/shared/contexts';
+import { AuthContext, initAuth } from '~/shared/contexts';
 import { useApi } from '~/shared/hooks';
 
 export function AuthProvider({ children }: { children: React.ReactNode }) {
   const { userApi } = useApi();
-  const [isAuth, setIsAuth] = useState<boolean | null>(null);
   const location = useLocation();
+  const [loaded, setLoaded] = useState(false);
+
+  const setAuth = (userId: string | null) => {
+    setState({ ...state, userId, isAuth: !!userId });
+  };
+
+  const initState = {
+    ...initAuth,
+    setAuth,
+  };
+
+  const [state, setState] = useState(initState);
 
   useEffect(() => {
     userApi
       .isAuth()
       .then((res) => {
-        setIsAuth(res);
+        if (!res) {
+          setAuth(null);
+        }
       })
       .catch(() => {
-        setIsAuth(false);
+        setAuth(null);
+        localStorage.removeItem('user_id');
+      })
+      .finally(() => {
+        setLoaded(true);
       });
   }, [location.pathname, location.search]);
 
   return (
-    <AuthContext.Provider value={isAuth}>
-      {isAuth === null ? null : children}
-    </AuthContext.Provider>
+    <AuthContext.Provider value={state}>{!loaded ? null : children}</AuthContext.Provider>
   );
 }
diff --git a/src/app/providers/layout/Routes.tsx b/src/app/providers/layout/Routes.tsx
@@ -1,31 +1,37 @@
 import { Routes as ReactRoutes, Route } from 'react-router-dom';
 
-import { useIsMobile, useIsAuth } from '~/shared/hooks';
+import { useIsMobile, useAuth } from '~/shared/hooks';
 
 import { normalRoutes } from '../router/config';
 
 export function Routes() {
   const isMobile = useIsMobile();
-  const isAuth = useIsAuth();
+  const { isAuth } = useAuth();
 
   return (
     <ReactRoutes>
-      {normalRoutes.map((props) => {
-        let element = props.view.base;
-        const notAuthBase = props.view.notAuthBase;
-        const notAuthDesktop = props.view.notAuthDesktop;
-        const desktop = props.view.desktop;
+      {normalRoutes
+        .map((props) => {
+          let element = props.view.base;
+          const notAuthBase = props.view.notAuthBase;
+          const notAuthDesktop = props.view.notAuthDesktop;
+          const desktop = props.view.desktop;
 
-        if (!isAuth && notAuthDesktop && !isMobile) {
-          element = notAuthDesktop;
-        } else if (!isAuth && notAuthBase) {
-          element = notAuthBase;
-        } else if (!isMobile && desktop) {
-          element = desktop;
-        }
+          if (!isAuth && notAuthDesktop && !isMobile) {
+            element = notAuthDesktop;
+          } else if (!isAuth && notAuthBase) {
+            element = notAuthBase;
+          } else if (!isMobile && desktop) {
+            element = desktop;
+          }
 
-        return <Route key={props.path} path={props.path} element={element} />;
-      })}
+          if (!props.isPublic && !isAuth) {
+            return null;
+          } else {
+            return <Route key={props.path} path={props.path} element={element} />;
+          }
+        })
+        .filter(Boolean)}
     </ReactRoutes>
   );
 }
diff --git a/src/app/providers/router/config.tsx b/src/app/providers/router/config.tsx
@@ -28,15 +28,24 @@ import {
 import { PATHS } from '~/shared/lib/router';
 
 export const normalRoutes = [
+  {
+    path: PATHS.root,
+    view: {
+      base: <MainPage />,
+    },
+    isPublic: true,
+  },
   {
     path: PATHS.notFound,
     view: {
       base: <NotFoundPage />,
     },
+    isPublic: true,
   },
   {
     path: PATHS.profile,
     view: { base: <ProfilePage />, desktop: <ProfilePageDesktop /> },
+    isPublic: true,
   },
   {
     path: PATHS.profileMe,
@@ -46,6 +55,17 @@ export const normalRoutes = [
       notAuthBase: <NotAuthProfilePage />,
       notAuthDesktop: <NotFoundPage />,
     },
+    isPublic: true,
+  },
+  {
+    path: PATHS.searchProject,
+    view: { base: <ProjectPage /> },
+    isPublic: true,
+  },
+  {
+    path: PATHS.search,
+    view: { base: <SearchPage />, desktop: <SearchPageDesktop /> },
+    isPublic: true,
   },
   {
     path: PATHS.projects,
@@ -54,28 +74,25 @@ export const normalRoutes = [
       desktop: <ProjectsPageDesktop />,
       notAuthBase: <NotAuthProjectsPage />,
     },
+    isPublic: true,
   },
   {
-    path: PATHS.project,
-    view: { base: <ProjectPage /> },
+    path: PATHS.chats,
+    view: {
+      base: <ChatsPage />,
+      desktop: <ChatsPageDesktop />,
+      notAuthBase: <NotAuthChatsPage />,
+    },
+    isPublic: true,
   },
   {
-    path: PATHS.searchProject,
+    path: PATHS.project,
     view: { base: <ProjectPage /> },
   },
   {
     path: PATHS.addProject,
     view: { base: <AddProjectPage /> },
   },
-  { path: PATHS.search, view: { base: <SearchPage />, desktop: <SearchPageDesktop /> } },
-  {
-    path: PATHS.chats,
-    view: {
-      base: <ChatsPage />,
-      desktop: <ChatsPageDesktop />,
-      notAuthBase: <NotAuthChatsPage />,
-    },
-  },
   { path: PATHS.dialog, view: { base: <DialogPage />, desktop: <ChatsPageDesktop /> } },
   {
     path: PATHS.notifications,
@@ -88,16 +105,11 @@ export const normalRoutes = [
   { path: PATHS.settings, view: { base: <SettingsPage /> } },
   { path: PATHS.profileSettings, view: { base: <ProfileSettingsPage /> } },
   { path: PATHS.notificationsSettings, view: { base: <NotificationsSettingsPage /> } },
-  {
-    path: PATHS.root,
-    view: {
-      base: <MainPage />,
-    },
-  },
   {
     path: '*',
     view: {
-      base: <Navigate to={'404'} replace />,
+      base: <Navigate to={PATHS.notFound} replace />,
     },
+    isPublic: true,
   },
 ];
diff --git a/src/entities/user/avatar/Avatar.tsx b/src/entities/user/avatar/Avatar.tsx
@@ -1,16 +1,15 @@
 import {
   Flex,
-  Avatar as ChakraAvatar,
   Text,
   Stack,
   SkeletonCircle,
   SkeletonText,
   Image,
   Center,
 } from '@chakra-ui/react';
-import { useEffect, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
 
-import { useApi, useIsAuth } from '~/shared/hooks';
+import { useApi, useAuth } from '~/shared/hooks';
 import { SLink } from '~/shared/ui/SLink';
 
 import NotAuth from './notAuth.svg';
@@ -19,33 +18,22 @@ const defaultName = 'Хабраюзер';
 
 export const Avatar = () => {
   const { userApi } = useApi();
-  const isAuth = useIsAuth();
-  const [name, setName] = useState(defaultName);
-  const [loading, setLoading] = useState(true);
+  const { isAuth, userId } = useAuth();
 
-  useEffect(() => {
-    if (isAuth)
-      userApi
-        .getMe()
-        .then((res) => {
-          setName(res.first_name ?? defaultName);
-        })
-        .catch(() => {
-          setName(defaultName);
-        })
-        .finally(() => {
-          setLoading(false);
-        });
-  }, [isAuth]);
+  const { data, isLoading, isFetched } = useQuery({
+    queryKey: ['ownerID', userId],
+    queryFn: () => userApi.getUser(userId),
+    enabled: isAuth,
+  });
 
   return (
     <Flex alignItems="center" gap={2} w="full">
-      {loading && isAuth ? (
+      {isLoading && isFetched ? (
         <>
           <SkeletonCircle startColor="gray.600" endColor="gray.900" size="10" />
           <SkeletonText noOfLines={2} skeletonHeight="4" w="60%" />
         </>
-      ) : !isAuth ? (
+      ) : !isAuth && !data ? (
         <>
           <Center w={10} h={10} bg="white" borderRadius="full">
             <Image src={NotAuth} w={9} h={9} />
@@ -63,7 +51,9 @@ export const Avatar = () => {
             <Image src={NotAuth} w={9} h={9} />
           </Center>
           {/* <ChakraAvatar name={name} src={NotAuth} /> */}
-          <Text fontWeight="semibold">{`Привет, ${name}!`}</Text>
+          <Text fontWeight="semibold">{`Привет, ${
+            data?.first_name ?? defaultName
+          }!`}</Text>
         </>
       )}
     </Flex>

diff --git a/src/entities/user/info/Info.tsx b/src/entities/user/info/Info.tsx
@@ -1,10 +1,10 @@
 import { Box, Divider, Flex, FlexProps } from '@chakra-ui/react';
 
-import { useIsAuth } from '~/shared/hooks';
+import { useAuth } from '~/shared/hooks';
 import { SGroup } from '~/shared/ui/SGroup';
 
 export const Info = (props: FlexProps) => {
-  const isAuth = useIsAuth();
+  const { isAuth } = useAuth();
 
   return (
     <Flex py={4} px={0.5} width="100%" textAlign="center" {...props}>

diff --git a/src/features/project/add/AddProject.tsx b/src/features/project/add/AddProject.tsx
@@ -2,13 +2,13 @@ import { HStack, Icon, IconButton, Text } from '@chakra-ui/react';
 import { BsPlus } from 'react-icons/bs';
 import { useNavigate } from 'react-router-dom';
 
-import { useIsMobile, useIsAuth } from '~/shared/hooks';
+import { useIsMobile, useAuth } from '~/shared/hooks';
 import { PATHS } from '~/shared/lib/router';
 
 export const AddProject = () => {
   const navigate = useNavigate();
   const isMobile = useIsMobile();
-  const isAuth = useIsAuth();
+  const { isAuth } = useAuth();
 
   return (
     <IconButton

diff --git a/src/features/project/add/tabs/Team.tsx b/src/features/project/add/tabs/Team.tsx
@@ -47,7 +47,7 @@ export const Team = (props: TeamProps) => {
     if (specs && specGroup) {
       const mainTag = specs.data.filter(({ id }) => specId === id);
       const titleMainTag = specGroup.data.filter(({ id }) => mainTag[0].group_id === id);
-      return { mainTag: mainTag[0].name, titleMainTag: titleMainTag[0].name };
+      return { mainTag: mainTag[0].name ?? '', titleMainTag: titleMainTag[0].name ?? '' };
     }
   };
 

diff --git a/src/features/user/logout/Logout.tsx b/src/features/user/logout/Logout.tsx
@@ -1,11 +1,11 @@
 import { Button, Container, Icon, Portal } from '@chakra-ui/react';
 import { IoLogOutOutline } from 'react-icons/io5';
 
-import { useLayoutRefs, useIsAuth, useApi } from '~/shared/hooks';
+import { useLayoutRefs, useAuth, useApi } from '~/shared/hooks';
 
 export function Logout() {
   const layout = useLayoutRefs();
-  const isAuth = useIsAuth();
+  const { isAuth } = useAuth();
   const { userApi } = useApi();
 
   return layout?.footer && isAuth ? (

diff --git a/src/features/user/notification/Notification.tsx b/src/features/user/notification/Notification.tsx
@@ -2,12 +2,12 @@ import { IconButton, Icon, Box } from '@chakra-ui/react';
 import { IoNotifications } from 'react-icons/io5';
 import { useNavigate } from 'react-router-dom';
 
-import { useIsAuth } from '~/shared/hooks';
+import { useAuth } from '~/shared/hooks';
 import { PATHS } from '~/shared/lib/router';
 import { Counter } from '~/shared/ui/Counter';
 
 export function Notification() {
-  const isAuth = useIsAuth();
+  const { isAuth } = useAuth();
   const navigate = useNavigate();
 
   return (

diff --git a/src/features/user/settings/Settings.tsx b/src/features/user/settings/Settings.tsx
@@ -2,11 +2,11 @@ import { Icon, IconButton } from '@chakra-ui/react';
 import { IoSettings } from 'react-icons/io5';
 import { useNavigate } from 'react-router-dom';
 
-import { useIsAuth } from '~/shared/hooks';
+import { useAuth } from '~/shared/hooks';
 import { PATHS } from '~/shared/lib/router';
 
 export function Settings() {
-  const isAuth = useIsAuth();
+  const { isAuth } = useAuth();
   const navigate = useNavigate();
 
   return (

diff --git a/src/pages/main/MainPage.tsx b/src/pages/main/MainPage.tsx
@@ -2,11 +2,12 @@ import { useToast } from '@chakra-ui/react';
 import { useEffect, useState } from 'react';
 import { Navigate, useSearchParams } from 'react-router-dom';
 
-import { useApi } from '~/shared/hooks';
+import { useApi, useAuth } from '~/shared/hooks';
 import { PATHS } from '~/shared/lib/router';
 
 export const MainPage = () => {
   const toast = useToast();
+  const { setAuth } = useAuth();
   const [searchParams] = useSearchParams();
   const [loaded, setLoaded] = useState(false);
   const { userApi } = useApi();
@@ -21,10 +22,12 @@ export const MainPage = () => {
 
     userApi
       .afterAuth({ code, state })
-      .then(() => {
+      .then((data) => {
         setLoaded(true);
+        setAuth(data.user_id);
       })
       .catch((e: Error) => {
+        setAuth(null);
         setLoaded(true);
         toast({
           title: 'Ошибка авторизации',