build(ui): migrate from CRA/Jest to Vite/Vitest (#3311)

* feat: create vite project * feat: it's alive! * feat: `make dev` working! * feat: replace custom serviceWorker with vite plugin * test: replace Jest with Vitest * fix: run prettier * fix: skip eslint for now. * chore: remove ui.old folder * refactor: replace lodash.pick with simple destructuring * fix: eslint errors (wip) * fix: eslint errors (wip) * fix: display-name eslint errors (wip) * fix: no-console eslint errors (wip) * fix: react-refresh/only-export-components eslint errors (wip) * fix: react-refresh/only-export-components eslint errors (wip) * fix: react-refresh/only-export-components eslint errors (wip) * fix: react-refresh/only-export-components eslint errors (wip) * fix: build * fix: pwa manifest * refactor: pwa manifest * refactor: simplify PORT configuration * refactor: rename simple JS files * test: cover playlistUtils * fix: react-image-lightbox * feat(ui): add sourcemaps to help debug issues
2024-09-28 11:54:36 -04:00
parent dd48a23f92
commit fcdd30ba8f
212 changed files with 6231 additions and 31060 deletions
@@ -0,0 +1,30 @@
+import { useCallback, useMemo, useState } from 'react'
+
+// Idea from https://blog.bitsrc.io/new-react-design-pattern-return-component-from-hooks-79215c3eac00
+export const useDialog = () => {
+  const [anchorEl, setAnchorEl] = useState(null)
+
+  const openDialog = useCallback((event) => {
+    event?.stopPropagation()
+    setAnchorEl(event.currentTarget)
+  }, [])
+
+  const closeDialog = useCallback((event) => {
+    event?.stopPropagation()
+    setAnchorEl(null)
+  }, [])
+
+  const props = useMemo(() => {
+    return {
+      anchorEl,
+      open: Boolean(anchorEl),
+      onClose: closeDialog,
+    }
+  }, [anchorEl, closeDialog])
+
+  return {
+    openDialog,
+    closeDialog,
+    props,
+  }
+}