Initial Commit

* 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

1 files changed, 31 insertions, 0 deletions

diff --git a/islands/ListPackageDetails.tsx b/islands/ListPackageDetails.tsx
new file mode 100644
index 0000000..3b7c36f
--- /dev/null
+++ b/islands/ListPackageDetails.tsx
@@ -0,0 +1,31 @@
+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>

+    )

+}
\ No newline at end of file