From 6f0c6b096e514d0e953be9582a2b5ecc751f03d5 Mon Sep 17 00:00:00 2001
From: Bastien Dumont <bdumont@grandlyon.com>
Date: Thu, 14 Sep 2023 11:03:04 +0200
Subject: [PATCH] remove suspense
---
.vscode/settings.json | 2 +-
src/API.ts | 5 ++-
src/App.tsx | 1 -
src/components/Layout/layout.module.scss | 4 +--
src/components/Loader/loader.scss | 4 +--
src/components/Routes/Router.tsx | 45 +++++++++---------------
6 files changed, 23 insertions(+), 38 deletions(-)
diff --git a/.vscode/settings.json b/.vscode/settings.json
index f4bf373f..9d92bf0c 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -29,7 +29,7 @@
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll": true,
- "source.organizeImports": false
+ "source.organizeImports": true
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"peacock.color": "#2aa63d",
diff --git a/src/API.ts b/src/API.ts
index 8b3ec5b1..e8e2df1f 100644
--- a/src/API.ts
+++ b/src/API.ts
@@ -13,8 +13,8 @@ export const useWhoAmI = () => {
queryKey: ['WhoAmI'],
queryFn: fetchWhoAmI,
retry: false,
- onError: () => {
- console.log('error whoami')
+ onError: error => {
+ console.error('error whoami', error)
toast.error('Accès refusé, veuillez vous connecter')
},
refetchOnMount: false,
@@ -22,6 +22,5 @@ export const useWhoAmI = () => {
}
export const fetchLogout = async () => {
- console.log('fetch logout')
return await axios.get('/Logout')
}
diff --git a/src/App.tsx b/src/App.tsx
index 35fe4e0d..980923de 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,7 +5,6 @@ import 'react-toastify/dist/ReactToastify.css'
import Layout from './components/Layout/Layout'
import Router from './components/Routes/Router'
-// provide the default query function to your app with defaultOptions
const queryClient = new QueryClient()
function App() {
diff --git a/src/components/Layout/layout.module.scss b/src/components/Layout/layout.module.scss
index e4a59aad..8735c26f 100644
--- a/src/components/Layout/layout.module.scss
+++ b/src/components/Layout/layout.module.scss
@@ -3,6 +3,8 @@
.root {
display: flex;
+ background: $dark-bg;
+ height: 100vh;
}
.wrapper {
@@ -11,9 +13,7 @@
0px 5px 5px rgb(0 0 0 / 20%),
0px 3px 14px rgb(0 0 0 / 12%),
0px 8px 10px rgb(0 0 0 / 14%);
- background: $dark-bg;
overflow-y: scroll;
- height: 100vh;
@media screen and (max-width: $width-tablet) {
margin-left: 0;
diff --git a/src/components/Loader/loader.scss b/src/components/Loader/loader.scss
index 872512dc..0f9e2144 100644
--- a/src/components/Loader/loader.scss
+++ b/src/components/Loader/loader.scss
@@ -1,9 +1,8 @@
@import '../../styles/config/colors.scss';
.loader-container {
- width: 100%;
- height: 80vh;
display: flex;
+ height: 100%;
overflow: hidden;
}
.loader {
@@ -23,7 +22,6 @@
background: -o-linear-gradient(left, $gold 10%, rgba(255, 255, 255, 0) 42%);
background: -ms-linear-gradient(left, $gold 10%, rgba(255, 255, 255, 0) 42%);
background: linear-gradient(to right, $gold 10%, rgba(255, 255, 255, 0) 42%);
- position: relative;
-webkit-animation: load3 1.4s infinite linear;
animation: load3 1.4s infinite linear;
-webkit-transform: translateZ(0);
diff --git a/src/components/Routes/Router.tsx b/src/components/Routes/Router.tsx
index ed9f964a..8f3f1212 100644
--- a/src/components/Routes/Router.tsx
+++ b/src/components/Routes/Router.tsx
@@ -1,4 +1,3 @@
-import { Suspense } from 'react'
import { Navigate, Route, Routes } from 'react-router-dom'
import { useWhoAmI } from '../../API'
import Consents from '../Consents/Consents'
@@ -38,37 +37,27 @@ export const routes = Object.keys(links).map(key => ({
}))
const Router = () => {
- const { data: user, error, isFetching } = useWhoAmI()
+ const { data: user, isLoading } = useWhoAmI()
- if (isFetching) return <Loader />
-
- if (error) return <div>Une erreur est survenue</div>
+ if (isLoading) return <Loader />
if (user) {
return (
- <Suspense
- fallback={
- <div className="loaderContainer">
- <Loader />
- </div>
- }
- >
- <Routes>
- <>
- <Route path={links.newsletter.path} element={<Newsletter />} />
- <Route path={links.prices.path} element={<Prices />} />
- <Route path="/popups" element={<Popups />} />
- {user.isAdmin && (
- <Route path={links.consents.path} element={<Consents />} />
- )}
- <Route path="/login" element={<Login />} />
- <Route
- path="*"
- element={<Navigate replace to={links.newsletter.path} />}
- />
- </>
- </Routes>
- </Suspense>
+ <Routes>
+ <>
+ <Route path={links.newsletter.path} element={<Newsletter />} />
+ <Route path={links.prices.path} element={<Prices />} />
+ <Route path="/popups" element={<Popups />} />
+ {user.isAdmin && (
+ <Route path={links.consents.path} element={<Consents />} />
+ )}
+ <Route path="/login" element={<Login />} />
+ <Route
+ path="*"
+ element={<Navigate replace to={links.newsletter.path} />}
+ />
+ </>
+ </Routes>
)
}
--
GitLab