Add formik logic and yup validation schema

[Yohanan-Negash]

Fixes: #69

Solution

I used yup to handle email validation by creating a validation schema called sendMagicLinkSchema.I then added formik logic to validate email input and display an error if there is any. Since the yup validation schema validates for inputs not click events, I created a new state called yupError. This stores errors that come from our onlick event triggered when clicking on the 'Send magic link' button and the error message gets displayed if there is any. I also added additional styling to compensate for the addition of formik elements (<Formik>,<Form> & <Field>).

Testing

1. Start server; yarn dev
2. Start supabase ; supabase start
3. Make sure docker is running in the background
4. Navigate to the /signin page
5. Click on the 'Your Email' input element and unclick it by clicking on the 'Ngosi' header element. Observe that an error message will be displayed
6. Click on the 'Send magic link' button and notice that an error message will pop up

Resources

• Formik logic & yup validation scehma
• Formik with Typescript implementation

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
ngosi	✅ Ready (Inspect)	Visit Preview	Jul 13, 2022 at 6:19PM (UTC)

[iAmWillShepherd]

It looks like the Formik component is missing a prop. Try building locally on your machine to see the full error.

Here's the build output from Vercel.

[09:38:53.286] Cloning github.com/OneSignalDevelopers/ngosi (Branch: fixing-something, Commit: 5c776cf)
[09:38:54.358] Cloning completed: 1.072s
[09:38:54.655] Installing build runtime...
[09:38:56.786] Build runtime installed: 2.132s
[09:38:57.156] Looking up build cache...
[09:38:57.406] Build Cache not found
[09:38:57.667] Installing dependencies...
[09:38:57.988] yarn install v1.22.17
[09:38:58.073] [1/4] Resolving packages...
[09:38:58.326] [2/4] Fetching packages...
[09:39:22.140] [3/4] Linking dependencies...
[09:39:22.145] warning " > react-qr-code@2.0.2" has unmet peer dependency "react-native-svg@*".
[09:39:32.184] [4/4] Building fresh packages...
[09:39:32.737] Done in 34.76s.
[09:39:32.763] Detected Next.js version: 12.1.0
[09:39:32.766] Running "yarn run build"
[09:39:33.125] yarn run v1.22.17
[09:39:33.165] $ next build
[09:39:34.014] Attention: Next.js now collects completely anonymous telemetry regarding usage.
[09:39:34.015] This information is used to shape Next.js' roadmap and prioritize features.
[09:39:34.015] You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
[09:39:34.016] https://nextjs.org/telemetry
[09:39:34.016] 
[09:39:34.070] info  - Checking validity of types...
[09:39:39.498] Failed to compile.
[09:39:39.498] 
[09:39:39.498] ./components/Auth.tsx:31:6
[09:39:39.499] Type error: Property 'onSubmit' is missing in type '{ children: ({ errors, touched }: FormikProps<{ email: string; }>) => Element; initialValues: { email: string; }; validationSchema: ObjectSchema<Assign<ObjectShape, { email: RequiredStringSchema<string | undefined, AnyObject>; }>, AnyObject, TypeOfShape<...>, AssertsShape<...>>; }' but required in type 'FormikConfig<{ email: string; }>'.
[09:39:39.499] 
[09:39:39.499]   29 | 
[09:39:39.499]   30 |   return (
[09:39:39.499] > 31 |     <Formik
[09:39:39.500]      |      ^
[09:39:39.500]   32 |       initialValues={{
[09:39:39.500]   33 |         email: ''
[09:39:39.500]   34 |       }}
[09:39:39.525] error Command failed with exit code 1.
[09:39:39.525] info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
[09:39:39.538] Error: Command "yarn run build" exited with 1

[Yohanan-Negash]

@iAmWillShepherd PR is ready for review 👍