Moved all reducers and actions to their own folders

ui/src/App.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import ReactGA from 'react-ga'
+import 'react-jinke-music-player/assets/index.css'
 import { Provider } from 'react-redux'
 import { createHashHistory } from 'history'
 import { Admin, Resource } from 'react-admin'
@@ -13,11 +14,14 @@ import song from './song'
 import album from './album'
 import artist from './artist'
 import playlist from './playlist'
-import { Player, playQueueReducer } from './audioplayer'
+import { Player } from './audioplayer'
-import { albumViewReducer } from './album/albumState'
 import customRoutes from './routes'
-import themeReducer from './personal/themeReducer'
+import {
-import { addToPlaylistDialogReducer } from './dialogs/dialogState'
+  themeReducer,
+  addToPlaylistDialogReducer,
+  playQueueReducer,
+  albumViewReducer,
+} from './reducers'
 import createAdminStore from './store/createAdminStore'
 import { i18nProvider } from './i18n'
 import config from './config'

ui/src/actions/albumView.js

@@ -0,0 +1,6 @@
+export const ALBUM_MODE_GRID = 'ALBUM_GRID_MODE'
+export const ALBUM_MODE_LIST = 'ALBUM_LIST_MODE'
+
+export const albumViewGrid = () => ({ type: ALBUM_MODE_GRID })
+
+export const albumViewList = () => ({ type: ALBUM_MODE_LIST })

ui/src/actions/audioplayer.js

@@ -0,0 +1,96 @@
+export const PLAYER_ADD_TRACKS = 'PLAYER_ADD_TRACKS'
+export const PLAYER_PLAY_NEXT = 'PLAYER_PLAY_NEXT'
+export const PLAYER_SET_TRACK = 'PLAYER_SET_TRACK'
+export const PLAYER_SYNC_QUEUE = 'PLAYER_SYNC_QUEUE'
+export const PLAYER_CLEAR_QUEUE = 'PLAYER_CLEAR_QUEUE'
+export const PLAYER_SCROBBLE = 'PLAYER_SCROBBLE'
+export const PLAYER_PLAY_TRACKS = 'PLAYER_PLAY_TRACKS'
+export const PLAYER_CURRENT = 'PLAYER_CURRENT'
+export const PLAYER_SET_VOLUME = 'PLAYER_SET_VOLUME'
+
+export const setTrack = (data) => ({
+  type: PLAYER_SET_TRACK,
+  data,
+})
+
+export const filterSongs = (data, ids) => {
+  if (!ids) {
+    return data
+  }
+  return ids.reduce((acc, id) => ({ ...acc, [id]: data[id] }), {})
+}
+
+export const addTracks = (data, ids) => {
+  const songs = filterSongs(data, ids)
+  return {
+    type: PLAYER_ADD_TRACKS,
+    data: songs,
+  }
+}
+
+export const playNext = (data, ids) => {
+  const songs = filterSongs(data, ids)
+  return {
+    type: PLAYER_PLAY_NEXT,
+    data: songs,
+  }
+}
+
+export const shuffle = (data) => {
+  const ids = Object.keys(data)
+  for (let i = ids.length - 1; i > 0; i--) {
+    let j = Math.floor(Math.random() * (i + 1))
+    ;[ids[i], ids[j]] = [ids[j], ids[i]]
+  }
+  const shuffled = {}
+  // The "_" is to force the object key to be a string, so it keeps the order when adding to object
+  // or else the keys will always be in the same (numerically) order
+  ids.forEach((id) => (shuffled['_' + id] = data[id]))
+  return shuffled
+}
+
+export const shuffleTracks = (data, ids) => {
+  const songs = filterSongs(data, ids)
+  const shuffled = shuffle(songs)
+  const firstId = Object.keys(shuffled)[0]
+  return {
+    type: PLAYER_PLAY_TRACKS,
+    id: firstId,
+    data: shuffled,
+  }
+}
+
+export const playTracks = (data, ids, selectedId) => {
+  const songs = filterSongs(data, ids)
+  return {
+    type: PLAYER_PLAY_TRACKS,
+    id: selectedId || Object.keys(songs)[0],
+    data: songs,
+  }
+}
+
+export const syncQueue = (id, data) => ({
+  type: PLAYER_SYNC_QUEUE,
+  id,
+  data,
+})
+
+export const clearQueue = () => ({
+  type: PLAYER_CLEAR_QUEUE,
+})
+
+export const scrobble = (id, submit) => ({
+  type: PLAYER_SCROBBLE,
+  id,
+  submit,
+})
+
+export const currentPlaying = (audioInfo) => ({
+  type: PLAYER_CURRENT,
+  data: audioInfo,
+})
+
+export const setVolume = (volume) => ({
+  type: PLAYER_SET_VOLUME,
+  data: { volume },
+})

