Merge branch 'signUp' into 'dev'

Sign up form setup

See merge request !41

src/App.tsx

-import React, { FC } from 'react';
+import React, { FC, useEffect, useState } from 'react';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 import { HomePage } from 'components/HomePage/HomePage';
 import { AuthUser } from 'components/AuthUser/AuthUser';
@@ -9,26 +9,49 @@ import { NotFound } from 'components/NotFound/NotFound';
 import { ProfilePage } from 'components/ProfilePage/ProfilePage';
 import { Roles } from 'components/api/userRoles';
 import { Unauthorized } from 'components/Unauthorized/Unauthorized';
+import axios from 'axios';
 
-export const App: FC = () => (
-  <Router>
-    <div data-testid="App">
-      <Switch>
-        <Route path={NonAuthRoutes.auth} component={AuthUser} />
-        <Route exact path={NonAuthRoutes.home} component={LandingPage} />
-        <PrivateRoute
-          path={AuthRoutes.dashboard}
-          Component={HomePage}
-          requiredRoles={[Roles.admin, Roles.operator, Roles.senior]}
-        />
-        <PrivateRoute
-          path={AuthRoutes.profile}
-          Component={ProfilePage}
-          requiredRoles={[Roles.admin, Roles.operator, Roles.senior]}
-        />
-        <Route path={NonAuthRoutes.unauthorized} component={Unauthorized} />
-        <Route component={NotFound} />
-      </Switch>
-    </div>
-  </Router>
-);
+const configDjangoCookieName = (): void => {
+  axios.defaults.xsrfHeaderName = 'X-CSRFTOKEN';
+  axios.defaults.xsrfCookieName = 'csrftoken';
+  axios.defaults.withCredentials = true;
+};
+
+export const App: FC = () => {
+  const [isCookieFetched, setisCookieFetched] = useState<string>('');
+  configDjangoCookieName();
+  useEffect(() => {
+    const fetchCookie = async (): Promise<unknown> => {
+      const response = await axios('api/web/csrf');
+      axios.defaults.headers.common['X-CSRFTOKEN'] = response.data.token;
+      sessionStorage.setItem('X-CSRFTOKEN', response.data.token);
+      sessionStorage.setItem('ROLE', 'admin');
+      setisCookieFetched(response.data.token);
+      return null;
+    };
+    if (!isCookieFetched) fetchCookie();
+  }, []);
+
+  return (
+    <Router>
+      <div data-testid="App">
+        <Switch>
+          <Route path={NonAuthRoutes.auth} component={AuthUser} />
+          <Route exact path={NonAuthRoutes.home} component={LandingPage} />
+          <PrivateRoute
+            path={AuthRoutes.dashboard}
+            Component={HomePage}
+            requiredRoles={[Roles.admin, Roles.operator, Roles.senior]}
+          />
+          <PrivateRoute
+            path={AuthRoutes.profile}
+            Component={ProfilePage}
+            requiredRoles={[Roles.admin, Roles.operator, Roles.senior]}
+          />
+          <Route path={NonAuthRoutes.unauthorized} component={Unauthorized} />
+          <Route component={NotFound} />
+        </Switch>
+      </div>
+    </Router>
+  );
+};

src/components/AuthUser/AuthUser.tsx

-import React, { FC, useEffect } from 'react';
-import axios from 'axios';
+import React, { FC } from 'react';
 import Container from '@material-ui/core/Container';
 import { Route, useRouteMatch } from 'react-router-dom';
 import { NonAuthRoutes } from 'components/api/routes';
 import { SignInForm } from 'components/AuthUser/SignInForm/SignInForm';
 import { SignUpForm } from 'components/AuthUser/SignUpForm/SignUpForm';
 
