Complete additional info logic

src/pages/Auth/AdditionalInfo/index.tsx

@@ -1,8 +1,81 @@
-import { Box, Button, Input, Select, Text } from '../../../components';
+import * as Yup from 'yup';
+import { useFormik } from 'formik';
+import { useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import { useMutation, useReactiveVar } from '@apollo/client';
+import { Box, Button, Input, Select, Text, Alert } from '../../../components';
 import { theme } from '../../../themes';
 import { Wrapper } from './styles';
+import {
+  UpdateUserInfoMutation,
+  UpdateUserInfoMutationVariables,
+} from '../../../graphql/types';
+import { UPDATE_USER_INFO } from '../../../graphql/auth.api';
+import { userVar } from '../../../graphql/state';
 
 const AdditionalInfo = () => {
+  const history = useHistory();
+  const [error, setError] = useState<string>('');
+  const currentUser = useReactiveVar(userVar);
+
+  const [updateUserInfo, { loading }] = useMutation<
+    UpdateUserInfoMutation,
+    UpdateUserInfoMutationVariables
+  >(UPDATE_USER_INFO, {
+    onCompleted({ updateUserInfo: user }) {
+      userVar(user);
+      history.push('/');
+    },
+    onError({ graphQLErrors }) {
+      setError(graphQLErrors[0]?.extensions?.info);
+      setTimeout(() => setError(''), 3000);
+    },
+  });
+
+  const form = useFormik({
+    initialValues: {
+      firstName: '',
+      lastName: '',
+      prefix: '',
+      number: '',
+      place: '',
+      city: '',
+      zip: '',
+      country: '',
+    },
+    validationSchema: Yup.object().shape({
+      firstName: Yup.string().required('First Name is required'),
+      lastName: Yup.string().required('Last Name is required'),
+      prefix: Yup.string().required('Prefix is required'),
+      number: Yup.number().required('Number is required'),
+      place: Yup.string().required('Address is required'),
+      city: Yup.string().required('City is required'),
+      country: Yup.string().required('Country is required'),
+    }),
+    onSubmit: (
+      { firstName, lastName, prefix, number, place, city, country, zip },
+      { resetForm }
+    ) => {
+      try {
+        updateUserInfo({
+          variables: {
+            id: currentUser?.id!,
+            email: currentUser?.email!,
+            firstName,
+            lastName,
+            phone: { prefix, number },
+            address: { place, city, country, zip },
+          },
+        });
+      } catch (err) {
+        setError(err.message);
+        setTimeout(() => setError(''), 3000);
+      } finally {
+        resetForm();
+      }
+    },
+  });
+
   return (
     <Wrapper>
       <Box
@@ -21,75 +94,104 @@ const AdditionalInfo = () => {
               Tell us more about yourself
             </Text>
           </Box>
-          <Box
-            display='grid'
-            gridTemplateColumns='auto'
-            rowGap='0.5rem'
-            position='relative'
-          >
-            <Input
-              name='firstName'
-              label='First Name'
-              value=''
-              onChange={() => {}}
-            />
-            <Input
-              name='lastName'
-              label='Last Name'
-              value=''
-              onChange={() => {}}
-            />
+          <form onSubmit={form.handleSubmit}>
             <Box
               display='grid'
-              gridTemplateColumns='1fr 1.5fr'
-              columnGap='10px'
+              gridTemplateColumns='auto'
+              rowGap='0.5rem'
+              position='relative'
             >
-              <Select
-                name='coutryConde'
-                label='Country Code'
-                options={[{ value: '+216', label: '+216' }]}
-                onChange={() => {}}
-                value=''
+              <Input
+                name='firstName'
+                label='First Name'
+                value={form.values.firstName}
+                onChange={form.handleChange}
+                onBlur={form.handleBlur}
+                error={!!form.errors.firstName}
+                errorMessage={form.errors.firstName}
               />
               <Input
-                name='phone'
-                type='tel'
-                label='Phone'
-                value=''
-                onChange={() => {}}
+                name='lastName'
+                label='Last Name'
+                value={form.values.lastName}
+                onChange={form.handleChange}
+                onBlur={form.handleBlur}
+                error={!!form.errors.lastName}
+                errorMessage={form.errors.lastName}
               />
-            </Box>
-            <Input
-              name='address'
-              label='Address'
-              value=''
-              onChange={() => {}}
-            />
-            <Input
-              name='country'
-              label='Country'
-              value=''
-              onChange={() => {}}
-            />
-            <Box display='grid' gridTemplateColumns='2fr 1fr' columnGap='10px'>
-              <Input name='city' label='City' value='' onChange={() => {}} />
+              <Box
+                display='grid'
+                gridTemplateColumns='1fr 1.5fr'
+                columnGap='10px'
+              >
+                <Select
+                  name='prefix'
+                  label='Country Code'
+                  options={[
+                    { value: '+216', label: '+216' },
+                    { value: '+213', label: '+213' },
+                  ]}
+                  onChange={form.handleChange}
+                  onBlur={form.handleBlur}
+                  value={form.values.prefix}
+                />
+                <Input
+                  name='number'
+                  type='tel'
+                  label='Phone'
+                  onChange={form.handleChange}
+                  onBlur={form.handleBlur}
+                  value={form.values.number}
+                />
+              </Box>
               <Input
-                name='zipCode'
-                label='Zip Code'
-                value=''
-                onChange={() => {}}
+                name='place'
+                label='Address'
+                onChange={form.handleChange}
+                onBlur={form.handleBlur}
+                value={form.values.place}
               />
-            </Box>
-            <Box marginTop='0.5rem'>
-              <Button
-                fullWidth
-                variant='primary-action'
-                color='client'
-                text='Done'
-                onClick={() => {}}
+              <Input
+                name='city'
+                label='City'
+                onChange={form.handleChange}
+                onBlur={form.handleBlur}
+                value={form.values.city}
               />
+              <Box
+                display='grid'
+                gridTemplateColumns='2fr 1fr'
+                columnGap='10px'
+              >
+                <Input
+                  name='country'
+                  label='Country'
+                  onChange={form.handleChange}
+                  onBlur={form.handleBlur}
+                  value={form.values.country}
+                />
+                <Input
+                  name='zip'
+                  label='Zip Code'
+                  onChange={form.handleChange}
+                  onBlur={form.handleBlur}
+                  value={form.values.zip}
+                />
+              </Box>
+              <Box marginTop='0.5rem'>
+                <Button
+                  fullWidth
+                  variant='primary-action'
+                  color='client'
+                  text='Done'
+                  type='submit'
+                  loading={loading}
+                  disabled={loading}
+                />
+              </Box>
+              {error && <Alert color='error' text={error} />}
             </Box>
-          </Box>
+          </form>
         </Box>
       </Box>
     </Wrapper>