ui/src/actions/dialogs.js

@@ -0,0 +1,12 @@
+export const ADD_TO_PLAYLIST_OPEN = 'ADD_TO_PLAYLIST_OPEN'
+export const ADD_TO_PLAYLIST_CLOSE = 'ADD_TO_PLAYLIST_CLOSE'
+
+export const openAddToPlaylist = ({ selectedIds, onSuccess }) => ({
+  type: ADD_TO_PLAYLIST_OPEN,
+  selectedIds,
+  onSuccess,
+})
+
+export const closeAddToPlaylist = () => ({
+  type: ADD_TO_PLAYLIST_CLOSE,
+})

ui/src/actions/index.js

@@ -0,0 +1,4 @@
+export * from './audioplayer'
+export * from './themes'
+export * from './albumView'
+export * from './dialogs'

ui/src/album/AlbumActions.js

@@ -11,7 +11,7 @@ import PlayArrowIcon from '@material-ui/icons/PlayArrow'
 import ShuffleIcon from '@material-ui/icons/Shuffle'
 import CloudDownloadOutlinedIcon from '@material-ui/icons/CloudDownloadOutlined'
 import { RiPlayListAddFill, RiPlayList2Fill } from 'react-icons/ri'
-import { playNext, addTracks, playTracks, shuffleTracks } from '../audioplayer'
+import { playNext, addTracks, playTracks, shuffleTracks } from '../actions'
 import subsonic from '../subsonic'
 import { formatBytes } from '../common/SizeField'
 import { useMediaQuery } from '@material-ui/core'

ui/src/album/AlbumList.js

@@ -18,7 +18,6 @@ import { List, QuickFilter, Title, useAlbumsPerPage } from '../common'
 import AlbumListActions from './AlbumListActions'
 import AlbumListView from './AlbumListView'
 import AlbumGridView from './AlbumGridView'
-import { ALBUM_MODE_LIST } from './albumState'
 import AddToPlaylistDialog from '../dialogs/AddToPlaylistDialog'
 import albumLists, { defaultAlbumList } from './albumLists'
 
