fixed token

src/components/App.tsx

@@ -1,4 +1,4 @@
-import React, { ElementType, useContext, useState } from 'react';
+import React, { ElementType, useContext, useEffect, useState } from 'react';
 import Topbar from './Topbar';
 import { Transfer } from './Transfer';
 import { Admin } from './Admin';
@@ -8,6 +8,7 @@ import styled from 'styled-components';
 import { coursesContext } from '../contexts/CoursesProvider';
 import LoadingOverlay from 'react-loading-overlay';
 import { SyncLoader } from 'react-spinners';
+import { CASContext } from '../contexts/CASProvider';
 const Wrapper = styled.div`
   display: flex;
   height: calc(100vh - 80px);
@@ -19,6 +20,7 @@ const Wrapper = styled.div`
 
 export const App = () => {
   const { isDataLoading } = useContext(coursesContext)!;
+  const { isFetchingToken, user, role } = useContext(CASContext)!;
   const [isOpenTransfer, setOpenTransfer] = useState(false);
 
   const handleTransfer = () => {
@@ -26,10 +28,13 @@ export const App = () => {
   };
 
   const userPrivilige = localStorage.getItem('userPrivilige');
-
+  console.log('role of that user is: ', role);
+  useEffect(() => {
+    console.log('is fetching token: ', isFetchingToken);
+  }, [isFetchingToken]);
   return (
     <>
-      <LoadingOverlay active={isDataLoading} spinner={<SyncLoader />}>
+      <LoadingOverlay active={role === undefined} spinner={<SyncLoader />}>
         <Topbar handleTransfer={handleTransfer} />
         <Transfer isOpen={isOpenTransfer} handleClose={handleTransfer} />
         <Wrapper>
@@ -38,9 +43,8 @@ export const App = () => {
               <Scheduler />
               <Rightbar />
             </>
-          )} { userPrivilige === 'DEANERY' && (
-            <Admin />
-          )}
+          )}{' '}
+          {userPrivilige === 'DEANERY' && <Admin />}
         </Wrapper>
       </LoadingOverlay>
     </>

src/components/Topbar.tsx

@@ -1,4 +1,4 @@
-import React, { useState, MouseEvent, ChangeEvent, useEffect, useCallback, useContext } from 'react';
+import React, { useState, MouseEvent, ChangeEvent, useEffect, useCallback, useContext, useRef } from 'react';
 import { ReactComponent as Close } from '../assets/close.svg';
 import ProfileIcon from '../assets/account.svg';
 import { Profile } from './Profile';
@@ -9,6 +9,8 @@ import styled from 'styled-components/macro';
 import ClickAwayListener from 'react-click-away-listener';
 import { SelectMenu } from './SelectMenu';
 import { studentsContext } from '../contexts/StudentsProvider';
+import { CASContext } from '../contexts/CASProvider';
+import { render } from 'react-dom';
 
 const Topbar = styled.div`
   background-color: #e3e5ed;
@@ -137,14 +139,18 @@ interface TopbarProps {
 }
 
 export default function ({ handleTransfer }: TopbarProps) {
-  const userPrivilige = localStorage.getItem('userPrivilige');
   const { selectedStudent } = useContext(studentsContext)!;
+  const { role } = useContext(CASContext)!;
   const [clearInput, setClearInput] = useState(false);
   const [isPolish, setIsPolish] = useState(false);
   const [anchorEl, setAnchorEl] = useState<HTMLImageElement | null>(null);
   const [open, setOpen] = useState(false);
   const [input, setInput] = useState('');
-  const [selectedOption, setSelectedOption] = useState('przedmioty');
+  const [selectedOption, setSelectedOption] = useState(role === 'STUDENT' ? 'przedmioty' : 'studenci');
+
+  useEffect(() => {
+    role && setSelectedOption(role === 'STUDENT' ? 'przedmioty' : 'studenci');
+  }, [role]);
 
   const changeSelectedOption = (option: string) => setSelectedOption(option);
 
@@ -178,14 +184,14 @@ export default function ({ handleTransfer }: TopbarProps) {
       <FlexboxColumn>
         <ClickAwayListener onClickAway={handleCloseDropdown}>
           <Flexbox>
-            {userPrivilige !== 'STUDENT' && (
+            {role !== 'STUDENT' && (
               <SelectMenu
                 changeSelectedOption={changeSelectedOption}
                 selectedOption={selectedOption}
                 changeDropdownOpen={setOpen}
               />
             )}
-            <InputWrapper isStudent={userPrivilige === 'STUDENT'}>
+            <InputWrapper isStudent={role === 'STUDENT'}>
               <Input
                 placeholder={`Wyszukaj ${selectedOption === 'studenci' ? 'studentów...' : 'przedmioty...'}`}
                 onChange={handleChange}

src/contexts/CASProvider.tsx

@@ -7,6 +7,8 @@ export interface CASContext {
   logout: () => void;
   token: string | undefined;
   refreshToken: string | undefined;
+  isFetchingToken: boolean;
+  role: string | undefined;
 }
 
 export const CASContext = createContext<CASContext | undefined>(undefined);
@@ -19,6 +21,8 @@ export const CASProvider = ({ children }: CASProviderProps) => {
   const [user, setUser] = useState<LoggedUser>();
   const [token, setToken] = useState<string | undefined>();
   const [refreshToken, setRefreshToken] = useState<string | undefined>();
+  const [role, setRole] = useState<string | undefined>(undefined);
+  const [isFetchingToken, setIsFetchingToken] = useState(false);
   useEffect(() => {
     const login = async () => {
       const urlParams = new URLSearchParams(window.location.search);
@@ -28,6 +32,7 @@ export const CASProvider = ({ children }: CASProviderProps) => {
       }
       try {
         if (!localStorage.getItem('userToken')) {
+          setIsFetchingToken(true);
           const { data: user } = await axiosInstance.get<LoggedUser & { token: string; refreshToken: string }>(
             `${process.env.REACT_APP_API_URL}/token?ticket=${ticket}`,
           );
@@ -36,11 +41,14 @@ export const CASProvider = ({ children }: CASProviderProps) => {
           localStorage.setItem('userToken', user.token);
           localStorage.setItem('userPrivilige', user.authorityRole);
           localStorage.setItem('refreshToken', user.refreshToken);
+          setIsFetchingToken(false);
         }
         const token = localStorage.getItem('userToken');
         const refreshToken = localStorage.getItem('refreshToken');
+        const role = localStorage.getItem('userPrivilige');
         token && setToken(token);
         refreshToken && setRefreshToken(refreshToken);
+        role && setRole(role);
       } catch (e) {
         console.log(e);
       }
@@ -63,5 +71,9 @@ export const CASProvider = ({ children }: CASProviderProps) => {
     window.location.replace(`https://cas.amu.edu.pl/cas/login?service=${window.origin}&locale=pl`);
   }
 
-  return <CASContext.Provider value={{ user, token, refreshToken, logout }}>{children}</CASContext.Provider>;
+  return (
+    <CASContext.Provider value={{ user, token, refreshToken, logout, isFetchingToken, role }}>
+      {children}
+    </CASContext.Provider>
+  );
 };

src/utils/axiosInstance.ts

@@ -37,6 +37,7 @@ axiosInstance.interceptors.response.use(
   },
   async (error) => {
     const originalRequest = error.config;
+    console.log("original request is: ", originalRequest)
     if (error.response.status === 403 && !originalRequest._retry) {
       originalRequest._retry = true;
       const access_token = await getNewTokens();