Refactor forms to React Hook Forms (#1177)

* WIP forms * Refactor forms * delete console * fix test adding id * fix form * fix Rs * fix circular reference * delete unused type Please enter the commit message for your changes. Lines starting * Add taller variable * add disabled state to input style classname * Fixed R2s * fix enter with password prejoin * exclude empy string validation for profile * fix the cancel button * fix media query * fix error and width input
Stooa · Sep 18, 2023 · 16a90d8 · 16a90d8
1 parent c069a2a
commit 16a90d8
Show file tree

Hide file tree

Showing 34 changed files with 1,695 additions and 1,810 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -36,7 +36,6 @@
     "chart.js": "^4.2.1",
     "countries-and-timezones": "3.3.0",
     "file-loader": "6.2.0",
-    "formik": "2.2.9",
     "framer-motion": "8.5.5",
     "graphql": "16.6.0",
     "gsap": "3.12.2",

diff --git a/frontend/src/components/App/FeedbackForm/StepComment.tsx b/frontend/src/components/App/FeedbackForm/StepComment.tsx
@@ -8,11 +8,11 @@
  */
 
 import Button from '@/components/Common/Button';
-import NewTextarea from '@/components/Common/Fields/updated/Textarea';
 import useTranslation from 'next-translate/useTranslation';
 import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { StyledCommentForm, StyledStepWrapper } from './styles';
+import NewTextarea from '@/components/Common/Fields/Textarea';
 
 interface Props {
   handleCommentFeedback: (comment: string) => void;

diff --git a/frontend/src/components/App/FeedbackForm/StepMail.tsx b/frontend/src/components/App/FeedbackForm/StepMail.tsx
@@ -8,7 +8,7 @@
  */
 
 import Button from '@/components/Common/Button';
-import NewInput from '@/components/Common/Fields/updated/Input';
+import Input from '@/components/Common/Fields/Input';
 import useTranslation from 'next-translate/useTranslation';
 import { useForm } from 'react-hook-form';
 import { StyledCommentForm, StyledStepWrapper } from './styles';
@@ -33,7 +33,7 @@ const StepMail = ({ handleMailFeedback, handleSkip }: Props) => {
   const {
     register,
     handleSubmit,
-    formState: { dirtyFields, isDirty, errors }
+    formState: { dirtyFields, isDirty, errors, isSubmitted }
   } = useForm({ resolver: yupResolver(schema), defaultValues: { email: '' } });
 
   const onSubmit = data => {
@@ -47,7 +47,8 @@ const StepMail = ({ handleMailFeedback, handleSkip }: Props) => {
         <Trans i18nKey="fishbowl:feedback.emailDescription" components={{ i: <i /> }} />
       </p>
       <StyledCommentForm onSubmit={handleSubmit(onSubmit)}>
-        <NewInput
+        <Input
+          isSubmitted={isSubmitted}
           data-testid="feedback-mail-input"
           hasError={errors.email}
           icon="mail"

diff --git a/frontend/src/components/App/FishbowlPreJoin/form-auth.tsx b/frontend/src/components/App/FishbowlPreJoin/form-auth.tsx
@@ -12,9 +12,7 @@ import useTranslation from 'next-translate/useTranslation';
 import { useStateValue } from '@/contexts/AppContext';
 
 import Button from '@/components/Common/Button';
-import FormikForm from '@/ui/Form';
-import Input from '@/components/Common/Fields/Input';
-import { Formik, FormikHelpers } from 'formik';
+import StandardForm from '@/ui/Form';
 import * as Yup from 'yup';
 import { useStooa } from '@/contexts/StooaManager';
 import { connectWithPassword } from './connection';
@@ -24,8 +22,11 @@ import { useMutation } from '@apollo/client';
 import { NO_INTRO_RUN_FISHBOWL } from '@/graphql/Fishbowl';
 import { IConferenceStatus } from '@/jitsi/Status';
 import { useUser } from '@/jitsi';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import Input from '@/components/Common/Fields/Input';
 
-type TProps = {
+type Props = {
   name: string;
   isPrivate: boolean;
 };
@@ -34,15 +35,26 @@ interface FormValues {
   password: string;
 }
 
-const AuthUser = ({ name, isPrivate }: TProps) => {
+const AuthUser = ({ name, isPrivate }: Props) => {
   const { data, isModerator, setFishbowlPassword, conferenceStatus } = useStooa();
   const [, dispatch] = useStateValue();
   const { setUser } = useUser();
   const [runWithoutIntroFishbowl] = useMutation(NO_INTRO_RUN_FISHBOWL);
-
   const { t } = useTranslation('form');
   const { fid } = useRouter().query;
 
+  const schema = Yup.object({
+    password:
+      isPrivate && !isModerator ? Yup.string().required(t('validation.required')) : Yup.string()
+  });
+
+  const {
+    register,
+    handleSubmit,
+    setError,
+    formState: { dirtyFields, errors, isSubmitted, isSubmitting }
+  } = useForm<FormValues>({ resolver: yupResolver(schema), defaultValues: { password: '' } });
+
   const startFishbowlNow = () => {
     try {
       const slug = { variables: { input: { slug: fid } } };
@@ -75,10 +87,7 @@ const AuthUser = ({ name, isPrivate }: TProps) => {
     });
   };
 
-  const handleOnSubmit: (
-    values: FormValues,
-    formikHelpers: FormikHelpers<FormValues>
-  ) => void | Promise<void> = (values, { setErrors }) => {
+  const handleOnSubmit = values => {
     if (isPrivate && values.password && !isModerator) {
       setFishbowlPassword(values.password);
 
@@ -88,7 +97,7 @@ const AuthUser = ({ name, isPrivate }: TProps) => {
           if (res.data.response) {
             handleDispatchJoin();
           } else {
-            setErrors({ password: t('validation.wrongPassword') });
+            setError('password', { message: t('validation.wrongPassword') });
           }
         })
         .catch(error => {
@@ -119,37 +128,28 @@ const AuthUser = ({ name, isPrivate }: TProps) => {
   setUser({ guestId: '', nickname: name });
 
   return (
-    <Formik
-      onSubmit={handleOnSubmit}
-      initialValues={{
-        password: ''
-      }}
-      validationSchema={Yup.object({
-        password:
-          isPrivate && !isModerator ? Yup.string().required(t('validation.required')) : Yup.string()
-      })}
-    >
-      <FormikForm>
-        <fieldset className="submit-wrapper">
-          {isPrivate && !isModerator && (
-            <Input
-              data-testid="prejoin-password"
-              placeholder={t('fishbowl.passwordPlaceholder')}
-              label={t('fishbowl.passwordInputLabel')}
-              name="password"
-              type="password"
-              autoComplete="off"
-              id="password"
-              icon="lock"
-            />
-          )}
-
-          <Button type="submit" size="large" data-testid="prejoin-cta">
-            {getButtonText()}
-          </Button>
-        </fieldset>
-      </FormikForm>
-    </Formik>
+    <StandardForm onSubmit={handleSubmit(handleOnSubmit)}>
+      <fieldset className="submit-wrapper">
+        {isPrivate && !isModerator && (
+          <Input
+            isSubmitted={isSubmitted}
+            data-testid="prejoin-password"
+            hasError={errors.password}
+            placeholder={t('fishbowl.passwordPlaceholder')}
+            label={t('fishbowl.passwordInputLabel')}
+            icon="lock"
+            isDirty={dirtyFields.password}
+            autoComplete="off"
+            type="password"
+            {...register('password')}
+          />
+        )}
+
+        <Button type="submit" size="large" data-testid="prejoin-cta" disabled={isSubmitting}>
+          {getButtonText()}
+        </Button>
+      </fieldset>
+    </StandardForm>
   );
 };