Feat: add new project api (#61)

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

package.json

@@ -41,17 +41,20 @@
     "@emotion/styled": "^11.11.0",
     "@tanstack/react-query": "^4.35.3",
     "@types/lodash": "^4.14.200",
-    "axios": "^1.5.0",
+    "@types/uuid": "^9.0.7",
+    "axios": "^1.6.0",
     "chakra-react-select": "^4.7.6",
     "form-data": "^4.0.0",
     "framer-motion": "^10.16.4",
     "lodash": "^4.17.21",
+    "query-string": "^8.1.0",
     "react": "^18.2.0",
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.45.4",
     "react-icons": "^4.11.0",
     "react-router-dom": "^6.15.0",
+    "uuid": "^9.0.1",
     "zustand": "^4.4.1"
   },
   "devDependencies": {

src/app/providers/layout/AuthProvider.tsx

@@ -2,7 +2,7 @@ import { Flex } from '@chakra-ui/react';
 import { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 
-import { IsAuthResponse } from '~/shared/api';
+import { IsAuthResponse } from '~/shared/api/types';
 import { AuthContext, initAuth } from '~/shared/contexts';
 import { useApi } from '~/shared/hooks';
 import { Loader } from '~/shared/ui/Loader';

src/entities/project/api/index.ts

@@ -0,0 +1,5 @@
+export * from './useGetPositions';
+export * from './useGetPositionsSkills';
+export * from './useGetProject';
+export * from './useGetProjectAvatar';
+export * from './useGetUser';

src/entities/project/api/useGetPositions.tsx

@@ -0,0 +1,9 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { api } from '~/shared/contexts';
+
+export const useGetPositions = (projectId: string) =>
+  useQuery({
+    queryKey: ['getProjectPositions', projectId],
+    queryFn: () => api.projectsApi.getProjectPositions(projectId),
+  });

src/entities/project/api/useGetPositionsSkills.tsx

@@ -0,0 +1,19 @@
+import { useQueries } from '@tanstack/react-query';
+
+import { GetProjectPositionsData } from '~/shared/api/types';
+import { api } from '~/shared/contexts';
+
+export const useGetPositionsSkills = (
+  projectId: string,
+  projectPositions?: GetProjectPositionsData,
+) =>
+  useQueries({
+    queries: projectPositions
+      ? projectPositions.map(({ id }) => {
+          return {
+            queryKey: ['positionSkills', projectId, id],
+            queryFn: () => api.projectsApi.getPositionSkills(projectId, id),
+          };
+        })
+      : [],
+  });

src/entities/project/api/useGetProject.tsx

@@ -0,0 +1,9 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { api } from '~/shared/contexts';
+
+export const useGetProject = (projectId: string) =>
+  useQuery({
+    queryKey: ['getCurrentProject', projectId],
+    queryFn: () => api.projectsApi.getCurrentProject(projectId),
+  });

src/entities/project/api/useGetProjectAvatar.tsx

@@ -0,0 +1,9 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { api } from '~/shared/contexts';
+
+export const useGetProjectAvatar = (projectId: string) =>
+  useQuery({
+    queryKey: ['useGetProjectAvatar', projectId],
+    queryFn: () => api.projectsApi.getProjectAvatar(projectId),
+  });

src/entities/project/api/useGetUser.tsx

@@ -0,0 +1,9 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { api } from '~/shared/contexts';
+
+export const useGetUser = (userID: string) =>
+  useQuery({
+    queryKey: ['userID', userID],
+    queryFn: () => api.userApi.getUser(userID),
+  });

src/entities/project/contacts/Contacts.tsx

@@ -0,0 +1,30 @@
+import { Flex, Heading, Stack, Text } from '@chakra-ui/layout';
+import { Avatar, Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import { Rating } from '~/shared/ui/rating';
+
+import { useGetUser } from '../api';
+
+export const Contacts = ({ ownerId }: { ownerId: string }) => {
+  const { data: owner, isSuccess: loadedOwner } = useGetUser(ownerId);
+  return (
+    <>
+      <Heading variant="h2">Контакты</Heading>
+      <Skeleton isLoaded={loadedOwner} borderRadius="2xl" fadeDuration={2}>
+        <Flex alignItems="flex-start">
+          <Avatar src="" name={`${owner?.first_name} ${owner?.last_name}`} />
+          <Stack pl={2} gap={0}>
+            <Heading variant="h3">
+              {owner?.first_name} {owner?.last_name}
+            </Heading>
+            <Text variant="caption">Организатор</Text>
+          </Stack>
+          <Flex ml="auto">
+            <Rating />
+          </Flex>
+        </Flex>
+      </Skeleton>
+    </>
+  );
+};

src/entities/project/contacts/index.ts

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

src/entities/project/index.ts

@@ -1,2 +1,5 @@
 export * from './card';
+export * from './contacts';
 export * from './avatars-group';
+export * from './api';
+export * from './info';

src/entities/project/info/ProjectInfo.tsx

@@ -0,0 +1,71 @@
+import { Heading, Stack } from '@chakra-ui/layout';
+import { Skeleton } from '@chakra-ui/react';
+import React from 'react';
+
+import { GetSpecsData } from '~/shared/api';
+import { GetProjectPositionsData } from '~/shared/api/types';
+import { STag } from '~/shared/ui/STag';
+import { Status } from '~/shared/ui/status';
+
+import { Card } from '../card';
+
+interface Project {
+  deadline: string;
+  status: string;
+  id: string;
+  name: string;
+  description: string | null;
+  owner_id: string;
+  startline: string;
+  created_at: string;
+  updated_at: string;
+}
+
+interface ProjectInfoProps {
+  allSpecs?: GetSpecsData;
+  specs: string[];
+  skills: string[][];
+  project: Project;
+  positions?: GetProjectPositionsData;
+  ioadedPositions: boolean;
+}
+
+export const ProjectInfo = ({
+  allSpecs,
+  specs,
+  skills,
+  project,
+  positions,
+  ioadedPositions,
+}: ProjectInfoProps) => {
+  const filterMainTag = (positionId?: string) => {
+    const mainTag = allSpecs
+      ?.filter(({ id }) => id === positionId)
+      .map(({ name }) => name ?? '');
+    return mainTag;
+  };
+  return (
+    <>
+      <Stack gap={0} mb={3} alignItems="start">
+        <Status mb={['3', '4']}>{project.status}</Status>
+        <Card
+          title={project.name}
+          date={project.deadline}
+          description={project.description}
+          fullDescription={true}
+        />
+      </Stack>
+
+      <Stack gap={0} mb={6}>
+        <Heading variant="h2">В проект требуются</Heading>
+        <Skeleton isLoaded={ioadedPositions} borderRadius="2xl" fadeDuration={2}>
+          <Stack>
+            {positions?.map((_, i) => (
+              <STag key={i} mainTags={filterMainTag(specs[i])} tags={skills[i]} />
+            ))}
+          </Stack>
+        </Skeleton>
+      </Stack>
+    </>
+  );
+};

src/entities/project/info/index.ts

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