fix: удаленный пользователь (#95)

src/app/providers/router/router.paths.ts

@@ -8,7 +8,12 @@ import { NotificationPage } from '~/pages/notification';
 import { NotificationsPage } from '~/pages/notifications';
 import { OnboardingPage } from '~/pages/onboarding';
 import { PositionPage } from '~/pages/position';
-import { ProfileMePage, ProfilePageDesktop, ProfileUserPage } from '~/pages/profile';
+import {
+  DeletedProfile,
+  ProfileMePage,
+  ProfilePageDesktop,
+  ProfileUserPage,
+} from '~/pages/profile';
 import {
   AddProjectPage,
   ProjectPage,
@@ -48,6 +53,10 @@ export const routerPaths = [
     path: PATHS.profileMe,
     Component: ProfileMePage,
   },
+  {
+    path: PATHS.deletedProfile,
+    Component: DeletedProfile,
+  },
   {
     path: PATHS.searchProject,
     Component: ProjectPage,

src/entities/project/contacts/Contacts.tsx

@@ -4,6 +4,7 @@ import { generatePath } from 'react-router-dom';
 
 import { useApi, useAuth } from '~/shared/hooks';
 import { PATHS } from '~/shared/lib/router';
+import { DummyAvatar } from '~/shared/ui/DummyAvatar';
 import { Rating } from '~/shared/ui/Rating';
 import { SLink } from '~/shared/ui/SLink';
 
@@ -13,29 +14,54 @@ export const Contacts = ({ ownerId }: { ownerId: string }) => {
   const { userApi } = useApi();
   const { isAuth } = useAuth();
   const avatarUrl = userApi.getAvatar(ownerId);
-  const { data: owner, isSuccess: loadedOwner } = useGetUser(ownerId);
+  const { data: owner, isLoading: loadedOwner, isSuccess } = useGetUser(ownerId);
 
   return (
     <>
       <Heading variant="h2">Участники</Heading>
-      <Skeleton isLoaded={loadedOwner} borderRadius="2xl" fadeDuration={2}>
-        <Flex alignItems="center">
-          <Avatar src={avatarUrl} name={`${owner?.first_name} ${owner?.last_name}`} />
-          <Stack pl={2} gap={0} whiteSpace="nowrap" overflow="hidden">
-            <Heading minWidth={0} variant="h3" overflow="hidden" textOverflow="ellipsis">
-              {owner?.first_name} {owner?.last_name}
-            </Heading>
-            <Text variant="caption">Организатор</Text>
-            {isAuth && (
-              <SLink to={generatePath(PATHS.profile, { id: ownerId })}>
-                Перейти в профиль
-              </SLink>
-            )}
-          </Stack>
-          {/* <Flex ml="auto">
+      <Skeleton isLoaded={!loadedOwner} borderRadius="2xl" fadeDuration={2}>
+        {isSuccess ? (
+          <Flex alignItems="center">
+            <Avatar src={avatarUrl} name={`${owner.first_name} ${owner.last_name}`} />
+            <Stack pl={2} gap={0} whiteSpace="nowrap" overflow="hidden">
+              <Heading
+                minWidth={0}
+                variant="h3"
+                overflow="hidden"
+                textOverflow="ellipsis"
+              >
+                {owner.first_name} {owner.last_name}
+              </Heading>
+              <Text variant="caption">Организатор</Text>
+              {isAuth && (
+                <SLink to={generatePath(PATHS.profile, { id: ownerId })}>
+                  Перейти в профиль
+                </SLink>
+              )}
+            </Stack>
+            {/* <Flex ml="auto">
               <Rating />
             </Flex> */}
-        </Flex>
+          </Flex>
+        ) : (
+          <Flex alignItems="center">
+            <DummyAvatar w={10} h={10} />
+            <Stack pl={2} gap={0} whiteSpace="nowrap" overflow="hidden">
+              <Heading
+                minWidth={0}
+                variant="h3"
+                overflow="hidden"
+                textOverflow="ellipsis"
+              >
+                Удаленный профиль
+              </Heading>
+              <Text variant="caption">Организатор</Text>
+              {isAuth && (
+                <SLink to={generatePath(PATHS.deletedProfile)}>Перейти в профиль</SLink>
+              )}
+            </Stack>
+          </Flex>
+        )}
       </Skeleton>
     </>
   );

src/entities/user/avatar/DummyAvatar.tsx → src/entities/user/avatar/NotAuthAvatar.tsx

@@ -1,17 +1,16 @@
-import { Flex, Text, Stack, Image, Center } from '@chakra-ui/react';
+import { Flex, Text, Stack, Center } from '@chakra-ui/react';
 
 import { useApi } from '~/shared/hooks';
+import { DummyAvatar } from '~/shared/ui/DummyAvatar';
 import { SLink } from '~/shared/ui/SLink';
 
-import NotAuth from './notAuth.svg';
-
-export const DummyAvatar = () => {
+export const NotAuthAvatar = () => {
   const { userApi } = useApi();
 
   return (
     <Flex alignItems="center" gap={2} w="full">
       <Center w={10} h={10} bg="white" borderRadius="full">
-        <Image src={NotAuth} w={9} h={9} />
+        <DummyAvatar w={9} h={9} />
       </Center>
       <Stack spacing={0}>
         <Text variant="caption">{`Привет, Гость!`}</Text>

src/entities/user/avatar/index.ts

@@ -1,3 +1,2 @@
 export * from './Avatar';
-export * from './DummyAvatar';
-export * from './notAuth.svg';
+export * from './NotAuthAvatar';

src/entities/user/profile-card/ProfileCardNotAuth.tsx

@@ -1,11 +1,17 @@
-import { Text, Flex, Image, Center } from '@chakra-ui/react';
+import { Text, Flex, Center } from '@chakra-ui/react';
+
+import { DummyAvatar } from '~/shared/ui/DummyAvatar';
 
-import NotAuth from './notAuth.png';
 import { Statistic } from './statistic';
 
 const defaultName = 'Гость';
+const deletedName = 'Удалённый профиль';
+
+interface ProfileCardNotAuthType {
+  isDeleted?: boolean;
+}
 
-export function ProfileCardNotAuth() {
+export function ProfileCardNotAuth({ isDeleted }: ProfileCardNotAuthType) {
   return (
     <Flex
       direction="column"
@@ -26,10 +32,10 @@ export function ProfileCardNotAuth() {
         boxSizing="content-box"
         bg="white"
       >
-        <Image src={NotAuth} objectFit="contain" objectPosition="center" h={16} w={16} />
+        <DummyAvatar objectFit="contain" objectPosition="center" h={16} w={16} />
       </Center>
       <Text align="center" fontWeight="bold" fontSize="2xl" pt={16} mb={4}>
-        {defaultName}
+        {isDeleted ? deletedName : defaultName}
       </Text>
       <Statistic />
     </Flex>

src/pages/profile/DeletedProfile.tsx

@@ -0,0 +1,32 @@
+import { Flex, Heading, Container, TabPanels, TabPanel } from '@chakra-ui/react';
+
+import { ProfileCardNotAuth } from '~/entities/user';
+
+import { GoBack } from '~/shared/ui/GoBack';
+
+import { ProfileTabs } from './ProfileTabs';
+import { NotAuthTab } from './tabs/not-auth';
+
+export function DeletedProfile() {
+  return (
+    <Container maxW="md" mb={4}>
+      <Flex alignItems="center" mt={4} mb={16} h={42} gap={2}>
+        <GoBack prevCount={-2} />
+        <Heading variant="h1" as="h1">
+          Профиль
+        </Heading>
+      </Flex>
+      <ProfileCardNotAuth isDeleted />
+      <ProfileTabs>
+        <TabPanels>
+          <TabPanel>
+            <NotAuthTab isDeleted />
+          </TabPanel>
+          <TabPanel>
+            <NotAuthTab isDeleted />
+          </TabPanel>
+        </TabPanels>
+      </ProfileTabs>
+    </Container>
+  );
+}

src/pages/profile/ProfileMePage.tsx

@@ -7,7 +7,9 @@ import { ProfileCard, ProfileCardNotAuth } from '~/entities/user';
 import { useAuth } from '~/shared/hooks';
 
 import { ProfileTabs } from './ProfileTabs';
+import { AboutMeTab } from './tabs/about-me';
 import { NotAuthTab } from './tabs/not-auth';
+import { ProjectsTab } from './tabs/projects';
 
 export function ProfileMePage() {
   const { userId } = useAuth();
@@ -24,7 +26,12 @@ export function ProfileMePage() {
         </Flex>
       </Flex>
       {userId ? <ProfileCard userId={userId} /> : <ProfileCardNotAuth />}
-      {userId ? <ProfileTabs userId={userId} /> : <NotAuthTab />}
+      <ProfileTabs>
+        <TabPanels>
+          <TabPanel>{userId ? <AboutMeTab userId={userId} /> : <NotAuthTab />}</TabPanel>
+          <TabPanel>{userId ? <ProjectsTab userId={userId} /> : <NotAuthTab />}</TabPanel>
+        </TabPanels>
+      </ProfileTabs>
       {userId ? null : <Login />}
     </Container>
   );

src/pages/profile/ProfileTabs.tsx

@@ -1,24 +1,20 @@
-import { Skeleton, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/react';
+import { Skeleton, TabList, Tabs } from '@chakra-ui/react';
 import React, { useLayoutEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
 import { AnimatedTabs } from '~/shared/ui/SAnimatedTabs';
 
-import { AboutMeTab } from './tabs/about-me';
-import { ProjectsTab } from './tabs/projects';
-
 const tabs = [
   { id: 'about', label: 'Обо мне' },
   { id: 'projects', label: 'Проекты' },
   // { id: 'reviews', label: 'Отзывы' },
 ];
 
 interface ProfileTabsProps {
-  userId: string;
-  children?: React.ReactNode;
+  children?: JSX.Element;
 }
 
-export const ProfileTabs = ({ userId, children }: ProfileTabsProps) => {
+export const ProfileTabs = ({ children }: ProfileTabsProps) => {
   const [searchParams, setSearchParams] = useSearchParams();
   const activeTab = searchParams.get('tab');
 
@@ -42,15 +38,6 @@ export const ProfileTabs = ({ userId, children }: ProfileTabsProps) => {
           <Skeleton height="25px" />
         )}
       </TabList>
-      <TabPanels>
-        <TabPanel>
-          <AboutMeTab userId={userId} />
-        </TabPanel>
-        <TabPanel>
-          <ProjectsTab userId={userId} />
-        </TabPanel>
-        {/* <TabPanel><ReviewsTab /></TabPanel> */}
-      </TabPanels>
       {children}
     </Tabs>
   );

src/pages/profile/ProfileUserPageBase.tsx

@@ -1,12 +1,14 @@
-import { Flex, Heading, Container } from '@chakra-ui/react';
+import { Flex, Heading, Container, TabPanels, TabPanel } from '@chakra-ui/react';
 import { useParams } from 'react-router-dom';
 
 import { ProfileCard, ProfileCardNotAuth } from '~/entities/user';
 
 import { GoBack } from '~/shared/ui/GoBack';
 
 import { ProfileTabs } from './ProfileTabs';
+import { AboutMeTab } from './tabs/about-me';
 import { NotAuthTab } from './tabs/not-auth';
+import { ProjectsTab } from './tabs/projects';
 
 export function ProfileUserPageBase() {
   const { id } = useParams();
@@ -20,7 +22,12 @@ export function ProfileUserPageBase() {
         </Heading>
       </Flex>
       {id ? <ProfileCard userId={id} /> : <ProfileCardNotAuth />}
-      {id ? <ProfileTabs userId={id} /> : <NotAuthTab />}
+      <ProfileTabs>
+        <TabPanels>
+          <TabPanel>{id ? <AboutMeTab userId={id} /> : <NotAuthTab />}</TabPanel>
+          <TabPanel>{id ? <ProjectsTab userId={id} /> : <NotAuthTab />}</TabPanel>
+        </TabPanels>
+      </ProfileTabs>
     </Container>
   );
 }

src/pages/profile/index.ts

@@ -1,3 +1,4 @@
 export * from './ProfileMePage';
 export * from './ProfilePage.desktop';
 export * from './ProfileUserPage';
+export * from './DeletedProfile';

src/pages/profile/tabs/not-auth/NotAuth.tsx

@@ -1,9 +1,15 @@
 import { Text } from '@chakra-ui/react';
 
-export const NotAuthTab = () => {
+interface NotAuthTabType {
+  isDeleted?: boolean;
+}
+
+export const NotAuthTab = ({ isDeleted }: NotAuthTabType) => {
   return (
-    <Text textAlign="center" color="gray.700" pt={5}>
-      Для создания личного профиля необходимо зарегистрироваться
+    <Text textAlign="center" color="gray.700">
+      {isDeleted
+        ? 'Страница удалена'
+        : 'Для создания личного профиля необходимо зарегистрироваться'}
     </Text>
   );
 };

src/pages/search/ui/SearchPage.tsx

@@ -18,7 +18,7 @@ import { FilterUser, SearchProject } from '~/features/project';
 import { DummyNotFound } from '~/entities/dummy';
 import { useFilterStore } from '~/entities/project';
 import { useGetSpecs } from '~/entities/storage';
-import { Avatar, DummyAvatar } from '~/entities/user';
+import { Avatar, NotAuthAvatar } from '~/entities/user';
 
 import { useApi, useAuth, useLayoutRefs } from '~/shared/hooks';
 import { PATHS } from '~/shared/lib/router';
@@ -88,7 +88,7 @@ export const SearchPage = () => {
       <Container maxW="md" mb={4}>
         <Flex alignContent="center" flexDirection="column" justifyContent="space-between">
           <Flex alignItems="center" my={4} h={42}>
-            {user.userId ? <Avatar userId={user.userId} /> : <DummyAvatar />}
+            {user.userId ? <Avatar userId={user.userId} /> : <NotAuthAvatar />}
 
             {user.isAuth && (
               <Flex ml="auto" gap={4} alignItems="baseline">

src/shared/lib/router/paths.ts

@@ -10,6 +10,7 @@ export const PATHS = {
   chats: '/chats',
   dialog: '/chats/:id',
   profile: '/profile/:id',
+  deletedProfile: '/profile/deleted',
   profileMe: '/profile/me',
   notifications: '/notifications',
   notification: '/notifications/:id',

src/shared/ui/DummyAvatar/DummyAvatar.tsx

@@ -0,0 +1,8 @@
+import type { ImageProps } from '@chakra-ui/react';
+import { Image } from '@chakra-ui/react';
+
+import image from './image.svg';
+
+export function DummyAvatar({ ...props }: ImageProps) {
+  return <Image src={image} {...props} />;
+}

src/shared/ui/DummyAvatar/index.tsx

@@ -0,0 +1 @@
+export * from './DummyAvatar';