From 08bcf3037ace4eb0701533a7cace562f0d927f7d Mon Sep 17 00:00:00 2001
From: Aslam H <iupin5212@gmail.com>
Date: Sat, 9 Nov 2024 13:12:36 +0700
Subject: [PATCH] fix: eager load all deps for link

---
 .../_pages/_protected/links/-bottom-bar.tsx   |  2 +-
 .../_pages/_protected/links/-link-form.tsx    |  6 +-
 .../_layout/_pages/_protected/links/-list.tsx | 71 ++++++++++---------
 3 files changed, 43 insertions(+), 36 deletions(-)

diff --git a/web/app/routes/_layout/_pages/_protected/links/-bottom-bar.tsx b/web/app/routes/_layout/_pages/_protected/links/-bottom-bar.tsx
index daadef66..ba2d1dce 100644
--- a/web/app/routes/_layout/_pages/_protected/links/-bottom-bar.tsx
+++ b/web/app/routes/_layout/_pages/_protected/links/-bottom-bar.tsx
@@ -65,7 +65,7 @@ export const LinkBottomBar: React.FC = () => {
   const [, setGlobalLinkFormExceptionRefsAtom] = useAtom(
     globalLinkFormExceptionRefsAtom,
   )
-  const { me } = useAccount({ root: { personalLinks: [] } })
+  const { me } = useAccount({ root: { personalLinks: [{}] } })
   const personalLink = useCoState(PersonalLink, editId as ID<PersonalLink>)
 
   const cancelBtnRef = React.useRef<HTMLButtonElement>(null)
diff --git a/web/app/routes/_layout/_pages/_protected/links/-link-form.tsx b/web/app/routes/_layout/_pages/_protected/links/-link-form.tsx
index f378196c..4150bc33 100644
--- a/web/app/routes/_layout/_pages/_protected/links/-link-form.tsx
+++ b/web/app/routes/_layout/_pages/_protected/links/-link-form.tsx
@@ -153,8 +153,10 @@ export const LinkForm: React.FC<LinkFormProps> = ({
   })
 
   const topicName = form.watch("topic")
-  const findTopic =
-    me && Topic.findUnique({ topicName }, JAZZ_GLOBAL_GROUP_ID, me)
+  const findTopic = React.useMemo(
+    () => me && Topic.findUnique({ topicName }, JAZZ_GLOBAL_GROUP_ID, me),
+    [topicName, me],
+  )
 
   const selectedTopic = useCoState(Topic, findTopic, {})
 
diff --git a/web/app/routes/_layout/_pages/_protected/links/-list.tsx b/web/app/routes/_layout/_pages/_protected/links/-list.tsx
index 3d9c92c4..82acf7de 100644
--- a/web/app/routes/_layout/_pages/_protected/links/-list.tsx
+++ b/web/app/routes/_layout/_pages/_protected/links/-list.tsx
@@ -67,7 +67,15 @@ const LinkList: React.FC<LinkListProps> = () => {
 
   const { deleteLink } = useLinkActions()
   const confirm = useConfirm()
-  const { me } = useAccount({ root: { personalLinks: [{}] } })
+  const { me } = useAccount({
+    root: {
+      personalLinks: [
+        {
+          topic: [],
+        },
+      ],
+    },
+  })
 
   const personalLinks = me?.root.personalLinks || []
   const filteredLinks = personalLinks.filter((link) => {
@@ -268,39 +276,36 @@ const LinkList: React.FC<LinkListProps> = () => {
           <div className="relative flex h-full grow flex-col items-stretch overflow-hidden">
             <div className="flex h-full w-[calc(100%+0px)] flex-col overflow-hidden pr-0">
               <div className="relative overflow-y-auto overflow-x-hidden [scrollbar-gutter:auto]">
-                {sortedLinks.map(
-                  (linkItem, index) =>
-                    linkItem && (
-                      <LinkItem
-                        key={linkItem.id}
-                        isActive={activeItemIndex === index}
-                        personalLink={linkItem}
-                        editId={editId}
-                        disabled={sort !== "manual" || !!editId}
-                        onPointerMove={() => {
-                          if (editId || draggingId || createMode) {
-                            return undefined
-                          }
+                {sortedLinks.map((linkItem, index) => (
+                  <LinkItem
+                    key={linkItem.id}
+                    isActive={activeItemIndex === index}
+                    personalLink={linkItem}
+                    editId={editId}
+                    disabled={sort !== "manual" || !!editId}
+                    onPointerMove={() => {
+                      if (editId || draggingId || createMode) {
+                        return undefined
+                      }
 
-                          setKeyboardActiveIndex(null)
-                          setActiveItemIndex(index)
-                        }}
-                        onFormClose={async () => {
-                          navigate({ to: "/links" })
-                          setActiveItemIndex(lastActiveIndexRef.current)
-                          setKeyboardActiveIndex(lastActiveIndexRef.current)
-                        }}
-                        onItemSelected={(link) =>
-                          navigate({
-                            to: "/links",
-                            search: { editId: link.id },
-                          })
-                        }
-                        data-keyboard-active={keyboardActiveIndex === index}
-                        ref={(el) => setElementRef(el, index)}
-                      />
-                    ),
-                )}
+                      setKeyboardActiveIndex(null)
+                      setActiveItemIndex(index)
+                    }}
+                    onFormClose={async () => {
+                      navigate({ to: "/links" })
+                      setActiveItemIndex(lastActiveIndexRef.current)
+                      setKeyboardActiveIndex(lastActiveIndexRef.current)
+                    }}
+                    onItemSelected={(link) =>
+                      navigate({
+                        to: "/links",
+                        search: { editId: link.id },
+                      })
+                    }
+                    data-keyboard-active={keyboardActiveIndex === index}
+                    ref={(el) => setElementRef(el, index)}
+                  />
+                ))}
               </div>
             </div>
           </div>