From 6bc027997de7748c4d95cb65705fa1aef71ac021 Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Wed, 14 Dec 2022 01:39:57 +0800
Subject: [PATCH] start using react.memo to stop re-renders

---
 .../Navigation/NavigationMenu/HomeMenu.tsx    | 10 ++---
 .../NavigationMenu/NavigationMenu.tsx         | 37 +++++++++++++------
 .../NavigationMenuGuideList.tsx               | 23 +++++-------
 3 files changed, 37 insertions(+), 33 deletions(-)

diff --git a/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx
index a769976a8a4..8101690b2f4 100644
--- a/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx
@@ -1,8 +1,7 @@
+import { useTheme } from 'common/Providers'
 import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { useMenuLevelId } from '~/hooks/useMenuState'
-import { useTheme } from 'common/Providers'
 
 const home = [
   [
@@ -106,8 +105,7 @@ const home = [
   ],
 ]
 
-const NavigationMenuHome = () => {
-  const level = useMenuLevelId()
+const NavigationMenuHome = ({ active }) => {
   const router = useRouter()
   const { isDarkMode } = useTheme()
 
@@ -115,9 +113,7 @@ const NavigationMenuHome = () => {
     <div
       className={[
         'transition-all duration-150 ease-out',
-        level === 'home' || !level
-          ? 'opacity-100 ml-0 delay-150'
-          : 'opacity-0 -ml-8 invisible absolute',
+        active ? 'opacity-100 ml-0 delay-150' : 'opacity-0 -ml-8 invisible absolute',
       ].join(' ')}
     >
       <ul className="relative w-full flex flex-col gap-4">
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
index 5a945b965c5..e997936f5f2 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
@@ -1,6 +1,6 @@
 import { useRouter } from 'next/router'
 import { memo, useEffect } from 'react'
-import { menuState } from '~/hooks/useMenuState'
+import { menuState, useMenuLevelId } from '~/hooks/useMenuState'
 import NavigationMenuGuideList from './NavigationMenuGuideList'
 import NavigationMenuRefList from './NavigationMenuRefList'
 // @ts-expect-error
@@ -153,20 +153,33 @@ const SideNav = () => {
     }
   }, [router.events])
 
+  const level = useMenuLevelId()
+
+  const isHomeActive = 'home' === level
+  const isGettingStartedActive = 'gettingstarted' === level
+  const isDatabaseActive = 'database' === level
+  const isFunctionsActive = 'functions' === level
+  const isRealtimeActive = 'realtime' === level
+  const isStorageActive = 'storage' === level
+  const isPlatformActive = 'platform' === level
+  const isResourcesActive = 'resources' === level
+  const isIntegrationsActive = 'integrations' === level
+  const isReferenceActive = 'reference' === level
+
   return (
     <div className="flex relative">
       {/* // main menu */}
-      <NavigationMenuHome />
-      <NavigationMenuGuideList id={'gettingstarted'} />
-      <NavigationMenuGuideList id={'database'} />
-      <NavigationMenuGuideList id={'auth'} />
-      <NavigationMenuGuideList id={'functions'} />
-      <NavigationMenuGuideList id={'realtime'} />
-      <NavigationMenuGuideList id={'storage'} />
-      <NavigationMenuGuideList id={'platform'} />
-      <NavigationMenuGuideList id={'resources'} />
-      <NavigationMenuGuideList id={'integrations'} />
-      <NavigationMenuGuideList id={'reference'} />
+      <NavigationMenuHome active={isHomeActive} />
+      <NavigationMenuGuideList id={'gettingstarted'} active={isGettingStartedActive} />
+      <NavigationMenuGuideList id={'database'} active={isDatabaseActive} />
+      <NavigationMenuGuideList id={'auth'} active={isDatabaseActive} />
+      <NavigationMenuGuideList id={'functions'} active={isFunctionsActive} />
+      <NavigationMenuGuideList id={'realtime'} active={isRealtimeActive} />
+      <NavigationMenuGuideList id={'storage'} active={isStorageActive} />
+      <NavigationMenuGuideList id={'platform'} active={isPlatformActive} />
+      <NavigationMenuGuideList id={'resources'} active={isResourcesActive} />
+      <NavigationMenuGuideList id={'integrations'} active={isIntegrationsActive} />
+      <NavigationMenuGuideList id={'reference'} active={isReferenceActive} />
       {/* // Client Libs */}
       <NavigationMenuRefList
         key={'reference-js-menu'}
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
index 40e03fa6184..2180e345af8 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
@@ -1,32 +1,27 @@
-import * as Accordion from '@radix-ui/react-accordion'
 import { useTheme } from 'common/Providers'
 import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import React from 'react'
 import { IconChevronLeft } from '~/../../packages/ui'
-import { useMenuLevelId } from '~/hooks/useMenuState'
 import * as NavItems from './NavigationMenu.constants'
+import * as Accordion from '@radix-ui/react-accordion'
 
 interface Props {
   id: string
-  setMenuLevelId?: any
+  active: boolean
 }
-const NavigationMenuGuideList: React.FC<Props> = ({ id, setMenuLevelId }) => {
+const NavigationMenuGuideList: React.FC<Props> = ({ id, active }) => {
   const router = useRouter()
   const { isDarkMode } = useTheme()
 
   const menu = NavItems[id]
 
-  //console.log(id, 'url is:', menu.url)
-
   // get url
   const url = router.asPath
   // remove the end of the url if a deep link
   const firstLevelRoute = url?.split('/')?.slice(0, 4)?.join('/')
 
-  const level = useMenuLevelId()
-
   return (
     <Accordion.Root
       collapsible
@@ -36,12 +31,12 @@ const NavigationMenuGuideList: React.FC<Props> = ({ id, setMenuLevelId }) => {
       className={[
         'transition-all ml-8 duration-150 ease-out',
         // enabled
-        level === id && 'opacity-100 ml-0 delay-150',
-        level === 'home' && 'ml-12',
+        active && 'opacity-100 ml-0 delay-150',
+        // level === 'home' && 'ml-12',
 
         // disabled
-        level !== 'home' && level !== id ? '-ml-8' : '',
-        level !== id ? 'opacity-0 invisible absolute' : '',
+        // level !== 'home' && level !== id ? '-ml-8' : '',
+        active ? 'opacity-0 invisible absolute' : '',
       ].join(' ')}
     >
       <ul className={['relative w-full flex flex-col gap-0'].join(' ')}>
@@ -83,7 +78,7 @@ const NavigationMenuGuideList: React.FC<Props> = ({ id, setMenuLevelId }) => {
                     : 'hover:text-brand-900 text-scale-1200',
                 ].join(' ')}
               >
-                {menu.title ?? level}
+                {menu.title ?? id}
               </span>
             </div>
           </a>
@@ -228,4 +223,4 @@ const NavigationMenuGuideList: React.FC<Props> = ({ id, setMenuLevelId }) => {
   )
 }
 
-export default NavigationMenuGuideList
+export default React.memo(NavigationMenuGuideList)