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,157 @@
+import { useSelector } from 'react-redux'
+import { Redirect, useLocation } from 'react-router-dom'
+import {
+  AutocompleteInput,
+  Filter,
+  NullableBooleanInput,
+  NumberInput,
+  Pagination,
+  ReferenceInput,
+  SearchInput,
+  useRefresh,
+  useTranslate,
+  useVersion,
+} from 'react-admin'
+import FavoriteIcon from '@material-ui/icons/Favorite'
+import { withWidth } from '@material-ui/core'
+import {
+  List,
+  QuickFilter,
+  Title,
+  useAlbumsPerPage,
+  useResourceRefresh,
+  useSetToggleableFields,
+} from '../common'
+import AlbumListActions from './AlbumListActions'
+import AlbumTableView from './AlbumTableView'
+import AlbumGridView from './AlbumGridView'
+import albumLists, { defaultAlbumList } from './albumLists'
+import config from '../config'
+import AlbumInfo from './AlbumInfo'
+import ExpandInfoDialog from '../dialogs/ExpandInfoDialog'
+
+const AlbumFilter = (props) => {
+  const translate = useTranslate()
+  return (
+    <Filter {...props} variant={'outlined'}>
+      <SearchInput id="search" source="name" alwaysOn />
+      <ReferenceInput
+        label={translate('resources.album.fields.artist')}
+        source="artist_id"
+        reference="artist"
+        sort={{ field: 'name', order: 'ASC' }}
+        filterToQuery={(searchText) => ({ name: [searchText] })}
+      >
+        <AutocompleteInput emptyText="-- None --" />
+      </ReferenceInput>
+      <ReferenceInput
+        label={translate('resources.album.fields.genre')}
+        source="genre_id"
+        reference="genre"
+        perPage={0}
+        sort={{ field: 'name', order: 'ASC' }}
+        filterToQuery={(searchText) => ({ name: [searchText] })}
+      >
+        <AutocompleteInput emptyText="-- None --" />
+      </ReferenceInput>
+      <NullableBooleanInput source="compilation" />
+      <NumberInput source="year" />
+      {config.enableFavourites && (
+        <QuickFilter
+          source="starred"
+          label={<FavoriteIcon fontSize={'small'} />}
+          defaultValue={true}
+        />
+      )}
+    </Filter>
+  )
+}
+
+const AlbumListTitle = ({ albumListType }) => {
+  const translate = useTranslate()
+  let title = translate('resources.album.name', { smart_count: 2 })
+  if (albumListType) {
+    let listTitle = translate(`resources.album.lists.${albumListType}`, {
+      smart_count: 2,
+    })
+    title = `${title} - ${listTitle}`
+  }
+  return <Title subTitle={title} args={{ smart_count: 2 }} />
+}
+
+const randomStartingSeed = Math.random().toString()
+
+const AlbumList = (props) => {
+  const { width } = props
+  const albumView = useSelector((state) => state.albumView)
+  const [perPage, perPageOptions] = useAlbumsPerPage(width)
+  const location = useLocation()
+  const version = useVersion()
+  const refresh = useRefresh()
+  useResourceRefresh('album')
+
+  const seed = `${randomStartingSeed}-${version}`
+
+  const albumListType = location.pathname
+    .replace(/^\/album/, '')
+    .replace(/^\//, '')
+
+  // Workaround to force album columns to appear the first time.
+  // See https://github.com/navidrome/navidrome/pull/923#issuecomment-833004842
+  // TODO: Find a better solution
+  useSetToggleableFields(
+    'album',
+    [
+      'artist',
+      'songCount',
+      'playCount',
+      'year',
+      'duration',
+      'rating',
+      'size',
+      'createdAt',
+    ],
+    ['createdAt', 'size'],
+  )
+
+  // If it does not have filter/sort params (usually coming from Menu),
+  // reload with correct filter/sort params
+  if (!location.search) {
+    const type =
+      albumListType || localStorage.getItem('defaultView') || defaultAlbumList
+    const listParams = albumLists[type]
+    if (type === 'random') {
+      refresh()
+    }
+    if (listParams) {
+      return <Redirect to={`/album/${type}?${listParams.params}`} />
+    }
+  }
+
+  return (
+    <>
+      <List
+        {...props}
+        exporter={false}
+        bulkActionButtons={false}
+        filter={{ seed }}
+        actions={<AlbumListActions />}
+        filters={<AlbumFilter />}
+        perPage={perPage}
+        pagination={<Pagination rowsPerPageOptions={perPageOptions} />}
+        title={<AlbumListTitle albumListType={albumListType} />}
+      >
+        {albumView.grid ? (
+          <AlbumGridView albumListType={albumListType} {...props} />
+        ) : (
+          <AlbumTableView {...props} />
+        )}
+      </List>
+      <ExpandInfoDialog content={<AlbumInfo />} />
+    </>
+  )
+}
+
+const AlbumListWithWidth = withWidth()(AlbumList)
+
+export default AlbumListWithWidth