From a57dad444dfd993bdfdb5df6f2caa2546c38988f Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Sat, 25 Feb 2023 08:51:25 +0800
Subject: [PATCH] Move keyboard commands from header into layout

---
 .../web/components/patterns/PrimaryHeader.tsx | 59 ++++----------
 .../components/templates/PrimaryLayout.tsx    | 31 ++++----
 .../templates/homeFeed/HomeFeedContainer.tsx  | 10 ---
 .../templates/homeFeed/LibraryHeader.tsx      |  2 +-
 packages/web/pages/_document.tsx              | 79 ++++++++++++++-----
 5 files changed, 92 insertions(+), 89 deletions(-)

diff --git a/packages/web/components/patterns/PrimaryHeader.tsx b/packages/web/components/patterns/PrimaryHeader.tsx
index cb8f65a81..ac413f622 100644
--- a/packages/web/components/patterns/PrimaryHeader.tsx
+++ b/packages/web/components/patterns/PrimaryHeader.tsx
@@ -27,34 +27,6 @@ export function PrimaryHeader(props: HeaderProps): JSX.Element {
   const router = useRouter()
   const [isScrolled, setIsScrolled] = useState(false)
 
-  useKeyboardShortcuts(
-    primaryCommands((action) => {
-      switch (action) {
-        // case 'themeDarker':
-        //   darkenTheme()
-        //   break
-        // case 'themeLighter':
-        //   lightenTheme()
-        //   break
-        case 'toggleShortcutHelpModalDisplay':
-          props.setShowKeyboardCommandsModal(true)
-          break
-      }
-    })
-  )
-
-  const initAnalytics = useCallback(() => {
-    setupAnalytics(props.user)
-  }, [props.user])
-
-  useEffect(() => {
-    initAnalytics()
-    window.addEventListener('load', initAnalytics)
-    return () => {
-      window.removeEventListener('load', initAnalytics)
-    }
-  }, [initAnalytics])
-
   function headerDropdownActionHandler(action: HeaderDropdownAction): void {
     switch (action) {
       case 'apply-darker-theme':
@@ -108,12 +80,14 @@ export function PrimaryHeader(props: HeaderProps): JSX.Element {
 
   return (
     <>
-      <SpanBox css={{
-        display: props.alwaysDisplayToolbar ? 'none' : 'flex',
-        '@lgDown': {
-          display: 'none',
-        }
-      }}>
+      <SpanBox
+        css={{
+          display: props.alwaysDisplayToolbar ? 'none' : 'flex',
+          '@lgDown': {
+            display: 'none',
+          },
+        }}
+      >
         <FloatingNavHeader
           {...props}
           isVisible={true}
@@ -124,11 +98,13 @@ export function PrimaryHeader(props: HeaderProps): JSX.Element {
           alwaysDisplayToolbar={props.alwaysDisplayToolbar}
         />
       </SpanBox>
-      <SpanBox css={{
-        '@lg': {
-          display: props.alwaysDisplayToolbar ? 'flex' : 'none',
-        }
-      }}>
+      <SpanBox
+        css={{
+          '@lg': {
+            display: props.alwaysDisplayToolbar ? 'flex' : 'none',
+          },
+        }}
+      >
         <NavHeader
           {...props}
           isVisible={true}
@@ -241,7 +217,7 @@ function FloatingNavHeader(props: NavHeaderProps): JSX.Element {
             position: 'fixed',
             display: 'flex',
             alignItems: 'center',
-            zIndex: 100,
+            zIndex: 5,
           }}
         >
           <OmnivoreNameLogo href={props.username ? '/home' : '/login'} />
@@ -256,7 +232,7 @@ function FloatingNavHeader(props: NavHeaderProps): JSX.Element {
             right: '18px',
             position: 'fixed',
             display: 'flex',
-            alignItems: 'center'
+            alignItems: 'center',
           }}
         >
           <DropdownMenu
@@ -274,4 +250,3 @@ function FloatingNavHeader(props: NavHeaderProps): JSX.Element {
     </>
   )
 }
-
diff --git a/packages/web/components/templates/PrimaryLayout.tsx b/packages/web/components/templates/PrimaryLayout.tsx
index 32fab35df..090f23b94 100644
--- a/packages/web/components/templates/PrimaryLayout.tsx
+++ b/packages/web/components/templates/PrimaryLayout.tsx
@@ -10,6 +10,8 @@ import { Analytics } from '@segment/analytics-next'
 import { ConfirmationModal } from '../patterns/ConfirmationModal'
 import { KeyboardShortcutListModal } from './KeyboardShortcutListModal'
 import { logoutMutation } from '../../lib/networking/mutations/logoutMutation'
+import { setupAnalytics } from '../../lib/analytics'
+import { primaryCommands } from '../../lib/keyboardShortcuts/navigationShortcuts'
 
 type PrimaryLayoutProps = {
   children: ReactNode
@@ -29,8 +31,20 @@ export function PrimaryLayout(props: PrimaryLayoutProps): JSX.Element {
 
   useKeyboardShortcuts(navigationCommands(router))
 
+  useKeyboardShortcuts(
+    primaryCommands((action) => {
+      switch (action) {
+        case 'toggleShortcutHelpModalDisplay':
+          setShowKeyboardCommandsModal(true)
+          break
+      }
+    })
+  )
+
   // Attempt to identify the user if they are logged in.
   useEffect(() => {
+    setupAnalytics(viewerData?.me)
+
     const user = window.analytics?.user().id()
     if (!user && viewerData?.me?.id) {
       window.analytics?.identify({ userId: viewerData?.me?.id })
@@ -66,17 +80,6 @@ export function PrimaryLayout(props: PrimaryLayoutProps): JSX.Element {
           },
         }}
       >
-        {/* <PrimaryHeader
-          user={viewerData?.me}
-          hideHeader={props.hideHeader}
-          userInitials={viewerData?.me?.name.charAt(0) ?? ''}
-          profileImageURL={viewerData?.me?.profile.pictureUrl}
-          isTransparent={true}
-          toolbarControl={props.headerToolbarControl}
-          alwaysDisplayToolbar={props.alwaysDisplayToolbar}
-          setShowLogoutConfirmation={setShowLogoutConfirmation}
-          setShowKeyboardCommandsModal={setShowKeyboardCommandsModal}
-        /> */}
         <Box
           css={{
             height: '100%',
@@ -84,12 +87,6 @@ export function PrimaryLayout(props: PrimaryLayoutProps): JSX.Element {
             bg: '$grayBase',
           }}
         >
-          {/* <Box
-            css={{
-              height: '48px',
-              bg: '$grayBase',
-            }}
-          ></Box> */}
           {props.children}
           {showLogoutConfirmation ? (
             <ConfirmationModal
diff --git a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
index 2c5a765d6..e4661397a 100644
--- a/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
+++ b/packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
@@ -1025,16 +1025,6 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
             )}
           </Dropzone>
         </VStack>
-        {/* Temporary code */}
-        {/* <div>
-        <strong>Files:</strong>
-        <ul>
-          {uploadingFiles.map((fileName) => (
-            <li key={fileName}>{fileName}</li>
-          ))}
-        </ul>
-      </div> */}
-        {/* Temporary code */}
         {props.showAddLinkModal && (
           <AddLinkModal onOpenChange={() => props.setShowAddLinkModal(false)} />
         )}
diff --git a/packages/web/components/templates/homeFeed/LibraryHeader.tsx b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
index 9911fbb1d..0741f5da7 100644
--- a/packages/web/components/templates/homeFeed/LibraryHeader.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
@@ -48,7 +48,7 @@ export function LibraryHeader(props: LibraryHeaderProps): JSX.Element {
         css={{
           top: '0',
           left: '0',
-          zIndex: 100,
+          zIndex: 5,
           position: 'fixed',
           width: '100%',
           height: HEADER_HEIGHT,
diff --git a/packages/web/pages/_document.tsx b/packages/web/pages/_document.tsx
index 927d240dc..c6fb0cf50 100644
--- a/packages/web/pages/_document.tsx
+++ b/packages/web/pages/_document.tsx
@@ -1,7 +1,9 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 /* eslint-disable functional/no-class */
 import NextDocument, { Html, Head, Main, NextScript } from 'next/document'
+import { useCallback } from 'react'
 import { getCssText, globalStyles } from '../components/tokens/stitches.config'
+import { setupAnalytics } from '../lib/analytics'
 
 export default class Document extends NextDocument {
   render() {
@@ -53,25 +55,61 @@ export default class Document extends NextDocument {
           <script async src="/static/scripts/inject-sw.js" />
 
           {/* prefetch (not preload) fonts that will be used by the reader */}
-          <link rel="prefetch" href='/static/fonts/Lora/Lora-Regular.ttf' />
-          <link rel="prefetch" href='/static/fonts/Lora/Lora-Bold.ttf' />
-          <link rel="prefetch" href='/static/fonts/Lora/Lora-Italic.ttf' />
-          <link rel="prefetch" href='/static/fonts/Merriweather/Merriweather-Regular.ttf' />
-          <link rel="prefetch" href='/static/fonts/Merriweather/Merriweather-Bold.ttf' />
-          <link rel="prefetch" href='/static/fonts/Merriweather/Merriweather-Italic.ttf' />
-          <link rel="prefetch" href='/static/fonts/Open_Sans/OpenSans-Regular.ttf' />
-          <link rel="prefetch" href='/static/fonts/Open_Sans/OpenSans-Bold.ttf' />
-          <link rel="prefetch" href='/static/fonts/Open_Sans/OpenSans-Italic.ttf' />
-          <link rel="prefetch" href='/static/fonts/Roboto/Roboto-Regular.ttf' />
-          <link rel="prefetch" href='/static/fonts/Roboto/Roboto-Bold.ttf' />
-          <link rel="prefetch" href='/static/fonts/Roboto/Roboto-Italic.ttf' />
-          <link rel="prefetch" href='/static/fonts/Crimson_Text/CrimsonText-Regular.ttf' />
-          <link rel="prefetch" href='/static/fonts/Crimson_Text/CrimsonText-Bold.ttf' />
-          <link rel="prefetch" href='/static/fonts/Crimson_Text/CrimsonText-Italic.ttf' />
-          <link rel="prefetch" href='/static/fonts/Source_Serif_Pro/SourceSerifPro-Regular.ttf' />
-          <link rel="prefetch" href='/static/fonts/Source_Serif_Pro/SourceSerifPro-Bold.ttf' />
-          <link rel="prefetch" href='/static/fonts/Source_Serif_Pro/SourceSerifPro-Italic.ttf' />
-          <link rel="prefetch" href='/static/fonts/SFMono/SFMonoRegular.otf' />
+          <link rel="prefetch" href="/static/fonts/Lora/Lora-Regular.ttf" />
+          <link rel="prefetch" href="/static/fonts/Lora/Lora-Bold.ttf" />
+          <link rel="prefetch" href="/static/fonts/Lora/Lora-Italic.ttf" />
+          <link
+            rel="prefetch"
+            href="/static/fonts/Merriweather/Merriweather-Regular.ttf"
+          />
+          <link
+            rel="prefetch"
+            href="/static/fonts/Merriweather/Merriweather-Bold.ttf"
+          />
+          <link
+            rel="prefetch"
+            href="/static/fonts/Merriweather/Merriweather-Italic.ttf"
+          />
+          <link
+            rel="prefetch"
+            href="/static/fonts/Open_Sans/OpenSans-Regular.ttf"
+          />
+          <link
+            rel="prefetch"
+            href="/static/fonts/Open_Sans/OpenSans-Bold.ttf"
+          />
+          <link
+            rel="prefetch"
+            href="/static/fonts/Open_Sans/OpenSans-Italic.ttf"
+          />
+          <link rel="prefetch" href="/static/fonts/Roboto/Roboto-Regular.ttf" />
+          <link rel="prefetch" href="/static/fonts/Roboto/Roboto-Bold.ttf" />
+          <link rel="prefetch" href="/static/fonts/Roboto/Roboto-Italic.ttf" />
+          <link
+            rel="prefetch"
+            href="/static/fonts/Crimson_Text/CrimsonText-Regular.ttf"
+          />
+          <link
+            rel="prefetch"
+            href="/static/fonts/Crimson_Text/CrimsonText-Bold.ttf"
+          />
+          <link
+            rel="prefetch"
+            href="/static/fonts/Crimson_Text/CrimsonText-Italic.ttf"
+          />
+          <link
+            rel="prefetch"
+            href="/static/fonts/Source_Serif_Pro/SourceSerifPro-Regular.ttf"
+          />
+          <link
+            rel="prefetch"
+            href="/static/fonts/Source_Serif_Pro/SourceSerifPro-Bold.ttf"
+          />
+          <link
+            rel="prefetch"
+            href="/static/fonts/Source_Serif_Pro/SourceSerifPro-Italic.ttf"
+          />
+          <link rel="prefetch" href="/static/fonts/SFMono/SFMonoRegular.otf" />
         </Head>
         <body>
           <Main />
@@ -82,3 +120,6 @@ export default class Document extends NextDocument {
     )
   }
 }
+function useEffect(arg0: () => () => void, arg1: (() => void)[]) {
+  throw new Error('Function not implemented.')
+}