Merge branch 'profile' into 'master'

Connect api calls and include test/docs cases

See merge request !33

src/App.tsx

@@ -6,6 +6,7 @@ import { LandingPage } from 'components/LandingPage/LandingPage';
 import { PrivateRoute } from 'components/api/PrivateRoute/PrivateRoute';
 import { AuthRoutes, NonAuthRoutes } from 'components/api/routes';
 import { NotFound } from 'components/NotFound/NotFound';
+import { ProfilePage } from 'components/ProfilePage/ProfilePage';
 import { Roles } from 'components/api/userRoles';
 import { Unauthorized } from 'components/Unauthorized/Unauthorized';
 
@@ -20,6 +21,11 @@ export const App: FC = () => (
           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>

src/components/AuthUser/SignInForm/SignInForm.tsx

@@ -55,7 +55,9 @@ export const SignInForm: FC = () => {
           },
         },
       )
-      .then(() => history.replace(AuthRoutes.dashboard));
+      .then(() => {
+        history.replace(AuthRoutes.dashboard);
+      });
   };
 
   const classes = useStyles();

src/components/NotFound/NotFound.md

+NotFound example:
+
+```js
+<NotFound />
+```
\ No newline at end of file

src/components/NotFound/NotFound.test.tsx

+import React from 'react';
+import { render } from '@testing-library/react';
+import { NotFound } from './NotFound';
+
+describe('<NotFound />', () => {
+  it('renders without crashing', () => {
+    const wrapper = render(<NotFound />);
+    expect(wrapper.queryByTestId('NotFound')).toBeTruthy();
+  });
+});

src/components/NotFound/NotFound.tsx

 import React, { FC } from 'react';
 
-export const NotFound: FC = () => <h1>Page not found</h1>;
+export const NotFound: FC = () => (
+  <div data-testid="NotFound">
+    <h1>Page not found</h1>
+  </div>
+);

src/components/ProfilePage/ProfilePage.md

+Profile page for all type of users
+
+```js
+<ProfilePage />
+```
\ No newline at end of file

src/components/ProfilePage/ProfilePage.test.tsx

+import React from 'react';
+import { render } from '@testing-library/react';
+import { ProfilePage } from './ProfilePage';
+
+describe('<ProfilePage />', () => {
+  it('renders without crashing', () => {
+    const wrapper = render(<ProfilePage />);
+    expect(wrapper.queryByTestId('ProfilePage')).toBeTruthy();
+  });
+});

src/components/ProfilePage/ProfilePage.tsx

+import React, { FC } from 'react';
+import Button from '@material-ui/core/Button';
+import axios from 'axios';
+import { NonAuthRoutes } from 'components/api/routes';
+import { useHistory } from 'react-router-dom';
+
+export const ProfilePage: FC = () => {
+  const history = useHistory();
+
+  const logout = (): void => {
+    axios
+      .post('/api/web/login/logout')
+      .then(() => history.replace(NonAuthRoutes.home));
+  };
+
+  return (
+    <div data-testid="ProfilePage">
+      <Button variant="outlined" color="default" onClick={logout}>
+        Logout
+      </Button>
+    </div>
+  );
+};

src/components/Reservation/Reservation.test.tsx

+import React from 'react';
+import { render } from '@testing-library/react';
+import { Reservation } from './Reservation';
+
+describe('<Reservation />', () => {
+  it('renders without crashing', () => {
+    const wrapper = render(<Reservation />);
+    expect(wrapper.queryByTestId('Reservation')).toBeTruthy();
+  });
+});

src/components/Reservation/Reservation.tsx

+import React, { FC } from 'react';
+
+export const Reservation: FC = () => (
+  <div data-testid="Reservation">
+    <h1>Reservation page!</h1>
+  </div>
+);

src/components/Unauthorized/Unauthirized.md

+Unauthorized example:
+
+```js
+<Unauthorized />
+```
\ No newline at end of file

src/components/Unauthorized/Unauthirized.test.tsx

+import React from 'react';
+import { render } from '@testing-library/react';
+import { Unauthorized } from './Unauthorized';
+
+describe('<Unauthorized />', () => {
+  it('renders without crashing', () => {
+    const wrapper = render(<Unauthorized />);
+    expect(wrapper.queryByTestId('Unauthorized')).toBeTruthy();
+  });
+});

src/components/Unauthorized/Unauthorized.tsx

 import React, { FC } from 'react';
 
-export const Unauthorized: FC = () => <h1>You cannot access this page</h1>;
+export const Unauthorized: FC = () => (
+  <div data-testid="Unauthorized">
+    <h1>You cannot access this page</h1>
+  </div>
+);

src/components/api/PrivateRoute/PrivateRoute.tsx

-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
 import { Route, Redirect, RouteProps } from 'react-router-dom';
 import { NonAuthRoutes } from 'components/api/routes';
 
@@ -18,18 +19,35 @@ export const PrivateRoute = ({
   path,
   requiredRoles,
 }: Props): JSX.Element => {
-  const isAuthed = !!sessionStorage.getItem('X-CSRFTOKEN');
+  const [auth, setAuth] = useState<boolean>(false);
+  const [loading, setLoading] = useState<boolean>(false);
+
+  useEffect(() => {
+    const fetch = async (): Promise<unknown> => {
+      const result = await axios('/api/web/login/is_authenticated');
+      // FIX: Remove negation and use true server data
+      setAuth(!result.data.is_authenticated);
+      setLoading(true);
+      return null;
+    };
+
+    fetch();
+  }, []);
+
   const currentRole = String(sessionStorage.getItem('ROLE'));
   const userHasRequiredRole = requiredRoles.includes(currentRole);
   const message = userHasRequiredRole
     ? 'Please log in to view this page'
     : 'Your role is not allowed';
-  return (
+
+  return !loading ? (
+    <p>loading</p>
+  ) : (
     <Route
       exact={false}
       path={path}
       render={(props: RouteProps) =>
-        isAuthed && userHasRequiredRole ? (
+        auth && userHasRequiredRole ? (
           <Component {...props} />
         ) : (
           <Redirect

src/components/api/routes.ts

@@ -5,7 +5,7 @@
  */
 export enum AuthRoutes {
   dashboard = '/dashboard',
-  account = '/account',
+  profile = '/profile',
 }
 
 /**