fix: package list refresh based on logged-in user (#415)

* 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

* 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.
Test snapshots updated

Resolves issue #414

Co-authored-by: Juan Picado @jotadeveloper <juanpicado19@gmail.com>

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: <Header />
    */
   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 (
     <>
       <StyleBaseline />
       <StyledBox display="flex" flexDirection="column" height="100%">
-        {isLoading ? (
-          <Loading />
-        ) : (
-          <>
-            <Router history={history}>
-              <AppContextProvider packages={packages} user={user}>
-                <Header />
-                <StyledBoxContent flexGrow={1}>
-                  <AppRoute />
-                </StyledBoxContent>
-              </AppContextProvider>
-            </Router>
-            <Footer />
-          </>
-        )}
+        <>
+          <Router history={history}>
+            <AppContextProvider user={user}>
+              <Header />
+              <StyledBoxContent flexGrow={1}>
+                {/* eslint-disable-next-line react/jsx-max-depth */}
+                <AppRoute />
+              </StyledBoxContent>
+            </AppContextProvider>
+          </Router>
+          <Footer />
+        </>
       </StyledBox>
     </>
   );

src/App/AppContext.ts

@@ -3,7 +3,6 @@ import { createContext } from 'react';
 export interface AppProps {
   user?: User;
   scope: string;
-  packages: any[];
 }
 
 export interface User {

src/App/AppContextProvider.tsx

@@ -3,15 +3,13 @@ import React, { useState, useEffect } from 'react';
 import AppContext, { AppProps, User } from './AppContext';
 
 interface Props {
-  packages: any[];
   user?: User;
 }
 
 /* eslint-disable react-hooks/exhaustive-deps */
-const AppContextProvider: React.FC<Props> = ({ children, packages, user }) => {
+const AppContextProvider: React.FC<Props> = ({ children, user }) => {
   const [state, setState] = useState<AppProps>({
     scope: window.VERDACCIO_SCOPE || '',
-    packages,
     user,
   });
 
@@ -22,13 +20,6 @@ const AppContextProvider: React.FC<Props> = ({ children, packages, user }) => {
     });
   }, [user]);
 
-  useEffect(() => {
-    setState({
-      ...state,
-      packages,
-    });
-  }, [packages]);
-
   const setUser = (user?: User) => {
     setState({
       ...state,

src/App/AppRoute.tsx

@@ -30,7 +30,7 @@ const AppRoute: React.FC = () => {
     throw Error('The app Context was not correct used');
   }
 
-  const { user, packages } = appContext;
+  const { user } = appContext;
 
   const isUserLoggedIn = user && user.username;
 
@@ -39,7 +39,7 @@ const AppRoute: React.FC = () => {
       <Suspense fallback={<Loading />}>
         <Switch>
           <ReactRouterDomRoute exact={true} path={Route.ROOT}>
-            <HomePage isUserLoggedIn={!!isUserLoggedIn} packages={packages || []} />
+            <HomePage isUserLoggedIn={!!isUserLoggedIn} />
           </ReactRouterDomRoute>
           <ReactRouterDomRoute exact={true} path={Route.PACKAGE}>
             <VersionContextProvider>