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/Header/MainMenu/MyPagesMenuWrapper/index.tsx

@@ -1,14 +1,12 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
 import { MembershipLevelEnum } from "@/constants/membershipLevels"
-import { getMembershipLevelSafely, getName } from "@/lib/trpc/memoizedRequests"
-import { serverClient } from "@/lib/trpc/server"
+import { trpc } from "@/lib/trpc/client"
 
 import LoginButton from "@/components/LoginButton"
-import {
-  getPrimaryLinks,
-  getSecondaryLinks,
-} from "@/components/MyPages/menuItems"
-import { getIntl } from "@/i18n"
-import { getLang } from "@/i18n/serverContext"
+import useLang from "@/hooks/useLang"
 
 import Avatar from "../Avatar"
 import MyPagesMenu, { MyPagesMenuSkeleton } from "../MyPagesMenu"
@@ -18,39 +16,41 @@ import MyPagesMobileMenu, {
 
 import styles from "./myPagesMenuWrapper.module.css"
 
-export default async function MyPagesMenuWrapper() {
-  const lang = getLang()
-  const [intl, user, membership, primaryLinks, secondaryLinks] =
-    await Promise.all([
-      getIntl(),
-      getName(),
-      getMembershipLevelSafely(),
-      getPrimaryLinks({ lang }),
-      getSecondaryLinks({ lang }),
-    ])
+export default function MyPagesMenuWrapper() {
+  const intl = useIntl()
+  const lang = useLang()
 
-  const membershipLevel = membership?.membershipLevel
-    ? await serverClient().contentstack.loyaltyLevels.byLevel({
-        level: MembershipLevelEnum[membership.membershipLevel],
-      })
-    : null
+  const { data: user, isLoading: isLoadingUser } = trpc.user.name.useQuery()
+  const { data: membership, isLoading: isLoadingMembership } =
+    trpc.user.safeMembershipLevel.useQuery()
+
+  const { data: membershipLevel, isLoading: isLoadingMembershipLevel } =
+    trpc.contentstack.loyaltyLevels.byLevel.useQuery(
+      {
+        lang: lang,
+        level: MembershipLevelEnum[membership?.membershipLevel ?? "L1"],
+      },
+      {
+        enabled: !!membership?.membershipLevel,
+      }
+    )
+
+  if (isLoadingUser || isLoadingMembership || isLoadingMembershipLevel) {
+    return <MyPagesMenuWrapperSkeleton />
+  }
 
   return (
     <>
       {user ? (
         <>
           <MyPagesMenu
-            membershipLevel={membershipLevel}
+            membershipLevel={membershipLevel ?? null}
             membership={membership}
-            primaryLinks={primaryLinks}
-            secondaryLinks={secondaryLinks}
             user={user}
           />
           <MyPagesMobileMenu
-            membershipLevel={membershipLevel}
+            membershipLevel={membershipLevel ?? null}
             membership={membership}
-            primaryLinks={primaryLinks}
-            secondaryLinks={secondaryLinks}
             user={user}
           />
         </>