52 lines
1.5 KiB
JavaScript
52 lines
1.5 KiB
JavaScript
import { useState, useEffect } from 'react';
|
|
import { HashRouter } from 'react-router-dom';
|
|
import { Router } from './components/router';
|
|
import { ApiContext } from './utils/api_context';
|
|
import { AuthContext } from './utils/auth_context';
|
|
import { useApi } from './utils/use_api';
|
|
import { useJwtRefresh } from './utils/use_jwt_refresh';
|
|
import { RolesContext } from './utils/roles_context';
|
|
import { parseJwt } from './utils/parse_jwt';
|
|
import { Toaster } from 'react-hot-toast';
|
|
import './app.css';
|
|
import 'leaflet/dist/leaflet.css';
|
|
|
|
export const App = () => {
|
|
const [authToken, setAuthToken] = useState(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
// Refresh the jwt token automatically
|
|
useJwtRefresh(authToken, setAuthToken);
|
|
|
|
// api instance
|
|
const api = useApi(authToken);
|
|
|
|
// get initial jwt using refresh token
|
|
useEffect(async () => {
|
|
const result = await api.get('/refresh_token');
|
|
if (result.token) {
|
|
setAuthToken(result.token);
|
|
}
|
|
setLoading(false);
|
|
}, []);
|
|
|
|
const jwtPayload = parseJwt(authToken);
|
|
|
|
// don't display anything while trying to get user token
|
|
// can display a loading screen here if desired
|
|
if (loading) return null;
|
|
|
|
return (
|
|
<AuthContext.Provider value={[authToken, setAuthToken]}>
|
|
<ApiContext.Provider value={api}>
|
|
<RolesContext.Provider value={jwtPayload.roles}>
|
|
<Toaster position="top-center" />
|
|
<HashRouter>
|
|
<Router />
|
|
</HashRouter>
|
|
</RolesContext.Provider>
|
|
</ApiContext.Provider>
|
|
</AuthContext.Provider>
|
|
);
|
|
};
|