changed types in useUploadImg and changed props defaultCover + added …

…trim() in sign-in ('email','password') + changed added alert res in stories form (#113)

* added Card

* added Modal

* created forwardRef Modal

* changed forwardRef Modal

* changed App

* merge main in modal

* delete padding in Card, change stories in Card and Modal

* change signUp

* created <BrowserRouter> in sign-in.stories

* delete width styles in Card, added props className, styles in Modal, corrected checkbox in SignIn

* added className in Modal.stories

* created addNewCard, common/utils/zod-schemas, ui/file-uploader, form/form-preview-file-uploader

* created addNewCard

* created addNewPack

* updated useUploadImg

* changed Typography 'Forgot Password?' and 'Don't have an account?' on 'button'

* clean branch modal

* fix modal bag with checkbox on hover and fix padding in modal

* added trim in sign-in (email,password)

* added defaultValues in useUploadImg in addNewPack

* changed types in useUploadImg and changed props defaultCover + added trim() in sign-in ('email','password')

* changed types in useUploadImg and changed props defaultCover + added trim() in sign-in ('email','password') + changed added alert res in stories form

src/components/auth/sign-in/sign-in.tsx

@@ -12,8 +12,8 @@ import { z } from 'zod'
 import s from './sign-in.module.scss'
 
 const signInSchema = z.object({
-  email: z.string().email('Invalid email address').nonempty('Enter email'),
-  password: z.string().nonempty('Enter password'),
+  email: z.string().email('Invalid email address').nonempty('Enter email').trim(),
+  password: z.string().nonempty('Enter password').trim(),
   rememberMe: z.boolean().optional(),
 })
 

src/components/forms/add-new-card/add-new-card.stories.tsx

@@ -28,6 +28,15 @@ export default meta
 const AddNewCardToggle: StoryFn<StoryProps> = (args: StoryProps) => {
   const [open, setOpen] = useState(false)
 
+  const onSubmit = (data: FormData) => {
+    let res = ''
+
+    for (const pair of data.entries()) {
+      res += pair[0] + ': ' + pair[1] + ' | '
+    }
+    alert(res)
+  }
+
   return (
     <>
       <Button onClick={() => setOpen(true)} variant={'primary'}>
@@ -40,7 +49,7 @@ const AddNewCardToggle: StoryFn<StoryProps> = (args: StoryProps) => {
         open={open}
         title={'Add New Card'}
       >
-        <AddNewCard onSubmit={() => {}} setOpenModal={setOpen} />
+        <AddNewCard onSubmit={onSubmit} setOpenModal={setOpen} />
       </Modal>
     </>
   )

src/components/forms/add-new-card/add-new-card.tsx

@@ -21,8 +21,6 @@ type Props = {
   setOpenModal: (open: boolean) => void
 }
 
-export type name = 'answerName' | 'coverAnswer' | 'coverQuestion' | 'questionName'
-
 export const AddNewCard = ({ defaultValues, onSubmit, setOpenModal }: Props) => {
   const values: AddNewCardFormType = {
     answerName: defaultValues?.answerName || '',
@@ -37,7 +35,8 @@ export const AddNewCard = ({ defaultValues, onSubmit, setOpenModal }: Props) =>
     deleteCoverHandler: answerDeleteCoverHandler,
     downloaded: answerDownloaded,
     extraActions: answerExtraActions,
-  } = useUploadImg<name>({
+  } = useUploadImg<AddNewCardFormType>({
+    defaultCover: defaultValues?.cover,
     getFieldState,
     name: 'coverAnswer',
     resetField,
@@ -51,7 +50,8 @@ export const AddNewCard = ({ defaultValues, onSubmit, setOpenModal }: Props) =>
     deleteCoverHandler: questionDeleteCoverHandler,
     downloaded: questionDownloaded,
     extraActions: questionExtraActions,
-  } = useUploadImg<name>({
+  } = useUploadImg<AddNewCardFormType>({
+    defaultCover: defaultValues?.cover,
     getFieldState,
     name: 'coverQuestion',
     resetField,
@@ -85,11 +85,6 @@ export const AddNewCard = ({ defaultValues, onSubmit, setOpenModal }: Props) =>
 
     onSubmit(form)
 
-    //for test
-    for (const pair of form.entries()) {
-      console.log(pair[0] + ': ' + pair[1])
-    }
-
     setOpenModal(false)
   }
 

src/components/forms/add-new-pack/add-new-pack.stories.tsx

@@ -28,6 +28,15 @@ export default meta
 const AddNewPackToggle: StoryFn<StoryProps> = (args: StoryProps) => {
   const [open, setOpen] = useState(false)
 
+  const onSubmit = (data: FormData) => {
+    let res = ''
+
+    for (const pair of data.entries()) {
+      res += pair[0] + ': ' + pair[1] + ' | '
+    }
+    alert(res)
+  }
+
   return (
     <>
       <Button onClick={() => setOpen(true)} variant={'primary'}>
@@ -40,7 +49,7 @@ const AddNewPackToggle: StoryFn<StoryProps> = (args: StoryProps) => {
         open={open}
         title={'Add New Pack'}
       >
-        <AddNewPack onSubmit={() => {}} setOpenModal={setOpen} />
+        <AddNewPack onSubmit={onSubmit} setOpenModal={setOpen} />
       </Modal>
     </>
   )

src/components/forms/add-new-pack/add-new-pack.tsx

@@ -23,8 +23,6 @@ type Props = {
   setOpenModal: (open: boolean) => void
 }
 
-type name = 'coverPack' | 'isPrivatePack' | 'packName'
-
 export const AddNewPack = ({ defaultValues, onSubmit, setOpenModal }: Props) => {
   const values: AddNewPackFormType = {
     isPrivatePack: defaultValues?.isPrivatePack || false,
@@ -39,7 +37,8 @@ export const AddNewPack = ({ defaultValues, onSubmit, setOpenModal }: Props) =>
     deleteCoverHandler: packDeleteCoverHandler,
     downloaded: packDownloaded,
     extraActions: packExtraActions,
-  } = useUploadImg<name>({
+  } = useUploadImg<AddNewPackFormType>({
+    defaultCover: defaultValues?.cover,
     getFieldState,
     name: 'coverPack',
     resetField,
@@ -66,11 +65,6 @@ export const AddNewPack = ({ defaultValues, onSubmit, setOpenModal }: Props) =>
 
     onSubmit(form)
 
-    //for test
-    for (const pair of form.entries()) {
-      console.log(pair[0] + ': ' + pair[1])
-    }
-
     setOpenModal(false)
   }
 
@@ -102,11 +96,7 @@ export const AddNewPack = ({ defaultValues, onSubmit, setOpenModal }: Props) =>
               defaultValue={false}
               name={'isPrivatePack'}
               render={({ field: { onChange, value } }) => (
-                <Checkbox
-                  checked={value}
-                  label={'Private Pack'}
-                  onCheckedChange={onChange}
-                />
+                <Checkbox checked={value} label={'Private Pack'} onCheckedChange={onChange} />
               )}
             />
           </div>

src/components/forms/hooks/use-upload-img.ts

@@ -1,37 +1,43 @@
 import { useState } from 'react'
+import {
+  FieldValues,
+  Path,
+  UseFormGetFieldState,
+  UseFormResetField,
+  UseFormSetValue,
+  UseFormTrigger,
+  UseFormWatch,
+} from 'react-hook-form'
 
 import defImg from '@/assets/img/defaultCard.jpg'
 
-type FieldError = {
-  message?: string
+type UploadImgType<TFieldValues extends FieldValues> = {
+  defaultCover?: null | string
+  getFieldState: UseFormGetFieldState<TFieldValues>
+  name: Path<TFieldValues>
+  resetField: UseFormResetField<TFieldValues>
+  setValue: UseFormSetValue<TFieldValues>
+  trigger: UseFormTrigger<TFieldValues>
+  watch: UseFormWatch<TFieldValues>
 }
 
-type UploadImgType<TFieldValues extends any> = {
-  getFieldState: (name: TFieldValues) => { error?: FieldError }
-  name: TFieldValues
-  resetField: (name: TFieldValues) => void
-  setValue: (name: TFieldValues, value: any) => void
-  trigger: (name: TFieldValues) => Promise<boolean>
-  watch: (name: TFieldValues) => any
-}
-
-export const useUploadImg = <TFieldValues extends any>({
+export const useUploadImg = <TFieldValues extends FieldValues>({
+  defaultCover,
   getFieldState,
   name,
   resetField,
   setValue,
   trigger,
   watch,
 }: UploadImgType<TFieldValues>) => {
-  const [downloaded, setDownloaded] = useState<null | string>(null)
+  const [downloaded, setDownloaded] = useState<null | string>(defaultCover || null)
   const [coverError, setCoverError] = useState<null | string>(null)
 
   const deleteCoverHandler = () => {
     if (coverError) {
       setCoverError(null)
     }
-    // toast.warning('You deleted cover', { containerId: 'modal' })
-    setValue(name, null)
+    setValue(name, null as any)
     setDownloaded(null)
   }
 
@@ -41,13 +47,12 @@ export const useUploadImg = <TFieldValues extends any>({
     const file = watch(name)
 
     if (!success && error?.message) {
-      // toast.error(error.message, { containerId: 'modal' })
       setCoverError(error.message)
       resetField(name)
     }
 
     if (file) {
-      const img = success ? URL.createObjectURL(file) : defImg
+      const img = success ? URL.createObjectURL(file as Blob) : defImg
 
       setDownloaded(img)