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,123 @@
+import { useEffect, useRef, useState } from 'react'
+import { useNotify, useTranslate } from 'react-admin'
+import {
+  FormControl,
+  FormControlLabel,
+  LinearProgress,
+  Switch,
+} from '@material-ui/core'
+import { useInterval } from '../common'
+import { baseUrl, openInNewTab } from '../utils'
+import { httpClient } from '../dataProvider'
+
+const Progress = (props) => {
+  const { setLinked, setCheckingLink } = props
+  const notify = useNotify()
+  let linkCheckDelay = 2000
+  let linkChecks = 30
+  const openedTab = useRef()
+
+  useEffect(() => {
+    const callbackEndpoint = baseUrl(
+      `/api/lastfm/link/callback?uid=${localStorage.getItem('userId')}`,
+    )
+    const callbackUrl = `${window.location.origin}${callbackEndpoint}`
+    openedTab.current = openInNewTab(
+      `https://www.last.fm/api/auth/?api_key=${localStorage.getItem(
+        'lastfm-apikey',
+      )}&cb=${callbackUrl}`,
+    )
+  }, [])
+
+  const endChecking = (success) => {
+    linkCheckDelay = null
+    setCheckingLink(false)
+    if (success) {
+      notify('message.lastfmLinkSuccess', 'success')
+    } else {
+      notify('message.lastfmLinkFailure', 'warning')
+    }
+    setLinked(success)
+  }
+
+  useInterval(() => {
+    httpClient('/api/lastfm/link')
+      .then((response) => {
+        let result = false
+        if (response.json.status === true) {
+          result = true
+          endChecking(true)
+        }
+        return result
+      })
+      .then((result) => {
+        if (!result && openedTab.current?.closed === true) {
+          endChecking(false)
+          result = true
+        }
+        return result
+      })
+      .then((result) => {
+        if (!result && --linkChecks === 0) {
+          endChecking(false)
+        }
+      })
+      .catch(() => {
+        endChecking(false)
+      })
+  }, linkCheckDelay)
+
+  return <LinearProgress />
+}
+
+export const LastfmScrobbleToggle = (props) => {
+  const notify = useNotify()
+  const translate = useTranslate()
+  const [linked, setLinked] = useState(null)
+  const [checkingLink, setCheckingLink] = useState(false)
+
+  const toggleScrobble = () => {
+    if (!linked) {
+      setCheckingLink(true)
+    } else {
+      httpClient('/api/lastfm/link', { method: 'DELETE' })
+        .then(() => {
+          setLinked(false)
+          notify('message.lastfmUnlinkSuccess', 'success')
+        })
+        .catch(() => notify('message.lastfmUnlinkFailure', 'warning'))
+    }
+  }
+
+  useEffect(() => {
+    httpClient('/api/lastfm/link')
+      .then((response) => {
+        setLinked(response.json.status === true)
+      })
+      .catch(() => {
+        setLinked(false)
+      })
+  }, [])
+
+  return (
+    <FormControl>
+      <FormControlLabel
+        control={
+          <Switch
+            id={'lastfm'}
+            color="primary"
+            checked={linked || checkingLink}
+            disabled={linked === null || checkingLink}
+            onChange={toggleScrobble}
+          />
+        }
+        label={
+          <span>{translate('menu.personal.options.lastfmScrobbling')}</span>
+        }
+      />
+      {checkingLink && (
+        <Progress setLinked={setLinked} setCheckingLink={setCheckingLink} />
+      )}
+    </FormControl>
+  )
+}