Hook to return role object.

src/components/Dashboard/ReservationPage/ReservationList/ReservationListSwitcher.tsx

@@ -3,13 +3,14 @@ import { useRole } from 'hooks/useRole';
 import { Roles } from 'roles/userRoles';
 import { ReservationsListByWeek } from 'components/Dashboard/ReservationPage/ReservationList/ReservationsListByWeek';
 import { ReservationList } from 'components/Dashboard/ReservationPage/ReservationList/ReservationList';
+import { useRoleObject } from 'hooks/useRoleObject';
 
 export const ReservationListSwitcher: FC = () => {
-  const [role] = useRole();
+  const role = useRoleObject();
 
   return (
     <>
-      {role === Roles.operator ? (
+      {typeof role !== undefined && role?.isOperator ? (
         <ReservationsListByWeek />
       ) : (
         <ReservationList />

src/hooks/useRoleObject.ts

+import { getRole } from 'api/getRole';
+import { getRoleObject } from 'api/getRoleObject';
+import { useEffect, useState } from 'react';
+import { RoleObjectType } from 'types/RoleObjectType';
+
+export const useRoleObject = (): RoleObjectType | undefined => {
+  const [role, setRole] = useState<RoleObjectType>();
+
+  useEffect(() => {
+    let isMounted = true;
+    getRoleObject().then((responseRole) => {
+      if (isMounted) {
+        setRole(responseRole);
+      }
+    });
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+  return role;
+};