From d6dfd0bd93e1e4a7b5f4a4b63b305c0b3d39d35d Mon Sep 17 00:00:00 2001
From: Antonin Cezard <acezard@gmail.com>
Date: Sat, 19 Mar 2022 17:19:54 +0100
Subject: [PATCH] feat: Refactor setFlagshipUI feature

- Better CSS value fetching
- Typescript instead of JavaScript
---
 react/ActionMenu/index.jsx                    |  2 +-
 react/Dialog/index.jsx                        |  7 +++-
 .../useSetFlagshipUi/useSetFlagshipUI.js      | 25 -----------
 ...hipUI.spec.js => useSetFlagshipUI.spec.ts} |  1 +
 .../useSetFlagshipUi/useSetFlagshipUI.ts      | 41 +++++++++++++++++++
 5 files changed, 48 insertions(+), 28 deletions(-)
 delete mode 100644 react/hooks/useSetFlagshipUi/useSetFlagshipUI.js
 rename react/hooks/useSetFlagshipUi/{useSetFlagshipUI.spec.js => useSetFlagshipUI.spec.ts} (98%)
 create mode 100644 react/hooks/useSetFlagshipUi/useSetFlagshipUI.ts

diff --git a/react/ActionMenu/index.jsx b/react/ActionMenu/index.jsx
index e414bc6750..dbbd2ccc7c 100644
--- a/react/ActionMenu/index.jsx
+++ b/react/ActionMenu/index.jsx
@@ -104,7 +104,7 @@ const ActionMenu = ({
   containerElRef
 }) => {
   const theme = useTheme()
-  const sidebar = document.querySelector('[class*="sidebar"]')
+  const sidebar = document.getElementById('sidebar')
 
   useSetFlagshipUI(
     {
diff --git a/react/Dialog/index.jsx b/react/Dialog/index.jsx
index 8411a8cdef..d574fc76f2 100644
--- a/react/Dialog/index.jsx
+++ b/react/Dialog/index.jsx
@@ -27,6 +27,9 @@ const Dialog = props => {
   const theme = useTheme()
   const cozBar = document.querySelector('.coz-bar-wrapper')
   const sidebar = document.getElementById('sidebar')
+  const backdrop = document.querySelector('.MuiBackdrop-root')
+  const backdropOverlay =
+    backdrop && getComputedStyle(backdrop).getPropertyValue('background-color')
 
   useSetFlagshipUI(
     props.fullScreen
@@ -39,8 +42,8 @@ const Dialog = props => {
       : {
           bottomBackground: theme.palette.background.default,
           bottomTheme: 'light',
-          bottomOverlay: 'rgba(0, 0, 0, 0.5)',
-          topOverlay: 'rgba(0, 0, 0, 0.5)',
+          bottomOverlay: backdropOverlay,
+          topOverlay: backdropOverlay,
           topBackground: theme.palette.background.paper,
           topTheme: 'light'
         },
diff --git a/react/hooks/useSetFlagshipUi/useSetFlagshipUI.js b/react/hooks/useSetFlagshipUi/useSetFlagshipUI.js
deleted file mode 100644
index ab0b22c516..0000000000
--- a/react/hooks/useSetFlagshipUi/useSetFlagshipUI.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useEffect } from 'react'
-import { useWebviewIntent } from 'cozy-intent'
-import pickBy from 'lodash/pickBy'
-import identity from 'lodash/identity'
-import isEmpty from 'lodash/isEmpty'
-import isObject from 'lodash/isObject'
-
-export const useSetFlagshipUI = (onMount, onUnmount) => {
-  const webviewIntent = useWebviewIntent()
-
-  useEffect(() => {
-    const parsedOnMount = isObject(onMount) && pickBy(onMount, identity)
-    const parsedOnUnmount = isObject(onUnmount) && pickBy(onUnmount, identity)
-
-    webviewIntent &&
-      !isEmpty(parsedOnMount) &&
-      webviewIntent.call('setFlagshipUI', parsedOnMount)
-
-    return () => {
-      webviewIntent &&
-        !isEmpty(parsedOnUnmount) &&
-        webviewIntent.call('setFlagshipUI', parsedOnUnmount)
-    }
-  }, [webviewIntent])
-}
diff --git a/react/hooks/useSetFlagshipUi/useSetFlagshipUI.spec.js b/react/hooks/useSetFlagshipUi/useSetFlagshipUI.spec.ts
similarity index 98%
rename from react/hooks/useSetFlagshipUi/useSetFlagshipUI.spec.js
rename to react/hooks/useSetFlagshipUi/useSetFlagshipUI.spec.ts
index b5e681a43b..8958cf9e2d 100644
--- a/react/hooks/useSetFlagshipUi/useSetFlagshipUI.spec.js
+++ b/react/hooks/useSetFlagshipUi/useSetFlagshipUI.spec.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unsafe-call */
 import { renderHook } from '@testing-library/react-hooks'
 import { useSetFlagshipUI } from './useSetFlagshipUI'
 import { useWebviewIntent } from 'cozy-intent'
diff --git a/react/hooks/useSetFlagshipUi/useSetFlagshipUI.ts b/react/hooks/useSetFlagshipUi/useSetFlagshipUI.ts
new file mode 100644
index 0000000000..1d172495a6
--- /dev/null
+++ b/react/hooks/useSetFlagshipUi/useSetFlagshipUI.ts
@@ -0,0 +1,41 @@
+import { useEffect } from 'react'
+import pickBy from 'lodash/pickBy'
+import identity from 'lodash/identity'
+import isEmpty from 'lodash/isEmpty'
+import isObject from 'lodash/isObject'
+
+import { useWebviewIntent } from 'cozy-intent'
+import { FlagshipUI } from 'cozy-intent/dist/api/models/applications'
+import { WebviewService } from 'cozy-intent/dist/api/services/WebviewService'
+
+const parseArg = (
+  webviewIntent?: WebviewService | void,
+  arg?: FlagshipUI
+): void => {
+  if (!webviewIntent) return
+
+  const sanitized = isObject(arg) && pickBy(arg, identity)
+  const validUI = !isEmpty(sanitized) && sanitized
+
+  validUI && webviewIntent.call('setFlagshipUI', validUI)
+}
+
+export const useSetFlagshipUI = (
+  onMount: FlagshipUI,
+  onUnmount?: FlagshipUI
+): void => {
+  const webviewIntent = useWebviewIntent()
+
+  useEffect(() => {
+    parseArg(webviewIntent, onMount)
+
+    return () => parseArg(webviewIntent, onUnmount)
+
+    /**
+     * We don't want to listen to onMount/onUnmount arguments
+     * It will create far too many unwanted calls
+     * We only care about webviewIntent presence,
+     * which should be undefined on first call (not guaranteed)
+     */
+  }, [webviewIntent]) // eslint-disable-line react-hooks/exhaustive-deps
+}