From 99738105a286ff07afe7488b4d4c5b76d60de8a3 Mon Sep 17 00:00:00 2001
From: Rizky <rizky@avolut.com>
Date: Thu, 11 Jul 2024 19:16:54 -0700
Subject: [PATCH] fix breadcrumb promised

---
 comps/custom/Breadcrumb.tsx | 113 +++++++++++++++++++++++-------------
 preset/menu/Layout.tsx      |  10 ++--
 2 files changed, 76 insertions(+), 47 deletions(-)

diff --git a/comps/custom/Breadcrumb.tsx b/comps/custom/Breadcrumb.tsx
index 630d081..2faa6f5 100755
--- a/comps/custom/Breadcrumb.tsx
+++ b/comps/custom/Breadcrumb.tsx
@@ -18,6 +18,29 @@ type BreadcrumbProps = {
 };
 
 export const Breadcrumb: FC<BreadcrumbProps> = ({ value, className }) => {
+  const local = useLocal({ value: value, loading: false, loaded: false });
+
+  useEffect(() => {
+    if (local.loaded) {
+      local.loaded = false;
+      local.render();
+    }
+  }, [location.pathname, location.hash]);
+
+  if (value instanceof Promise) {
+    if (!local.loaded) {
+      local.loading = true;
+      value.then((v) => {
+        local.value = v;
+        local.loading = false;
+        local.loaded = true;
+        local.render();
+      });
+    }
+  } else {
+    local.value = value;
+  }
+
   return (
     <div
       className={cx(
@@ -25,49 +48,57 @@ export const Breadcrumb: FC<BreadcrumbProps> = ({ value, className }) => {
         className
       )}
     >
-      {(value || []).map((cur, index): ReactNode => {
-        const lastIndex = (value || []).length - 1;
+      {local.loading ? (
+        <FieldLoading />
+      ) : (
+        <>
+          {(Array.isArray(local.value) ? local.value : []).map(
+            (cur, index): ReactNode => {
+              const lastIndex = (local.value || []).length - 1;
 
-        return (
-          <>
-            {index === lastIndex ? (
-              <h1 className="c-font-semibold c-text-xs md:c-text-base">
-                {cur?.label}
-              </h1>
-            ) : (
-              <h1
-                className="c-font-normal c-text-xs md:c-text-base hover:c-cursor-pointer hover:c-underline"
-                onClick={(ev) => {
-                  if (isEditor) return;
-                  if (cur.url) navigate(cur.url || "");
-                  if (cur.onClick) cur.onClick(ev);
-                }}
-              >
-                {cur?.label}
-              </h1>
-            )}
+              return (
+                <>
+                  {index === lastIndex ? (
+                    <h1 className="c-font-semibold c-text-xs md:c-text-base">
+                      {cur?.label}
+                    </h1>
+                  ) : (
+                    <h1
+                      className="c-font-normal c-text-xs md:c-text-base hover:c-cursor-pointer hover:c-underline"
+                      onClick={(ev) => {
+                        if (isEditor) return;
+                        if (cur.url) navigate(cur.url || "");
+                        if (cur.onClick) cur.onClick(ev);
+                      }}
+                    >
+                      {cur?.label}
+                    </h1>
+                  )}
 
-            {index !== lastIndex && (
-              <div>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="1"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  className="lucide lucide-chevron-right"
-                >
-                  <path d="m9 18 6-6-6-6" />
-                </svg>
-              </div>
-            )}
-          </>
-        );
-      })}
+                  {index !== lastIndex && (
+                    <div>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="1"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        className="lucide lucide-chevron-right"
+                      >
+                        <path d="m9 18 6-6-6-6" />
+                      </svg>
+                    </div>
+                  )}
+                </>
+              );
+            }
+          )}
+        </>
+      )}
     </div>
   );
 };
diff --git a/preset/menu/Layout.tsx b/preset/menu/Layout.tsx
index ef784ce..647b860 100755
--- a/preset/menu/Layout.tsx
+++ b/preset/menu/Layout.tsx
@@ -1,6 +1,7 @@
 import { getPathname } from "lib/utils/pathname";
 import { FC, ReactNode, useEffect, useLayoutEffect, useState } from "react";
 import { loadSession } from "../login/utils/load";
+import { useLocal } from "lib/utils/use-local";
 
 const w = window as any;
 const fn = function () {
@@ -39,8 +40,8 @@ type LYTChild = {
 };
 
 export const Layout: FC<LYTChild> = (props) => {
-  const [_, set] = useState({});
-  const render = () => set({});
+  const local = useLocal({loading: true})
+  const render = local.render;
   useLayoutEffect(() => {
     if (!isEditor) {
       window.addEventListener("resize", render);
@@ -64,10 +65,7 @@ export const Layout: FC<LYTChild> = (props) => {
   const path = getPathname();
   const no_layout = props.exception;
 
-  useEffect(() => {
-    loadSession(props.login_url || "/auth/login");
-    render();
-  }, []);
+  if (!w.user) loadSession(props.login_url || "/auth/login");
 
   if (!isEditor && Array.isArray(no_layout)) {
     if (no_layout.length) {