feat(web): package page

web/pages/packages/[id]/index.tsx

@@ -1,56 +1,89 @@
+import axios from "axios";
 import { useRouter } from "next/router";
+import { useQuery } from "react-query";
+import QueryString from "qs";
 
 import styles from "../../../styles/PackagePage.module.css";
 
-const testData = {
-  id: "chrome",
-  name: "Google Chrome",
-  description: "Google Chrome is a web browser made by Google LLC",
-  logo: "https://www.google.se/chrome/static/images/chrome-logo.svg",
 
-  authour: {
-    username: "google",
-    name: "Google LLC",
-  },
-};
+async function installPackage(id: string) {
+  let os;
+  if (navigator.appVersion.indexOf("Win") >= 0) os = "windows";
+  if (navigator.appVersion.indexOf("Mac") >= 0) os = "macos";
 
-const About = () => {
-  return (
-    <div>
-      <p>{testData.description}</p>
-    </div>
-  );
-};
+  if (!os) {
+    alert("Sorry, this browser is not supported.");
+    return;
+  }
 
-const PackagePage = () => {
-  const router = useRouter();
-  const { id } = router.query;
+  const params = QueryString.stringify({
+    package: id,
+    platform: os,
+  });
+  const { data } = await axios.get(`https://api.bytecube.tk/package/install?${params}`);
+  const { url } = data;
+
+  window.location.href = url;
+}
+
+const Package: React.FC<{ id: string }> = ({ id }) => {
+  const { data: packageData } = useQuery("packageData", async () => {
+    const params = QueryString.stringify({
+      package: id
+    });
+
+    const { data } = await axios.get(`https://api.bytecube.tk/package/meta?${params}`);
+    return data;
+  });
+
+  if (!packageData) {
+    return <div>Loading...</div>;
+  }
 
   return (
-    <div>
-      <div className={`${styles.package}`}>
+    <div className={`${styles.package}`}>
+      <div className={`${styles.package__header}`}>
         <div className={`${styles.package__info}`}>
-          <img className={`${styles.package__logo}`} src={testData.logo} />
+          <img className={`${styles.package__logo}`} src={null} />
           <div className={`${styles.package__text}`}>
-            <h2 className={`${styles.package__name}`}>{testData.name}</h2>
-            <h3 className={`${styles.package__author}`}>
-              by{" "}
-              <span className={`${styles.author}`}>
-                {testData.authour.name}
-              </span>
-            </h3>
+            <h2 className={`${styles.package__name}`}>{packageData.name}</h2>
+            {
+              packageData.author &&
+              <h3 className={`${styles.package__author}`}>
+                by{" "}
+                <span className={`${styles.author}`}>
+                  {packageData.author.name}
+                </span>
+              </h3>
+            }
           </div>
         </div>
-        <button className={`${styles.package__install}`}>Install</button>
+        <button
+          className={`${styles.package__install}`}
+          onClick={() => {
+            console.log("Install package");
+            installPackage(id);
+          }}
+        >Install</button>
       </div>
-      <div>
-        <div>About</div>
-        <div>Blog</div>
-        <div>Versions</div>
+      <div className={`${styles.package__description}`}>
+        <p>{packageData.description}</p>
       </div>
-      <About />
     </div>
   );
 };
 
+const PackagePage = () => {
+  const router = useRouter();
+  const { id } = router.query;
+
+  if (!id) {
+    return <div>Loading...</div>
+  }
+
+  return (
+    <Package id={id as string} />
+  );
+};
+
 export default PackagePage;

web/pages/packages/index.tsx

@@ -1,12 +1,11 @@
 import { Package } from "../../types/Package";
 import { useQuery } from "react-query";
 import axios from "axios";
+import Link from "next/link";
 
 const PackagesPage = () => {
   const { data: allPackagesData } = useQuery("allPackagesData", async () => {
     const { data } = await axios.get(`https://api.bytecube.tk/package/list`);
-
-    console.log(data);
     return data;
   });
 
@@ -18,9 +17,9 @@ const PackagesPage = () => {
         packages.map((data: Package) => {
           return (
             <div>
-              <h1>{data.name}</h1>
-              <h1>{data.description}</h1>
-              <h1>{data.version}</h1>
+              <Link href={`/packages/${data.name}`}>
+                <a>{data.name}</a>
+              </Link>
             </div>
           );
         })

web/styles/PackagePage.module.css

@@ -1,7 +1,15 @@
 .package {
-  padding: 0 200px;
+  padding: 200px;
   box-sizing: border-box;
 
+  width: 100%;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.package__header {
   width: 100%;
   height: 150px;
 
@@ -47,10 +55,25 @@
   height: 70px;
 
   border-radius: 10px;
+  cursor: pointer;
   background-color: var(--accent);
   border: 0;
   outline: 0;
 }
+.package__description {
+  font-size: 40px;
+  width: 100%;
+
+  margin-top: 40px;
+  border-top: 1px solid #999999;
+  padding-top: 40px;
+}
+.package__install:hover {
+  background-color: var(--accent-hover);
+}
+.package__install:active {
+  background-color: var(--accent-select);
+}
 
 .author {
   font-weight: normal;