fix

app/web/src/nova/ed/logic/ed-site.ts

@@ -1,16 +1,15 @@
-import { waitUntil } from "web-utils";
+import { apiProxy } from "../../../base/load/api/api-proxy";
 import { viLoadLegacy } from "../../vi/load/load-legacy";
 import { viLoadSnapshot } from "../../vi/load/load-snapshot";
 import { apiRef, apiUrl } from "../panel/popup/api/api-utils";
 import { ESite, PG } from "./ed-global";
-import { apiProxy } from "../../../base/load/api/api-proxy";
 
 export const loadSite = async (p: PG, site: ESite, note: string) => {
   p.site = site;
   const url = apiUrl(p);
   if (!apiRef[url]) apiRef[url] = apiProxy(url) as any;
 
-  const api = apiRef[apiUrl(p)];
+  const api = apiRef[url];
   try {
     const res = await api._deploy({
       type: "db-ver",

app/web/src/nova/ed/panel/popup/api/api-server.tsx

@@ -1,11 +1,8 @@
 import { forwardRef } from "react";
-import { deepClone, useGlobal, useLocal } from "web-utils";
+import { useGlobal } from "web-utils";
 import { Modal } from "../../../../../utils/ui/modal";
 import { EDGlobal } from "../../../logic/ed-global";
-import { EdApiDB } from "./api-db";
+import { EdApiTab } from "./api-tab";
-import { EdApiDeploy } from "./api-deploy";
-import { EdApiDomain } from "./api-domain";
-import { apiRef, apiUrl, checkAPI, dev, server } from "./api-utils";
 import trim from "lodash.trim";
 
 export const EdPopApi = () => {
@@ -38,228 +35,45 @@ export const EdApiServer = forwardRef<
   }
 >(({ popover }, ref) => {
   const p = useGlobal(EDGlobal, "EDITOR");
-  const local = useLocal(
-    {
-      api_url: p.site.config.api_url,
-      status: "checking" as "online" | "error" | "offline" | "checking",
-      deployable: false,
-      db: { url: "" },
-      oldDB: { url: "" },
-      domains: [] as string[],
-      hasDB: false,
-      deploy: {
-        now: 0,
-        current: 0,
-        deploys: [] as number[],
-      },
-    },
-    () => {
-      try {
-        if (dev) {
-          const vdev = JSON.parse(localStorage.getItem("prasi-dev") || "{}");
-
-          if (vdev && Object.keys(vdev).length > 0) {
-            dev.url = vdev.url;
-            dev.enabled = vdev.enabled;
-          }
-        }
-      } catch (e) {}
-      check();
-    }
-  );
-
-  const url = apiUrl(p);
-
-  const check = async () => {
-    local.render();
-    const res = await checkAPI(p);
-    if (typeof res === "object") {
-      local.db = res.db;
-      local.domains = res.domains;
-      local.oldDB = deepClone(res.db);
-      local.hasDB = res.hasDB;
-      local.status = "online";
-      if (res.deploy) {
-        local.deploy = res.deploy;
-      }
-      local.deployable = res.deployable;
-      local.render();
-    } else {
-      local.db = { url: "" };
-      local.oldDB = { url: "" };
-      local.domains = [];
-      local.hasDB = false;
-      local.status = res;
-      local.deployable = false;
-      local.deploy = {
-        now: 0,
-        current: 0,
-        deploys: [],
-      };
-      local.render();
-    }
-  };
-  const update = async () => {
-    if (local.api_url !== p.site.config.api_url) {
-      server.status = "saving";
-      p.render();
-      p.site.config.api_url = trim(local.api_url, "/");
-      await p.sync?.site.update(p.site.id, {
-        config: { api_url: local.api_url },
-      });
-    }
-
-    if (local.hasDB && local.oldDB.url !== local.db.url) {
-      server.status = "saving";
-      p.render();
-
-      await apiRef[apiUrl(p)]._deploy({
-        type: "db-update",
-        id_site: p.site.id,
-        url: local.db.url,
-      });
-      local.oldDB.url = local.db.url;
-      p.render();
-    }
-
-    if (server.status === "saving") {
-      await check();
-      server.status = "ready";
-      p.render();
-    }
-  };
-  popover.onClose = update;
 
   return (
     <div
       ref={ref}
       className="flex flex-col w-[400px] items-stretch bg-white -mx-[8px] -my-[3px] text-[14px]"
     >
-      <div className="flex justify-between items-center pr-1">
+      <EdApiTab
-        <div className="p-1">Server URL:</div>
+        onRender={(update) => {
-        {url && (
+          popover.onClose = update;
-          <div className="text-[12px]">
+        }}
-            {local.status === "online" && (
+        id_site={p.site.id}
-              <div className="bg-green-700 px-2 text-white">ONLINE</div>
+        api_url={p.site.config.api_url}
-            )}
+        onUpdate={async ({ api_url }) => {
-            {local.status === "offline" && (
+          p.render();
-              <div className="text-white px-2 bg-slate-500">OFFLINE</div>
+          p.site.config.api_url = trim(api_url, "/");
-            )}
+          await p.sync?.site.update(p.site.id, {
-            {local.status === "error" && (
+            config: { api_url: api_url },
-              <div className="text-white px-2 bg-red-500">SERVER ERROR</div>
+          });
-            )}
-            {local.status === "checking" && (
-              <div className="text-blue-500">Checking...</div>
-            )}
-          </div>
-        )}
-        {!url && (
-          <div className="text-[12px] text-slate-500">INVALID SERVER</div>
-        )}
-      </div>
-      <div className="flex border-y">
-        <div className="flex flex-1 p-1 ">
-          <input
-            spellCheck={false}
-            value={local.api_url}
-            onChange={(e) => {
-              local.api_url = e.currentTarget.value;
-              if (
-                local.api_url.startsWith("http://") ||
-                local.api_url.startsWith("https://")
-              ) {
-                if (local.api_url.length > 8) {
-                  local.api_url = trim(local.api_url, "/");
-                }
-              }
-              local.render();
-            }}
-            onFocus={(e) => {
-              if (!e.currentTarget.value) {
-                local.api_url = `https://`;
-                local.render();
-              }
-            }}
-            type="text"
-            className={cx(
-              "outline-none focus:border-blue-500 flex-1",
-              dev.enabled && "line-through opacity-30"
-            )}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") {
-                e.currentTarget.blur();
-              }
-            }}
-            onBlur={update}
-            placeholder="https://..."
-          />
-        </div>
-      </div>
-      <div
-        className={cx(
-          "flex items-stretch h-[30px] border border-t-0",
-          dev.enabled ? " bg-green-50" : ""
-        )}
-      >
-        <div
-          className={cx(
-            "border cursor-pointer m-1 mr-0 flex items-center px-2 space-x-1 w-[70px] justify-center",
-            !dev.enabled
-              ? "hover:bg-green-50 hover:border-green-700 hover:text-green-700 text-slate-500 "
-              : "bg-green-700 text-white border-green-700"
-          )}
-          onClick={async () => {
-            dev.enabled = !dev.enabled;
-            localStorage.setItem("prasi-dev", JSON.stringify(dev));
-            local.render();
-            check();
-          }}
-        >
-          <span>DEV</span>{" "}
-          {dev.enabled && <span className="text-white">ON</span>}
-          {!dev.enabled && <span className="text-slate-300">OFF</span>}
-        </div>
 
-        <input
+          // if (local.hasDB && local.oldDB.url !== local.db.url) {
-          type="text"
+          //   server.status = "saving";
-          spellCheck={false}
+          //   p.render();
-          className={cx(
+
-            "px-1 m-1 border flex-1 font-mono text-[11px] outline-none focus:border-blue-500",
+          //   await apiRef[apiUrl(p)]._deploy({
-            dev.enabled && "border-green-700"
+          //     type: "db-update",
-          )}
+          //     id_site: p.site.id,
-          placeholder="http://local-dev-server"
+          //     url: local.db.url,
-          value={dev.url}
+          //   });
-          onChange={(e) => {
+          //   local.oldDB.url = local.db.url;
-            dev.url = e.currentTarget.value;
+          //   p.render();
-            localStorage.setItem("prasi-dev", JSON.stringify(dev));
+          // }
-            local.render();
+
-          }}
+          // if (server.status === "saving") {
-          onKeyDown={(e) => {
+          //   await check();
-            if (e.key === "Enter") {
+          //   server.status = "ready";
-              e.currentTarget.blur();
+          //   p.render();
-            }
+          // }
-          }}
+        }}
-          onBlur={check}
+      />
-        />
-      </div>
-      {local.status === "online" && (
-        <>
-          {!local.deployable && !local.db && (
-            <div className="h-[50px] flex items-center justify-center text-slate-400 text-center">
-              This server is not deployable <br />
-              and do not have DB
-            </div>
-          )}
-        </>
-      )}
-      {local.hasDB && (
-        <EdApiDB db={local.db} render={local.render} update={update} />
-      )}
-      {local.deployable && (
-        <>
-          <EdApiDeploy deploy={local.deploy} />
-        </>
-      )}
     </div>
   );
 });

app/web/src/nova/ed/panel/popup/api/api-tab.tsx

@@ -0,0 +1,167 @@
+import trim from "lodash.trim";
+import { FC } from "react";
+import { deepClone, useLocal } from "web-utils";
+import { EdApiDB } from "./api-db";
+import { EdApiDeploy } from "./api-deploy";
+import { apiRef, checkAPI, dev, server } from "./api-utils";
+
+export const EdApiTab: FC<{
+  onRender: (fn: () => void) => void;
+  api_url: string;
+  id_site: string;
+  onUpdate: (arg: { api_url: string }) => {};
+}> = ({ onRender, api_url, id_site, onUpdate }) => {
+  const local = useLocal(
+    {
+      api_url,
+      status: "checking" as "online" | "error" | "offline" | "checking",
+      deployable: false,
+      db: { url: "" },
+      oldDB: { url: "" },
+      domains: [] as string[],
+      hasDB: false,
+      deploy: {
+        now: 0,
+        current: 0,
+        deploys: [] as number[],
+      },
+    },
+    () => {
+      try {
+        if (dev) {
+          const vdev = JSON.parse(localStorage.getItem("prasi-dev") || "{}");
+
+          if (vdev && Object.keys(vdev).length > 0) {
+            dev.url = vdev.url;
+            dev.enabled = vdev.enabled;
+          }
+        }
+      } catch (e) {}
+      check();
+    }
+  );
+
+  const url = api_url;
+
+  const check = async () => {
+    local.render();
+    const res = await checkAPI(api_url, id_site);
+    if (typeof res === "object") {
+      local.db = res.db;
+      local.domains = res.domains;
+      local.oldDB = deepClone(res.db);
+      local.hasDB = res.hasDB;
+      local.status = "online";
+      if (res.deploy) {
+        local.deploy = res.deploy;
+      }
+      local.deployable = res.deployable;
+      local.render();
+    } else {
+      local.db = { url: "" };
+      local.oldDB = { url: "" };
+      local.domains = [];
+      local.hasDB = false;
+      local.status = res;
+      local.deployable = false;
+      local.deploy = {
+        now: 0,
+        current: 0,
+        deploys: [],
+      };
+      local.render();
+    }
+  };
+  const update = async () => {
+    if (local.api_url !== api_url) {
+      server.status = "saving";
+      onUpdate({ api_url: local.api_url });
+    }
+  };
+
+  onRender(update);
+
+  return (
+    <>
+      <div className="flex justify-between items-center pr-1">
+        <div className="p-1">Server URL:</div>
+        {url && (
+          <div className="text-[12px]">
+            {local.status === "online" && (
+              <div className="bg-green-700 px-2 text-white">ONLINE</div>
+            )}
+            {local.status === "offline" && (
+              <div className="text-white px-2 bg-slate-500">OFFLINE</div>
+            )}
+            {local.status === "error" && (
+              <div className="text-white px-2 bg-red-500">SERVER ERROR</div>
+            )}
+            {local.status === "checking" && (
+              <div className="text-blue-500">Checking...</div>
+            )}
+          </div>
+        )}
+        {!url && (
+          <div className="text-[12px] text-slate-500">INVALID SERVER</div>
+        )}
+      </div>
+      <div className="flex border-y">
+        <div className="flex flex-1 p-1 ">
+          <input
+            spellCheck={false}
+            value={local.api_url}
+            onChange={(e) => {
+              local.api_url = e.currentTarget.value;
+              if (
+                local.api_url.startsWith("http://") ||
+                local.api_url.startsWith("https://")
+              ) {
+                if (local.api_url.length > 8) {
+                  local.api_url = trim(local.api_url, "/");
+                }
+              }
+              local.render();
+            }}
+            onFocus={(e) => {
+              if (!e.currentTarget.value) {
+                local.api_url = `https://`;
+                local.render();
+              }
+            }}
+            type="text"
+            className={cx(
+              "outline-none focus:border-blue-500 flex-1",
+              dev.enabled && "line-through opacity-30"
+            )}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.currentTarget.blur();
+              }
+            }}
+            onBlur={update}
+            placeholder="https://..."
+          />
+        </div>
+      </div>
+
+      {local.status === "online" && (
+        <>
+          {!local.deployable && !local.db && (
+            <div className="h-[50px] flex items-center justify-center text-slate-400 text-center">
+              This server is not deployable <br />
+              and do not have DB
+            </div>
+          )}
+        </>
+      )}
+      {local.hasDB && (
+        <EdApiDB db={local.db} render={local.render} update={update} />
+      )}
+      {local.deployable && (
+        <>
+          <EdApiDeploy deploy={local.deploy} />
+        </>
+      )}
+    </>
+  );
+};

