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,43 @@
+import React, { useCallback } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { Layout as RALayout, toggleSidebar } from 'react-admin'
+import { makeStyles } from '@material-ui/core/styles'
+import { HotKeys } from 'react-hotkeys'
+import { HTML5Backend } from 'react-dnd-html5-backend'
+import { DndProvider } from 'react-dnd'
+import Menu from './Menu'
+import AppBar from './AppBar'
+import Notification from './Notification'
+import useCurrentTheme from '../themes/useCurrentTheme'
+
+const useStyles = makeStyles({
+  root: { paddingBottom: (props) => (props.addPadding ? '80px' : 0) },
+})
+
+const Layout = (props) => {
+  const theme = useCurrentTheme()
+  const queue = useSelector((state) => state.player?.queue)
+  const classes = useStyles({ addPadding: queue.length > 0 })
+  const dispatch = useDispatch()
+
+  const keyHandlers = {
+    TOGGLE_MENU: useCallback(() => dispatch(toggleSidebar()), [dispatch]),
+  }
+
+  return (
+    <DndProvider backend={HTML5Backend}>
+      <HotKeys handlers={keyHandlers}>
+        <RALayout
+          {...props}
+          className={classes.root}
+          menu={Menu}
+          appBar={AppBar}
+          theme={theme}
+          notification={Notification}
+        />
+      </HotKeys>
+    </DndProvider>
+  )
+}
+
+export default Layout