rename AddTimeRange -> EditableTimeRangeForm & refactor

apps/web/components/schedule/components/slot-time.tsx

@@ -1,64 +1,28 @@
+/* eslint-disable react/jsx-no-bind */
 'use client';
 import { ScheduleTimeContext } from '../context';
 import { type SlotComponentProps } from '../types';
-import { AddTimeRange, ReadonlyTimeRange } from './time-range';
+import { EditableTimeRangeForm, ReadonlyTimeRange } from './time-range';
 import { useSlotMutation, useSlotQuery } from '@/hooks/slots';
 import { Button } from '@repo/ui/components/ui/button';
 import { PencilLine } from 'lucide-react';
 import { use, useEffect } from 'react';
 
 export function SlotTime(props: Readonly<SlotComponentProps>) {
-  return (
-    <div className="flex items-center gap-2">
-      <Time {...props} />
-      <EditSaveButton {...props} />
-    </div>
-  );
+  const { editMode } = use(ScheduleTimeContext);
+
+  return editMode ? <SlotTimeEditForm {...props} /> : <SlotTimeReadonly {...props} />;
 }
 
-function EditSaveButton({ documentId }: Readonly<SlotComponentProps>) {
-  const { editMode, endTime, resetTime, setEditMode, startTime } = use(ScheduleTimeContext);
-  const { mutate: updateSlot } = useSlotMutation({ documentId });
+function SlotTimeEditForm({ documentId }: Readonly<SlotComponentProps>) {
+  const { editMode, endTime, resetTime, setEditMode, setEndTime, setStartTime, startTime } =
+    use(ScheduleTimeContext);
+  const { isPending: isMutationPending, mutate: updateSlot } = useSlotMutation({ documentId });
 
-  const { data } = useSlotQuery({ documentId });
+  const { data, isPending: isQueryPending } = useSlotQuery({ documentId });
   const slot = data?.data?.slot;
 
-  if (editMode) {
-    function handleOnSave() {
-      updateSlot({ data: { time_end: endTime, time_start: startTime }, documentId });
-      resetTime();
-      setEditMode(false);
-    }
-
-    return (
-      <Button className="rounded-full text-xs" onClick={() => handleOnSave()}>
-        Сохранить
-      </Button>
-    );
-  }
-
-  const hasOrders = Boolean(slot?.orders.length);
-
-  return (
-    <Button
-      className="rounded-full text-xs"
-      disabled={hasOrders}
-      onClick={() => setEditMode(true)}
-      size="icon"
-      variant="outline"
-    >
-      <PencilLine className="size-4" />
-    </Button>
-  );
-}
-
-function Time(props: Readonly<SlotComponentProps>) {
-  const { editMode, setEndTime, setStartTime } = use(ScheduleTimeContext);
-
-  const { data } = useSlotQuery(props);
-  const slot = data?.data?.slot;
-
-  const { isPending } = useSlotMutation(props);
+  const isPending = isMutationPending || isQueryPending;
 
   useEffect(() => {
     if (editMode) {
@@ -67,9 +31,43 @@ function Time(props: Readonly<SlotComponentProps>) {
     }
   }, [editMode, setEndTime, setStartTime, slot]);
 
+  function handleSubmit() {
+    updateSlot({ data: { time_end: endTime, time_start: startTime }, documentId });
+    resetTime();
+    setEditMode(false);
+  }
+
+  return (
+    <EditableTimeRangeForm disabled={isPending} onSubmit={handleSubmit}>
+      <Button className="rounded-full text-xs" disabled={isPending} onClick={() => handleSubmit()}>
+        Сохранить
+      </Button>
+    </EditableTimeRangeForm>
+  );
+}
+
+function SlotTimeReadonly(props: Readonly<SlotComponentProps>) {
+  const { setEditMode } = use(ScheduleTimeContext);
+
+  const { data } = useSlotQuery(props);
+  const slot = data?.data?.slot;
+
   if (!slot) return null;
 
-  if (editMode) return <AddTimeRange disabled={isPending} />;
+  const hasOrders = Boolean(slot?.orders.length);
 
-  return <ReadonlyTimeRange {...slot} className="text-3xl" />;
+  return (
+    <div className="flex items-center gap-2">
+      <ReadonlyTimeRange {...slot} className="text-3xl" />
+      <Button
+        className="rounded-full text-xs"
+        disabled={hasOrders}
+        onClick={() => setEditMode(true)}
+        size="icon"
+        variant="outline"
+      >
+        <PencilLine className="size-4" />
+      </Button>
+    </div>
+  );
 }

apps/web/components/schedule/components/time-range.tsx

@@ -3,10 +3,11 @@ import { ScheduleTimeContext } from '../context';
 import { formatTime } from '@/utils/date';
 import { Input } from '@repo/ui/components/ui/input';
 import { cn } from '@repo/ui/lib/utils';
-import { use } from 'react';
+import { type FormEvent, type PropsWithChildren, use } from 'react';
 
-type AddTimeRangeProps = {
+type EditableTimeRangeProps = {
   readonly disabled?: boolean;
+  readonly onSubmit: (event: FormEvent) => void;
 };
 
 type TimeRangeProps = {
@@ -16,11 +17,15 @@ type TimeRangeProps = {
   readonly time_start: string;
 };
 
-export function AddTimeRange({ disabled = false }: AddTimeRangeProps) {
+export function EditableTimeRangeForm({
+  children,
+  disabled = false,
+  onSubmit,
+}: PropsWithChildren<EditableTimeRangeProps>) {
   const { endTime, setEndTime, setStartTime, startTime } = use(ScheduleTimeContext);
 
   return (
-    <>
+    <form className="flex flex-row items-center gap-2" onSubmit={onSubmit}>
       <div className="flex-1">
         <Input
           className="rounded-xl"
@@ -43,7 +48,8 @@ export function AddTimeRange({ disabled = false }: AddTimeRangeProps) {
           value={endTime}
         />
       </div>
-    </>
+      {children}
+    </form>
   );
 }
 

apps/web/components/schedule/day-slot-add-form.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable canonical/id-match */
 'use client';
-import { AddTimeRange } from './components/time-range';
+import { EditableTimeRangeForm } from './components/time-range';
 import { ScheduleTimeContext, ScheduleTimeContextProvider } from './context';
 import { ScheduleContext } from '@/context/schedule';
 import { useSlotAdd } from '@/hooks/slots';
@@ -33,13 +33,12 @@ export const DaySlotAddForm = withContext(ScheduleTimeContextProvider)(function
 
   return (
     <div className="px-4">
-      <form className="grid grid-cols-[1fr_1fr_auto] items-center gap-2" onSubmit={handleSubmit}>
-        <AddTimeRange disabled={isPending} />
-        <Button className="rounded-full" type="submit">
+      <EditableTimeRangeForm disabled={isPending} onSubmit={handleSubmit}>
+        <Button className="rounded-full" disabled={isPending} type="submit">
           <PlusSquare className="mr-1 size-4" />
           Добавить
         </Button>
-      </form>
+      </EditableTimeRangeForm>
     </div>
   );
 });