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/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,
+  })
+}