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,109 @@
+import React, { useState, useEffect } from 'react'
+import PropTypes from 'prop-types'
+import { useDispatch, useSelector } from 'react-redux'
+import { setOmittedFields, setToggleableFields } from '../actions'
+
+// TODO Refactor
+export const useSelectedFields = ({
+  resource,
+  columns,
+  omittedColumns = [],
+  defaultOff = [],
+}) => {
+  const dispatch = useDispatch()
+  const resourceFields = useSelector(
+    (state) => state.settings.toggleableFields,
+  )?.[resource]
+  const omittedFields = useSelector((state) => state.settings.omittedFields)?.[
+    resource
+  ]
+
+  const [filteredComponents, setFilteredComponents] = useState([])
+
+  useEffect(() => {
+    if (
+      !resourceFields ||
+      Object.keys(resourceFields).length !== Object.keys(columns).length ||
+      !Object.keys(columns).every((c) => c in resourceFields)
+    ) {
+      const obj = {}
+      for (const key of Object.keys(columns)) {
+        obj[key] = !defaultOff.includes(key)
+      }
+      dispatch(setToggleableFields({ [resource]: obj }))
+    }
+    if (!omittedFields) {
+      dispatch(setOmittedFields({ [resource]: omittedColumns }))
+    }
+  }, [
+    columns,
+    defaultOff,
+    dispatch,
+    omittedColumns,
+    omittedFields,
+    resource,
+    resourceFields,
+  ])
+
+  useEffect(() => {
+    if (resourceFields) {
+      const filtered = []
+      const omitted = omittedColumns
+      for (const [key, val] of Object.entries(columns)) {
+        if (!val) omitted.push(key)
+        else if (resourceFields[key]) filtered.push(val)
+      }
+      if (filteredComponents.length !== filtered.length)
+        setFilteredComponents(filtered)
+      if (omittedFields.length !== omitted.length)
+        dispatch(setOmittedFields({ [resource]: omitted }))
+    }
+  }, [
+    resourceFields,
+    columns,
+    dispatch,
+    omittedColumns,
+    omittedFields,
+    resource,
+    filteredComponents.length,
+  ])
+
+  return React.Children.toArray(filteredComponents)
+}
+
+useSelectedFields.propTypes = {
+  resource: PropTypes.string,
+  columns: PropTypes.object,
+  omittedColumns: PropTypes.arrayOf(PropTypes.string),
+  defaultOff: PropTypes.arrayOf(PropTypes.string),
+}
+
+export const useSetToggleableFields = (
+  resource,
+  toggleableColumns,
+  defaultOff = [],
+) => {
+  const current = useSelector((state) => state.settings.toggleableFields)?.album
+  const dispatch = useDispatch()
+  useEffect(() => {
+    if (!current) {
+      dispatch(
+        setToggleableFields({
+          [resource]: toggleableColumns.reduce((acc, cur) => {
+            return {
+              ...acc,
+              ...{ [cur]: true },
+            }
+          }, {}),
+        }),
+      )
+      dispatch(setOmittedFields({ [resource]: defaultOff }))
+    }
+  }, [resource, toggleableColumns, dispatch, current, defaultOff])
+}
+
+useSetToggleableFields.propTypes = {
+  resource: PropTypes.string,
+  toggleableColumns: PropTypes.arrayOf(PropTypes.string),
+  defaultOff: PropTypes.arrayOf(PropTypes.string),
+}