Indrajith K L
fc0064f6a0
* Implements Basic Routing and API * Implements Package.json file select and json parse * Displays Project Name, Version & Desc from the package.json * Fetch all package details using npm registry API and map it based on package name
31 lines
1.0 KiB
TypeScript
31 lines
1.0 KiB
TypeScript
import { useEffect, useState } from "preact/hooks";
|
|
|
|
export default function ListPackageDetails(props: any) {
|
|
const [packages, setPacakges] = useState(props.packages);
|
|
const [projectName, setProjectName] = useState(props.projectname);
|
|
const [projectVersion, setProjectVersion] = useState(props.projectversion);
|
|
const [projectDesc, setProjectDesc] = useState(props.projectdesc);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
useEffect(() => {
|
|
fetchRegistry();
|
|
}, [packages])
|
|
|
|
const fetchRegistry = async () => {
|
|
setIsLoading(true);
|
|
const response = await fetch("/api/npm", {
|
|
method: 'POST',
|
|
body: JSON.stringify(packages)
|
|
});
|
|
const data = await response.json();
|
|
setIsLoading(false);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<h3>{projectName}</h3>
|
|
<h4>{projectVersion}</h4>
|
|
<h5>{projectDesc}</h5>
|
|
{isLoading ? <>Loading</> : <>Data</>}
|
|
</div>
|
|
)
|
|
} |