add update mode param to edits

hikka-io · Mar 27, 2024 · 8fabc47 · 8fabc47
1 parent ab63cc8
commit 8fabc47
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 56 deletions.
diff --git a/app/(pages)/edit/[editId]/update/page.tsx b/app/(pages)/edit/[editId]/update/page.tsx
@@ -11,7 +11,7 @@ const Component = async ({ params: { editId } }: Props) => {
         <div className="flex flex-col gap-12">
             <EditView
                 editId={editId}
-                mode="edit"
+                mode="update"
             />
         </div>
     );

diff --git a/app/(pages)/edit/_components/edit-group.tsx b/app/(pages)/edit/_components/edit-group.tsx
@@ -3,19 +3,19 @@
 import { ChevronsUpDown } from 'lucide-react';
 import * as React from 'react';
 
+import H5 from '@/components/typography/h5';
 import { Button } from '@/components/ui/button';
 import {
     Collapsible,
     CollapsibleContent,
     CollapsibleTrigger,
 } from '@/components/ui/collapsible';
 import { getEditParamComponent } from '@/utils/editParamUtils';
-import H5 from '@/components/typography/h5';
 
 interface Props {
     title: string;
     params: Hikka.EditParam[];
-    mode: 'view' | 'edit';
+    mode: 'view' | 'edit' | 'update';
 }
 
 const Component = ({ title, params, mode }: Props) => {
@@ -30,7 +30,10 @@ const Component = ({ title, params, mode }: Props) => {
     };
 
     return (
-        <Collapsible open={mode === 'view' ? true : undefined} className="w-full space-y-2 rounded-lg border border-accent p-4">
+        <Collapsible
+            open={mode === 'view' || mode === 'update' ? true : undefined}
+            className="w-full space-y-2 rounded-lg border border-accent p-4"
+        >
             <CollapsibleTrigger asChild>
                 <div className="flex items-center justify-between">
                     <H5>{title}</H5>
@@ -47,34 +50,40 @@ const Component = ({ title, params, mode }: Props) => {
             </CollapsibleTrigger>
 
             <CollapsibleContent className="flex flex-col gap-6">
-                {mode === 'edit' && params.length > 1 && (
-                    <div className="flex flex-wrap gap-2">
-                        {params.map((param) => (
-                            <Button
-                                size="badge"
-                                variant={
-                                    selected.includes(param.slug)
-                                        ? 'default'
-                                        : 'outline'
-                                }
-                                key={param.slug}
-                                onClick={() => switchParam(param.slug)}
-                            >
-                                {param.title}
-                            </Button>
-                        ))}
-                    </div>
-                )}
+                {(mode === 'edit' || mode === 'update') &&
+                    params.length > 1 && (
+                        <div className="flex flex-wrap gap-2">
+                            {params.map((param) => (
+                                <Button
+                                    size="badge"
+                                    variant={
+                                        selected.includes(param.slug)
+                                            ? 'default'
+                                            : 'outline'
+                                    }
+                                    key={param.slug}
+                                    onClick={() => switchParam(param.slug)}
+                                >
+                                    {param.title}
+                                </Button>
+                            ))}
+                        </div>
+                    )}
                 {params.map((param) => {
-                    if (mode !== 'view' && params.length > 1 && !selected.includes(param.slug)) return null;
+                    if (
+                        mode !== 'view' &&
+                        params.length > 1 &&
+                        !selected.includes(param.slug)
+                    )
+                        return null;
 
                     const Component = getEditParamComponent(param.type);
 
                     return (
                         <Component
                             key={param.slug}
                             param={param}
-                            mode={mode}
+                            mode={mode === 'update' ? 'edit' : mode}
                         />
                     );
                 })}

diff --git a/app/(pages)/edit/_components/edit-view.tsx b/app/(pages)/edit/_components/edit-view.tsx
@@ -4,25 +4,18 @@ import * as React from 'react';
 import { useRef } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
-
-
 import { useRouter } from 'next/navigation';
 
-
-
 import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile';
 import { useQueryClient } from '@tanstack/react-query';
 
-
-
 import EditDescription from '@/app/(pages)/edit/_components/edit-description/edit-description';
 import EditGroup from '@/app/(pages)/edit/_components/edit-group';
 import AutoButton from '@/app/(pages)/edit/_components/ui/auto-button';
 import { Button } from '@/components/ui/button';
 import updateEdit from '@/services/api/edit/updateEdit';
 import useAuth from '@/services/hooks/auth/useAuth';
 import useEdit from '@/services/hooks/edit/useEdit';
-
 import {
     getEditGroups,
     getEditParamSlugs,
@@ -37,7 +30,7 @@ type FormValues = Record<string, unknown> & {
 };
 
 interface EditProps {
-    mode?: 'view' | 'edit';
+    mode?: 'view' | 'edit' | 'update';
     editId: string;
 }
 
@@ -114,33 +107,34 @@ const Component = ({ editId, mode = 'view' }: EditProps) => {
                         />
                     ))}
 
-                    <EditDescription mode={mode} />
+                    <EditDescription mode={mode === 'update' ? 'edit' : mode} />
                 </div>
-                {mode === 'edit' && (
-                    <div className="flex w-full flex-col gap-4">
-                        <Turnstile
-                            ref={captchaRef}
-                            siteKey="0x4AAAAAAANXs8kaCqjo_FLF"
-                        />
-                        <div className="flex items-center gap-2">
-                            <Button
-                                disabled={form.formState.isSubmitting}
-                                onClick={form.handleSubmit(onSaveSubmit)}
-                                type="submit"
-                                className="w-fit"
-                            >
-                                {form.formState.isSubmitting && (
-                                    <span className="loading loading-spinner"></span>
-                                )}
-                                Оновити
-                            </Button>
-                            <AutoButton
-                                onSaveSubmit={onSaveSubmit}
-                                handleSubmit={form.handleSubmit}
+                {mode === 'edit' ||
+                    (mode === 'update' && (
+                        <div className="flex w-full flex-col gap-4">
+                            <Turnstile
+                                ref={captchaRef}
+                                siteKey="0x4AAAAAAANXs8kaCqjo_FLF"
                             />
+                            <div className="flex items-center gap-2">
+                                <Button
+                                    disabled={form.formState.isSubmitting}
+                                    onClick={form.handleSubmit(onSaveSubmit)}
+                                    type="submit"
+                                    className="w-fit"
+                                >
+                                    {form.formState.isSubmitting && (
+                                        <span className="loading loading-spinner"></span>
+                                    )}
+                                    Оновити
+                                </Button>
+                                <AutoButton
+                                    onSaveSubmit={onSaveSubmit}
+                                    handleSubmit={form.handleSubmit}
+                                />
+                            </div>
                         </div>
-                    </div>
-                )}
+                    ))}
             </form>
         </FormProvider>
     );