Merge branch 'dev' into 'master'

Refined auth flow and new website pages.

See merge request !56

src/components/api/PrivateRoute/PrivateRoute.tsx

-import React, { useState, useEffect } from 'react';
-import axios from 'axios';
-import { Route, Redirect, RouteProps } from 'react-router-dom';
-import { NonAuthRoutes } from 'components/api/routes';
-
-/**
- * A wrapper for <Route> that redirects to the login screen if you're not yet authenticated.
- * */
-
-type Props = {
-  Component: React.FC<RouteProps>;
-  path: string;
-  requiredRoles: string[];
-};
-
-/* eslint-disable react/jsx-props-no-spreading */
-export const PrivateRoute = ({
-  Component,
-  path,
-  requiredRoles,
-}: Props): JSX.Element => {
-  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');
-      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 !loading ? (
-    <p>loading</p>
-  ) : (
-    <Route
-      exact={false}
-      path={path}
-      render={(props: RouteProps) =>
-        auth && userHasRequiredRole ? (
-          <Component {...props} />
-        ) : (
-          <Redirect
-            to={{
-              pathname: userHasRequiredRole
-                ? NonAuthRoutes.signIn
-                : NonAuthRoutes.unauthorized,
-              state: {
-                message,
-                requestedPath: path,
-              },
-            }}
-          />
-        )
-      }
-    />
-  );
-};

src/hooks/useAuth.ts

+import { isAuthenticated } from 'api/isAuthenticated';
+import { useEffect, useState } from 'react';
+
+/**
+ * Custom hook that uses the call is_authenticated.
+ * {@link isAuthenticated}
+ *
+ * @returns {boolean | null} isAuth: true if user is authenticated, false otherwise or null if the request has not finished.
+ */
+export const useAuth = (): [
+  boolean | null,
+  React.Dispatch<React.SetStateAction<boolean | null>>,
+] => {
+  let isMounted = true;
+  const [isAuth, setIsAuth] = useState<boolean | null>(null);
+  useEffect(() => {
+    isAuthenticated().then((state) => {
+      if (isMounted) {
+        setIsAuth(state);
+      }
+    });
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+  return [isAuth, setIsAuth];
+};

src/hooks/useCookie.ts

+import { fetchCookie } from 'api/fetchCookie';
+import { useCallback, useEffect, useState } from 'react';
+
+/**
+ * Custom hook that return csrf cookie fetched from server.
+ *
+ * @return cookie
+ */
+export const useCookie = (): string => {
+  const [cookie, setCookie] = useState('');
+
+  const askCookie = useCallback(() => {
+    let isMounted = true;
+    if (isMounted)
+      fetchCookie().then((cookieResponse) => setCookie(cookieResponse));
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    askCookie();
+  }, [askCookie]);
+
+  return cookie;
+};

src/hooks/useReservations.ts

+import { getReservations } from 'api/getReservations';
+import { getRole } from 'api/getRole';
+import { useEffect, useState } from 'react';
+
+export const useReservations = (): any => {
+  useEffect(() => {
+    let isMounted = true;
+
+    getReservations().then((data) => console.log(data));
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+  return null;
+};

src/hooks/useRole.ts

+import { getRole } from 'api/getRole';
+import { useEffect, useState } from 'react';
+
+export const useRole = (): [
+  string,
+  React.Dispatch<React.SetStateAction<string>>,
+] => {
+  const [role, setRole] = useState('');
+
+  useEffect(() => {
+    let isMounted = true;
+    // Initialize asking the server if this session is already logged in.
+
+    getRole().then((responseRole) => {
+      if (isMounted) {
+        setRole(responseRole);
+      }
+    });
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+  return [role, setRole];
+};

src/index.tsx

@@ -6,7 +6,7 @@ import { App } from 'App';
 ReactDOM.render(
   <React.StrictMode>
     <CssBaseline />
-    <App />,
+    <App />
   </React.StrictMode>,
   document.getElementById('root'),
 );