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>
This commit is contained in:
coolsp
2020-01-12 22:21:29 +01:00
committed by Juan Picado @jotadeveloper
parent ee1c3f08eb
commit 222ffed022
8 changed files with 1319 additions and 128 deletions

View File

@@ -1,17 +1,35 @@
import React from 'react';
import React, { useEffect, useState } from 'react';
import { PackageList } from '../../components/PackageList';
import { PackageInterface } from '../../components/Package/Package';
import API from '../../utils/api';
import Loading from '../../components/Loading';
interface Props {
isUserLoggedIn: boolean;
packages: PackageInterface[];
}
const Home: React.FC<Props> = ({ packages }) => (
<div className="container content">
<PackageList packages={packages} />
</div>
);
const Home: React.FC<Props> = ({ isUserLoggedIn }) => {
const [packages, setPackages] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const loadPackages = 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(() => {
loadPackages().then();
}, [isUserLoggedIn]);
return <div className="container content">{isLoading ? <Loading /> : <PackageList packages={packages} />}</div>;
};
export default Home;