Merge pull request #15 from MarkMelior/feature/VEES-22-view-post-vees

VEES-22 | Страница просмотра тренировки

Author: MarkMelior

persist-storage/get-vees-by-id.response.ts

@@ -0,0 +1,7 @@
+import { veesResponse } from './vees.response';
+
+export const getVeesByIdResponse = async (id: string) => {
+  const veesList = await veesResponse();
+
+  return veesList?.find((vees) => vees.id === id);
+};

persist-storage/mock/VEES_ACTIVE.ts

@@ -1,6 +1,6 @@
-import type { IVeesDto } from '@/entities/vees';
+import type { IVeesDto } from '@/shared/types';
 
-export const VEES_ACTIVE: IVeesDto = {
+export const VEES_ACTIVE: Omit<IVeesDto, 'id'> = {
   duration: {
     from: '2025-01-12T10:00:00',
     to: '2025-01-12T11:00:00',

persist-storage/mock/VEES_LIST.ts

@@ -1,4 +1,4 @@
-import type { IVeesDto } from '@/entities/vees';
+import type { IVeesDto } from '@/shared/types';
 
 export const VEES_LIST: IVeesDto[] = [
   {
@@ -17,6 +17,7 @@ export const VEES_LIST: IVeesDto[] = [
       },
     ],
     exerciseTemplateId: 'template-saturday',
+    id: 'c3dce3ed-cedf-4d1f-b907-927e24314f02',
   },
   {
     duration: {
@@ -34,6 +35,7 @@ export const VEES_LIST: IVeesDto[] = [
       },
     ],
     exerciseTemplateId: 'template-tuesday',
+    id: 'd3dce3ed-cedf-4d1f-b907-927e24314f02',
   },
   {
     duration: {
@@ -51,6 +53,7 @@ export const VEES_LIST: IVeesDto[] = [
       },
     ],
     exerciseTemplateId: 'template-saturday',
+    id: '7e040e20-61e0-4c2c-818a-192df8fc2cae',
   },
   {
     duration: {
@@ -68,6 +71,7 @@ export const VEES_LIST: IVeesDto[] = [
       },
     ],
     exerciseTemplateId: 'template-saturday',
+    id: '9ae9be94-3514-487a-920f-802d2a76f804',
   },
   {
     duration: {
@@ -88,6 +92,7 @@ export const VEES_LIST: IVeesDto[] = [
       },
     ],
     exerciseTemplateId: 'template-tuesday',
+    id: '64f5d700-2ae9-4f53-8d9c-43fe90f63d32',
   },
   {
     duration: {
@@ -108,5 +113,6 @@ export const VEES_LIST: IVeesDto[] = [
       },
     ],
     exerciseTemplateId: 'template-tuesday',
+    id: '64f5d700-2ae9-4f53-8d9c-43fe90f63d33',
   },
 ];

persist-storage/save-vees-active.request.ts

@@ -1,18 +1,23 @@
 import localforage from 'localforage';
+import { nanoid } from 'nanoid';
 
 import { StorageKey } from '@/shared/constants';
-
-import type { IVeesDto } from '@/entities/vees';
+import type { IVeesDto } from '@/shared/types';
 
 import { removeVeesActiveRequest } from './remove-vees-active.request';
 import { veesListResponse } from './vees-list.response';
 
-export const saveVeesActiveRequest = async (payload: IVeesDto) => {
+export const saveVeesActiveRequest = async (payload: Omit<IVeesDto, 'id'>) => {
   const veesList
     = await localforage.getItem<IVeesDto[]>(StorageKey.VEES_LIST) ?? [];
 
+  const payloadWithId = {
+    ...payload,
+    id: nanoid(),
+  };
+
   await removeVeesActiveRequest();
-  await localforage.setItem<IVeesDto[]>(StorageKey.VEES_LIST, [...veesList, payload]);
+  await localforage.setItem<IVeesDto[]>(StorageKey.VEES_LIST, [...veesList, payloadWithId]);
 
   return await veesListResponse();
 };

persist-storage/utils/vees.utils.ts

@@ -1,6 +1,7 @@
+import type { IVeesDto, IVeesResponse } from '@/shared/types';
+
 import type { IExerciseGroupsDto } from '@/entities/exercise-groups';
 import type { IExerciseTemplatesDto } from '@/entities/exercise-templates';
-import type { IVeesDto, IVeesResponse } from '@/entities/vees';
 
 export const createExerciseGroupsMap = (
   exerciseGroups: IExerciseGroupsDto[],

persist-storage/vees-active.response.ts

@@ -1,10 +1,10 @@
 import localforage from 'localforage';
 
 import { StorageKey } from '@/shared/constants';
+import type { IVeesDto, IVeesResponse } from '@/shared/types';
 
 import type { IExerciseGroupsDto } from '@/entities/exercise-groups';
 import type { IExerciseTemplatesDto } from '@/entities/exercise-templates';
-import type { IVeesDto, IVeesResponse } from '@/entities/vees';
 
 import {
   createExerciseGroupsMap,
@@ -39,6 +39,7 @@ export const veesActiveResponse = async (): Promise<IVeesResponse | null> => {
       exerciseGroupsMap,
       0,
     ),
+    id: veesActive.id,
     number: 1,
   };
 };

persist-storage/vees-list.response.ts

@@ -1,6 +1,5 @@
 import { compareResults } from '@/shared/lib/compare-results';
-
-import type { IVeesListResponse, IVeesResponse } from '@/entities/vees';
+import type { IVeesListResponse, IVeesResponse } from '@/shared/types';
 
 import { veesResponse } from './vees.response';
 
@@ -10,6 +9,7 @@ const mapVeesResponseToList = (data: IVeesResponse): IVeesListResponse => ({
   duration: data.duration,
   exerciseCount: data.exercises.length, // Количество упражнений
   exerciseTemplate: data.exerciseTemplate, // Шаблон упражнения, если есть
+  id: data.id,
   number: data.number, // Номер тренировки
   resultDownCount: data.exercises.reduce(
     (sum, exercise) =>

persist-storage/vees.response.ts

@@ -1,10 +1,10 @@
 import localforage from 'localforage';
 
 import { StorageKey } from '@/shared/constants';
+import type { IVeesDto, IVeesResponse } from '@/shared/types';
 
 import type { IExerciseGroupsDto } from '@/entities/exercise-groups';
 import type { IExerciseTemplatesDto } from '@/entities/exercise-templates';
-import type { IVeesDto, IVeesResponse } from '@/entities/vees';
 
 import {
   createExerciseGroupsMap,
@@ -37,6 +37,7 @@ export const veesResponse = async (): Promise<IVeesResponse[] | null> => {
       exerciseGroupsMap,
       index,
     ),
+    id: vees.id,
     number: index + 1,
   })).reverse();
 };

src/app/(with-navbar)/client/index.tsx

@@ -11,7 +11,7 @@ import { Badge, Button, Flex, Layout, Separator } from '@/shared/ui';
 import { FiltersModal } from '@/features/FiltersModal';
 import { SortModal } from '@/features/SortModal';
 
-import { useVeesList } from '@/entities/vees';
+import { useVeesList } from '@/entities/vees-list';
 
 import styles from '../page.module.scss';
 

src/app/(with-navbar)/vees/[id]/client/index.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import { useEffect } from 'react';
+
+import { Card } from '@/widgets/Card';
+import { Headers } from '@/widgets/Headers';
+
+import { PaperOutlineIcon, StopwatchOutlineIcon } from '@/shared/icons';
+import { getDateInfo, getDateRangeDuration } from '@/shared/lib/date';
+import { Alert, Chip, Layout, List, Separator, Skeleton } from '@/shared/ui';
+import { InfoBlock } from '@/shared/ui/client';
+
+import { useVees } from '@/entities/vees';
+
+interface IClientRender {
+  id: string
+}
+
+export const ClientRender = ({ id }: IClientRender) => {
+  const { dataVees, errorVees, loadingVees, onGetVeesById } = useVees();
+
+  useEffect(() => {
+    onGetVeesById(id);
+  }, []);
+
+  if (loadingVees) {
+    return (
+      <>
+        <Skeleton height={65} isAnimated={false} radius="none" />
+        <Separator size={18} />
+        <Layout>
+          <Skeleton height={216} />
+          <Separator size={32} />
+          <Skeleton.List />
+        </Layout>
+      </>
+    );
+  }
+
+  if (errorVees) {
+    return (
+      <Alert
+        closable={false}
+        content="Ошибка загрузки тренировки!"
+        description={errorVees.message}
+        type="error"
+      />
+    );
+  }
+
+  if (!dataVees) {
+    return;
+  }
+
+  const {
+    duration,
+    exercises,
+    exerciseTemplate,
+    number,
+  } = dataVees;
+
+  const { hours: hoursFrom, minutes: minutesFrom } = getDateInfo(duration.from);
+  const { day, hours: hoursTo, minutes: minutesTo, monthName } = getDateInfo(duration.to);
+
+  const rangeDuration = getDateRangeDuration(duration.from, duration.to);
+
+  return (
+    <>
+      <Headers.VeesPost title={`${day} ${monthName}`} />
+      <main>
+        <Layout>
+          <InfoBlock>
+            <List.Item
+              description={`${hoursFrom}:${minutesFrom} - ${hoursTo}:${minutesTo}`}
+              icon={<StopwatchOutlineIcon />}
+              title="Длительность тренировки"
+              value={rangeDuration}
+            />
+            <List.Item
+              icon={<PaperOutlineIcon />}
+              title="Шаблон тренировки"
+              value={(
+                <Chip.Category
+                  className="mt-1"
+                  customColor={exerciseTemplate?.color}
+                  isEdited={true}
+                  name={exerciseTemplate?.name ?? 'Пользовательская тренировка'}
+                  number={exerciseTemplate?.number}
+                  size="medium"
+                />
+              )}
+            />
+            <List.Horizontal
+              items={[
+                { title: 'Тренировка №', value: number },
+                { title: 'Упражнений', value: exercises.length },
+              ]}
+              showDivider={false}
+            />
+          </InfoBlock>
+        </Layout>
+        <Separator size={32} />
+        <Layout padding={false}>
+          <Card.VeesList isEditable={false} items={exercises} />
+        </Layout>
+      </main>
+    </>
+  );
+};

src/app/(with-navbar)/vees/[id]/page.tsx

@@ -0,0 +1,13 @@
+import { ClientRender } from './client';
+
+interface IVeesPost {
+  params: Promise<{ id: string }>
+}
+
+const VeesPost = async ({ params }: IVeesPost) => {
+  const id = (await params).id;
+
+  return <ClientRender id={id} />;
+};
+
+export default VeesPost;

src/app/initial-provider.tsx

@@ -2,18 +2,27 @@
 
 import { useEffect } from 'react';
 
-import { useVeesActive } from '@/entities/vees';
+import { useTimer } from '@/features/Timer/client';
+
+import { useVeesActive } from '@/entities/vees-active';
 
 interface IInitialProvider {
   children: React.ReactNode
 }
 
 export const InitialProvider = ({ children }: IInitialProvider) => {
   const { loadVeesActive } = useVeesActive();
+  const { initializeAudio, resetTimer } = useTimer();
 
   useEffect(() => {
     loadVeesActive();
   }, []);
 
+  useEffect(() => {
+    initializeAudio();
+
+    return () => resetTimer();
+  }, []);
+
   return children;
 };

src/widgets/Card/ui/VeesList/client/finishAndSaveButton.module.scss renamed to src/app/vees/client/index.module.scss

@@ -1,16 +1,26 @@
 'use client';
 
+import { redirect } from 'next/navigation';
+
 import { Card } from '@/widgets/Card';
 
-import { PaperOutlineIcon, StopwatchOutlineIcon } from '@/shared/icons';
+import { AppRoutes } from '@/shared/constants';
+import { FinishOutlineIcon, PaperOutlineIcon, StopwatchOutlineIcon } from '@/shared/icons';
 import { getDateInfo, getDateRangeDuration } from '@/shared/lib/date';
 import { Alert, Button, Chip, Empty, Layout, List, Separator, Skeleton } from '@/shared/ui';
 import { InfoBlock } from '@/shared/ui/client';
 
-import { useVeesActive } from '@/entities/vees';
+import { useVeesActive } from '@/entities/vees-active';
+
+import styles from './index.module.scss';
 
 export const ClientRender = () => {
-  const { dataVeesActive, errorVeesActive, loadingVeesActive } = useVeesActive();
+  const {
+    completeWithSave,
+    dataVeesActive,
+    errorVeesActive,
+    loadingVeesActive,
+  } = useVeesActive();
 
   if (loadingVeesActive) {
     return (
@@ -92,6 +102,18 @@ export const ClientRender = () => {
       <Separator size={32} />
       <Layout padding={false}>
         <Card.VeesList items={exercises} />
+        <Separator size={32} />
+        <Button
+          className={styles.button}
+          icon={<FinishOutlineIcon height={22} width={22} />}
+          onClick={() => {
+            completeWithSave();
+            redirect(AppRoutes.MAIN);
+          }}
+          variant="none"
+        >
+          Завершить и сохранить
+        </Button>
       </Layout>
     </>
   );

src/app/vees/client/index.tsx

@@ -0,0 +1,3 @@
+export * from './get-vees-active';
+export * from './remove-vees-active';
+export * from './save-vees-active';

src/entities/vees/api/get-vees-active.ts renamed to src/entities/vees-active/api/get-vees-active.ts

@@ -0,0 +1,10 @@
+import type { IVeesDto, IVeesListResponse } from '@/shared/types';
+
+import { saveVeesActiveRequest } from '@/persist-storage/save-vees-active.request';
+
+export const saveVeesActive = async (
+  payload: Omit<IVeesDto, 'id'>,
+): Promise<IVeesListResponse[] | null> => (
+  // POST /vees/save-active
+  await saveVeesActiveRequest(payload)
+);

src/entities/vees-active/api/index.ts

@@ -0,0 +1 @@
+export { useVeesActive } from './store';