Merged in fix/mypages-clientside-menu (pull request #1344)

Fix/mypages clientside menu

* feat: move mypages menu to client side

* Merge branch 'master' of bitbucket.org:scandic-swap/web into fix/mypages-clientside-menu

* wip

* wip

* wip

* refactor: reorganize MyPages navigation logic and improve type definitions

* refactor: enhance MyPagesMobileDropdown with loading states and skeletons

* refactor: clean up header component and improve myPagesNavigation query structure

* Merge branch 'master' of bitbucket.org:scandic-swap/web into fix/mypages-clientside-menu


Approved-by: Linus Flood

components/Current/Header/MyPagesMobileDropdown/index.tsx

@@ -1,9 +1,12 @@
 "use client"
+
 import { useIntl } from "react-intl"
 
 import { logout } from "@/constants/routes/handleAuth"
+import { trpc } from "@/lib/trpc/client"
 import useDropdownStore from "@/stores/main-menu"
 
+import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Link from "@/components/TempDesignSystem/Link"
 import Title from "@/components/TempDesignSystem/Text/Title"
@@ -14,22 +17,13 @@ import styles from "./my-pages-mobile-dropdown.module.css"
 import type { ReactNode } from "react"
 
 import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
-import type { MyPagesLink } from "@/components/MyPages/menuItems"
 
-export default function MyPagesMobileDropdown({
-  primaryLinks,
-  secondaryLinks,
-}: {
-  primaryLinks: MyPagesLink[]
-  secondaryLinks: MyPagesLink[]
-}) {
+export default function MyPagesMobileDropdown() {
+  const { data: myPagesNavigation } = useMyPagesNavigation()
+
   const intl = useIntl()
   const { toggleDropdown, isMyPagesMobileMenuOpen } = useDropdownStore()
 
-  if (primaryLinks.length === 0 && secondaryLinks.length === 0) {
-    return null
-  }
-
   const handleOnClick = () => toggleDropdown(DropdownTypeEnum.MyPagesMobileMenu)
 
   return (
@@ -43,16 +37,10 @@ export default function MyPagesMobileDropdown({
       </Title>
 
       <List>
-        <PrimaryLinks
-          primaryLinks={primaryLinks}
-          handleOnClick={handleOnClick}
-        />
+        <PrimaryLinks handleOnClick={handleOnClick} />
       </List>
       <List>
-        <SecondaryLinks
-          secondaryLinks={secondaryLinks}
-          handleOnClick={handleOnClick}
-        />
+        <SecondaryLinks handleOnClick={handleOnClick} />
       </List>
     </nav>
   )
@@ -71,58 +59,64 @@ function List({ children }: { children: ReactNode }) {
   )
 }
 
-function PrimaryLinks({
-  primaryLinks,
-  handleOnClick,
-}: {
-  primaryLinks: MyPagesLink[]
-  handleOnClick: () => void
-}) {
+function PrimaryLinks({ handleOnClick }: { handleOnClick: () => void }) {
+  const {
+    data: myPagesNavigation,
+    isLoading,
+    isSuccess,
+  } = useMyPagesNavigation()
+
+  const primaryLinks = myPagesNavigation?.primaryLinks ?? []
   return (
     <>
-      {primaryLinks.map((link, i) => (
-        <li key={link.href + i}>
-          <Link
-            href={link.href}
-            partialMatch
-            size={"regular"}
-            variant="myPageMobileDropdown"
-            color="burgundy"
-            onClick={handleOnClick}
-          >
-            {link.text}
-          </Link>
-        </li>
-      ))}
+      {isLoading && <Skeletons count={4} />}
+      {isSuccess &&
+        primaryLinks.map((link, i) => (
+          <li key={link.href + i}>
+            <Link
+              href={link.href}
+              partialMatch
+              size={"regular"}
+              variant="myPageMobileDropdown"
+              color="burgundy"
+              onClick={handleOnClick}
+            >
+              {link.text}
+            </Link>
+          </li>
+        ))}
     </>
   )
 }
-function SecondaryLinks({
-  secondaryLinks,
-  handleOnClick,
-}: {
-  secondaryLinks: MyPagesLink[]
-  handleOnClick: () => void
-}) {
+function SecondaryLinks({ handleOnClick }: { handleOnClick: () => void }) {
+  const {
+    data: myPagesNavigation,
+    isLoading,
+    isSuccess,
+  } = useMyPagesNavigation()
+
+  const secondaryLinks = myPagesNavigation?.secondaryLinks ?? []
   const intl = useIntl()
   const lang = useLang()
 
   return (
     <>
-      {secondaryLinks.map((link, i) => (
-        <li key={link.href + i}>
-          <Link
-            href={link.href}
-            partialMatch
-            size={"small"}
-            variant="myPageMobileDropdown"
-            color="burgundy"
-            onClick={handleOnClick}
-          >
-            {link.text}
-          </Link>
-        </li>
-      ))}
+      {isLoading && <Skeletons count={3} />}
+      {isSuccess &&
+        secondaryLinks.map((link, i) => (
+          <li key={link.href + i}>
+            <Link
+              href={link.href}
+              partialMatch
+              size={"small"}
+              variant="myPageMobileDropdown"
+              color="burgundy"
+              onClick={handleOnClick}
+            >
+              {link.text}
+            </Link>
+          </li>
+        ))}
       <li>
         <Link
           href={logout[lang]}
@@ -137,3 +131,20 @@ function SecondaryLinks({
     </>
   )
 }
+
+function Skeletons({ count }: { count: number }) {
+  return (
+    <>
+      {Array.from({ length: count }).map((_, i) => (
+        <li key={i} className={styles.skeletonItem}>
+          <SkeletonShimmer width="100px" height="20px" />
+        </li>
+      ))}
+    </>
+  )
+}
+
+function useMyPagesNavigation() {
+  const lang = useLang()
+  return trpc.navigation.myPages.useQuery({ lang })
+}