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,85 @@
+import React, { useState, createElement, useEffect } from 'react'
+import { useMediaQuery } from '@material-ui/core'
+import {
+  useShowController,
+  ShowContextProvider,
+  useRecordContext,
+  useShowContext,
+  ReferenceManyField,
+} from 'react-admin'
+import subsonic from '../subsonic'
+import AlbumGridView from '../album/AlbumGridView'
+import MobileArtistDetails from './MobileArtistDetails'
+import DesktopArtistDetails from './DesktopArtistDetails'
+
+const ArtistDetails = (props) => {
+  const record = useRecordContext(props)
+  const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('sm'))
+  const [artistInfo, setArtistInfo] = useState()
+
+  const biography =
+    artistInfo?.biography?.replace(new RegExp('<.*>', 'g'), '') ||
+    record.biography
+
+  useEffect(() => {
+    subsonic
+      .getArtistInfo(record.id)
+      .then((resp) => resp.json['subsonic-response'])
+      .then((data) => {
+        if (data.status === 'ok') {
+          setArtistInfo(data.artistInfo)
+        }
+      })
+      .catch((e) => {
+        // eslint-disable-next-line no-console
+        console.error('error on artist page', e)
+      })
+  }, [record.id])
+
+  const component = isDesktop ? DesktopArtistDetails : MobileArtistDetails
+  return (
+    <>
+      {createElement(component, {
+        artistInfo,
+        record,
+        biography,
+      })}
+    </>
+  )
+}
+
+const AlbumShowLayout = (props) => {
+  const showContext = useShowContext(props)
+  const record = useRecordContext()
+
+  return (
+    <>
+      {record && <ArtistDetails />}
+      {record && (
+        <ReferenceManyField
+          {...showContext}
+          addLabel={false}
+          reference="album"
+          target="artist_id"
+          sort={{ field: 'max_year', order: 'ASC' }}
+          filter={{ artist_id: record?.id }}
+          perPage={0}
+          pagination={null}
+        >
+          <AlbumGridView {...props} />
+        </ReferenceManyField>
+      )}
+    </>
+  )
+}
+
+const ArtistShow = (props) => {
+  const controllerProps = useShowController(props)
+  return (
+    <ShowContextProvider value={controllerProps}>
+      <AlbumShowLayout {...controllerProps} />
+    </ShowContextProvider>
+  )
+}
+
+export default ArtistShow