From 3d50b8ce49aec0b80febd7a106642976aa94cc9f Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Sun, 2 Feb 2025 20:55:20 +0100
Subject: [PATCH] refactor: simplify navigation lock

---
 .../navigation-menu/FloatingNavigation.tsx    |  3 +-
 .../NavigationMenu.module.scss                | 40 ++++++++++---------
 .../navigation-menu/ViewLockedIcon.tsx        |  5 ++-
 .../navigation-menu/ViewNavigationMenu.tsx    | 23 +++++------
 .../navigation-menu/useViewEditor.tsx         | 26 ++++++++++++
 apps/client/src/features/editors/Editor.tsx   |  4 +-
 .../src/features/viewers/ViewWrapper.tsx      |  2 +-
 7 files changed, 66 insertions(+), 37 deletions(-)
 create mode 100644 apps/client/src/common/components/navigation-menu/useViewEditor.tsx

diff --git a/apps/client/src/common/components/navigation-menu/FloatingNavigation.tsx b/apps/client/src/common/components/navigation-menu/FloatingNavigation.tsx
index 026c7a76d..51d286a9b 100644
--- a/apps/client/src/common/components/navigation-menu/FloatingNavigation.tsx
+++ b/apps/client/src/common/components/navigation-menu/FloatingNavigation.tsx
@@ -2,6 +2,7 @@ import { IoApps } from '@react-icons/all-files/io5/IoApps';
 import { IoSettingsOutline } from '@react-icons/all-files/io5/IoSettingsOutline';
 
 import { useFadeOutOnInactivity } from '../../../common/hooks/useFadeOutOnInactivity';
+import { cx } from '../../utils/styleUtils';
 
 import style from './NavigationMenu.module.scss';
 
