feat(WEB-209): revalidate my pages navigation on demand

components/MyPages/Sidebar/helpers.ts

@@ -1,19 +0,0 @@
-import type {
-  MenuItem,
-  NavigationItem,
-} from "@/types/requests/myPages/navigation"
-
-export function mapMenuItems(navigationItems: NavigationItem[]) {
-  return navigationItems.map(({ item }): MenuItem => {
-    const { node } = item.pageConnection.edges[0]
-
-    return {
-      linkText: item.link_text || node.title,
-      lang: node.system.locale,
-      subItems: item.sub_items ? mapMenuItems(item.sub_items) : null,
-      uid: node.system.uid,
-      url: `/${node.system.locale}/${node.url}`.replaceAll(/\/\/+/g, "/"),
-      originalUrl: node.web?.original_url,
-    }
-  })
-}

components/MyPages/Sidebar/index.tsx

@@ -1,38 +1,25 @@
 import { Fragment } from "react"
 import { LogOut } from "react-feather"
 
-import { GetNavigationMyPages } from "@/lib/graphql/Query/NavigationMyPages.graphql"
-import { request } from "@/lib/graphql/request"
+import { serverClient } from "@/lib/trpc/server"
 
 import Link from "@/components/TempDesignSystem/Link"
 import Title from "@/components/Title"
 
-import { mapMenuItems } from "./helpers"
-
 import styles from "./sidebar.module.css"
 
-import type {
-  GetNavigationMyPagesData,
-  SidebarProps,
-} from "@/types/requests/myPages/navigation"
+import type { SidebarProps } from "@/types/requests/myPages/navigation"
 
 export default async function Sidebar({ lang }: SidebarProps) {
-  const response = await request<GetNavigationMyPagesData>(
-    GetNavigationMyPages,
-    {
-      locale: lang,
-    }
-  )
-  // navigation_my_pages is of type Single, hence the hard [0]
-  const navigation = response.data.all_navigation_my_pages.items[0]
-  const menuItems = mapMenuItems(navigation.items)
+  const navigation =
+    await serverClient().contentstack.myPages.navigation.get(lang)
   return (
     <aside className={styles.sidebar}>
       <nav className={styles.nav}>
         <Title level="h5" uppercase>
           {navigation.title}
         </Title>
-        {menuItems.map((item) => (
+        {navigation.items.map((item) => (
           <Fragment key={item.uid}>
             <Link
               href={item.originalUrl || item.url}
@@ -42,18 +29,16 @@ export default async function Sidebar({ lang }: SidebarProps) {
               {item.linkText}
             </Link>
             {item.subItems
-              ? item.subItems.map((subItem) => {
-                  return (
-                    <Link
-                      key={subItem.uid}
-                      href={subItem.originalUrl || subItem.url}
-                      partialMatch
-                      variant="sidebar"
-                    >
-                      {subItem.linkText}
-                    </Link>
-                  )
-                })
+              ? item.subItems.map((subItem) => (
+                  <Link
+                    key={subItem.uid}
+                    href={subItem.originalUrl || subItem.url}
+                    partialMatch
+                    variant="sidebar"
+                  >
+                    {subItem.linkText}
+                  </Link>
+                ))
               : null}
           </Fragment>
         ))}

components/MyProfile/Profile/Edit/Form/Content.tsx

@@ -85,7 +85,7 @@ export default function FormContent({ control }: EditFormContentProps) {
           <HouseIcon />
         </Field.Icon>
         <Field.Label htmlFor="address.streetAddress">
-          *{_("Address")}
+          {_("Address")}
         </Field.Label>
         <Field.Content>
           <Input
@@ -93,7 +93,6 @@ export default function FormContent({ control }: EditFormContentProps) {
             control={control}
             name="address.streetAddress"
             placeholder={_("Street 123")}
-            registerOptions={{ required: true }}
           />
         </Field.Content>
       </Field>
@@ -102,14 +101,13 @@ export default function FormContent({ control }: EditFormContentProps) {
         <Field.Icon>
           <HouseIcon />
         </Field.Icon>
-        <Field.Label htmlFor="address.city">*{_("City/State")}</Field.Label>
+        <Field.Label htmlFor="address.city">{_("City/State")}</Field.Label>
         <Field.Content>
           <Input
             aria-label={_("City")}
             control={control}
             name="address.city"
             placeholder={_("City")}
-            registerOptions={{ required: true }}
           />
         </Field.Content>
       </Field>