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,64 @@
+import { useNotify, useTranslate } from 'react-admin'
+import { useDispatch, useSelector } from 'react-redux'
+import { setNotificationsState } from '../actions'
+import {
+  FormControl,
+  FormControlLabel,
+  FormHelperText,
+  Switch,
+} from '@material-ui/core'
+
+export const NotificationsToggle = () => {
+  const translate = useTranslate()
+  const dispatch = useDispatch()
+  const notify = useNotify()
+  const currentSetting = useSelector((state) => state.settings.notifications)
+  const notAvailable = !('Notification' in window) || !window.isSecureContext
+
+  if (
+    (currentSetting && Notification.permission !== 'granted') ||
+    notAvailable
+  ) {
+    dispatch(setNotificationsState(false))
+  }
+
+  const toggleNotifications = (event) => {
+    if (currentSetting && !event.target.checked) {
+      dispatch(setNotificationsState(false))
+    } else {
+      if (Notification.permission === 'denied') {
+        notify(translate('message.notifications_blocked'), 'warning')
+      } else {
+        Notification.requestPermission().then((permission) => {
+          dispatch(setNotificationsState(permission === 'granted'))
+        })
+      }
+    }
+  }
+
+  return (
+    <FormControl>
+      <FormControlLabel
+        control={
+          <Switch
+            id={'notifications'}
+            color="primary"
+            checked={currentSetting}
+            disabled={notAvailable}
+            onChange={toggleNotifications}
+          />
+        }
+        label={
+          <span>
+            {translate('menu.personal.options.desktop_notifications')}
+          </span>
+        }
+      />
+      {notAvailable && (
+        <FormHelperText id="notifications-disabled-helper-text">
+          {translate('message.notifications_not_available')}
+        </FormHelperText>
+      )}
+    </FormControl>
+  )
+}