forked from sombochea/verdaccio-ui
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:
committed by
Juan Picado @jotadeveloper
parent
ee1c3f08eb
commit
222ffed022
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user