This repository has been archived by the owner on Apr 14, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: страница поиска и страница позиции (#71)
- Loading branch information
1 parent
7101cb5
commit d11db20
Showing
27 changed files
with
613 additions
and
162 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
import { Image } from '@chakra-ui/react'; | ||
|
||
import { useApi } from '~/shared/hooks'; | ||
|
||
import placeholderAvatar from './placeholder-project-avatar.jpg'; | ||
|
||
interface AvatarProps { | ||
projectId: string; | ||
} | ||
|
||
export const Avatar = ({ projectId }: AvatarProps) => { | ||
const { projectsApi } = useApi(); | ||
return ( | ||
<Image | ||
src={projectsApi.getProjectAvatar(projectId)} | ||
fallbackSrc={placeholderAvatar} | ||
height={32} | ||
objectFit="cover" | ||
/> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export * from './Avatar'; |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,72 @@ | ||
import { Heading, Stack } from '@chakra-ui/layout'; | ||
import { Skeleton } from '@chakra-ui/react'; | ||
import { useQuery } from '@tanstack/react-query'; | ||
|
||
import { useApi } from '~/shared/hooks'; | ||
import { STag } from '~/shared/ui/STag'; | ||
import { Status } from '~/shared/ui/status'; | ||
|
||
import { Card } from '../card'; | ||
|
||
interface Project { | ||
deadline: string | null; | ||
status: string; | ||
id: string; | ||
name: string; | ||
description: string | null; | ||
owner_id: string; | ||
startline: string; | ||
created_at: string; | ||
updated_at: string; | ||
} | ||
|
||
interface ProjectInfoProps { | ||
spec: string; | ||
skills: string[]; | ||
project: Project; | ||
} | ||
|
||
export const PositionInfo = ({ spec, skills, project }: ProjectInfoProps) => { | ||
const { storageApi } = useApi(); | ||
const { data: allSkills, isSuccess: loadedSkills } = useQuery({ | ||
queryKey: ['skills'], | ||
queryFn: () => storageApi.getSkills(), | ||
staleTime: Infinity, | ||
}); | ||
|
||
const { data: allSpecs, isSuccess: loadedSpecs } = useQuery({ | ||
queryKey: ['specs'], | ||
queryFn: () => storageApi.getSpecs(), | ||
}); | ||
|
||
const isLoaded = loadedSkills && loadedSpecs; | ||
|
||
const mainTag = allSpecs?.data | ||
.filter(({ id }) => id === spec) | ||
.map(({ name }) => (name ? name : '')); | ||
|
||
const tags = allSkills | ||
?.filter(({ value }) => skills.includes(value)) | ||
.map(({ label }) => label); | ||
|
||
return ( | ||
<> | ||
<Stack gap={0} mb={3} alignItems="start"> | ||
<Status mb={3}>{project.status}</Status> | ||
<Card | ||
title={project.name} | ||
date={project.startline} | ||
description={project.description} | ||
fullDescription={true} | ||
/> | ||
</Stack> | ||
|
||
<Stack gap={0} mb={6}> | ||
<Heading variant="h2">В проект требуется</Heading> | ||
<Skeleton isLoaded={isLoaded} borderRadius="2xl" fadeDuration={2}> | ||
<STag mainTags={mainTag} tags={tags} /> | ||
</Skeleton> | ||
</Stack> | ||
</> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export * from './PositionInfo'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,113 @@ | ||
import { | ||
Container, | ||
Flex, | ||
Heading, | ||
Button, | ||
Card as ChakraCard, | ||
CardBody, | ||
Skeleton, | ||
Portal, | ||
} from '@chakra-ui/react'; | ||
import { useQuery } from '@tanstack/react-query'; | ||
|
||
import { Avatar, Contacts, PositionInfo } from '~/entities/project'; | ||
|
||
import { useApi, useAuth, useIsMobile, useLayoutRefs } from '~/shared/hooks'; | ||
import { GoBack } from '~/shared/ui/GoBack'; | ||
|
||
interface ProjectBase { | ||
positionId: string; | ||
} | ||
|
||
export const Position = ({ positionId }: ProjectBase) => { | ||
const layout = useLayoutRefs(); | ||
const { userId, isAuth } = useAuth(); | ||
const { projectsApi, userApi } = useApi(); | ||
const isMobile = useIsMobile(); | ||
|
||
const { data: position, isSuccess: loadedPosition } = useQuery({ | ||
queryKey: ['getPosition', positionId], | ||
queryFn: () => projectsApi.getPosition(positionId), | ||
staleTime: Infinity, | ||
}); | ||
|
||
const userIsOwner = isAuth && loadedPosition && userId !== position.project.owner_id; | ||
|
||
return ( | ||
<Container maxW="md" display="flex" flexDirection="column"> | ||
<Flex | ||
position="sticky" | ||
bg="bg" | ||
zIndex={3} | ||
top={0} | ||
alignItems="center" | ||
justifyContent="space-between" | ||
py={4} | ||
> | ||
<Flex alignItems="center"> | ||
<GoBack /> | ||
<Heading variant="h2" mb={0}> | ||
Проект | ||
</Heading> | ||
</Flex> | ||
</Flex> | ||
{!loadedPosition ? ( | ||
<Skeleton | ||
isLoaded={loadedPosition} | ||
borderRadius="2xl" | ||
fadeDuration={2} | ||
height="550px" | ||
/> | ||
) : ( | ||
<ChakraCard | ||
bg="white" | ||
borderRadius="2xl" | ||
overflow="hidden" | ||
boxShadow="none" | ||
alignContent="center" | ||
> | ||
<Avatar projectId={position.project.id} /> | ||
<CardBody padding={isMobile ? 5 : 6}> | ||
<PositionInfo | ||
spec={position.specialization_id} | ||
skills={position.skills} | ||
project={position.project} | ||
/> | ||
<Contacts ownerId={position.project.owner_id} /> | ||
</CardBody> | ||
</ChakraCard> | ||
)} | ||
{layout?.footer && ( | ||
<Portal containerRef={layout.footer}> | ||
<Container py={2} maxW="md"> | ||
{userIsOwner && ( | ||
<Button | ||
type="button" | ||
onClick={() => { | ||
// handleTabsChange(1); | ||
}} | ||
fontSize="sm" | ||
fontWeight="600" | ||
w="full" | ||
> | ||
Откликнуться | ||
</Button> | ||
)} | ||
{!isAuth && ( | ||
<Button | ||
type="button" | ||
as="a" | ||
href={userApi.authURL} | ||
fontSize="sm" | ||
fontWeight="600" | ||
w="full" | ||
> | ||
Зарегистрироваться | ||
</Button> | ||
)} | ||
</Container> | ||
</Portal> | ||
)} | ||
</Container> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import { Navigate, useParams } from 'react-router-dom'; | ||
|
||
import { PATHS } from '~/shared/lib/router'; | ||
|
||
import { Position } from './Position'; | ||
|
||
export const PositionPage = () => { | ||
const { id: positionId } = useParams(); | ||
|
||
return !positionId ? ( | ||
<Navigate to={PATHS.notFound} replace /> | ||
) : ( | ||
<Position positionId={positionId} /> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
export * from './Position'; | ||
export * from './PositionPage'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import { QueryFunctionContext, QueryKey, useInfiniteQuery } from '@tanstack/react-query'; | ||
|
||
import { api } from '~/shared/contexts'; | ||
|
||
export const useGetAllProjects = (userId: string) => | ||
useInfiniteQuery({ | ||
queryKey: ['getAllProjects', userId], | ||
queryFn: ({ pageParam = 1 }: QueryFunctionContext<QueryKey, number>) => | ||
api.projectsApi.getAllProjects({ page: pageParam, owner_id: userId }), | ||
getNextPageParam: (lastPage) => | ||
lastPage.page < lastPage.total_pages ? lastPage.page + 1 : undefined, | ||
staleTime: 5000, | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.