-const configDjangoCookieName = (): void => {
-  axios.defaults.xsrfHeaderName = 'X-CSRFTOKEN';
-  axios.defaults.xsrfCookieName = 'csrftoken';
-  axios.defaults.withCredentials = true;
-};
-
 export const AuthUser: FC = () => {
   const { path } = useRouteMatch();
-  configDjangoCookieName();
-  useEffect(() => {
-    axios
-      .get('api/web/csrf')
-      .then((response) => {
-        axios.defaults.headers.common['X-CSRFTOKEN'] = response.data.token;
-        sessionStorage.setItem('X-CSRFTOKEN', response.data.token);
-        sessionStorage.setItem('ROLE', 'admin');
-      })
-      .catch((error) => error);
-  }, []);
   return (
     <Container maxWidth="sm">
       <Route path={`${path}${NonAuthRoutes.signIn}`} component={SignInForm} />

src/components/AuthUser/SignUpForm/SignUpForm.tsx

@@ -8,42 +8,53 @@ import axios from 'axios';
 // TODO: Replace notes with big input field
 export const SignUpForm: FC = () => {
   type FormData = {
-    user: {
-      username: string;
-      password: string;
-      firstName: string;
-      lastName: string;
-      email: string;
-    };
-    phoneNumber: number;
-    homeAddress: {
-      address: string;
-    };
-    memberCardIssuer: {
-      name: string;
-    };
-    memberCardNumber: number;
-    notes: string;
+    username: string;
+    password: string;
+    firstName: string;
+    lastName: string;
+    email: string;
   };
 
-  const { control, errors, handleSubmit } = useForm<FormData>();
+  const defaultValues: FormData = {
+    username: '',
+    password: '',
+    firstName: '',
+    lastName: '',
+    email: '',
+  };
+
+  const { control, errors, handleSubmit } = useForm<FormData>({
+    defaultValues,
+  });
 
   const onSubmit: SubmitHandler<FormData> = (values: FormData) => {
-    axios.post(
-      '/api/web/seniors/',
-      {
-        user: values.user,
-        phone_number: values.phoneNumber,
-        home_address: values.homeAddress.address,
-        member_card_issuer: values.memberCardIssuer,
-        notes: values.notes,
-      },
-      {
-        headers: {
-          'Content-Type': 'application/json',
+    axios
+      .post(
+        '/api/web/seniors/',
+        {
+          user: {
+            username: 'test',
+            password: values.password,
+            firstName: 'a',
+            lastName: 'b',
+            email: values.email,
+          },
+          phone_number: '213432234',
+          home_address: {
+            address: 'test street, 3',
+          },
+          member_card_issuer: {
+            name: 'test issuer',
+          },
+          member_card_number: '33333333333',
         },
-      },
-    );
+        {
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        },
+      )
+      .then((res) => console.log(res));
   };
 
   const classes = useStyles();
@@ -54,101 +65,6 @@ export const SignUpForm: FC = () => {
         onSubmit={handleSubmit(onSubmit)}
         data-testid="Form"
       >
-        <InputField
-          name="firstName"
-          control={control}
-          rules={{
-            validate: (value: string) => /^[A-Za-z]$/.test(value),
-            required: {
-              value: true,
-              message: 'firstName is not valid',
-            },
-          }}
-          label="First name"
-          error={!!errors.user?.firstName}
-          errorMessage="Insert firstName"
-        />
-
-        <InputField
-          name="lastName"
-          control={control}
-          rules={{
-            validate: (value: string) => /^[A-Za-z]$/.test(value),
-            required: {
-              value: true,
-              message: 'lastName is not valid',
-            },
-          }}
-          label="Last name"
-          error={!!errors.user?.lastName}
-          errorMessage="Insert lastName"
-        />
-
-        <InputField
-          name="phoneNumber"
-          control={control}
-          rules={{
-            required: {
-              value: true,
-              message: 'phoneNumber is not valid',
-            },
-          }}
-          label="Phone number"
-          error={!!errors.phoneNumber}
-          errorMessage="Insert phoneNumber"
-        />
-        <InputField
-          name="memberCardIssuer"
-          control={control}
-          rules={{
-            validate: (value: string) => /^[A-Za-z]$/.test(value),
-            required: {
-              value: true,
-              message: 'memberCardIssuer is not valid',
-            },
-          }}
-          label="Member card issuer"
-          error={!!errors.memberCardIssuer?.name}
-          errorMessage="Insert memberCardIssuer"
-        />
-
-        <InputField
-          name="memberCardNumber"
-          control={control}
-          rules={{
-            required: {
-              value: true,
-              message: 'memberCardNumber is not valid',
-            },
-          }}
-          label="Card number"
-          error={!!errors.memberCardNumber}
-          errorMessage="Insert memberCardNumber"
-        />
-
-        <InputField
-          name="address"
-          control={control}
-          rules={{
-            validate: (value: string) => /^[A-Za-z]$/.test(value),
-            required: {
-              value: true,
-              message: 'address is not valid',
-            },
-          }}
-          label="Home address"
-          error={!!errors.homeAddress?.address}
-          errorMessage="Insert address"
-        />
-
-        <InputField
-          name="notes"
-          control={control}
-          label="Notes"
-          error={!!errors.notes}
-          errorMessage="Insert valid password"
-        />
-
         <InputField
           name="email"
           control={control}
@@ -161,7 +77,7 @@ export const SignUpForm: FC = () => {
             },
           }}
           label="Email"
-          error={!!errors.user?.email}
+          error={!!errors.email}
           errorMessage="Insert email"
         />
 
@@ -177,10 +93,9 @@ export const SignUpForm: FC = () => {
             },
           }}
           label="Password"
-          error={!!errors.user?.password}
+          error={!!errors.password}
           errorMessage="Insert valid password"
         />
-
         <Button
           data-testid="Submit"
           type="submit"