From fc0064f6a0ed4c66a726a93786f7e1bb39bcfe80 Mon Sep 17 00:00:00 2001
From: Indrajith K L
Date: Sat, 13 May 2023 11:17:27 +0530
Subject: 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

---
 islands/ListPackageDetails.tsx | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 islands/ListPackageDetails.tsx

(limited to 'islands/ListPackageDetails.tsx')

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
-- 
cgit v1.2.3