@@ -15,7 +16,7 @@ export default function FloatingNavigation(props: FloatingNavigationProps) {
   const isButtonShown = useFadeOutOnInactivity();
 
   return (
-    <div className={`${style.buttonContainer} ${!isButtonShown ? style.hidden : ''}`}>
+    <div className={cx([style.fadeable, style.buttonContainer, !isButtonShown && style.hidden])}>
       <button
         onClick={toggleMenu}
         aria-label='toggle menu'
diff --git a/apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss b/apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss
index fc71ecbf8..42a2767d0 100644
--- a/apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss
+++ b/apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss
@@ -7,24 +7,38 @@ $icon-color: $ui-white;
 $button-bg: $gray-1050;
 $button-size: 3rem;
 
+.fadeable {
+  opacity: 1;
+
+  transition-property: opacity;
+  transition-duration: 0.3s;
+
+  &.hidden {
+    opacity: 0;
+  }
+}
+
+.lockIcon {
+  font-size: 1.5rem;
+  color: $active-indicator;
+  padding: 0.5em;
+
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 12;
+}
+
 .buttonContainer {
   display: flex;
   flex-direction: column;
   row-gap: 1rem;
   padding: 0.5em;
 
-  transition-property: opacity;
-  transition-duration: 0.3s;
-
-  opacity: 1;
   position: fixed;
   left: 0;
   top: 0;
   z-index: 12;
-
-  &.hidden {
-    opacity: 0;
-  }
 }
 
 .button {
@@ -38,16 +52,6 @@ $button-size: 3rem;
   border-radius: 3px;
 }
 
-.lockIcon {
-  font-size: 1.5rem;
-  display: grid;
-  place-content: center;
-  border-radius: 3px;
-  background-color: transparent;
-  color: $active-indicator;
-  cursor: default;
-}
-
 .navButton {
   @extend .button;
   z-index: 3;
diff --git a/apps/client/src/common/components/navigation-menu/ViewLockedIcon.tsx b/apps/client/src/common/components/navigation-menu/ViewLockedIcon.tsx
index bddd50530..d54825d73 100644
--- a/apps/client/src/common/components/navigation-menu/ViewLockedIcon.tsx
+++ b/apps/client/src/common/components/navigation-menu/ViewLockedIcon.tsx
@@ -1,6 +1,7 @@
 import { IoLockClosedOutline } from '@react-icons/all-files/io5/IoLockClosedOutline';
 
 import { useFadeOutOnInactivity } from '../../../common/hooks/useFadeOutOnInactivity';
+import { cx } from '../../utils/styleUtils';
 
 import style from './NavigationMenu.module.scss';
 
@@ -8,8 +9,8 @@ export default function ViewLockedIcon() {
   const isLockIconShown = useFadeOutOnInactivity();
 
   return (
-    <div className={`${style.buttonContainer} ${!isLockIconShown ? style.hidden : ''}`}>
-      <IoLockClosedOutline className={style.lockIcon} />
+    <div className={cx([style.fadeable, style.lockIcon, !isLockIconShown && style.hidden])}>
+      <IoLockClosedOutline />
     </div>
   );
 }
diff --git a/apps/client/src/common/components/navigation-menu/ViewNavigationMenu.tsx b/apps/client/src/common/components/navigation-menu/ViewNavigationMenu.tsx
index 021d2aaf1..454d540cc 100644
--- a/apps/client/src/common/components/navigation-menu/ViewNavigationMenu.tsx
+++ b/apps/client/src/common/components/navigation-menu/ViewNavigationMenu.tsx
@@ -1,23 +1,20 @@
-import { memo, useCallback } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { memo } from 'react';
 import { useDisclosure } from '@chakra-ui/react';
 
-import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
-
 import FloatingNavigation from './FloatingNavigation';
 import NavigationMenu from './NavigationMenu';
+import useViewEditor from './useViewEditor';
 import ViewLockedIcon from './ViewLockedIcon';
 
-function ViewNavigationMenu() {
-  const [searchParams, setSearchParams] = useSearchParams();
+interface ViewNavigationMenuProps {
+  isLockable?: boolean;
+}
+
+function ViewNavigationMenu(props: ViewNavigationMenuProps) {
+  const { isLockable } = props;
+
   const { isOpen: isMenuOpen, onOpen: onMenuOpen, onClose: onMenuClose } = useDisclosure();
-
-  const isViewLocked = isStringBoolean(searchParams.get('locked'));
-
-  const showEditFormDrawer = useCallback(() => {
-    searchParams.set('edit', 'true');
-    setSearchParams(searchParams);
-  }, [searchParams, setSearchParams]);
+  const { showEditFormDrawer, isViewLocked } = useViewEditor({ isLockable });
 
   const toggleMenu = () => (isMenuOpen ? onMenuClose() : onMenuOpen());
 
diff --git a/apps/client/src/common/components/navigation-menu/useViewEditor.tsx b/apps/client/src/common/components/navigation-menu/useViewEditor.tsx
new file mode 100644
index 000000000..2458a11c4
--- /dev/null
+++ b/apps/client/src/common/components/navigation-menu/useViewEditor.tsx
@@ -0,0 +1,26 @@
+import { useCallback, useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
+
+interface EditorVisibilityOptions {
+  isLockable?: boolean;
+}
+
+export default function useViewEditor({ isLockable }: EditorVisibilityOptions) {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const showEditFormDrawer = useCallback(() => {
+    searchParams.set('edit', 'true');
+    setSearchParams(searchParams);
+  }, [searchParams, setSearchParams]);
+
+  const isViewLocked = useMemo(() => {
+    if (!isLockable) {
+      return false;
+    }
+    return isStringBoolean(searchParams.get('locked'));
+  }, [isLockable, searchParams]);
+
+  return { showEditFormDrawer, isViewLocked };
+}
diff --git a/apps/client/src/features/editors/Editor.tsx b/apps/client/src/features/editors/Editor.tsx
index 150c4cba2..3120c06ba 100644
--- a/apps/client/src/features/editors/Editor.tsx
+++ b/apps/client/src/features/editors/Editor.tsx
@@ -5,7 +5,7 @@ import { IoApps } from '@react-icons/all-files/io5/IoApps';
 import { IoClose } from '@react-icons/all-files/io5/IoClose';
 import { IoSettingsOutline } from '@react-icons/all-files/io5/IoSettingsOutline';
 
-import ProductionNavigationMenu from '../../common/components/navigation-menu/ProductionNavigationMenu';
+import NavigationMenu from '../../common/components/navigation-menu/NavigationMenu';
 import { useElectronListener } from '../../common/hooks/useElectronEvent';
 import { useWindowTitle } from '../../common/hooks/useWindowTitle';
 import AppSettings from '../app-settings/AppSettings';
@@ -58,7 +58,7 @@ export default function Editor() {
     <div className={styles.mainContainer} data-testid='event-editor'>
       <WelcomePlacement />
       <Finder isOpen={isFinderOpen} onClose={onFinderClose} />
-      <ProductionNavigationMenu isMenuOpen={isMenuOpen} onMenuClose={onClose} />
+      <NavigationMenu isOpen={isMenuOpen} onClose={onClose} />
       <EditorOverview>
         <IconButton
           aria-label='Toggle navigation'
diff --git a/apps/client/src/features/viewers/ViewWrapper.tsx b/apps/client/src/features/viewers/ViewWrapper.tsx
index da10a50c8..90e72d922 100644
--- a/apps/client/src/features/viewers/ViewWrapper.tsx
+++ b/apps/client/src/features/viewers/ViewWrapper.tsx
@@ -87,7 +87,7 @@ const withData = <P extends WithDataProps>(Component: ComponentType<P>) => {
 
     return (
       <>
-        <ViewNavigationMenu />
+        <ViewNavigationMenu isLockable />
         <Component
           {...props}
           auxTimer={auxtimer1}