chore: some code review

nodejs · Nov 23, 2023 · a399fdd · a399fdd
1 parent 4dc0aba
commit a399fdd
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 56 deletions.
diff --git a/app/[locale]/[[...path]]/page.tsx b/app/[locale]/[[...path]]/page.tsx
@@ -15,7 +15,7 @@ type DynamicStaticPaths = { path: string[]; locale: string };
 type DynamicParams = { params: DynamicStaticPaths };
 
 // This is the default Viewport Metadata
-// @see https://nextjs.org/docs/app/api-reference/functions/generate-viewport
+// @see https://nextjs.org/docs/app/api-reference/functions/generate-viewport#generateviewport-function
 export const generateViewport = async () => ({ ...DEFAULT_VIEWPORT });
 
 // This generates each page's HTML Metadata

diff --git a/components/TopNavigation.tsx b/components/TopNavigation.tsx
@@ -9,10 +9,10 @@ const TopNavigation: FC = () => {
   return (
     <nav aria-label="primary">
       <ul className="list-divider-pipe">
-        {navigationItems.map((item, key) => (
-          <li key={key}>
-            <ActiveLink href={item.link} allowSubPath>
-              {item.text}
+        {navigationItems.map(({ link, text }) => (
+          <li key={link}>
+            <ActiveLink href={link} allowSubPath>
+              {text}
             </ActiveLink>
           </li>
         ))}

diff --git a/hooks/react-server/useSiteNavigation.tsx b/hooks/react-server/useSiteNavigation.tsx
@@ -1,23 +1,23 @@
 import { useTranslations } from 'next-intl';
 import type { RichTranslationValues } from 'next-intl';
-import { useMemo } from 'react';
 
 import { siteNavigation } from '@/next.json.mjs';
-import type { NavigationEntry, NavigationKeys } from '@/types';
+import type {
+  MappedNavigationEntry,
+  NavigationEntry,
+  NavigationKeys,
+} from '@/types';
 
-// These are mapped navigation entries. Navigation Entries can have sub-entries
-type MappedItems = {
-  text: ReturnType<ReturnType<typeof useTranslations>['rich']>;
-  link: string;
-  key: string;
-  level: number;
-  items: MappedItems[];
-};
+type Context = Record<string, RichTranslationValues>;
+type Navigation = Record<string, NavigationEntry>;
 
 // Provides Context replacement for variables within the Link. This is also something that is not going
 // to happen in the future with `nodejs/nodejs.dev` codebase
-const replaceLinkWithContext = (link: string, context: RichTranslationValues) =>
-  Object.entries(context).reduce(
+const replaceLinkWithContext = (
+  link: string,
+  context?: RichTranslationValues
+) =>
+  Object.entries(context || {}).reduce(
     (finalLink, [find, replace]) =>
       finalLink.replace(
         `{${find}}`,
@@ -30,51 +30,45 @@ const useSiteNavigation = () => {
   const t = useTranslations();
 
   const mapNavigationEntries = (
-    entries: Record<string, NavigationEntry>,
-    context?: Record<string, RichTranslationValues>,
-    level = 0
-  ): MappedItems[] => {
-    const getContext = (key: string) => (context && context[key]) || {};
-
+    entries: Navigation,
+    context: Context = {},
+    level = 0,
+    includeItems = true
+  ): MappedNavigationEntry[] => {
     const getFormattedMessage = (translationId: string, key: string) =>
-      t.rich(translationId, getContext(key));
+      t.rich(translationId, context[key] || {});
+
+    return Object.entries(entries).map(
+      ([key, { translationId, link, items }]) => {
+        const mappedEntry: MappedNavigationEntry = {
+          text: getFormattedMessage(translationId, key),
+          link: replaceLinkWithContext(link, context[key]),
+          items: [],
+          level,
+          key,
+        };
 
-    return Object.entries(entries).map(([key, item]) => ({
-      text: getFormattedMessage(item.translationId, key),
-      link: replaceLinkWithContext(item.link, getContext(key)),
-      items: item.items
-        ? mapNavigationEntries(item.items, context, level + 1)
-        : [],
-      level,
-      key: key,
-    }));
+        if (includeItems && items) {
+          mappedEntry.items = mapNavigationEntries(items, context, level + 1);
+        }
+
+        return mappedEntry;
+      }
+    );
   };
 
-  const rootNavigationItems = useMemo(
-    () =>
-      Object.entries(siteNavigation).reduce(
-        (acc, [key, { translationId, link }]) => ({
-          ...acc,
-          [key]: { translationId, link },
-        }),
-        {}
-      ),
-    []
-  );
+  const getSideNavigation = (section: NavigationKeys, context?: Context) => {
+    const { items, translationId, link } = siteNavigation[section];
 
-  return {
-    navigationItems: mapNavigationEntries(rootNavigationItems),
-    getSideNavigation: (
-      section: NavigationKeys,
-      context?: Record<string, RichTranslationValues>
-    ) => {
-      const { items, translationId, link } = siteNavigation[section];
+    return mapNavigationEntries(
+      { [section]: { translationId, link }, ...items },
+      context
+    );
+  };
 
-      return mapNavigationEntries(
-        { [section]: { translationId, link }, ...items },
-        context
-      );
-    },
+  return {
+    getSideNavigation,
+    navigationItems: mapNavigationEntries(siteNavigation, {}, 0, false),
   };
 };
 

diff --git a/types/navigation.ts b/types/navigation.ts
@@ -1,3 +1,5 @@
+import type { useTranslations } from 'next-intl';
+
 export type NavigationKeys =
   | 'about'
   | 'download'
@@ -12,3 +14,11 @@ export interface NavigationEntry {
   link: string;
   items?: Record<string, NavigationEntry>;
 }
+
+export interface MappedNavigationEntry {
+  text: ReturnType<ReturnType<typeof useTranslations>['rich']>;
+  link: string;
+  key: string;
+  level: number;
+  items: MappedNavigationEntry[];
+}