Merge branch 'develop'

jakubito · May 11, 2022 · a0a24e3 · a0a24e3
2 parents aab708d + ab9d5f4
commit a0a24e3
Show file tree

Hide file tree

Showing 20 changed files with 314 additions and 313 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
diff --git a/README.md b/README.md
@@ -4,6 +4,8 @@ Display list of Spotify releases from artists you follow
 
 **<https://spotifyreleaselist.netlify.app>**
 
+[▶️ Live demo](https://demo--spotifyreleaselist.netlify.app)
+
 [![Netlify Status](https://api.netlify.com/api/v1/badges/5b14f602-d76e-47e0-8c3e-6af38e9d49f6/deploy-status)](https://app.netlify.com/sites/spotifyreleaselist/deploys)
 
 ![screenshot.jpg](https://raw.githubusercontent.com/jakubito/spotify-release-list-web/master/public/screenshot.jpg?v=1)

diff --git a/package.json b/package.json
@@ -1,56 +1,56 @@
 {
   "name": "spotify-release-list",
   "author": "Jakub Dobes <[email protected]>",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "private": true,
   "repository": "github:jakubito/spotify-release-list",
   "license": "ISC",
   "dependencies": {
-    "@reduxjs/toolkit": "^1.8.0",
-    "@sentry/browser": "^6.19.2",
+    "@reduxjs/toolkit": "^1.8.1",
+    "@sentry/browser": "^6.19.7",
     "ajv": "^8.11.0",
-    "bulma": "^0.9.3",
+    "bulma": "^0.9.4",
     "bulma-checkradio": "^2.1.3",
     "classnames": "^2.3.1",
     "colord": "^2.9.2",
     "fast_array_intersect": "^1.1.0",
-    "fuse.js": "^6.5.3",
+    "fuse.js": "^6.6.2",
     "js-base64": "^3.7.2",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
-    "moment": "^2.29.1",
+    "moment": "^2.29.3",
     "query-string": "^7.1.1",
-    "react": "^17.0.2",
+    "react": "^18.1.0",
     "react-colorful": "^5.5.1",
     "react-dates": "^21.8.0",
-    "react-dom": "^17.0.2",
-    "react-hook-form": "^7.28.1",
+    "react-dom": "^18.1.0",
+    "react-hook-form": "^7.31.1",
     "react-hotkeys-hook": "^3.4.4",
     "react-ios-pwa-prompt": "^1.8.4",
-    "react-redux": "^7.2.6",
-    "react-responsive": "^9.0.0-beta.6",
-    "react-router-dom": "^6.2.2",
-    "react-scripts": "^5.0.0",
+    "react-redux": "^8.0.1",
+    "react-responsive": "^9.0.0-beta.8",
+    "react-router-dom": "^6.3.0",
+    "react-scripts": "^5.0.1",
     "react-waypoint": "^10.1.0",
-    "redux": "^4.1.2",
+    "redux": "^4.2.0",
     "redux-persist": "^6.0.0",
     "redux-saga": "^1.1.1",
     "reselect": "^4.1.5",
-    "workbox-core": "^6.5.2",
-    "workbox-expiration": "^6.5.2",
-    "workbox-precaching": "^6.5.2",
-    "workbox-routing": "^6.5.2",
-    "workbox-strategies": "^6.5.2"
+    "workbox-core": "^6.5.3",
+    "workbox-expiration": "^6.5.3",
+    "workbox-precaching": "^6.5.3",
+    "workbox-routing": "^6.5.3",
+    "workbox-strategies": "^6.5.3"
   },
   "devDependencies": {
     "@opengovsg/credits-generator": "^1.0.6",
-    "@types/jest": "^27.4.1",
-    "@types/lodash": "^4.14.180",
-    "@types/node": "^17.0.23",
-    "@types/react": "^17.0.43",
-    "@types/react-dom": "^17.0.14",
-    "prettier": "^2.6.1",
-    "sass": "^1.49.9",
+    "@types/jest": "^27.5.0",
+    "@types/lodash": "^4.14.182",
+    "@types/node": "^17.0.32",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.3",
+    "prettier": "^2.6.2",
+    "sass": "^1.51.0",
     "source-map-explorer": "^2.5.2"
   },
   "scripts": {
@@ -62,6 +62,22 @@
     "analyze": "source-map-explorer 'build/static/js/*.js'",
     "credits": "credits-generator"
   },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ],
+    "overrides": [
+      {
+        "files": [
+          "*.js"
+        ],
+        "rules": {
+          "react-hooks/exhaustive-deps": "off"
+        }
+      }
+    ]
+  },
   "browserslist": {
     "production": [
       ">0.2%",

diff --git a/public/index.html b/public/index.html
@@ -83,13 +83,6 @@
     <script src="https://kit.fontawesome.com/4a74363a3d.js" crossorigin="anonymous"></script>
   </head>
   <body>
-    <a
-      id="ua"
-      title="Help Ukraine 🇺🇦"
-      href="https://help.gov.ua/en"
-      target="_blank"
-      rel="noopener noreferrer"
-    ></a>
     <div id="root"></div>
   </body>
 </html>
diff --git a/src/__tests__/fixtures/state.js b/src/__tests__/fixtures/state.js
@@ -1,4 +1,4 @@
-import { AlbumGroup, GroupColorSchemes } from 'enums'
+import { AlbumGroup, ArtistSource, GroupColorSchemes, ReleasesOrder } from 'enums'
 
 const state = {
   albums: {
@@ -384,6 +384,8 @@ const state = {
   playlistModalVisible: false,
   filtersVisible: false,
   settings: {
+    artistSources: [ArtistSource.FOLLOWED],
+    minimumSavedTracks: 1,
     groups: [AlbumGroup.ALBUM, AlbumGroup.SINGLE],
     groupColors: GroupColorSchemes.DEFAULT,
     days: 7,
@@ -400,13 +402,15 @@ const state = {
     displayLabels: false,
     displayPopularity: false,
     labelBlocklist: '',
+    releasesOrder: ReleasesOrder.ARTIST,
   },
   filters: {
     groups: [],
     search: '',
     startDate: null,
     endDate: null,
     excludeVariousArtists: false,
+    excludeRemixes: false,
     excludeDuplicates: false,
     favoritesOnly: false,
   },

diff --git a/src/__tests__/helpers.test.js b/src/__tests__/helpers.test.js
@@ -14,7 +14,9 @@ import {
 } from 'helpers'
 import { AlbumGroup } from 'enums'
 import { getOriginalReleasesMap } from 'state/selectors'
-import mockState from './fixtures/state'
+import mockStateJson from './fixtures/state'
+
+const mockState = /** @type {State} */ (mockStateJson)
 
 describe('sleep', () => {
   beforeEach(() => {

diff --git a/src/components/common/Input.js b/src/components/common/Input.js
@@ -12,16 +12,18 @@ import classNames from 'classnames'
  *   value?: string
  *   defaultValue?: string
  *   placeholder?: string
- *   step?: string
+ *   step?: string | number
+ *   min?: string | number
+ *   max?: string | number
  *   pattern?: string
  *   disabled?: boolean
  *   onChange?: React.ChangeEventHandler<HTMLInputElement>
  *   onBlur?: React.FocusEventHandler<HTMLInputElement>
  * }} props
  * @param {React.Ref<HTMLInputElement>} ref
  */
-function Input(
-  {
+function Input(props, ref) {
+  const {
     type = 'text',
     id,
     name,
@@ -30,12 +32,13 @@ function Input(
     defaultValue,
     placeholder,
     step,
+    min,
+    max,
     pattern,
     disabled,
     onChange,
-  },
-  ref
-) {
+  } = props
+
   return (
     <input
       type={type}
@@ -46,6 +49,8 @@ function Input(
       className={classNames(className, 'input', 'is-rounded', 'has-text-weight-medium', 'is-dark')}
       placeholder={placeholder}
       step={step}
+      min={min}
+      max={max}
       pattern={pattern}
       disabled={disabled}
       onChange={onChange}

diff --git a/src/components/filters/DateRangeShortcuts.js b/src/components/filters/DateRangeShortcuts.js
@@ -54,7 +54,7 @@ function getShortcuts() {
 function DateRangeShortcuts({ setValues }) {
   const { minDate, maxDate } = useSelector(getReleasesMinMaxDates)
   const validShortcuts = getShortcuts().filter(
-    ({ start, end }) => start.isBefore(maxDate) && end.isAfter(minDate)
+    ({ start, end }) => start.isSameOrBefore(maxDate) && end.isAfter(minDate)
   )
 
   return (

diff --git a/src/components/releases/Intro.js b/src/components/releases/Intro.js
@@ -1,7 +1,7 @@
 import { Address } from 'enums'
 import { ButtonAnchor, SyncButton } from 'components/common'
 
-const { GITHUB, PRIVACY } = Address
+const { DEMO, GITHUB, PRIVACY } = Address
 
 /**
  * Render initial intro screen
@@ -14,6 +14,13 @@ function Intro() {
       </p>
       <SyncButton title="Log in with Spotify" icon="fab fa-spotify" medium />
       <div className="Intro__buttons has-text-centered has-text-grey">
+        <ButtonAnchor
+          href={DEMO}
+          title="Live demo"
+          icon="fas fa-play"
+          className="Intro__button"
+          text
+        />
         <ButtonAnchor
           href={GITHUB}
           title="GitHub repository"

diff --git a/src/components/releases/ReleasesHeader.js b/src/components/releases/ReleasesHeader.js
@@ -98,6 +98,15 @@ function ReleasesHeader() {
         </div>
       )}
       <div className="Header__right">
+        <a
+          id="ua"
+          title="Help Ukraine 🇺🇦"
+          href="https://help.gov.ua/en"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          🇺🇦
+        </a>
         {lastSyncDate && hasReleases && !syncing && (
           <Button
             title="Export to playlist [E]"

diff --git a/src/components/settings/MinimumSavedTracksField.js b/src/components/settings/MinimumSavedTracksField.js
@@ -32,6 +32,7 @@ function MinimumSavedTracksField() {
             type="number"
             className="MinimumSavedTracksField__input"
             step="1"
+            min="1"
             pattern="\d*"
             defaultValue={String(minimumSavedTracks)}
             onChange={onChange}

diff --git a/src/enums.js b/src/enums.js
@@ -9,6 +9,7 @@ export const Address = {
   CHANGELOG: `${GITHUB}/releases`,
   DONATE: 'https://paypal.me/jakubito',
   EMAIL: 'mailto:[email protected]',
+  DEMO: 'https://demo--spotifyreleaselist.netlify.app',
 }
 
 /** @enum {string} */

diff --git a/src/index.js b/src/index.js
@@ -1,4 +1,4 @@
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import { Provider } from 'react-redux'
 import { BrowserRouter } from 'react-router-dom'
 import PWAPrompt from 'react-ios-pwa-prompt'
@@ -7,38 +7,29 @@ import moment from 'moment'
 import 'react-dates/initialize'
 import * as serviceWorkerRegistration from 'serviceWorkerRegistration'
 import { store, hydrate } from 'state'
-import { getSettings, getSettingsTheme } from 'state/selectors'
+import { getSettings } from 'state/selectors'
 import { updateReady } from 'state/actions'
 import { Routes } from 'components'
 import 'styles/index.scss'
 
 Sentry.init({ dsn: process.env.REACT_APP_SENTRY_DSN })
 serviceWorkerRegistration.register({ onUpdate: () => store.dispatch(updateReady()) })
 
-hydrate.then(applyTheme).then(setFirstDayOfWeek).then(renderApp)
+const container = document.getElementById('root')
+const root = createRoot(container)
 
-function applyTheme() {
-  const theme = getSettingsTheme(store.getState())
-
-  if (theme) {
-    document.documentElement.classList.add(...theme.split(' '))
-  }
-}
-
-function setFirstDayOfWeek() {
-  const { firstDayOfWeek } = getSettings(store.getState())
+hydrate.then(() => {
+  const { theme, firstDayOfWeek } = getSettings(store.getState())
 
+  if (theme) document.documentElement.classList.add(...theme.split(' '))
   moment.updateLocale(moment.locale(), { week: { dow: firstDayOfWeek } })
-}
 
-function renderApp() {
-  render(
+  root.render(
     <Provider store={store}>
       <BrowserRouter>
         <Routes />
         <PWAPrompt />
       </BrowserRouter>
-    </Provider>,
-    document.getElementById('root')
+    </Provider>
   )
-}
+})
diff --git a/src/sagas/update.js b/src/sagas/update.js
@@ -1,4 +1,4 @@
-import { call, fork, put, spawn, take, takeLeading } from 'redux-saga/effects'
+import { call, delay, fork, put, spawn, take, takeLeading } from 'redux-saga/effects'
 import { triggerUpdate, updateReady } from 'state/actions'
 import { serviceWorkerEventChannel, throttle, windowEventChannel } from './helpers'
 
@@ -7,6 +7,7 @@ import { serviceWorkerEventChannel, throttle, windowEventChannel } from './helpe
  */
 export function* updateSaga() {
   yield takeLeading(triggerUpdate.type, update)
+  yield delay(2000)
   yield fork(appFocusCheck)
   yield fork(waitingCheck)
 }