Merge branch 'develop'

.gitignore

@@ -18,6 +18,7 @@
 .env.test.local
 .env.production.local
 /.vscode
+.eslintcache
 
 npm-debug.log*
 yarn-debug.log*

README.md

@@ -1,8 +1,8 @@
 # Spotify Release List
 
-Display list of Spotify releases from artists you follow.
+Display list of Spotify releases from artists you follow
 
-https://spotifyreleaselist.netlify.app
+**<https://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)
 

package.json

@@ -1,13 +1,13 @@
 {
   "name": "spotify-release-list",
   "author": "Jakub Dobes <[email protected]>",
-  "version": "1.7.7",
+  "version": "1.7.8",
   "private": true,
   "repository": "github:jakubito/spotify-release-list",
   "license": "ISC",
   "dependencies": {
     "@reach/router": "^1.2.1",
-    "@sentry/browser": "^5.27.4",
+    "@sentry/browser": "^5.29.0",
     "bulma": "^0.9.1",
     "bulma-checkradio": "^1.1.1",
     "classnames": "^2.2.6",
@@ -21,32 +21,32 @@
     "react": "^17.0.1",
     "react-dates": "^21.8.0",
     "react-dom": "^17.0.1",
-    "react-hook-form": "^6.11.3",
+    "react-hook-form": "^6.12.2",
     "react-hotkeys-hook": "^2.4.0",
     "react-ios-pwa-prompt": "^1.8.4",
     "react-media": "^1.10.0",
     "react-redux": "^7.2.2",
-    "react-scripts": "^4.0.0",
+    "react-scripts": "^4.0.1",
     "react-waypoint": "^9.0.2",
     "redux": "^4.0.4",
     "redux-persist": "^6.0.0",
     "redux-saga": "^1.1.1",
     "reselect": "^4.0.0",
-    "workbox-cacheable-response": "^5.1.4",
-    "workbox-core": "^5.1.4",
-    "workbox-expiration": "^5.1.4",
-    "workbox-precaching": "^5.1.4",
-    "workbox-routing": "^5.1.4",
-    "workbox-strategies": "^5.1.4"
+    "workbox-cacheable-response": "^6.0.2",
+    "workbox-core": "^6.0.2",
+    "workbox-expiration": "^6.0.2",
+    "workbox-precaching": "^6.0.2",
+    "workbox-routing": "^6.0.2",
+    "workbox-strategies": "^6.0.2"
   },
   "devDependencies": {
-    "@types/jest": "^26.0.15",
-    "@types/node": "^14.14.8",
-    "@types/react": "^16.9.56",
-    "@types/react-dom": "^16.9.9",
+    "@types/jest": "^26.0.18",
+    "@types/node": "^14.14.11",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
     "node-sass": "^4.14.1",
-    "prettier": "^2.1.2",
-    "source-map-explorer": "^2.5.0"
+    "prettier": "^2.2.1",
+    "source-map-explorer": "^2.5.1"
   },
   "scripts": {
     "start": "REACT_APP_VERSION=$npm_package_version BROWSER=none react-scripts start",

src/__tests__/helpers.test.js

@@ -4,10 +4,10 @@ import {
   defer,
   chunks,
   generateNonce,
-  getPlaylistSuggestion,
+  playlistName,
   getReleasesBetween,
-  getSpotifyUri,
-  getSpotifyUrl,
+  spotifyUri,
+  spotifyUrl,
   getImage,
   buildUser,
   buildArtist,
@@ -129,19 +129,19 @@ describe('generateNonce', () => {
   })
 })
 
-describe('getPlaylistSuggestion', () => {
+describe('playlistName', () => {
   it('works with different days', () => {
     const start = moment('2020-01-15')
     const end = moment('2020-02-08')
-    const actual = getPlaylistSuggestion(start, end)
+    const actual = playlistName(start, end)
 
     expect(actual).toEqual('Jan 15 - Feb 8 Releases')
   })
 
   it('works with single day', () => {
     const start = moment('2020-01-15')
     const end = moment('2020-01-15')
-    const actual = getPlaylistSuggestion(start, end)
+    const actual = playlistName(start, end)
 
     expect(actual).toEqual('Jan 15 Releases')
   })
@@ -189,18 +189,18 @@ describe('getReleasesBetween', () => {
   })
 })
 
-describe('getSpotifyUri', () => {
+describe('spotifyUri', () => {
   it('returns correct URI', () => {
-    const actual = getSpotifyUri('123', 'track')
+    const actual = spotifyUri('123', 'track')
     const expected = 'spotify:track:123'
 
     expect(actual).toEqual(expected)
   })
 })
 
-describe('getSpotifyUrl', () => {
+describe('spotifyUrl', () => {
   it('returns correct URL', () => {
-    const actual = getSpotifyUrl('123', 'track')
+    const actual = spotifyUrl('123', 'track')
     const expected = 'https://open.spotify.com/track/123'
 
     expect(actual).toEqual(expected)

src/auth.js

@@ -6,6 +6,14 @@ import { Scope } from 'enums'
 
 const { USER_FOLLOW_READ, PLAYLIST_MODIFY_PRIVATE, PLAYLIST_MODIFY_PUBLIC } = Scope
 
+/**
+ * How many minutes to subtract from the actual token expiration time
+ */
+const TOKEN_PADDING_MINUTES = 10
+
+/**
+ * Represents an error encountered during authorization
+ */
 export class AuthError extends Error {
   /** @param {string} [message] */
   constructor(message) {
@@ -47,7 +55,7 @@ export function validateAuthRequest(locationSearch, locationHash, nonce) {
   const { action, scope } = state
   const token = hash.access_token
   const tokenExpires = moment()
-    .add(Number(hash.expires_in) - 60 * 5, 'seconds') // subtract 5 minutes just to be safe
+    .add(Number(hash.expires_in) - 60 * TOKEN_PADDING_MINUTES, 'seconds')
     .toISOString()
 
   return { action, scope, token, tokenExpires }

src/components/Album.js

@@ -1,8 +1,8 @@
 import { useSelector } from 'react-redux'
 import { getSettingsCovers } from 'state/selectors'
-import { getSpotifyUri, getSpotifyUrl } from 'helpers'
+import { spotifyUri, spotifyUrl } from 'helpers'
 import { SpotifyEntity } from 'enums'
-import Link from './Link'
+import { Link } from 'components'
 
 const { ALBUM, ARTIST } = SpotifyEntity
 
@@ -21,8 +21,8 @@ function Album({ album }) {
         <div className="content">
           <Link
             title={name}
-            uri={getSpotifyUri(id, ALBUM)}
-            url={getSpotifyUrl(id, ALBUM)}
+            uri={spotifyUri(id, ALBUM)}
+            url={spotifyUrl(id, ALBUM)}
             className="title is-size-5"
           >
             {name}
@@ -46,8 +46,8 @@ function AlbumCover({ album }) {
   return (
     <Link
       title={name}
-      uri={getSpotifyUri(id, ALBUM)}
-      url={getSpotifyUrl(id, ALBUM)}
+      uri={spotifyUri(id, ALBUM)}
+      url={spotifyUrl(id, ALBUM)}
       className="media-left"
     >
       <figure className="image">
@@ -64,8 +64,8 @@ function ArtistLink({ artist, className }) {
   return (
     <Link
       title={name}
-      uri={getSpotifyUri(id, ARTIST)}
-      url={getSpotifyUrl(id, ARTIST)}
+      uri={spotifyUri(id, ARTIST)}
+      url={spotifyUrl(id, ARTIST)}
       className={className}
       key={id}
     >

src/components/App.js

@@ -1,11 +1,10 @@
-import Header from 'components/Header'
-import Filters from 'components/filters'
-import Content from 'components/Content'
-import SettingsModalContainer from 'components/modals/SettingsModalContainer'
-import ResetModalContainer from 'components/modals/ResetModalContainer'
-import PlaylistModalContainer from 'components/modals/PlaylistModalContainer'
-import BackToTop from 'components/BackToTop'
-import Message from 'components/Message'
+import { Header, Content, BackToTop, Message } from 'components'
+import { Filters } from 'components/filters'
+import {
+  SettingsModalContainer,
+  ResetModalContainer,
+  PlaylistModalContainer,
+} from 'components/modals'
 
 /**
  * Main app component

src/components/BackToTop.js

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 import throttle from 'lodash/throttle'
-import Button from 'components/Button'
+import { Button } from 'components'
 
 /**
  * Vertical scroll threshold in pixels

src/components/Content.js

@@ -1,8 +1,6 @@
 import { useSelector } from 'react-redux'
 import { getSyncing, getLastSync, getReleasesEntries } from 'state/selectors'
-import Intro from 'components/Intro'
-import Loading from 'components/Loading'
-import Releases from 'components/Releases'
+import { Intro, Loading, Releases } from 'components'
 import { useRefChangeKey } from 'hooks'
 
 /**

src/components/Header.js

@@ -3,7 +3,6 @@ import Media from 'react-media'
 import { useHotkeys } from 'react-hotkeys-hook'
 import classNames from 'classnames'
 import { defer } from 'helpers'
-import { useFeature } from 'hooks'
 import {
   getLastSyncDate,
   getHasReleases,
@@ -18,9 +17,7 @@ import {
   toggleFiltersVisible,
   resetFilters,
 } from 'state/actions'
-import SyncButton from 'components/SyncButton'
-import Button from 'components/Button'
-import LastSync from 'components/LastSync'
+import { SyncButton, Button, LastSync } from 'components'
 
 /**
  * Render header
@@ -33,7 +30,6 @@ function Header() {
   const hasOriginalReleases = useSelector(getHasOriginalReleases)
   const filtersVisible = useSelector(getFiltersVisible)
   const filtersApplied = useSelector(getFiltersApplied)
-  const { seen: filtersSeen } = useFeature('filters')
 
   const toggleFilters = () => defer(dispatch, toggleFiltersVisible())
   const openPlaylistModal = () => defer(dispatch, showPlaylistModal())
@@ -62,16 +58,8 @@ function Header() {
                     'fa-minus': filtersVisible,
                   })}
                   onClick={toggleFilters}
-                  className="has-badge"
                   dark={filtersVisible}
                 >
-                  <div
-                    className={classNames('badge is-primary has-text-weight-semibold', {
-                      'is-hidden': filtersSeen,
-                    })}
-                  >
-                    NEW
-                  </div>
                   Filter
                 </Button>
               )}

src/components/Intro.js

@@ -1,4 +1,4 @@
-import SyncButton from './SyncButton'
+import { SyncButton } from 'components'
 
 /**
  * Render intro content for new users

src/components/Loading.js

@@ -2,7 +2,7 @@ import { useDispatch } from 'react-redux'
 import { useHotkeys } from 'react-hotkeys-hook'
 import { defer } from 'helpers'
 import { syncCancel } from 'state/actions'
-import Button from 'components/Button'
+import { Button } from 'components'
 
 /**
  * Render loading screen

src/components/ReleaseDay.js

@@ -2,7 +2,7 @@ import { memo } from 'react'
 import { useSelector } from 'react-redux'
 import moment from 'moment'
 import { getPreviousSyncMaxDate } from 'state/selectors'
-import Album from './Album'
+import { Album } from 'components'
 
 /**
  * Render single release day

src/components/Releases.js

@@ -1,7 +1,6 @@
 import { useState } from 'react'
 import { Waypoint } from 'react-waypoint'
-import Centered from 'components/Centered'
-import ReleaseDay from 'components/ReleaseDay'
+import { Centered, ReleaseDay } from 'components'
 
 /**
  * Days limit increment

src/components/SyncButton.js

@@ -5,7 +5,7 @@ import classNames from 'classnames'
 import { defer } from 'helpers'
 import { getSyncing, getWorking, getSyncingProgress } from 'state/selectors'
 import { sync } from 'state/actions'
-import Button from 'components/Button'
+import { Button } from 'components'
 
 /**
  * Render sync button

src/components/filters/AlbumGroupsFilter.js

@@ -6,7 +6,7 @@ import { defer } from 'helpers'
 import { AlbumGroupLabels } from 'enums'
 import { getFiltersGroups, getReleasesGroupMap } from 'state/selectors'
 import { setFilters } from 'state/actions'
-import Button from 'components/Button'
+import { Button } from 'components'
 
 /**
  * Render album groups filter

src/components/filters/DateRangeFilter.js

@@ -7,7 +7,7 @@ import { getFiltersDates, getReleasesMinMaxDates } from 'state/selectors'
 import { setFilters } from 'state/actions'
 import { defer } from 'helpers'
 import { MomentFormat } from 'enums'
-import Button from 'components/Button'
+import { Button } from 'components'
 import DateRangeShortcuts from './DateRangeShortcuts'
 
 const { ISO_DATE } = MomentFormat

src/components/filters/DateRangeShortcut.js

@@ -1,7 +1,7 @@
 import { useSelector } from 'react-redux'
 import { min, max } from 'moment'
 import { getReleasesMinMaxDates } from 'state/selectors'
-import Button from 'components/Button'
+import { Button } from 'components'
 
 /**
  * Render date range filter shortcut

src/components/filters/Filters.js

@@ -1,6 +1,5 @@
 import { useEffect } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { useFeature } from 'hooks'
 import { toggleFiltersVisible } from 'state/actions'
 import { getFiltersApplied, getFiltersVisible } from 'state/selectors'
 import AlbumGroupsFilter from './AlbumGroupsFilter'
@@ -14,9 +13,6 @@ function Filters() {
   const dispatch = useDispatch()
   const filtersApplied = useSelector(getFiltersApplied)
   const visible = useSelector(getFiltersVisible)
-  const { setSeen } = useFeature('filters')
-
-  useEffect(() => visible && setSeen(), [visible])
 
   useEffect(() => {
     if (!filtersApplied && visible) {
@@ -29,7 +25,7 @@ function Filters() {
   }
 
   return (
-    <div className="Filters fade-in-top">
+    <div className="Filters fade-in">
       <SearchFilter />
       <DateRangeFilter />
       <AlbumGroupsFilter />

src/components/filters/SearchFilter.js

@@ -4,8 +4,7 @@ import debounce from 'lodash/debounce'
 import { defer } from 'helpers'
 import { setFilters } from 'state/actions'
 import { getFiltersSearch } from 'state/selectors'
-import Input from 'components/Input'
-import Button from 'components/Button'
+import { Input, Button } from 'components'
 
 /**
  * Render full-text search filter

src/components/filters/index.js

@@ -1 +1 @@
-export { default } from './Filters'
+export { default as Filters } from './Filters'