habralab · ko22009 · Nov 7, 2023 · Nov 7, 2023 · Nov 7, 2023 · Nov 7, 2023
diff --git a/src/app/providers/router/config.tsx b/src/app/providers/router/config.tsx
@@ -59,6 +59,10 @@ export const normalRoutes = [
     path: PATHS.project,
     view: { base: <ProjectPage /> },
   },
+  {
+    path: PATHS.searchProject,
+    view: { base: <ProjectPage /> },
+  },
   {
     path: PATHS.addProject,
     view: { base: <AddProjectPage /> },

diff --git a/src/pages/projects/ui/AddProjectPage.tsx b/src/pages/projects/ui/AddProjectPage.tsx
@@ -9,6 +9,7 @@ import {
   Tab,
   TabPanels,
   TabPanel,
+  useToast,
 } from '@chakra-ui/react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useState } from 'react';
@@ -22,6 +23,7 @@ import { useApi } from '~/shared/hooks';
 import { GoBack } from '~/shared/ui/GoBack';
 
 export const AddProjectPage = () => {
+  const toast = useToast();
   const queryClient = useQueryClient();
   const navigate = useNavigate();
   const { projectsApi } = useApi();
@@ -42,8 +44,14 @@ export const AddProjectPage = () => {
       queryClient.invalidateQueries(['getAllProjects']);
       navigate(-1);
     },
-    onError: () => {
-      alert('there was an error');
+    onError: (e: Error) => {
+      toast({
+        title: 'Ошибка создания проекта',
+        description: e.message,
+        status: 'error',
+        duration: 9000,
+        isClosable: true,
+      });
     },
   });
 

diff --git a/src/pages/projects/ui/ProjectPage.tsx b/src/pages/projects/ui/ProjectPage.tsx
@@ -51,14 +51,18 @@ export const ProjectPage = () => {
     onSuccess: (data) => {
       setOwnerID(data.owner_id);
     },
-    staleTime: 50000,
   });
 
   const { data: userData, isLoading: userIsLoading } = useQuery({
     queryKey: ['ownerID', ownerID],
     queryFn: () => userApi.getUser(ownerID),
     enabled: !!ownerID,
-    staleTime: 50000,
+  });
+
+  const { data: myData, isLoading: meIsLoading } = useQuery({
+    queryKey: ['myID', ownerID],
+    queryFn: () => userApi.getMe(),
+    enabled: !!ownerID,
   });
 
   return (
@@ -139,17 +143,19 @@ export const ProjectPage = () => {
             </CardBody>
           </ChakraCard>
           <Flex bg="bg" position="sticky" bottom="4.6rem" p={0} py={3} mt="auto">
-            <Button
-              type="button"
-              onClick={() => {
-                // handleTabsChange(1);
-              }}
-              fontSize="sm"
-              fontWeight="600"
-              w="full"
-            >
-              Откликнуться
-            </Button>
+            {!meIsLoading && myData?.id !== data?.owner_id && (
+              <Button
+                type="button"
+                onClick={() => {
+                  // handleTabsChange(1);
+                }}
+                fontSize="sm"
+                fontWeight="600"
+                w="full"
+              >
+                Откликнуться
+              </Button>
+            )}
           </Flex>
         </>
       )}

diff --git a/src/pages/projects/ui/ProjectsPage.tsx b/src/pages/projects/ui/ProjectsPage.tsx
@@ -1,10 +1,20 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 /* eslint-disable @typescript-eslint/no-floating-promises */
-import { Flex, SimpleGrid, Heading, Container, Box, Skeleton } from '@chakra-ui/react';
-import { useInfiniteQuery } from '@tanstack/react-query';
+import {
+  Flex,
+  SimpleGrid,
+  Heading,
+  Container,
+  Box,
+  Skeleton,
+  Image,
+  Text,
+  Button,
+} from '@chakra-ui/react';
+import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
 import React, { useEffect, useRef } from 'react';
-import { Link, generatePath } from 'react-router-dom';
+import { Link, generatePath, useNavigate } from 'react-router-dom';
 
 import { ProjectCard } from '~/widgets/project-card';
 
@@ -16,9 +26,12 @@ import { useApi } from '~/shared/hooks';
 import { PATHS } from '~/shared/lib/router';
 import { STag } from '~/shared/ui/STag';
 
