fixed token
This commit is contained in:
parent
72782880c0
commit
782dbf7218
@ -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 (
|
||||
<>
|
||||
<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>
|
||||
</>
|
||||
|
@ -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}
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
@ -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();
|
||||
|
Loading…
Reference in New Issue
Block a user