Beat saver api search pagination

src/actions/searchActions.js

@@ -11,8 +11,15 @@ export const setSearchSources = sources => dispatch => {
   })
 }
 
-export const submitSearch = keywords => (dispatch, getState) => {
-  if(!keywords) return
+export const submitSearch = (keywords, page) => (dispatch, getState) => {
+  if(!keywords){
+    dispatch({
+      type: SUBMIT_SEARCH,
+      payload:  { keywords, library: [], beatSaver: { songs: [], nextPage: 0, prevPage: 0, lastPage: 0, totalSongs: 0, currentPage: 0 } }
+    })
+    return
+  }
+  if(!page) page = 0
 
   dispatch({
     type: SET_LOADING,
@@ -25,6 +32,11 @@ export const submitSearch = keywords => (dispatch, getState) => {
 
   let localSongs = []
   let beatSaverSongs = []
+  let beatSaverNextPage = 0
+  let beatSaverPrevPage = 0
+  let beatSaverLastPage = 0
+  let beatSaverTotalSongs = 0
+
   let idSong
 
   let isId = parseInt(keywords.replace('-', ''), 10)
@@ -48,14 +60,18 @@ export const submitSearch = keywords => (dispatch, getState) => {
   localResultsReady = true
 
   // BeatSaver Search
-  fetch('https://beatsaver.com/api/search/text/all?q=' + encodeURIComponent(keywords.replace('/', '\\')))
+  fetch('https://beatsaver.com/api/search/text/' + page + '?q=' + encodeURIComponent(keywords.replace('/', '\\')))
     .then(res => res.json())
     .then(data => {
       beatSaverSongs = data.docs
+      beatSaverNextPage = data.nextPage
+      beatSaverPrevPage = data.prevPage
+      beatSaverLastPage = data.lastPage
+      beatSaverTotalSongs = data.totalDocs
       if(localResultsReady & beatSaverIdResultsReady) {
         dispatch({
           type: SUBMIT_SEARCH,
-          payload: idSong ? { keywords, library: localSongs, beatSaver: [idSong, ...beatSaverSongs] } : { keywords, library: localSongs, beatSaver: beatSaverSongs }
+          payload: idSong ? { keywords, library: localSongs, beatSaver: { songs: [idSong, ...beatSaverSongs], nextPage: beatSaverNextPage, prevPage: beatSaverPrevPage, lastPage: beatSaverLastPage, totalSongs: beatSaverTotalSongs, currentPage: page } } : { keywords, library: localSongs, beatSaver: { songs: beatSaverSongs, nextPage: beatSaverNextPage, prevPage: beatSaverPrevPage, lastPage: beatSaverLastPage, totalSongs: beatSaverTotalSongs, currentPage: page } }
         })
         dispatch({
           type: SET_LOADING,
@@ -76,7 +92,7 @@ export const submitSearch = keywords => (dispatch, getState) => {
       if(localResultsReady & beatSaverResultsReady) {
         dispatch({
           type: SUBMIT_SEARCH,
-          payload: idSong ? { keywords, library: localSongs, beatSaver: [idSong, ...beatSaverSongs] } : { keywords, library: localSongs, beatSaver: beatSaverSongs }
+          payload: idSong ? { keywords, library: localSongs, beatSaver: { songs: [idSong, ...beatSaverSongs], nextPage: beatSaverNextPage, prevPage: beatSaverPrevPage, lastPage: beatSaverLastPage, totalSongs: beatSaverTotalSongs, currentPage: page } } : { keywords, library: localSongs, beatSaver: { songs: beatSaverSongs, nextPage: beatSaverNextPage, prevPage: beatSaverPrevPage, lastPage: beatSaverLastPage, totalSongs: beatSaverTotalSongs, currentPage: page } }
         })
         dispatch({
           type: SET_LOADING,

src/components/SearchView.js

@@ -14,7 +14,7 @@ class SearchView extends Component {
     return (
       <div id='search-view'>
         <h1>Search</h1>
-        <form onSubmit={ (e) => { e.preventDefault(); this.props.submitSearch(document.getElementById('search-box').value) } }><input className="text-box" type="text" name="search-box" id="search-box" placeholder="Search for keywords in titles, artists, descriptions, IDs..." /></form><Button type="primary" id="search-submit" onClick={ () => { this.props.submitSearch(document.getElementById('search-box').value) } }>{(this.props.loading ? <img style={ { width: '40px', height: '40px', display: 'block', marginTop: '-10px' } } src={ SearchLoading } alt="" /> : 'Search')}</Button>
+        <form onSubmit={ (e) => { e.preventDefault(); this.props.submitSearch(document.getElementById('search-box').value, 0) } }><input className="text-box" type="text" name="search-box" id="search-box" placeholder="Search for keywords in titles, artists, descriptions, IDs..." /></form><Button type="primary" id="search-submit" onClick={ () => { this.props.submitSearch(document.getElementById('search-box').value, 0) } }>{(this.props.loading ? <img style={ { width: '40px', height: '40px', display: 'block', marginTop: '-10px' } } src={ SearchLoading } alt="" /> : 'Search')}</Button>
         <h2>Results for: <span style={ { fontWeight: 400 } }>"{this.props.results.keywords}"</span></h2>
         <h2 style={ { display: 'inline-block', marginRight: '5px' } }>Library</h2><span>{this.props.results.library.length} result{(this.props.results.library.length !== 1 ? 's' : '')}</span>
         <div>{this.props.results.library.map((song, i) => {
@@ -29,8 +29,8 @@ class SearchView extends Component {
             </div>
           )
         })}</div>
-        <h2 style={ { display: 'inline-block', marginRight: '5px' } }>BeatSaver</h2><span>{this.props.results.beatSaver.length} result{(this.props.results.beatSaver.length !== 1 ? 's' : '')}</span>
-        <div>{this.props.results.beatSaver.map((song, i) => {
+        <h2 style={ { display: 'inline-block', marginRight: '5px' } }>BeatSaver</h2><span>{this.props.results.beatSaver.songs.length} result{(this.props.results.beatSaver.songs.length !== 1 ? 's' : '')}</span>
+        <div>{this.props.results.beatSaver.songs.map((song, i) => {
           return (
             <div className="search-result" onClick={ () => { this.props.loadDetailsFromKey(song.key) } } key={ i }>
               <img src={ `https://beatsaver.com/${ song.coverURL }` } alt="" />
@@ -41,6 +41,12 @@ class SearchView extends Component {
             </div>
           )
         })}</div>
+        <div>{Array.apply(0, Array(this.props.results.beatSaver.lastPage)).map((val,i) => {
+            return (
+              <Button type={ i === this.props.results.beatSaver.currentPage ? 'primary' : 'default' } onClick={ () => { this.props.submitSearch(document.getElementById('search-box').value, i) } }>{ i + 1 }</Button>
+            )
+          })}
+        </div>
       </div>
     )
   }

src/css/Button.scss

@@ -32,6 +32,7 @@
 .button {
   display: inline-block;
   margin-right: 10px;
+  margin-top: 20px;
   padding: 10px 20px;
   height: 20px;
   border: none;

src/reducers/loadingReducer.js

@@ -1,6 +1,6 @@
 import { SET_LOADING } from '../actions/types'
 
-export default function(state = true, action) {
+export default function(state = false, action) {
   switch(action.type) {
     case SET_LOADING:
       return action.payload

src/reducers/searchReducer.js

@@ -1,6 +1,26 @@
 import { SET_SEARCH_SOURCES, SUBMIT_SEARCH } from '../actions/types'
 
-export default function(state = { isOpen: false, sources: { library: true, beatSaver: true }, searchResults: { keywords: '', library: [], beatSaver: [] } }, action) {
+const initialState = { 
+  isOpen: false, 
+  sources: { 
+    library: true, 
+    beatSaver: true 
+  }, 
+  searchResults: { 
+    keywords: '', 
+    library: [], 
+    beatSaver: { 
+      songs: [], 
+      nextPage: 0, 
+      prevPage: 0, 
+      lastPage: 0, 
+      totalSongs: 0,
+      currentPage: 0
+    } 
+  } 
+}
+
+export default function(state = initialState, action) {
   switch(action.type) {
     case SET_SEARCH_SOURCES:
       return {

src/store.js

@@ -20,7 +20,14 @@ const initialState = {
   },
   search: {
     searchResults: {
-      beatSaver: [],
+      beatSaver: {
+        songs: [], 
+        nextPage: 0,
+        prevPage: 0,
+        lastPage: 0,
+        totalSongs: 0,
+        currentPage: 0
+      },
       library: []
     }
   }