Refactor: Проект (#90)

Co-authored-by: Ruslan Kutliakhmetov <[email protected]>

.eslintrc.js

@@ -40,9 +40,9 @@ module.exports = {
     ],
     'react-hooks/exhaustive-deps': 'off',
     'react/react-in-jsx-scope': 'off',
-
     'jsx-a11y/accessible-emoji': 'off',
     'react/prop-types': 'off',
+    'import/no-duplicates': 'error',
     'import/no-unresolved': 'error',
     'import/no-cycle': 'error',
     'import/newline-after-import': 'error',

.vscode/settings.json

@@ -2,7 +2,7 @@
   "typescript.tsdk": ".yarn/sdks/typescript/lib",
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "search.exclude": {
     "**/.yarn": true,

src/app/App.tsx

@@ -1,5 +1,8 @@
-import type { ColorMode } from '@chakra-ui/react';
-import { ChakraProvider, createLocalStorageManager } from '@chakra-ui/react';
+import {
+  ChakraProvider,
+  createLocalStorageManager,
+  type ColorMode,
+} from '@chakra-ui/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 // eslint-disable-next-line import/no-duplicates

src/entities/project/api/useGetAllProjects.tsx

@@ -1,5 +1,8 @@
-import type { QueryFunctionContext, QueryKey } from '@tanstack/react-query';
-import { useInfiniteQuery } from '@tanstack/react-query';
+import {
+  useInfiniteQuery,
+  type QueryFunctionContext,
+  type QueryKey,
+} from '@tanstack/react-query';
 
 import { api } from '~/shared/api';
 

src/entities/project/card/ui/Card.tsx

@@ -1,17 +1,28 @@
 import { Heading, Text } from '@chakra-ui/react';
 
+import { useIsMobile } from '~/shared/hooks';
+import { Status } from '~/shared/ui/Status';
+
+import {
+  PROJECT_STATUSES_MESSAGES,
+  type PROJECT_STATUSES,
+} from '../../Project.constants';
+
 export interface CardProps {
+  status: keyof typeof PROJECT_STATUSES;
   title?: string;
   date?: string | null;
   description?: string | null;
   fullDescription?: boolean;
 }
 
 export const Card = (props: CardProps) => {
-  const { title, date, description, fullDescription } = props;
+  const { title, date, description, status, fullDescription } = props;
+  const isMobile = useIsMobile();
 
   return (
     <>
+      <Status mb={isMobile ? 3 : 4}>{PROJECT_STATUSES_MESSAGES[status]}</Status>
       <Heading variant="h2" overflowWrap="anywhere" noOfLines={3}>
         {title}
       </Heading>

src/entities/project/contacts/Contacts.tsx

@@ -12,15 +12,15 @@ import { useGetUser } from '../api';
 export const Contacts = ({ ownerId }: { ownerId: string }) => {
   const { userApi } = useApi();
   const { isAuth } = useAuth();
-  const avatar = userApi.getAvatar(ownerId);
+  const avatarUrl = userApi.getAvatar(ownerId);
   const { data: owner, isSuccess: loadedOwner } = useGetUser(ownerId);
 
   return (
     <>
       <Heading variant="h2">Участники</Heading>
       <Skeleton isLoaded={loadedOwner} borderRadius="2xl" fadeDuration={2}>
         <Flex alignItems="center">
-          <Avatar src={avatar} name={`${owner?.first_name} ${owner?.last_name}`} />
+          <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}

src/entities/project/info/ProjectInfo.tsx

@@ -65,12 +65,12 @@ export const ProjectInfo = ({
   return (
     <>
       <Stack gap={0} mb={3} alignItems="start">
-        <Status mb={3}>{PROJECT_STATUSES_MESSAGES[project.status]}</Status>
         <Card
           title={project.name}
           date={project.startline}
           description={project.description}
           fullDescription={true}
+          status={project.status}
         />
       </Stack>
       {project.status !== PROJECT_STATUSES.finished && (

src/entities/project/position/PositionInfo.tsx

@@ -1,12 +1,9 @@
 import { Heading, Stack } from '@chakra-ui/layout';
-import { Text } from '@chakra-ui/react';
 
 import { STag } from '~/shared/ui/STag';
-import { Status } from '~/shared/ui/Status';
 
 import { Card } from '../card';
 import type { PROJECT_STATUSES } from '../Project.constants';
-import { PROJECT_STATUSES_MESSAGES } from '../Project.constants';
 
 interface Project {
   deadline: string | null;
@@ -31,12 +28,12 @@ export const PositionInfo = ({ mainTags, tags, project }: ProjectInfoProps) => {
   return (
     <>
       <Stack gap={0} mb={3} alignItems="start">
-        <Status mb={3}>{PROJECT_STATUSES_MESSAGES[project.status]}</Status>
         <Card
           title={project.name}
           date={project.startline}
           description={project.description}
           fullDescription={true}
+          status={project.status}
         />
       </Stack>
 

src/entities/user/info/Info.tsx

@@ -1,5 +1,4 @@
-import type { FlexProps } from '@chakra-ui/react';
-import { Box, Divider, Flex } from '@chakra-ui/react';
+import { Box, Divider, Flex, type FlexProps } from '@chakra-ui/react';
 
 import type { GetStatistic } from '~/shared/api/model';
 import { useAuth } from '~/shared/hooks';

src/entities/user/reviews/Reviews.tsx

@@ -1,5 +1,4 @@
-import type { StackProps } from '@chakra-ui/react';
-import { Box, HStack, Heading, Stack, Text } from '@chakra-ui/react';
+import { Box, HStack, Heading, Stack, Text, type StackProps } from '@chakra-ui/react';
 
 import { SLink } from '~/shared/ui/SLink';
 

src/features/project/add/index.ts

@@ -1,2 +1,2 @@
-export * from './AddProject';
+export * from './ui';
 export * from './api';

src/widgets/project/add/AddProjectFormView.tsx → src/features/project/add/ui/AddProject.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-floating-promises */
 import {
   Flex,
   Button,
@@ -14,24 +13,23 @@ import {
 } from '@chakra-ui/react';
 import { useQueryClient } from '@tanstack/react-query';
 import { useState } from 'react';
-import type { FieldErrors, SubmitHandler } from 'react-hook-form';
-import { Controller, useForm } from 'react-hook-form';
-import { useNavigate } from 'react-router-dom';
-
 import {
-  useAddAvatar,
-  useAddPosition,
-  useAddProject,
-  useAddSkills,
-} from '~/features/project';
+  Controller,
+  useForm,
+  type FieldErrors,
+  type SubmitHandler,
+} from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
 
 import { stringToServerDate } from '~/shared/lib/adapters';
 import { GoBack } from '~/shared/ui/GoBack';
 
+import { useAddAvatar, useAddPosition, useAddProject, useAddSkills } from '../api';
+
 import type { AddProjectForm } from './AddProject.types';
 import { AboutProject, Team } from './tabs';
 
-export const AddProjectFormView = ({ userId }: { userId: string }) => {
+export const AddProject = ({ userId }: { userId: string }) => {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
   const { mutateAsync: addProject } = useAddProject();

src/features/project/add/AddProject.tsx → src/features/project/add/ui/AddProjectButton.tsx

@@ -5,7 +5,7 @@ import { useNavigate } from 'react-router-dom';
 import { useIsMobile, useAuth } from '~/shared/hooks';
 import { PATHS } from '~/shared/lib/router';
 
-export const AddProject = () => {
+export const AddProjectButton = () => {
   const navigate = useNavigate();
   const isMobile = useIsMobile();
   const { isAuth } = useAuth();

src/features/project/add/ui/index.ts

@@ -0,0 +1,2 @@
+export * from './AddProject';
+export * from './AddProjectButton';

src/widgets/project/add/tabs/AboutProject.tsx → src/features/project/add/ui/tabs/AboutProject.tsx

@@ -11,10 +11,8 @@ import {
   Image,
   useDisclosure,
 } from '@chakra-ui/react';
-import type { ChangeEvent } from 'react';
-import { useState } from 'react';
-import type { useForm } from 'react-hook-form';
-import { Controller } from 'react-hook-form';
+import { useState, type ChangeEvent } from 'react';
+import { Controller, type useForm } from 'react-hook-form';
 
 import { Modal } from '~/shared/ui/Modal';
 import { STextarea } from '~/shared/ui/STextarea';

src/widgets/project/add/tabs/Team.tsx → src/features/project/add/ui/tabs/Team.tsx

@@ -1,8 +1,7 @@
 import { Box, Flex, Heading, Stack } from '@chakra-ui/layout';
 import { Button, Card, CloseButton, FormControl, FormLabel } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
-import type { Dispatch, SetStateAction } from 'react';
-import { useState } from 'react';
+import { useState, type Dispatch, type SetStateAction } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 
 import { useGetSpecs } from '~/entities/storage';

src/features/project/index.ts

@@ -1,3 +1,4 @@
 export * from './search';
 export * from './add';
 export * from './request';
+export * from './filter';

src/widgets/project/requests/Requests.tsx → src/features/project/request/Requests.tsx

@@ -2,8 +2,6 @@ import { Container, Flex, Heading } from '@chakra-ui/layout';
 import { Card, Icon, IconButton, Stack } from '@chakra-ui/react';
 import { FiChevronLeft } from 'react-icons/fi';
 
-import { RequestButtons } from '~/features/project';
-
 import { DummyPosition } from '~/entities/dummy';
 import { PARTICIPANT_STATUSES } from '~/entities/project';
 
@@ -14,6 +12,7 @@ import type {
 } from '~/shared/api/model';
 import { STag } from '~/shared/ui/STag';
 
+import { RequestButtons } from './RequestButtons';
 import { RequestParticipant } from './RequestParticipant';
 
 interface RequestsProps {

src/features/project/request/index.ts

@@ -1,2 +1,3 @@
-export * from './RequestButtons';
+export * from './Requests';
+export * from './RequestParticipant';
 export * from './api';

src/features/user/update-user/UpdateUser.tsx

@@ -10,8 +10,7 @@ import {
   Center,
   Avatar,
 } from '@chakra-ui/react';
-import type { ChangeEvent } from 'react';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, type ChangeEvent } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { MdPhotoCamera } from 'react-icons/md';
 import { useNavigate } from 'react-router-dom';
@@ -31,8 +30,7 @@ import {
   useUpdateProfile,
   useUpdateSkills,
 } from './api';
-import type { UserTypeForm } from './model';
-import { userResponseToUserType } from './model';
+import { userResponseToUserType, type UserTypeForm } from './model';
 
 interface UpdateUserProps {
   user: GetUserResponse;

src/pages/blank/BlankPage.tsx

@@ -1,4 +1,3 @@
-import type { ColorMode } from '@chakra-ui/react';
 import {
   Container,
   Flex,
@@ -10,6 +9,7 @@ import {
   Text,
   ChakraProvider,
   createLocalStorageManager,
+  type ColorMode,
 } from '@chakra-ui/react';
 
 import { Logo } from '~/shared/ui/Logo';

src/pages/projects/add/AddProjectPage.tsx

@@ -1,6 +1,6 @@
 import { useNavigate } from 'react-router-dom';
 
-import { AddProjectFormView } from '~/widgets/project';
+import { AddProject } from '~/features/project';
 
 import { useAuth } from '~/shared/hooks';
 import { PATHS } from '~/shared/lib/router';
@@ -11,7 +11,7 @@ export const AddProjectPage = () => {
   return (
     <>
       {user.userId ? (
-        <AddProjectFormView userId={user.userId} />
+        <AddProject userId={user.userId} />
       ) : (
         () => {
           navigate(PATHS.notFound);

src/pages/projects/ui/NotAuthProjectPage.tsx

@@ -1,6 +1,6 @@
 import { Flex, Heading, Container } from '@chakra-ui/react';
 
-import { AddProject } from '~/features/project';
+import { AddProjectButton } from '~/features/project';
 import { Login } from '~/features/user';
 
 import { DummyProject } from '~/entities/dummy';
@@ -13,7 +13,7 @@ export const NotAuthProjectsPage = () => {
           Проекты
         </Heading>
         <Flex gap={4} alignItems="baseline">
-          <AddProject />
+          <AddProjectButton />
         </Flex>
       </Flex>
       <DummyProject />

src/pages/projects/ui/ProjectBase.tsx

@@ -20,9 +20,12 @@ import { useEffect, useState } from 'react';
 import { FiChevronRight } from 'react-icons/fi';
 import { Link, generatePath } from 'react-router-dom';
 
-import { RequestParticipant, Requests } from '~/widgets/project';
-
-import { useUpdateParticipant, useUpdateProject } from '~/features/project';
+import {
+  RequestParticipant,
+  Requests,
+  useUpdateParticipant,
+  useUpdateProject,
+} from '~/features/project';
 
 import {
   Avatar,

src/pages/projects/ui/ProjectsBase.tsx

@@ -4,7 +4,7 @@ import { Link, generatePath } from 'react-router-dom';
 
 import { ProjectCard } from '~/widgets/project-card';
 
-import { AddProject } from '~/features/project';
+import { AddProjectButton } from '~/features/project';
 
 import { DummyProject } from '~/entities/dummy';
 import { AvatarsGroup, useGetAllProjects } from '~/entities/project';
@@ -50,7 +50,7 @@ export const ProjectsBase = ({ userId }: ProjectPageProps) => {
           Проекты
         </Heading>
         <Flex gap={4} alignItems="baseline">
-          <AddProject />
+          <AddProjectButton />
         </Flex>
       </Flex>
 

src/pages/projects/ui/ProjectsPage.desktop.tsx

@@ -2,7 +2,7 @@ import { Flex, SimpleGrid, Heading } from '@chakra-ui/react';
 
 import { ProjectCard } from '~/widgets/project-card';
 
-import { AddProject } from '~/features/project';
+import { AddProjectButton } from '~/features/project';
 
 import { AvatarsGroup } from '~/entities/project';
 
@@ -25,7 +25,7 @@ export const ProjectsPageDesktop = () => {
             Проекты
           </Heading>
           <Flex gap={4} alignItems="baseline">
-            <AddProject />
+            <AddProjectButton />
           </Flex>
         </Flex>
         <SimpleGrid

src/pages/search/api/useGetAllPositions.tsx

@@ -1,5 +1,8 @@
-import type { QueryFunctionContext, QueryKey } from '@tanstack/react-query';
-import { useInfiniteQuery } from '@tanstack/react-query';
+import {
+  useInfiniteQuery,
+  type QueryFunctionContext,
+  type QueryKey,
+} from '@tanstack/react-query';
 
 import { api } from '~/shared/api';
 import type { SelectOptions } from '~/shared/types';

src/pages/search/ui/SearchPage.tsx

@@ -11,10 +11,9 @@ import { useQuery } from '@tanstack/react-query';
 import React, { useEffect, useRef, useState } from 'react';
 import { Link, generatePath } from 'react-router-dom';
 
-import { FilterUser } from '~/widgets/project';
 import { ProjectCard } from '~/widgets/project-card';
 
-import { SearchProject } from '~/features/project';
+import { FilterUser, SearchProject } from '~/features/project';
 
 import { DummyNotFound } from '~/entities/dummy';
 import { useFilterStore } from '~/entities/project';