crud schedule

src/pages/schedule/Update.tsx

@@ -0,0 +1,101 @@
+import { type FC, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { useFormik } from 'formik';
+import * as Yup from 'yup';
+import { TickCircle } from 'iconsax-react';
+import { toast } from 'react-toastify';
+import Button from '@/components/Button';
+import ScheduleFormFields from './components/ScheduleFormFields';
+import { useGetSchedule, useUpdateSchedule } from './hooks/useScheduleData';
+import type { CreateScheduleType } from './types/Types';
+import { Pages } from '@/config/Pages';
+import type { ErrorType } from '@/helpers/types';
+import { extractErrorMessage } from '@/config/func';
+import PageLoading from '@/components/PageLoading';
+import { formatTimeToHHmm } from '@/helpers/utils';
+
+const UpdateSchedule: FC = () => {
+    const { id } = useParams<{ id: string }>();
+    const navigate = useNavigate();
+    const { data: scheduleData, isLoading } = useGetSchedule(id || '');
+    const { mutate: updateSchedule, isPending } = useUpdateSchedule();
+
+    const formik = useFormik<CreateScheduleType>({
+        initialValues: {
+            weekDay: 1,
+            openTime: '',
+            closeTime: '',
+            isActive: true,
+        },
+        validationSchema: Yup.object().shape({
+            weekDay: Yup.number()
+                .required('روز هفته الزامی است')
+                .min(0, 'روز هفته باید بین 1 تا 7 باشد')
+                .max(6, 'روز هفته باید بین 1 تا 7 باشد'),
+            openTime: Yup.string().required('زمان شروع الزامی است'),
+            closeTime: Yup.string().required('زمان پایان الزامی است'),
+            isActive: Yup.boolean(),
+        }),
+        enableReinitialize: true,
+        onSubmit: (values) => {
+            if (!id) return;
+            updateSchedule(
+                { id, params: values },
+                {
+                    onSuccess: () => {
+                        toast.success('زمانبندی با موفقیت ویرایش شد');
+                        navigate(Pages.schedule.list);
+                    },
+                    onError: (error: ErrorType) => {
+                        toast.error(extractErrorMessage(error));
+                    },
+                }
+            );
+        },
+    });
+
+    useEffect(() => {
+        if (scheduleData?.data) {
+            const schedule = scheduleData.data;
+            formik.setValues({
+                weekDay: schedule.weekDay,
+                openTime: formatTimeToHHmm(schedule.openTime),
+                closeTime: formatTimeToHHmm(schedule.closeTime),
+                isActive: schedule.isActive,
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [scheduleData]);
+
+    if (isLoading) {
+        return <PageLoading />;
+    }
+
+    return (
+        <div className='mt-5'>
+            <div className='flex w-full justify-between items-center'>
+                <div className='text-lg font-light'>
+                    ویرایش زمانبندی
+                </div>
+                <div>
+                    <Button
+                        className='px-5'
+                        onClick={() => formik.handleSubmit()}
+                        isLoading={isPending}
+                    >
+                        <div className='flex gap-2 items-center'>
+                            <TickCircle className='size-5' color='white' />
+                            <div>ثبت تغییرات</div>
+                        </div>
+                    </Button>
+                </div>
+            </div>
+
+            <div className='mt-6'>
+                <ScheduleFormFields formik={formik} />
+            </div>
+        </div>
+    );
+};
+
+export default UpdateSchedule;

src/pages/schedule/hooks/useScheduleData.ts

@@ -1,5 +1,6 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import * as api from "../service/ScheduleService";
+import type { CreateScheduleType } from "../types/Types";
 
 export const useGetSchedules = (params?: Record<string, unknown>) => {
   return useQuery({
@@ -27,3 +28,22 @@ export const useCreateSchedule = () => {
     },
   });
 };
+
+export const useUpdateSchedule = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, params }: { id: string; params: CreateScheduleType }) =>
+      api.updateSchedule(id, params),
+    onSuccess: (_, { id }) => {
+      queryClient.invalidateQueries({ queryKey: ["schedules"] });
+      queryClient.invalidateQueries({ queryKey: ["schedules", id] });
+    },
+  });
+};
+
+export const useGetSchedule = (id: string) => {
+  return useQuery({
+    queryKey: ["schedule", id],
+    queryFn: () => api.getSchedule(id),
+  });
+};

src/pages/schedule/service/ScheduleService.ts

@@ -2,6 +2,7 @@ import axios from "@/config/axios";
 import type {
   CreateScheduleType,
   GetSchedulesResponseType,
+  GetScheduleResponseType,
 } from "../types/Types";
 
 export const getSchedules = async (
@@ -22,3 +23,18 @@ export const createSchedule = async (params: CreateScheduleType) => {
   const { data } = await axios.post("/schedules", params);
   return data;
 };
+
+export const updateSchedule = async (
+  id: string,
+  params: CreateScheduleType
+) => {
+  const { data } = await axios.patch(`/schedules/${id}`, params);
+  return data;
+};
+
+export const getSchedule = async (
+  id: string
+): Promise<GetScheduleResponseType> => {
+  const { data } = await axios.get<GetScheduleResponseType>(`/schedules/${id}`);
+  return data;
+};

src/pages/schedule/types/Types.ts

@@ -5,6 +5,7 @@ export type Schedule = {
   createdAt: string;
   updatedAt: string;
   deletedAt: string | null;
+  weekDay: number;
   openTime: string;
   closeTime: string;
   isActive: boolean;
@@ -13,6 +14,8 @@ export type Schedule = {
 
 export type GetSchedulesResponseType = IResponse<Schedule[]>;
 
+export type GetScheduleResponseType = IResponse<Schedule>;
+
 export type CreateScheduleType = {
   weekDay: number;
   openTime: string;