feat: feature/mvp-sprint-1 Added event bus to control hiding of settings menu's

remix/app/Providers/ThingtimeProvider.tsx

@@ -1,5 +1,6 @@
 import React, { createContext } from "react"
 import flatted, { parse, stringify } from "flatted"
+import { Subject } from "rxjs"
 
 import { sanitise } from "~/functions/sanitise"
 import { smarts } from "~/smarts"
@@ -10,6 +11,7 @@ export interface ThingtimeContextInterface {
   getThingtime: any
   thingtimeRef: any
   loading: boolean
+  events: Subject<any>
 }
 
 export const ThingtimeContext = createContext<ThingtimeContextInterface | null>(
@@ -96,6 +98,12 @@ export const ThingtimeProvider = (props: any): JSX.Element => {
 
   const [loading, setLoading] = React.useState(true)
 
+  const [events, setEvents] = React.useState(null)
+
+  if (!events) {
+    setEvents(() => new Subject())
+  }
+
   const set = React.useCallback((newThingtime, ignoreUndoRedo?: any) => {
     const newThingtimeReference = {
       ...newThingtime,
@@ -347,6 +355,7 @@ export const ThingtimeProvider = (props: any): JSX.Element => {
       window.getThingtime = getThingtime
       window.thingtime = thingtimeReference
       window.tt = thingtimeReference
+      window.events = events
     } catch {
       // nothing
     }
@@ -508,7 +517,7 @@ export const ThingtimeProvider = (props: any): JSX.Element => {
     return () => {
       window.removeEventListener("keydown", keyListener)
     }
-  }, [setThingtime, getThingtime, thingtimeReference, set])
+  }, [setThingtime, events, getThingtime, thingtimeReference, set])
 
   const value = {
     thingtime: thingtimeReference,
@@ -517,6 +526,7 @@ export const ThingtimeProvider = (props: any): JSX.Element => {
     thingtimeRef,
     paths,
     loading,
+    events,
   }
 
   return (

remix/app/components/Thingtime/SettingsMenu.tsx

@@ -3,16 +3,37 @@ import ClickAwayListener from "react-click-away-listener"
 import { Center, Flex, Text } from "@chakra-ui/react"
 
 import { Icon } from "../Icon/Icon"
+import { useThingtime } from "./useThingtime"
 
 export const SettingsMenu = (props) => {
   const [show, setShow] = useState(false)
   const hideRef = React.useRef(null)
   const [opacity, setOpacity] = React.useState(props?.opacity === 0 ? 0 : 1)
 
+  const { thingtime, events } = useThingtime()
+
   const opacityRef = React.useRef(null)
 
   const waitTime = 1555
 
+  const [uuid, setUuid] = React.useState(null)
+
+  React.useEffect(() => {
+    setUuid(Math.random().toString(36).substring(7))
+  }, [])
+
+  React.useEffect(() => {
+    const subscription = events.subscribe((event) => {
+      if (event?.type === "settings-menu-hide" && event?.uuid !== uuid) {
+        setShow(false)
+      }
+    })
+
+    return () => {
+      subscription?.unsubscribe?.()
+    }
+  }, [events, uuid])
+
   React.useEffect(() => {
     clearInterval(opacityRef?.current)
     if (props?.opacity) {
@@ -28,8 +49,12 @@ export const SettingsMenu = (props) => {
   React.useEffect(() => {
     if (show || props?.opacity) {
       clearInterval(hideRef?.current)
+      events.next({
+        type: "settings-menu-hide",
+        uuid,
+      })
     }
-  }, [show, props?.opacity])
+  }, [show, props?.opacity, events, uuid])
 
   const maybeHide = React.useCallback(() => {
     clearInterval(hideRef?.current)

remix/package.json

@@ -33,6 +33,7 @@
     "react-sticky": "^6.0.3",
     "react-sticky-el": "^2.1.0",
     "react-visibility-sensor": "^5.1.1",
+    "rxjs": "^7.8.1",
     "tinygradient": "^1.1.5",
     "uuid": "^9.0.0"
   },

remix/pnpm-lock.yaml

@@ -83,6 +83,9 @@ dependencies:
   react-visibility-sensor:
     specifier: ^5.1.1
     version: 5.1.1(react-dom@18.2.0)(react@18.2.0)
+  rxjs:
+    specifier: ^7.8.1
+    version: 7.8.1
   tinygradient:
     specifier: ^1.1.5
     version: 1.1.5
@@ -6765,7 +6768,7 @@ packages:
       mute-stream: 0.0.8
       ora: 5.4.1
       run-async: 2.4.1
-      rxjs: 7.8.0
+      rxjs: 7.8.1
       string-width: 4.2.3
       strip-ansi: 6.0.1
       through: 2.3.8
@@ -9059,11 +9062,10 @@ packages:
       queue-microtask: 1.2.3
     dev: true
 
-  /rxjs@7.8.0:
-    resolution: {integrity: sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg==}
+  /rxjs@7.8.1:
+    resolution: {integrity: sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==}
     dependencies:
       tslib: 2.5.0
-    dev: true
 
   /sade@1.8.1:
     resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}