app/web/src/nova/ed/panel/popup/api/api-utils.ts

@@ -20,36 +20,11 @@ export const server = {
     | "restarting",
 };
 
-export const apiUrl = function (p: PG): string {
+export const apiUrl = (p: PG) => {
-  if (dev.enabled) {
+  return p.site?.config?.api_url || "";
-    return dev.url;
-  }
-
-  if (!dev.lastURL) {
-    dev.lastURL = { valid: false, url: "" };
-  }
-
-  if (!dev.lastURL.valid || dev.lastURL.url !== p.site.config.api_url) {
-    try {
-      const url = new URL(p.site.config.api_url);
-      if (url && url.hostname && url.protocol.startsWith("http")) {
-        dev.lastURL.valid = true;
-        return p.site.config.api_url;
-      }
-      dev.lastURL.valid = false;
-    } catch (e) {
-      dev.lastURL.valid = false;
-    }
-  }
-
-  if (dev.lastURL.valid) return p.site.config.api_url;
-
-  return "";
 };
 
-export const checkAPI = async (p: PG) => {
+export const checkAPI = async (url: string, id_site: string) => {
-  const url = apiUrl(p);
-
   if (!url) return "offline";
 
   try {
@@ -62,7 +37,7 @@ export const checkAPI = async (p: PG) => {
     } else {
       let res = await capi._deploy({
         type: "check",
-        id_site: p.site.id,
+        id_site,
       });
 
       if (!res) {