refactor(web): Split AppBar and add tests

web/src/components/AppBar.jsx

@@ -1,48 +1,28 @@
 import { h } from 'preact';
 import Button from './Button';
-import LinkedLogo from './LinkedLogo';
-import Menu, { MenuItem, MenuSeparator } from './Menu';
 import MenuIcon from '../icons/Menu';
 import MoreIcon from '../icons/More';
-import AutoAwesomeIcon from '../icons/AutoAwesome';
-import LightModeIcon from '../icons/LightMode';
-import DarkModeIcon from '../icons/DarkMode';
-import { useDarkMode, useDrawer } from '../context';
-import { useLayoutEffect, useCallback, useRef, useState } from 'preact/hooks';
+import { useDrawer } from '../context';
+import { useLayoutEffect, useCallback, useState } from 'preact/hooks';
 
 // We would typically preserve these in component state
 // But need to avoid too many re-renders
 let lastScrollY = window.scrollY;
 
-export default function AppBar({ title }) {
+export default function AppBar({ title: Title, overflowRef, onOverflowClick }) {
   const [show, setShow] = useState(true);
   const [atZero, setAtZero] = useState(window.scrollY === 0);
-  const [showMoreMenu, setShowMoreMenu] = useState(false);
-  const { setDarkMode } = useDarkMode();
   const { setShowDrawer } = useDrawer();
 
-  const handleSelectDarkMode = useCallback(
-    (value, label) => {
-      setDarkMode(value);
-      setShowMoreMenu(false);
-    },
-    [setDarkMode, setShowMoreMenu]
-  );
+  const scrollListener = useCallback(() => {
+    const scrollY = window.scrollY;
 
-  const moreRef = useRef(null);
-
-  const scrollListener = useCallback(
-    (event) => {
-      const scrollY = window.scrollY;
-
-      window.requestAnimationFrame(() => {
-        setShow(scrollY <= 0 || lastScrollY > scrollY);
-        setAtZero(scrollY === 0);
-        lastScrollY = scrollY;
-      });
-    },
-    [setShow]
-  );
+    window.requestAnimationFrame(() => {
+      setShow(scrollY <= 0 || lastScrollY > scrollY);
+      setAtZero(scrollY === 0);
+      lastScrollY = scrollY;
+    });
+  }, [setShow]);
 
   useLayoutEffect(() => {
     document.addEventListener('scroll', scrollListener);
@@ -51,45 +31,38 @@ export default function AppBar({ title }) {
     };
   }, [scrollListener]);
 
-  const handleShowMenu = useCallback(() => {
-    setShowMoreMenu(true);
-  }, [setShowMoreMenu]);
-
-  const handleDismissMoreMenu = useCallback(() => {
-    setShowMoreMenu(false);
-  }, [setShowMoreMenu]);
-
   const handleShowDrawer = useCallback(() => {
     setShowDrawer(true);
   }, [setShowDrawer]);
 
   return (
     <div
-      className={`w-full border-b border-gray-200 dark:border-gray-700 flex items-center align-middle p-4 space-x-2 fixed left-0 right-0 z-10 bg-white dark:bg-gray-900 transform transition-all duration-200 translate-y-0 ${
-        !show ? '-translate-y-full' : ''
+      className={`w-full border-b border-gray-200 dark:border-gray-700 flex items-center align-middle p-4 space-x-2 fixed left-0 right-0 z-10 bg-white dark:bg-gray-900 transform transition-all duration-200 ${
+        !show ? '-translate-y-full' : 'translate-y-0'
       } ${!atZero ? 'shadow-sm' : ''}`}
+      data-testid="appbar"
     >
       <div className="lg:hidden">
         <Button color="black" className="rounded-full w-12 h-12" onClick={handleShowDrawer} type="text">
           <MenuIcon className="w-10 h-10" />
         </Button>
       </div>
-      <LinkedLogo />
+      <Title />
       <div className="flex-grow-1 flex justify-end w-full">
-        <div className="w-auto" ref={moreRef}>
-          <Button color="black" className="rounded-full w-12 h-12" onClick={handleShowMenu} type="text">
-            <MoreIcon className="w-10 h-10" />
-          </Button>
-        </div>
+        {overflowRef && onOverflowClick ? (
+          <div className="w-auto" ref={overflowRef}>
+            <Button
+              aria-label="More options"
+              color="black"
+              className="rounded-full w-12 h-12"
+              onClick={onOverflowClick}
+              type="text"
+            >
+              <MoreIcon className="w-10 h-10" />
+            </Button>
+          </div>
+        ) : null}
       </div>
-      {showMoreMenu ? (
-        <Menu onDismiss={handleDismissMoreMenu} relativeTo={moreRef}>
-          <MenuItem icon={AutoAwesomeIcon} label="Auto dark mode" value="media" onSelect={handleSelectDarkMode} />
-          <MenuSeparator />
-          <MenuItem icon={LightModeIcon} label="Light" value="light" onSelect={handleSelectDarkMode} />
-          <MenuItem icon={DarkModeIcon} label="Dark" value="dark" onSelect={handleSelectDarkMode} />
-        </Menu>
-      ) : null}
     </div>
   );
 }