refactor uploading card and deck. But not finished yet

src/components/ModalsForTable/ModalAddEditDeck.tsx

@@ -2,6 +2,7 @@ import { ChangeEvent, useEffect, useRef, useState } from 'react'
 import { Controller, SubmitHandler, useForm } from 'react-hook-form'
 
 import ImageOutline from '@/assets/icons/svg/ImageOutline'
+import { handleToastInfo } from '@/common/consts/toastVariants'
 import { initCurrentPage } from '@/common/globalVariables'
 import Input from '@/components/ui/Input/Input'
 import Typography from '@/components/ui/Typography/Typography'
@@ -27,21 +28,19 @@ export const ModalAddEditDeck = (props: ModalAddEditProps) => {
   const { item, open, setOpen } = props
   const { clearQuery, setCurrentPageQuery } = useQueryParams()
   const schema = z.object({
-    isPrivate: z.boolean(),
-    name: item ? z.string().min(3).max(30) : z.string().min(3).max(30),
-    rememberMe: z.boolean().optional(),
+    isPrivate: z.boolean().optional(),
+    name: z.string().min(3).max(30),
   })
 
   type FormValues = z.infer<typeof schema>
-  // const [checked, setChecked] = useState(false)
   const [updateDeck] = useUpdateDeckMutation()
   const [createDeck] = useCreateDeckMutation()
   const [cover, setCover] = useState<File | null | undefined>(undefined)
   const initPreview = item ? item.cover ?? null : ''
   const [preview, setPreview] = useState<null | string>(initPreview)
   const refInputImg = useRef<HTMLInputElement>(null)
   const { control, handleSubmit } = useForm<FormValues>({
-    defaultValues: { isPrivate: false, name: '', rememberMe: true },
+    defaultValues: { isPrivate: false, name: '' },
     resolver: zodResolver(schema),
   })
 
@@ -75,6 +74,12 @@ export const ModalAddEditDeck = (props: ModalAddEditProps) => {
     e.target.value = ''
   }
   const onSubmit: SubmitHandler<FormValues> = async data => {
+    if (item && data.name === item.name) {
+      handleToastInfo('This name already exists, please choose another one', 3000)
+
+      return
+    }
+
     await (item ? updateDeck({ ...data, cover, id: item.id }) : createDeck({ ...data, cover }))
     clearQuery()
     setCurrentPageQuery(Number(initCurrentPage))
@@ -100,6 +105,7 @@ export const ModalAddEditDeck = (props: ModalAddEditProps) => {
           <FormTextfield
             className={s.input}
             control={control}
+            currentValue={item ? item?.name : ''}
             label={item ? 'Edit title' : 'Type new Deck name'}
             name={'name'}
           />
@@ -129,6 +135,7 @@ export const ModalAddEditDeck = (props: ModalAddEditProps) => {
                 name={'cover'}
                 onChange={handleInputImg}
                 ref={refInputImg}
+                style={{ display: 'none' }}
                 type={'file'}
               />
             </Button>

src/components/ModalsForTable/ModalEditCard/DataFiller/DataFiller.tsx

@@ -67,6 +67,7 @@ export const DataFiller = (props: DataFillerProps) => {
       <FormTextfield
         className={s.input}
         control={control}
+        currentValue={label === 'question' ? item?.question : item?.answer}
         label={item ? `Edit ${label}` : title}
         name={label}
       />
@@ -104,6 +105,7 @@ export const DataFiller = (props: DataFillerProps) => {
             name={'cover'}
             onChange={handleInputImg}
             ref={refInputImg}
+            style={{ display: 'none' }}
             type={'file'}
           />
         </Button>

src/components/ModalsForTable/ModalEditCard/ModalAddEditCard.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
 import { useParams } from 'react-router-dom'
+import { toast } from 'react-toastify'
 
 import { DataFiller } from '@/components/ModalsForTable/ModalEditCard/DataFiller/DataFiller'
 import Typography from '@/components/ui/Typography/Typography'
@@ -20,63 +21,107 @@ type ModalAddEditProps = {
   setOpen: (value: boolean) => void
 }
 
-function getSchema(item?: CardResponse) {
-  return z.object({
-    answer: item ? z.string() : z.string().min(3).max(500),
-    question: item ? z.string() : z.string().min(3).max(500),
-  })
-}
+// function getSchema(item?: CardResponse) {
+//   return z.object({
+//     answer: item ? z.string() : z.string().min(3).max(500),
+//     question: item ? z.string() : z.string().min(3).max(500),
+//   })
+// }
+// export type FormValues = z.infer<ReturnType<typeof getSchema>>
+
+const schema = z.object({
+  answer: z.string().min(3).max(500),
+  question: z.string().min(3).max(500),
+})
+
+export type FormValues = z.infer<typeof schema>
 
-export type FormValues = z.infer<ReturnType<typeof getSchema>>
 export const ModalAddEditCard = (props: ModalAddEditProps) => {
   const { item, open, setOpen } = props
   const { clearQuery } = useQueryParams()
   const [answerImg, setAnswerImg] = useState<File | null | undefined>(undefined)
   const [questionImg, setQuestionImg] = useState<File | null | undefined>(undefined)
+  // const [submitFunction, setSubmitFunction] = useState<(() => void) | null>(null)
 
   const deckId = useParams().deckId
 
   const [createCard] = useCreateCardMutation()
   const [updateCard] = useUpdateCardMutation()
 
-  // const { currentData: currentCardData } = useGetCardByIdQuery(
-  //   { id: item?.id ?? '' },
-  //   { skip: !item }
-  // )
-  // const currendCard = currentCardData ?? item
+  // const schema = getSchema(item)
 
-  const schema = getSchema(item)
+  type FormValues = z.infer<typeof schema>
 
   const { control, handleSubmit } = useForm<FormValues>({
     defaultValues: { answer: '', question: '' },
     resolver: zodResolver(schema),
   })
 
+  const confirmActionToast = (onConfirm: () => void) => {
+    const closeToast = () => {
+      toast.dismiss(toastId)
+    }
+
+    const toastId = toast(
+      <div>
+        <p>This name already exists, are you sure you want to save it?</p>
+        <button onClick={onConfirm}>Yes, save it</button>
+        <button onClick={closeToast}>No, cancel</button>
+      </div>,
+      {
+        autoClose: false,
+      }
+    )
+  }
+
   const onSubmit: SubmitHandler<FormValues> = data => {
-    if (item) {
-      updateCard({
-        args: {
-          answer: data.answer,
-          answerImg,
-          question: data.question,
-          questionImg,
-        },
-        cardId: item.id,
+    if (item && (data.answer === item.answer || data.question === item.question)) {
+      confirmActionToast(() => {
+        updateCard({
+          args: {
+            answer: data.answer,
+            answerImg,
+            question: data.question,
+            questionImg,
+          },
+          cardId: item.id,
+        })
+        clearQuery()
+        setOpen(false)
+        setQuestionImg(undefined)
+        setAnswerImg(undefined)
       })
+
+      return
     } else {
       createCard({
         args: { answer: data.answer, answerImg, question: data.question, questionImg },
         deckId: deckId ?? '',
       })
     }
-    clearQuery()
-    setOpen(false)
-    setQuestionImg(undefined)
-    setAnswerImg(undefined)
+    // if (item) {
+    //   updateCard({
+    //     args: {
+    //       answer: data.answer,
+    //       answerImg,
+    //       question: data.question,
+    //       questionImg,
+    //     },
+    //     cardId: item.id,
+    //   })
+    // } else {
+    //   createCard({
+    //     args: { answer: data.answer, answerImg, question: data.question, questionImg },
+    //     deckId: deckId ?? '',
+    //   })
+    // }
+    // clearQuery()
+    // setOpen(false)
+    // setQuestionImg(undefined)
+    // setAnswerImg(undefined)
   }
 
   const getQuestionImgHandler = (img: File | null | undefined) => {
-    console.log(img)
     setQuestionImg(img)
   }
   const getAnswerImgHandler = (img: File | null | undefined) => {