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,144 @@
+import ReactGA from 'react-ga'
+import { Provider } from 'react-redux'
+import { createHashHistory } from 'history'
+import { Admin as RAAdmin, Resource } from 'react-admin'
+import { HotKeys } from 'react-hotkeys'
+import dataProvider from './dataProvider'
+import authProvider from './authProvider'
+import { Layout, Login, Logout } from './layout'
+import transcoding from './transcoding'
+import player from './player'
+import user from './user'
+import song from './song'
+import album from './album'
+import artist from './artist'
+import playlist from './playlist'
+import radio from './radio'
+import share from './share'
+import { Player } from './audioplayer'
+import customRoutes from './routes'
+import {
+  themeReducer,
+  addToPlaylistDialogReducer,
+  expandInfoDialogReducer,
+  listenBrainzTokenDialogReducer,
+  playerReducer,
+  albumViewReducer,
+  activityReducer,
+  settingsReducer,
+  replayGainReducer,
+  downloadMenuDialogReducer,
+  shareDialogReducer,
+} from './reducers'
+import createAdminStore from './store/createAdminStore'
+import { i18nProvider } from './i18n'
+import config, { shareInfo } from './config'
+import { keyMap } from './hotkeys'
+import useChangeThemeColor from './useChangeThemeColor'
+import SharePlayer from './share/SharePlayer'
+
+const history = createHashHistory()
+
+if (config.gaTrackingId) {
+  ReactGA.initialize(config.gaTrackingId)
+  history.listen((location) => {
+    ReactGA.pageview(location.pathname)
+  })
+  ReactGA.pageview(window.location.pathname)
+}
+
+const adminStore = createAdminStore({
+  authProvider,
+  dataProvider,
+  history,
+  customReducers: {
+    player: playerReducer,
+    albumView: albumViewReducer,
+    theme: themeReducer,
+    addToPlaylistDialog: addToPlaylistDialogReducer,
+    downloadMenuDialog: downloadMenuDialogReducer,
+    expandInfoDialog: expandInfoDialogReducer,
+    listenBrainzTokenDialog: listenBrainzTokenDialogReducer,
+    shareDialog: shareDialogReducer,
+    activity: activityReducer,
+    settings: settingsReducer,
+    replayGain: replayGainReducer,
+  },
+})
+
+const App = () => (
+  <Provider store={adminStore}>
+    <Admin />
+  </Provider>
+)
+
+const Admin = (props) => {
+  useChangeThemeColor()
+  /* eslint-disable react/jsx-key */
+  return (
+    <RAAdmin
+      disableTelemetry
+      dataProvider={dataProvider}
+      authProvider={authProvider}
+      i18nProvider={i18nProvider}
+      customRoutes={customRoutes}
+      history={history}
+      layout={Layout}
+      loginPage={Login}
+      logoutButton={Logout}
+      {...props}
+    >
+      {(permissions) => [
+        <Resource name="album" {...album} options={{ subMenu: 'albumList' }} />,
+        <Resource name="artist" {...artist} />,
+        <Resource name="song" {...song} />,
+        <Resource
+          name="radio"
+          {...(permissions === 'admin' ? radio.admin : radio.all)}
+        />,
+        config.enableSharing && <Resource name="share" {...share} />,
+        <Resource
+          name="playlist"
+          {...playlist}
+          options={{ subMenu: 'playlist' }}
+        />,
+        <Resource name="user" {...user} options={{ subMenu: 'settings' }} />,
+        <Resource
+          name="player"
+          {...player}
+          options={{ subMenu: 'settings' }}
+        />,
+        permissions === 'admin' ? (
+          <Resource
+            name="transcoding"
+            {...transcoding}
+            options={{ subMenu: 'settings' }}
+          />
+        ) : (
+          <Resource name="transcoding" />
+        ),
+        <Resource name="translation" />,
+        <Resource name="genre" />,
+        <Resource name="playlistTrack" />,
+        <Resource name="keepalive" />,
+        <Player />,
+      ]}
+    </RAAdmin>
+  )
+  /* eslint-enable react/jsx-key */
+}
+
+const AppWithHotkeys = () => {
+  let language = localStorage.getItem('locale') || 'en'
+  document.documentElement.lang = language
+  if (config.enableSharing && shareInfo) {
+    return <SharePlayer />
+  }
+  return (
+    <HotKeys keyMap={keyMap}>
+      <App />
+    </HotKeys>
+  )
+}
+
+export default AppWithHotkeys