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/MyPagesMenu/index.tsx

@@ -3,6 +3,8 @@
 import { useRef } from "react"
 import { useIntl } from "react-intl"
 
+import { MembershipLevelEnum } from "@/constants/membershipLevels"
+import { trpc } from "@/lib/trpc/client"
 import useDropdownStore from "@/stores/main-menu"
 
 import { ChevronDownSmallIcon } from "@/components/Icons"
@@ -10,7 +12,7 @@ import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import useClickOutside from "@/hooks/useClickOutside"
 import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
-import {type  FriendsMembership,getInitials  } from "@/utils/user"
+import { type FriendsMembership, getInitials } from "@/utils/user"
 
 import Avatar from "../Avatar"
 import MainMenuButton from "../MainMenuButton"
@@ -20,22 +22,17 @@ import styles from "./myPagesMenu.module.css"
 
 import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"
 import type { User } from "@/types/user"
-import type { MyPagesLink } from "@/components/MyPages/menuItems"
 import type { LoyaltyLevel } from "@/server/routers/contentstack/loyaltyLevel/output"
 
 export type MyPagesMenuProps = {
-  primaryLinks: MyPagesLink[]
-  secondaryLinks: MyPagesLink[]
   user: Pick<User, "firstName" | "lastName">
   membership?: FriendsMembership | null
   membershipLevel: LoyaltyLevel | null
 }
 
 export default function MyPagesMenu({
-  membership,
-  primaryLinks,
-  secondaryLinks,
   user,
+  membership,
   membershipLevel,
 }: MyPagesMenuProps) {
   const intl = useIntl()
@@ -76,8 +73,6 @@ export default function MyPagesMenu({
         <div className={styles.dropdown}>
           <MyPagesMenuContent
             membershipLevel={membershipLevel}
-            primaryLinks={primaryLinks}
-            secondaryLinks={secondaryLinks}
             user={user}
             membership={membership}
             toggleOpenStateFn={() =>

components/Header/MainMenu/MyPagesMenuContent/index.tsx

@@ -3,6 +3,7 @@
 import { useIntl } from "react-intl"
 
 import { logout } from "@/constants/routes/handleAuth"
+import { trpc } from "@/lib/trpc/client"
 
 import { ArrowRightIcon } from "@/components/Icons"
 import Divider from "@/components/TempDesignSystem/Divider"
@@ -20,14 +21,17 @@ type Props = MyPagesMenuProps & { toggleOpenStateFn: () => void }
 
 export default function MyPagesMenuContent({
   membership,
-  primaryLinks,
-  secondaryLinks,
   toggleOpenStateFn,
   user,
   membershipLevel,
 }: Props) {
+  const lang = useLang()
   const intl = useIntl()
   const myPagesMenuContentRef = useTrapFocus()
+  const { data: myPagesNavigation } = useMyPagesNavigation()
+
+  const primaryLinks = myPagesNavigation?.primaryLinks ?? []
+  const secondaryLinks = myPagesNavigation?.secondaryLinks ?? []
 
   const membershipPoints = membership?.currentPoints
   const introClassName =
@@ -65,16 +69,10 @@ export default function MyPagesMenuContent({
         <li>
           <Divider color="subtle" className={styles.divider} />
 
-          <PrimaryLinks
-            primaryLinks={primaryLinks}
-            toggleOpenStateFn={toggleOpenStateFn}
-          />
+          <PrimaryLinks toggleOpenStateFn={toggleOpenStateFn} />
 
           <Divider color="subtle" className={styles.divider} />
-          <SecondaryLinks
-            secondaryLinks={secondaryLinks}
-            toggleOpenStateFn={toggleOpenStateFn}
-          />
+          <SecondaryLinks toggleOpenStateFn={toggleOpenStateFn} />
         </li>
       </ul>
     </nav>
@@ -82,9 +80,14 @@ export default function MyPagesMenuContent({
 }
 
 function PrimaryLinks({
-  primaryLinks,
   toggleOpenStateFn,
-}: Pick<Props, "primaryLinks"> & { toggleOpenStateFn: () => void }) {
+}: {
+  toggleOpenStateFn: () => void
+}) {
+  const { data: myPagesNavigation } = useMyPagesNavigation()
+
+  const primaryLinks = myPagesNavigation?.primaryLinks ?? []
+
   return (
     <ul className={styles.menuItems}>
       {primaryLinks.map((link, i) => (
@@ -106,11 +109,15 @@ function PrimaryLinks({
 }
 
 function SecondaryLinks({
-  secondaryLinks,
   toggleOpenStateFn,
-}: Pick<Props, "secondaryLinks"> & { toggleOpenStateFn: () => void }) {
+}: {
+  toggleOpenStateFn: () => void
+}) {
   const intl = useIntl()
   const lang = useLang()
+  const { data: myPagesNavigation } = useMyPagesNavigation()
+
+  const secondaryLinks = myPagesNavigation?.secondaryLinks ?? []
 
   return (
     <ul className={styles.menuItems}>
@@ -140,3 +147,10 @@ function SecondaryLinks({
     </ul>
   )
 }
+
+const useMyPagesNavigation = () => {
+  const lang = useLang()
+  return trpc.navigation.myPages.useQuery({
+    lang: lang,
+  })
+}

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}
           />
         </>

components/Header/MainMenu/MyPagesMobileMenu/index.tsx

@@ -22,8 +22,6 @@ import type { MyPagesMenuProps } from "../MyPagesMenu"
 export default function MyPagesMobileMenu({
   membershipLevel,
   membership,
-  primaryLinks,
-  secondaryLinks,
   user,
 }: MyPagesMenuProps) {
   const intl = useIntl()
@@ -66,8 +64,6 @@ export default function MyPagesMobileMenu({
           <MyPagesMenuContent
             membershipLevel={membershipLevel}
             membership={membership}
-            primaryLinks={primaryLinks}
-            secondaryLinks={secondaryLinks}
             user={user}
             toggleOpenStateFn={() =>
               toggleDropdown(DropdownTypeEnum.MyPagesMobileMenu)