feat: install from store

shellops · Feb 24, 2021 · d532e3b · d532e3b
1 parent c158fad
commit d532e3b
Showing 1 changed file with 34 additions and 11 deletions.
diff --git a/pages/machines/[host]/store.tsx b/pages/machines/[host]/store.tsx
@@ -1,26 +1,49 @@
+import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
+import LoadingSpinner from "../../../components/layout/loading";
 import fetchMachine from "../../../lib/fetch-machine";
 import { AppProps } from "../../../lib/interfaces/app-props.interface";
 
 import styles from "./store.module.scss";
 
-export default function Store({ machine }: AppProps) {
+export default function Store({ machine, refreshMachines }: AppProps) {
   const [templates, templatesChange] = useState([]);
+  const [loading, loadingChange] = useState(true);
+
+  const router = useRouter();
+
+  function installApp(template) {
+    loadingChange(true);
+    fetchMachine(
+      `/api/v1/machine/apps`,
+      machine.urlToken,
+      "POST",
+      template
+    ).then(() => {
+      refreshMachines().then(() => {
+        router.replace(`/machines/${machine.hostname}/apps`);
+      });
+    });
+  }
 
   useEffect(() => {
-    fetchMachine(`/api/v1/store/app-templates`, machine.urlToken).then(
-      async (res) => {
-        templatesChange(res);
-      }
-    );
-  });
-
-  return (
+    if (machine?.urlToken)
+      fetchMachine(`/api/v1/store/app-templates`, machine.urlToken).then(
+        (res) => {
+          templatesChange(res);
+          loadingChange(false);
+        }
+      );
+  }, [machine]);
+
+  return loading ? (
+    <LoadingSpinner />
+  ) : (
     <>
       <div className={styles.bg}></div>
       <div className="container">
         {templates.map((template) => (
-          <div className={styles.box}>
+          <div key={template.name} className={styles.box}>
             <div className={styles.title}>
               <img src="template.logo" alt="" />
               {template.name} {template.version}
@@ -29,7 +52,7 @@ export default function Store({ machine }: AppProps) {
             <p className={styles.desc}>{template.description}</p>
 
             <div className={styles.buttons}>
-              <button>Install</button>
+              <button onClick={() => installApp(template)}>Install</button>
             </div>
           </div>
         ))}