From 23f147ee39428e55d83c6254dea26d0696592d5f Mon Sep 17 00:00:00 2001
From: Rizky <rizky05@gmail.com>
Date: Sat, 28 Oct 2023 11:02:42 +0700
Subject: [PATCH] fix api deploy

---
 .../render/ed/panel/popup/api/api-deploy.tsx  | 191 ++++++++++++++++++
 .../render/ed/panel/popup/api/api-server.tsx  |  15 ++
 .../render/ed/panel/popup/api/api-utils.ts    |   5 +
 3 files changed, 211 insertions(+)
 create mode 100644 app/web/src/render/ed/panel/popup/api/api-deploy.tsx

diff --git a/app/web/src/render/ed/panel/popup/api/api-deploy.tsx b/app/web/src/render/ed/panel/popup/api/api-deploy.tsx
new file mode 100644
index 00000000..7cf3ee17
--- /dev/null
+++ b/app/web/src/render/ed/panel/popup/api/api-deploy.tsx
@@ -0,0 +1,191 @@
+import { format, formatDistance } from "date-fns";
+import { useGlobal } from "web-utils";
+import { EDGlobal } from "../../../logic/ed-global";
+import { apiRef, apiUrl, server } from "./api-utils";
+
+export const EdApiDeploy = ({
+  deploy,
+}: {
+  deploy: {
+    current: number;
+    now: number;
+    deploys: number[];
+  };
+}) => {
+  const p = useGlobal(EDGlobal, "EDITOR");
+  const api = apiRef[apiUrl(p)];
+  const local = deploy;
+  const deploys = local.deploys;
+
+  return (
+    <div className="flex border-slate-200 boxed  flex flex-col items-stretch">
+      <div className="flex justify-between py-2 px-2 ">
+        <div>History:</div>
+        <div
+          className={cx(
+            "px-1 border border-blue-500 text-blue-500 cursor-pointer hover:bg-blue-500 hover:text-white",
+            server.status === "deploying" && "opacity-50"
+          )}
+          onClick={async () => {
+            if (server.status !== "deploying") {
+              server.status = "deploying";
+              p.render();
+
+              const res = await api._deploy({
+                type: "deploy",
+                id_site: p.site.id,
+                dlurl: `${serverurl}/site-export/${p.site.id}`,
+              });
+
+              server.status = "ready";
+              p.render();
+              if (res && res.current && Array.isArray(res.deploys)) {
+                local.current = res.current;
+                local.deploys = res.deploys;
+                alert("DEPLOY: OK");
+              } else {
+                alert("DEPLOY: FAILED");
+              }
+            }
+          }}
+        >
+          {server.status === "deploying" ? "Deploying..." : "Deploy"}
+        </div>
+      </div>
+      {deploys.length === 0 && (
+        <div className="flex items-center justify-center pb-4">
+          No Deployment
+        </div>
+      )}
+      <div className="overflow-auto h-[200px] relative border-t">
+        <div className="absolute inset-0">
+          {deploys
+            .sort()
+            .reverse()
+            .map((e) => {
+              let ago = "";
+              let date = "";
+              try {
+                date = format(e, "yyyy-MM-dd HH:mm:ss");
+                ago = formatDistance(e, local.now, { addSuffix: true });
+              } catch (e) {}
+              return (
+                <div
+                  key={e}
+                  onClick={async () => {
+                    if (local.current === e) return;
+                    if (
+                      server.status !== "deploying" &&
+                      server.status !== "saving"
+                    ) {
+                      server.status = "deploying";
+                      p.render();
+
+                      const res = await api._deploy({
+                        type: "redeploy",
+                        id_site: p.site.id,
+                        ts: e,
+                      });
+
+                      server.status = "ready";
+                      p.render();
+                      if (res && res.current && Array.isArray(res.deploys)) {
+                        local.current = res.current;
+                        local.deploys = res.deploys;
+                      } else {
+                        alert("DEPLOY: FAILED");
+                      }
+                    }
+                  }}
+                  className={cx(
+                    "pr-4 pl-1 py-1 hover:bg-blue-50 border-b flex justify-between items-center h-[30px] font-mono text-[10px]",
+                    local.current === e
+                      ? "bg-green-50 border-l-4 border-l-green-700"
+                      : "border-l-4 border-l-transparent",
+                    server.status !== "deploying" &&
+                      server.status !== "saving" &&
+                      local.current !== e
+                      ? "cursor-pointer"
+                      : "",
+                    css`
+                      &:hover {
+                        .deploy {
+                          display: flex;
+                        }
+                      }
+                    `
+                  )}
+                >
+                  <div className="">
+                    {date} · {ago}
+                  </div>
+                  {local.current !== e && (
+                    <div className="text-slate-400 hidden deploy">Redeploy</div>
+                  )}
+                  {local.current === e ? (
+                    <div className="text-green-800">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="15"
+                        height="15"
+                        fill="none"
+                        viewBox="0 0 15 15"
+                      >
+                        <path
+                          fill="currentColor"
+                          fillRule="evenodd"
+                          d="M11.467 3.727c.289.189.37.576.181.865l-4.25 6.5a.625.625 0 01-.944.12l-2.75-2.5a.625.625 0 01.841-.925l2.208 2.007 3.849-5.886a.625.625 0 01.865-.181z"
+                          clipRule="evenodd"
+                        ></path>
+                      </svg>
+                    </div>
+                  ) : (
+                    <div
+                      className="text-red-700 hidden deploy px-3 rounded-md hover:bg-red-100 -my-1 py-1 -mr-3 "
+                      onClick={async (evt) => {
+                        evt.stopPropagation();
+                        evt.preventDefault();
+                        if (!confirm("Delete this deploy ?")) return;
+                        server.status = "deploying";
+                        p.render();
+
+                        const res = await api._deploy({
+                          type: "deploy-del",
+                          id_site: p.site.id,
+                          ts: e,
+                        });
+
+                        server.status = "ready";
+                        p.render();
+                        if (res && res.current && Array.isArray(res.deploys)) {
+                          local.current = res.current;
+                          local.deploys = res.deploys;
+                        } else {
+                          alert("DELETE: FAILED");
+                        }
+                      }}
+                    >
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="13"
+                        height="13"
+                        fill="none"
+                        viewBox="0 0 15 15"
+                      >
+                        <path
+                          fill="currentColor"
+                          fillRule="evenodd"
+                          d="M5.5 1a.5.5 0 000 1h4a.5.5 0 000-1h-4zM3 3.5a.5.5 0 01.5-.5h8a.5.5 0 010 1H11v8a1 1 0 01-1 1H5a1 1 0 01-1-1V4h-.5a.5.5 0 01-.5-.5zM5 4h5v8H5V4z"
+                          clipRule="evenodd"
+                        ></path>
+                      </svg>
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/app/web/src/render/ed/panel/popup/api/api-server.tsx b/app/web/src/render/ed/panel/popup/api/api-server.tsx
index a365be83..c976d90f 100644
--- a/app/web/src/render/ed/panel/popup/api/api-server.tsx
+++ b/app/web/src/render/ed/panel/popup/api/api-server.tsx
@@ -4,6 +4,7 @@ import { EDGlobal } from "../../../logic/ed-global";
 import { apiRef, apiUrl, checkAPI, dev, server } from "./api-utils";
 import { EdApiDB } from "./api-db";
 import { EdApiDomain } from "./api-domain";
+import { EdApiDeploy } from "./api-deploy";
 
 export const EdApiServer = forwardRef<
   HTMLDivElement,
@@ -21,6 +22,11 @@ export const EdApiServer = forwardRef<
       oldDB: { url: "" },
       domains: [] as string[],
       hasDB: false,
+      deploy: {
+        now: 0,
+        current: 0,
+        deploys: [] as number[],
+      },
     },
     () => {
       try {
@@ -47,6 +53,9 @@ export const EdApiServer = forwardRef<
       local.oldDB = structuredClone(res.db);
       local.hasDB = res.hasDB;
       local.status = "online";
+      if (res.deploy) {
+        local.deploy = res.deploy;
+      }
       local.deployable = res.deployable;
       local.render();
     } else {
@@ -56,6 +65,11 @@ export const EdApiServer = forwardRef<
       local.hasDB = false;
       local.status = res;
       local.deployable = false;
+      local.deploy = {
+        now: 0,
+        current: 0,
+        deploys: [],
+      };
       local.render();
     }
   };
@@ -209,6 +223,7 @@ export const EdApiServer = forwardRef<
       {local.deployable && (
         <>
           <EdApiDomain domains={local.domains} />
+          <EdApiDeploy deploy={local.deploy} />
         </>
       )}
     </div>
diff --git a/app/web/src/render/ed/panel/popup/api/api-utils.ts b/app/web/src/render/ed/panel/popup/api/api-utils.ts
index d2f26f87..0084ccee 100644
--- a/app/web/src/render/ed/panel/popup/api/api-utils.ts
+++ b/app/web/src/render/ed/panel/popup/api/api-utils.ts
@@ -68,6 +68,11 @@ export const checkAPI = async (p: PG) => {
           db: res.db,
           hasDB: true,
           domains: res.domains as string[],
+          deploy: {
+            now: res.now,
+            current: res.current,
+            deploys: res.deploys,
+          },
         };
       }
     }