From 7eb51ad4109edc4c69d598982cf5fcac05961daa Mon Sep 17 00:00:00 2001 From: Peter Cools Date: Thu, 9 Jan 2020 21:43:57 +0100 Subject: [PATCH 1/2] fix: package list refresh based on logged-in user description: In `pages/home/Home.tsx` now monitoring any change in a user log-in/out which will trigger a new `API.request` to get the _packages_ from the Verdaccio-server. This is done by creating a `useEffect` on **isUserLoggedIn**. Code has been transplanted from `App/App.tsx` including the use of the Loading component during the XHR. The use of **packages** was removed from other components as no longer needed and tests updated. Resolves issue #414 --- src/App/App.tsx | 50 +++++-------------- src/App/AppContext.ts | 1 - src/App/AppContextProvider.tsx | 11 +--- src/App/AppRoute.tsx | 4 +- src/components/Header/Header.test.tsx | 14 +++--- .../LoginDialog/LoginDialog.test.tsx | 1 - src/pages/home/Home.tsx | 34 ++++++++++--- 7 files changed, 49 insertions(+), 66 deletions(-) diff --git a/src/App/App.tsx b/src/App/App.tsx index 7ee8c8e0f..c2ba2194f 100644 --- a/src/App/App.tsx +++ b/src/App/App.tsx @@ -5,11 +5,9 @@ import { Router } from 'react-router-dom'; import storage from '../utils/storage'; import { isTokenExpire } from '../utils/login'; -import API from '../utils/api'; import Header from '../components/Header'; import Footer from '../components/Footer'; import Box from '../muiComponents/Box'; -import Loading from '../components/Loading'; import StyleBaseline from '../design-tokens/StyleBaseline'; import { Theme } from '../design-tokens/theme'; @@ -33,11 +31,9 @@ const StyledBoxContent = styled(Box)<{ theme?: Theme }>(({ theme }) => ({ /* eslint-disable react-hooks/exhaustive-deps */ const App: React.FC = () => { const [user, setUser] = useState(); - const [packages, setPackages] = useState([]); - const [isLoading, setIsLoading] = useState(true); /** - * Logouts user + * Logout user * Required by:
*/ const logout = () => { @@ -59,46 +55,26 @@ const App: React.FC = () => { setUser({ username }); }; - const loadOnHandler = async () => { - try { - const packages = await API.request('packages', 'GET'); - // FIXME add correct type for package - setPackages(packages as never[]); - } catch (error) { - // FIXME: add dialog - console.error({ - title: 'Warning', - message: `Unable to load package list: ${error.message}`, - }); - } - - setIsLoading(false); - }; - useEffect(() => { checkUserAlreadyLoggedIn(); - loadOnHandler(); }, []); return ( <> - {isLoading ? ( - - ) : ( - <> - - -
- - - - - -