@@ -99,10 +98,10 @@ const AlbumList = (props) => {
         pagination={<Pagination rowsPerPageOptions={perPageOptions} />}
         title={<AlbumListTitle albumListType={albumListType} />}
       >
-        {albumView.mode === ALBUM_MODE_LIST ? (
+        {albumView.grid ? (
-          <AlbumListView {...props} />
-        ) : (
           <AlbumGridView isArtistView={isArtistView} {...props} />
+        ) : (
+          <AlbumListView {...props} />
         )}
       </List>
       <AddToPlaylistDialog />

ui/src/album/AlbumListActions.js

@@ -4,7 +4,7 @@ import { ButtonGroup } from '@material-ui/core'
 import ViewHeadlineIcon from '@material-ui/icons/ViewHeadline'
 import ViewModuleIcon from '@material-ui/icons/ViewModule'
 import { useDispatch, useSelector } from 'react-redux'
-import { ALBUM_MODE_GRID, ALBUM_MODE_LIST, selectViewMode } from './albumState'
+import { albumViewGrid, albumViewList } from '../actions'
 
 const AlbumListActions = ({
   currentSort,
@@ -44,15 +44,15 @@ const AlbumListActions = ({
       >
         <Button
           size="small"
-          color={albumView.mode === ALBUM_MODE_GRID ? 'primary' : 'secondary'}
+          color={albumView.grid ? 'primary' : 'secondary'}
-          onClick={() => dispatch(selectViewMode(ALBUM_MODE_GRID))}
+          onClick={() => dispatch(albumViewGrid())}
         >
           <ViewModuleIcon fontSize="inherit" />
         </Button>
         <Button
           size="small"
-          color={albumView.mode === ALBUM_MODE_LIST ? 'primary' : 'secondary'}
+          color={albumView.grid ? 'secondary' : 'primary'}
-          onClick={() => dispatch(selectViewMode(ALBUM_MODE_LIST))}
+          onClick={() => dispatch(albumViewList())}
         >
           <ViewHeadlineIcon fontSize="inherit" />
         </Button>

ui/src/album/AlbumSongs.js

@@ -11,7 +11,7 @@ import { useDispatch } from 'react-redux'
 import { Card, useMediaQuery } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
 import StarBorderIcon from '@material-ui/icons/StarBorder'
-import { playTracks } from '../audioplayer'
+import { playTracks } from '../actions'
 import {
   DurationField,
   SongContextMenu,

ui/src/album/albumState.js

@@ -1,21 +0,0 @@
-const ALBUM_MODE_GRID = 'ALBUM_GRID_MODE'
-const ALBUM_MODE_LIST = 'ALBUM_LIST_MODE'
-const selectViewMode = (mode) => ({ type: mode })
-
-const albumViewReducer = (
-  previousState = {
-    mode: ALBUM_MODE_GRID,
-  },
-  payload
-) => {
-  const { type } = payload
-  switch (type) {
-    case ALBUM_MODE_GRID:
-    case ALBUM_MODE_LIST:
-      return { ...previousState, mode: type }
-    default:
-      return previousState
-  }
-}
-
-export { ALBUM_MODE_LIST, ALBUM_MODE_GRID, albumViewReducer, selectViewMode }

ui/src/audioplayer/Player.js

@@ -13,7 +13,7 @@ import {
   currentPlaying,
   setVolume,
   clearQueue,
-} from './queue'
+} from '../actions'
 import themes from '../themes'
 import config from '../config'
 import PlayerToolbar from './PlayerToolbar'

ui/src/audioplayer/index.js

@@ -1,21 +1,3 @@
 import Player from './Player'
-import {
-  addTracks,
-  setTrack,
-  playQueueReducer,
-  playTracks,
-  playNext,
-  shuffleTracks,
-  clearQueue,
-} from './queue'
 
-export {
+export { Player }
-  Player,
-  addTracks,
-  setTrack,
-  playTracks,
-  playNext,
-  playQueueReducer,
-  shuffleTracks,
-  clearQueue,
-}

ui/src/common/AddToPlaylistButton.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { useDispatch } from 'react-redux'
 import { Button, useTranslate, useUnselectAll } from 'react-admin'
 import PlaylistAddIcon from '@material-ui/icons/PlaylistAdd'
-import { openAddToPlaylist } from '../dialogs/dialogState'
+import { openAddToPlaylist } from '../actions'
 
 const AddToPlaylistButton = ({ resource, selectedIds, className }) => {
   const translate = useTranslate()

ui/src/common/ContextMenus.js

@@ -7,8 +7,13 @@ import MenuItem from '@material-ui/core/MenuItem'
 import MoreVertIcon from '@material-ui/icons/MoreVert'
 import { makeStyles } from '@material-ui/core/styles'
 import { useDataProvider, useNotify, useTranslate } from 'react-admin'
-import { playNext, addTracks, playTracks, shuffleTracks } from '../audioplayer'
+import {
-import { openAddToPlaylist } from '../dialogs/dialogState'
+  playNext,
+  addTracks,
+  playTracks,
+  shuffleTracks,
+  openAddToPlaylist,
+} from '../actions'
 import subsonic from '../subsonic'
 import StarButton from './StarButton'
 import { formatBytes } from './SizeField'

ui/src/common/PlayButton.js

@@ -4,7 +4,7 @@ import PlayArrowIcon from '@material-ui/icons/PlayArrow'
 import { IconButton } from '@material-ui/core'
 import { useDispatch } from 'react-redux'
 import { useDataProvider } from 'react-admin'
-import { playTracks } from '../audioplayer'
+import { playTracks } from '../actions'
 import { makeStyles } from '@material-ui/core/styles'
 
 const useStyles = makeStyles({

ui/src/common/ShuffleAllButton.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { Button, useDataProvider, useNotify, useTranslate } from 'react-admin'
 import { useDispatch } from 'react-redux'
 import ShuffleIcon from '@material-ui/icons/Shuffle'
-import { playTracks } from '../audioplayer'
+import { playTracks } from '../actions'
 import PropTypes from 'prop-types'
 
 const ShuffleAllButton = ({ filters }) => {

ui/src/common/SongBulkActions.js

@@ -1,6 +1,6 @@
 import React, { Fragment, useEffect } from 'react'
 import { useUnselectAll } from 'react-admin'
-import { addTracks, playNext, playTracks } from '../audioplayer'
+import { addTracks, playNext, playTracks } from '../actions'
 import { RiPlayList2Fill, RiPlayListAddFill } from 'react-icons/ri'
 import PlayArrowIcon from '@material-ui/icons/PlayArrow'
 import { BatchPlayButton } from './index'

ui/src/common/SongContextMenu.js

@@ -5,8 +5,7 @@ import { useTranslate } from 'react-admin'
 import { IconButton, Menu, MenuItem } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
 import MoreVertIcon from '@material-ui/icons/MoreVert'
-import { playNext, addTracks, setTrack } from '../audioplayer'
+import { playNext, addTracks, setTrack, openAddToPlaylist } from '../actions'
-import { openAddToPlaylist } from '../dialogs/dialogState'
 import subsonic from '../subsonic'
 import StarButton from './StarButton'
 import { formatBytes } from './SizeField'

ui/src/common/SongDatagrid.js

@@ -5,7 +5,7 @@ import { TableCell, TableRow, Typography } from '@material-ui/core'
 import PropTypes from 'prop-types'
 import { makeStyles } from '@material-ui/core/styles'
 import AlbumIcon from '@material-ui/icons/Album'
-import { playTracks } from '../audioplayer'
+import { playTracks } from '../actions'
 import { AlbumContextMenu } from '../common'
 
 const useStyles = makeStyles({

ui/src/dialogs/AddToPlaylistDialog.js

@@ -13,7 +13,7 @@ import {
   DialogContent,
   DialogTitle,
 } from '@material-ui/core'
-import { closeAddToPlaylist } from './dialogState'
+import { closeAddToPlaylist } from '../actions'
 import SelectPlaylistInput from './SelectPlaylistInput'
 
 const AddToPlaylistDialog = () => {

ui/src/layout/Login.js

@@ -15,7 +15,7 @@ import { useLogin, useNotify, useTranslate } from 'react-admin'
 import Notification from './Notification'
 import LightTheme from '../themes/light'
 import config from '../config'
-import { clearQueue } from '../audioplayer'
+import { clearQueue } from '../actions'
 
 const useStyles = makeStyles((theme) => ({
   main: {

ui/src/layout/Logout.js

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react'
 import { useDispatch } from 'react-redux'
 import { Logout } from 'react-admin'
-import { clearQueue } from '../audioplayer'
+import { clearQueue } from '../actions'
 
 export default (props) => {
   const dispatch = useDispatch()

ui/src/personal/Personal.js

@@ -11,7 +11,7 @@ import {
 } from 'react-admin'
 import { makeStyles } from '@material-ui/core/styles'
 import HelpOutlineIcon from '@material-ui/icons/HelpOutline'
-import { changeTheme } from './actions'
+import { changeTheme } from '../actions'
 import themes from '../themes'
 import { docsUrl } from '../utils/docsUrl'
 import { useGetLanguageChoices } from '../i18n'

ui/src/personal/themeReducer.js

@@ -1,8 +0,0 @@
-import { CHANGE_THEME } from './actions'
-
-export default (previousState = 'DarkTheme', { type, payload }) => {
-  if (type === CHANGE_THEME) {
-    return payload
-  }
-  return previousState
-}

ui/src/playlist/PlaylistActions.js

@@ -12,7 +12,7 @@ import CloudDownloadOutlinedIcon from '@material-ui/icons/CloudDownloadOutlined'
 import { RiPlayListAddFill, RiPlayList2Fill } from 'react-icons/ri'
 import QueueMusicIcon from '@material-ui/icons/QueueMusic'
 import { httpClient } from '../dataProvider'
-import { playNext, addTracks, playTracks, shuffleTracks } from '../audioplayer'
+import { playNext, addTracks, playTracks, shuffleTracks } from '../actions'
 import { M3U_MIME_TYPE, REST_URL } from '../consts'
 import subsonic from '../subsonic'
 import PropTypes from 'prop-types'

ui/src/playlist/PlaylistSongs.js

@@ -23,7 +23,7 @@ import {
 } from '../common'
 import AddToPlaylistDialog from '../dialogs/AddToPlaylistDialog'
 import { AlbumLinkField } from '../song/AlbumLinkField'
-import { playTracks } from '../audioplayer'
+import { playTracks } from '../actions'
 
 const useStyles = makeStyles(
   (theme) => ({

ui/src/reducers/albumView.js

@@ -0,0 +1,17 @@
+import { ALBUM_MODE_GRID, ALBUM_MODE_LIST } from '../actions'
+
+export const albumViewReducer = (
+  previousState = {
+    grid: true,
+  },
+  payload
+) => {
+  const { type } = payload
+  switch (type) {
+    case ALBUM_MODE_GRID:
+    case ALBUM_MODE_LIST:
+      return { ...previousState, grid: type === ALBUM_MODE_GRID }
+    default:
+      return previousState
+  }
+}

ui/src/reducers/dialogReducer.js

@@ -1,17 +1,6 @@
-const ADD_TO_PLAYLIST_OPEN = 'ADD_TO_PLAYLIST_OPEN'
+import { ADD_TO_PLAYLIST_CLOSE, ADD_TO_PLAYLIST_OPEN } from '../actions'
-const ADD_TO_PLAYLIST_CLOSE = 'ADD_TO_PLAYLIST_CLOSE'
 
-const openAddToPlaylist = ({ selectedIds, onSuccess }) => ({
+export const addToPlaylistDialogReducer = (
-  type: ADD_TO_PLAYLIST_OPEN,
-  selectedIds,
-  onSuccess,
-})
-
-const closeAddToPlaylist = () => ({
-  type: ADD_TO_PLAYLIST_CLOSE,
-})
-
-const addToPlaylistDialogReducer = (
   previousState = {
     open: false,
   },
@@ -32,5 +21,3 @@ const addToPlaylistDialogReducer = (
       return previousState
   }
 }
-
-export { openAddToPlaylist, closeAddToPlaylist, addToPlaylistDialogReducer }

ui/src/reducers/index.js

@@ -0,0 +1,4 @@
+export * from './themeReducer'
+export * from './dialogReducer'
+export * from './playQueue'
+export * from './albumView'

ui/src/reducers/playQueue.js

@@ -3,15 +3,17 @@ import get from 'lodash.get'
 import { v4 as uuidv4 } from 'uuid'
 import subsonic from '../subsonic'
 
-const PLAYER_ADD_TRACKS = 'PLAYER_ADD_TRACKS'
+import {
-const PLAYER_PLAY_NEXT = 'PLAYER_PLAY_NEXT'
+  PLAYER_CLEAR_QUEUE,
-const PLAYER_SET_TRACK = 'PLAYER_SET_TRACK'
+  PLAYER_SET_VOLUME,
-const PLAYER_SYNC_QUEUE = 'PLAYER_SYNC_QUEUE'
+  PLAYER_CURRENT,
-const PLAYER_CLEAR_QUEUE = 'PLAYER_CLEAR_QUEUE'
+  PLAYER_ADD_TRACKS,
-const PLAYER_SCROBBLE = 'PLAYER_SCROBBLE'
+  PLAYER_PLAY_NEXT,
-const PLAYER_PLAY_TRACKS = 'PLAYER_PLAY_TRACKS'
+  PLAYER_SET_TRACK,
-const PLAYER_CURRENT = 'PLAYER_CURRENT'
+  PLAYER_SYNC_QUEUE,
-const PLAYER_SET_VOLUME = 'PLAYER_SET_VOLUME'
+  PLAYER_SCROBBLE,
+  PLAYER_PLAY_TRACKS,
+} from '../actions'
 
 const mapToAudioLists = (item) => {
   // If item comes from a playlist, id is mediaFileId
@@ -30,93 +32,6 @@ const mapToAudioLists = (item) => {
   }
 }
 
-const setTrack = (data) => ({
-  type: PLAYER_SET_TRACK,
-  data,
-})
-
-const filterSongs = (data, ids) => {
-  if (!ids) {
-    return data
-  }
-  return ids.reduce((acc, id) => ({ ...acc, [id]: data[id] }), {})
-}
-
-const addTracks = (data, ids) => {
-  const songs = filterSongs(data, ids)
-  return {
-    type: PLAYER_ADD_TRACKS,
-    data: songs,
-  }
-}
-
-const playNext = (data, ids) => {
-  const songs = filterSongs(data, ids)
-  return {
-    type: PLAYER_PLAY_NEXT,
-    data: songs,
-  }
-}
-
-const shuffle = (data) => {
-  const ids = Object.keys(data)
-  for (let i = ids.length - 1; i > 0; i--) {
-    let j = Math.floor(Math.random() * (i + 1))
-    ;[ids[i], ids[j]] = [ids[j], ids[i]]
-  }
-  const shuffled = {}
-  // The "_" is to force the object key to be a string, so it keeps the order when adding to object
-  // or else the keys will always be in the same (numerically) order
-  ids.forEach((id) => (shuffled['_' + id] = data[id]))
-  return shuffled
-}
-
-const shuffleTracks = (data, ids) => {
-  const songs = filterSongs(data, ids)
-  const shuffled = shuffle(songs)
-  const firstId = Object.keys(shuffled)[0]
-  return {
-    type: PLAYER_PLAY_TRACKS,
-    id: firstId,
-    data: shuffled,
-  }
-}
-
-const playTracks = (data, ids, selectedId) => {
-  const songs = filterSongs(data, ids)
-  return {
-    type: PLAYER_PLAY_TRACKS,
-    id: selectedId || Object.keys(songs)[0],
-    data: songs,
-  }
-}
-
-const syncQueue = (id, data) => ({
-  type: PLAYER_SYNC_QUEUE,
-  id,
-  data,
-})
-
-const clearQueue = () => ({
-  type: PLAYER_CLEAR_QUEUE,
-})
-
-const scrobble = (id, submit) => ({
-  type: PLAYER_SCROBBLE,
-  id,
-  submit,
-})
-
-const currentPlaying = (audioInfo) => ({
-  type: PLAYER_CURRENT,
-  data: audioInfo,
-})
-
-const setVolume = (volume) => ({
-  type: PLAYER_SET_VOLUME,
-  data: { volume },
-})
-
 const initialState = {
   queue: [],
   clear: true,
@@ -125,7 +40,7 @@ const initialState = {
   playIndex: 0,
 }
 
-const playQueueReducer = (previousState = initialState, payload) => {
+export const playQueueReducer = (previousState = initialState, payload) => {
   let queue, current
   let newQueue
   const { type, data } = payload
@@ -234,17 +149,3 @@ const playQueueReducer = (previousState = initialState, payload) => {
       return previousState
   }
 }
-
-export {
-  addTracks,
-  setTrack,
-  playTracks,
-  playNext,
-  syncQueue,
-  clearQueue,
-  scrobble,
-  currentPlaying,
-  setVolume,
-  shuffleTracks,
-  playQueueReducer,
-}

ui/src/reducers/themeReducer.js

@@ -0,0 +1,11 @@
+import { CHANGE_THEME } from '../actions'
+
+export const themeReducer = (
+  previousState = 'DarkTheme',
+  { type, payload }
+) => {
+  if (type === CHANGE_THEME) {
+    return payload
+  }
+  return previousState
+}

ui/src/song/SongList.js

@@ -19,7 +19,7 @@ import {
   SongTitleField,
 } from '../common'
 import { useDispatch } from 'react-redux'
-import { setTrack } from '../audioplayer'
+import { setTrack } from '../actions'
 import { SongBulkActions } from '../common'
 import { SongListActions } from './SongListActions'
 import { AlbumLinkField } from './AlbumLinkField'