From 782dbf721837a717056bcf4194de092cd177bb3e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciek=20G=C5=82owacki?= Date: Tue, 5 Jan 2021 21:05:16 +0100 Subject: [PATCH] fixed token --- src/components/App.tsx | 18 +++++++++++------- src/components/Topbar.tsx | 16 +++++++++++----- src/contexts/CASProvider.tsx | 14 +++++++++++++- src/utils/axiosInstance.ts | 1 + 4 files changed, 36 insertions(+), 13 deletions(-) diff --git a/src/components/App.tsx b/src/components/App.tsx index 37ca50b..c6d3313 100644 --- a/src/components/App.tsx +++ b/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,17 +20,21 @@ const Wrapper = styled.div` export const App = () => { const { isDataLoading } = useContext(coursesContext)!; + const { isFetchingToken, user, role } = useContext(CASContext)!; const [isOpenTransfer, setOpenTransfer] = useState(false); - const handleTransfer = () => { + const handleTransfer = () => { setOpenTransfer(!isOpenTransfer); }; const userPrivilige = localStorage.getItem('userPrivilige'); - + console.log('role of that user is: ', role); + useEffect(() => { + console.log('is fetching token: ', isFetchingToken); + }, [isFetchingToken]); return ( <> - }> + }> @@ -38,9 +43,8 @@ export const App = () => { - )} { userPrivilige === 'DEANERY' && ( - - )} + )}{' '} + {userPrivilige === 'DEANERY' && } diff --git a/src/components/Topbar.tsx b/src/components/Topbar.tsx index e33e018..552d59c 100644 --- a/src/components/Topbar.tsx +++ b/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(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) { - {userPrivilige !== 'STUDENT' && ( + {role !== 'STUDENT' && ( )} - + void; token: string | undefined; refreshToken: string | undefined; + isFetchingToken: boolean; + role: string | undefined; } export const CASContext = createContext(undefined); @@ -19,6 +21,8 @@ export const CASProvider = ({ children }: CASProviderProps) => { const [user, setUser] = useState(); const [token, setToken] = useState(); const [refreshToken, setRefreshToken] = useState(); + const [role, setRole] = useState(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( `${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 {children}; + return ( + + {children} + + ); }; diff --git a/src/utils/axiosInstance.ts b/src/utils/axiosInstance.ts index 066c670..cb82f86 100644 --- a/src/utils/axiosInstance.ts +++ b/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();