+import NotAuth from './NotAuth.svg';
+
 export const ProjectsPage = () => {
   const targetRef = useRef(null);
-  const { projectsApi } = useApi();
+  const { projectsApi, userApi } = useApi();
+  const navigate = useNavigate();
   const dummyAvatars = [
     { firstName: 'Alex', lastName: 'Gordon', img: 'https://bit.ly/ryan-florence' },
     { firstName: 'Игорь', lastName: 'Крутой', img: 'https://bit.ly/sage-adebayo' },
@@ -31,10 +44,15 @@ export const ProjectsPage = () => {
   const { data, isLoading, fetchNextPage, isFetchingNextPage } = useInfiniteQuery({
     queryKey: ['getAllProjects'],
     queryFn: ({ pageParam = 1 }) => projectsApi.getAllProjects(pageParam),
-    getNextPageParam: (lastPage) => lastPage.page + 1,
+    // getNextPageParam: (lastPage) => lastPage.page + 1,
     staleTime: 5000,
   });
 
+  const { data: myData, isLoading: meIsLoading } = useQuery({
+    queryKey: ['myID'],
+    queryFn: () => userApi.getMe(),
+  });
+
   useEffect(() => {
     const options = {
       root: null,
@@ -67,38 +85,77 @@ export const ProjectsPage = () => {
         </Flex>
       </Flex>
 
-      {isLoading || !data ? (
+      {isLoading || meIsLoading || !data ? (
         <>
           <Skeleton height="200px" borderRadius="2xl" mb={3} />
           <Skeleton height="200px" borderRadius="2xl" mb={3} />
           <Skeleton height="200px" borderRadius="2xl" mb={3} />
         </>
       ) : (
         <SimpleGrid gap={4}>
-          {data.pages.map((group, i) => (
-            <React.Fragment key={i}>
-              {group.data.map((project) => {
-                return (
-                  <Link
-                    key={project.id}
-                    to={generatePath(PATHS.project, { id: project.id })}
+          {data.pages.map((group, i) => {
+            const filteredProject = group.data.filter(
+              ({ owner_id }) => owner_id === myData?.id,
+            );
+            return (
+              <>
+                {filteredProject.length === 0 ? (
+                  <Flex
+                    bg="white"
+                    my={6}
+                    borderRadius="2xl"
+                    p={5}
+                    direction="column"
+                    alignItems="center"
+                    gap={5}
                   >
-                    <ProjectCard
-                      status={project.status}
-                      title={project.name}
-                      date={project.deadline}
-                      description={project.description}
+                    <Image src={NotAuth} />
+                    <Text fontSize="md" fontWeight="medium" mt={1}>
+                      Нет проектов
+                    </Text>
+                    <Text color="gray.700" textAlign="center">
+                      Здесь будут отображаться все ваши проекты в качестве участника и
+                      организатора
+                    </Text>
+                    <Button
+                      type="button"
+                      onClick={() => {
+                        navigate(PATHS.addProject);
+                      }}
+                      fontSize="sm"
+                      fontWeight="600"
+                      w="full"
                     >
-                      <Flex justifyContent="space-between" alignItems="center">
-                        <STag mainTags={['Организатор']} />
-                        <AvatarsGroup avatars={dummyAvatars} />
-                      </Flex>
-                    </ProjectCard>
-                  </Link>
-                );
-              })}
-            </React.Fragment>
-          ))}
+                      Создать свой проект
+                    </Button>
+                  </Flex>
+                ) : (
+                  <React.Fragment key={i}>
+                    {filteredProject.map((project) => {
+                      return (
+                        <Link
+                          key={project.id}
+                          to={generatePath(PATHS.project, { id: project.id })}
+                        >
+                          <ProjectCard
+                            status={project.status}
+                            title={project.name}
+                            date={project.deadline}
+                            description={project.description}
+                          >
+                            <Flex justifyContent="space-between" alignItems="center">
+                              <STag mainTags={['Организатор']} />
+                              <AvatarsGroup avatars={dummyAvatars} />
+                            </Flex>
+                          </ProjectCard>
+                        </Link>
+                      );
+                    })}
+                  </React.Fragment>
+                )}
+              </>
+            );
+          })}
           {isFetchingNextPage && (
             <>
               <Skeleton height="200px" borderRadius="2xl" mb={3} />

diff --git a/src/pages/search/ui/SearchPage.tsx b/src/pages/search/ui/SearchPage.tsx
@@ -95,7 +95,7 @@ export const SearchPage = () => {
                     return (
                       <Link
                         key={project.id}
-                        to={generatePath(PATHS.project, { id: project.id })}
+                        to={generatePath(PATHS.searchProject, { id: project.id })}
                       >
                         <ProjectCard
                           status={project.status}

diff --git a/src/shared/api/clients/projects.ts b/src/shared/api/clients/projects.ts
@@ -31,8 +31,17 @@ export class ProjectsApiClient extends BaseApiClient {
     };
     const { deadline, status, ...rest } = data;
     let formatDate;
-    if (deadline) formatDate = new Date(deadline).toLocaleDateString('ru');
-    return { ...rest, deadline: formatDate ?? '', status: statusAdapter[status] };
+    if (deadline)
+      formatDate = new Date(deadline).toLocaleDateString('ru', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      });
+    return {
+      ...rest,
+      deadline: `с ${formatDate}`.slice(0, -3),
+      status: statusAdapter[status],
+    };
   }
 
   async getAllProjects(page: number) {
@@ -49,8 +58,17 @@ export class ProjectsApiClient extends BaseApiClient {
       };
       const { deadline, status, ...rest } = project;
       let formatDate;
-      if (deadline) formatDate = new Date(deadline).toLocaleDateString('ru');
-      return { ...rest, deadline: formatDate ?? '', status: statusAdapter[status] };
+      if (deadline)
+        formatDate = new Date(deadline).toLocaleDateString('ru', {
+          year: 'numeric',
+          month: 'long',
+          day: 'numeric',
+        });
+      return {
+        ...rest,
+        deadline: `с ${formatDate}`.slice(0, -3),
+        status: statusAdapter[status],
+      };
     });
     return { ...others, data: newData };
   }

diff --git a/src/shared/lib/router/paths.ts b/src/shared/lib/router/paths.ts
@@ -1,6 +1,7 @@
 export const PATHS = {
   root: '/',
   search: '/search',
+  searchProject: '/search/:id',
   projects: '/projects',
   project: '/projects/:id',
   addProject: '/add-project',