From 5b0efe8c30193112e2d1bfac3c1811a03de6099f Mon Sep 17 00:00:00 2001
From: Alberto Defendi <1369-ahl-berto@users.noreply.gitlab.inf.unibz.it>
Date: Sun, 23 May 2021 12:04:13 +0200
Subject: [PATCH] Fetch roles from api and forward onClick.
---
.../AuthUser/ChoseRole/ChoseRole.tsx | 55 +++++++++++--------
1 file changed, 31 insertions(+), 24 deletions(-)
diff --git a/src/components/AuthUser/ChoseRole/ChoseRole.tsx b/src/components/AuthUser/ChoseRole/ChoseRole.tsx
index a100cbf..c6fe0f5 100644
--- a/src/components/AuthUser/ChoseRole/ChoseRole.tsx
+++ b/src/components/AuthUser/ChoseRole/ChoseRole.tsx
@@ -1,39 +1,46 @@
-import React, { FC, useContext, useEffect, useState } from 'react';
-import axios from 'axios';
+import React, { FC, useEffect, useState } from 'react';
import Button from '@material-ui/core/Button';
-import { AuthContext } from '../AuthContext';
-
-const choseAndForward = (e: unknown): void => {
- // Do nothing.
-};
+import { getRoles } from 'api/getRoles';
+import { setRole } from 'api/setRole';
+import { useHistory } from 'react-router-dom';
+import { AuthRoutes } from 'api/routes';
/**
- * Screen that let's users decide role between available roles.
+ * Page that let's users decide role between available roles.
* This is intended to use when a user has more than one role.
* @returns ChoseRole component.
*/
export const ChoseRole: FC = () => {
- const [userRoles, setUserRoles] = useState<Array<string>>(['']);
+ const history = useHistory();
+ const [userRoles, setUserRoles] = useState<string[]>(['hello', 'world']);
+
+ const choseAndForward = (role: string): void => {
+ // Set role in the server.
+ setRole(role);
+ // Push to homepage.
+ history.push(`${AuthRoutes.dashboard}${AuthRoutes.home}`);
+ };
useEffect(() => {
- const getUserRoles = async (): Promise<unknown> => {
- const response = await axios('/api/web/get_role');
- setUserRoles(response.data.token);
- return null;
- };
- getUserRoles();
- }, [userRoles]);
+ getRoles().then((fetchedRoles) => setUserRoles(fetchedRoles));
+ }, []);
- const { role } = useContext(AuthContext);
return (
<div data-testid="ChoseRole">
- <Button
- variant="outlined"
- color="default"
- onClick={(e) => choseAndForward(e)}
- >
- {role}
- </Button>
+ {userRoles ? (
+ userRoles.map((role) => (
+ <Button
+ variant="outlined"
+ color="default"
+ key={role}
+ onClick={() => choseAndForward(role)}
+ >
+ {role}
+ </Button>
+ ))
+ ) : (
+ <h1>No roles were returned.</h1>
+ )}
</div>
);
};
--
GitLab