diff --git a/frontend/app/task-detail/[id]/page.module.css b/frontend/app/task-detail/[id]/page.module.css index bcbe8cb..1099518 100644 --- a/frontend/app/task-detail/[id]/page.module.css +++ b/frontend/app/task-detail/[id]/page.module.css @@ -1,19 +1,45 @@ .taskDetail { - padding: 16px; + display: flex; + flex-flow: column; + padding: 16px; + row-gap: 24px; } -.taskNumber { - margin-bottom: 8px; +.title { + text-align: center; } -.title { - margin-bottom: 12px; +.traitsWrapper { + display: grid; + align-items: center; + padding: 10px; + border-radius: 16px; + grid-template-columns: repeat(2, 1fr); + grid-row-gap: 12px; + + .linkIcon { + display: inline-block; + margin-left: 8px; + } } -.taskTitle { - margin-bottom: 4px; +.offersWrapper { + display: flex; + flex-flow: column; + border-radius: 16px; + row-gap: 12px; } -.taskDescription { - margin-bottom: 8px; -} \ No newline at end of file +.offerItem { + display: flex; + align-items: center; + padding: 10px; + column-gap: 12px; +} + +.offerButton { + &[disabled] { + opacity: 0.5; + background-color: var(--mui-palette-primary-main); + } +} diff --git a/frontend/app/task-detail/[id]/page.tsx b/frontend/app/task-detail/[id]/page.tsx index 4aad464..5074d74 100644 --- a/frontend/app/task-detail/[id]/page.tsx +++ b/frontend/app/task-detail/[id]/page.tsx @@ -2,34 +2,30 @@ import styles from './page.module.css'; import { + Button, ImageList, ImageListItem, - Typography, - Button, - Box, List, - ListItem, ListItemText, - ListItemButton, + Paper, + Typography, } from '@mui/material'; -// import { taskDetailData } from '@/tests/mockData'; import { useEffect, useState } from 'react'; +import linkIcon from '@/public/images/link-icon.svg'; import { - getTask, - getRevokeMessage, - getCompleteMessage, - getGetJobMessage, getChooseDoerMessage, + getCompleteMessage, getConfirmMessage, + getGetJobMessage, + getRevokeMessage, + getTask, } from '@/services/api'; -import { ITaskDetail, EBottomButtonType } from './types'; +import { EBottomButtonType, ITaskDetail } from './types'; import { ETaskStatus } from '@/services/types'; -import { - TonConnect, - useTonAddress, - useTonConnectUI, -} from '@tonconnect/ui-react'; +import { useTonConnectUI } from '@tonconnect/ui-react'; import { useTelegram } from '@/providers/TelegramContext'; +import Link from 'next/link'; +import Image from 'next/image'; interface IProps { params: { @@ -37,36 +33,51 @@ interface IProps { }; } -export default function Page(props: IProps) { - // function handleClick({ target }) { - // if (!document.fullscreenEnabled) { - // target.requestFullscreen().catch((err) => console.log(err)); - // } else { - // document.exitFullscreen().catch((err) => console.log(err)); - // } - // } - const [tonConnectUI, setOptions] = useTonConnectUI(); - const { telegramApp, isLoading } = useTelegram(); +export default function Page({ params: { id } }: IProps) { + const [tonConnectUI] = useTonConnectUI(); + const [taskDetailData, setTaskDetailData] = useState( + {} as ITaskDetail, + ); + const { telegramApp } = useTelegram(); + + const { + title, + currency, + price, + status, + deadline, + description, + job_offer, + poster_id, + task_id, + } = taskDetailData; + + useEffect(() => { + (async () => { + const taskDetailData = await getTask(id); + setTaskDetailData(taskDetailData); + })(); + }, [id]); async function getMessage(type: EBottomButtonType) { let message; - if (telegramApp?.WebApp?.initDataUnsafe?.user?.id) - if (type == EBottomButtonType.REVOKE) { + if (telegramApp?.WebApp.initDataUnsafe.user?.id) + if (type === EBottomButtonType.REVOKE) { message = await getRevokeMessage({ task_id: taskDetailData.task_id, action_by_user: telegramApp.WebApp.initDataUnsafe.user.id, }); - } else if (type == EBottomButtonType.COMPLETE) { + } else if (type === EBottomButtonType.COMPLETE) { message = await getCompleteMessage({ task_id: taskDetailData.task_id, action_by_user: telegramApp.WebApp.initDataUnsafe.user.id, }); - } else if (type == EBottomButtonType.GET_JOB) { + } else if (type === EBottomButtonType.GET_JOB) { message = await getGetJobMessage({ task_id: taskDetailData.task_id, action_by_user: telegramApp.WebApp.initDataUnsafe.user.id, }); - } else if (type == EBottomButtonType.CONFIRM) { + } else if (type === EBottomButtonType.CONFIRM) { message = await getConfirmMessage({ task_id: taskDetailData.task_id, action_by_user: telegramApp.WebApp.initDataUnsafe.user.id, @@ -78,22 +89,13 @@ export default function Page(props: IProps) { await tonConnectUI.sendTransaction(message); } - const [taskDetailData, setTaskDetailData] = useState( - {} as ITaskDetail, - ); - useEffect(() => { - (async () => { - const taskDetailData = await getTask(props.params.id); - setTaskDetailData(taskDetailData); - })(); - }, []); - let bottom_button = null; - if (telegramApp?.WebApp?.initDataUnsafe?.user?.id) { + if (telegramApp?.WebApp.initDataUnsafe.user?.id) { + console.log('tut'); if ( - taskDetailData.poster_id == - telegramApp?.WebApp?.initDataUnsafe?.user?.id && - taskDetailData.status == ETaskStatus.PUBLISHED + taskDetailData.poster_id === + telegramApp?.WebApp.initDataUnsafe.user?.id && + taskDetailData.status === ETaskStatus.PUBLISHED ) { bottom_button = ( - - )) - : null - : null} + + {job_offer?.vacancies?.length ? ( + job_offer.vacancies.map(({ doer }) => ( + + + + + )) + ) : ( + No offers yet + )} - {/* - {taskDetailData.images.map((item) => ( - - - - ))} - */} {images} {bottom_button} diff --git a/frontend/app/task-detail/[id]/types.ts b/frontend/app/task-detail/[id]/types.ts index 6e98b78..f8ef9d8 100644 --- a/frontend/app/task-detail/[id]/types.ts +++ b/frontend/app/task-detail/[id]/types.ts @@ -1,5 +1,11 @@ import { ETaskStatus } from '@/services/types'; +export interface ITaskDetailProps { + params: { + id: number; + }; +} + export interface ITaskDetail { task_id: number; title: string; @@ -16,6 +22,8 @@ export interface ITaskDetail { } export interface IJobOffer { + job_offer_address: string; + job_offer_url: string; vacancies: IDoer[] | null; } diff --git a/frontend/public/images/link-icon.svg b/frontend/public/images/link-icon.svg new file mode 100644 index 0000000..685342d --- /dev/null +++ b/frontend/public/images/link-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/services/api.ts b/frontend/services/api.ts index 64f6556..184ee70 100644 --- a/frontend/services/api.ts +++ b/frontend/services/api.ts @@ -1,14 +1,14 @@ import { AddUserWalletParams, + CreateTaskParams, + CreateUserParams, EditUserParams, ETaskStatus, + getChooseDoerMessageParams, + getConfirmMessageParams, + getMessageParams, ICategoryRaw, ITaskRaw, - CreateTaskParams, - CreateUserParams, - getMessageParams, - getConfirmMessageParams, - getChooseDoerMessageParams } from '@/services/types'; const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL; @@ -31,10 +31,6 @@ export async function getUser(id: number) { } catch (error) { return {}; } - - - - } export async function createUser(params: CreateUserParams) { @@ -115,7 +111,6 @@ export async function getTask(id: number) { } export async function getUserTasks(id: number) { - const res = await fetch(`${BASE_URL}/v1/task/${id}/tasks`); if (!res.ok) {