Feature/more pagination tests

README.md

@@ -1,24 +1,7 @@
-# README
+asbo:
+an aggregator of a few London-based internet radio stations - using Nokogiri to scrape the html where needed, caching the resulting objects in a local db 
 
-This README would normally document whatever steps are necessary to get the
-application up and running.
+backend is in rails, front-end is in react/redux 
 
-Things you may want to cover:
-
-* Ruby version
-
-* System dependencies
-
-* Configuration
-
-* Database creation
-
-* Database initialization
-
-* How to run the test suite
-
-* Services (job queues, cache servers, search engines, etc.)
-
-* Deployment instructions
-
-* ...
+to start the backend api and the client, use the following command:
+$ foreman start

app/controllers/platforms_controller.rb

@@ -47,6 +47,7 @@ def delete_episodes
     begin
       platform_from_nickname_param
       @platform.episodes.delete_all
+      @platform.update(last_page: 0)
       render json: {
         :success => :true, 
         :platform => platform_with_episodes

app/javascripts/__mocks__/api.js

@@ -14,8 +14,9 @@ const MockAPI = class {
   }
 
   getPlatform({nickname}){
-    // console.log(`mockAPI.fetch /platforms/${nickname}`)
-    const platform = platforms.find(p => p.nickname == nickname)
+    console.log(`mockAPI.fetch /platforms/${nickname}`)
+    let platform = platforms.find(p => p.nickname == nickname)
+
     return new Promise((resolve,reject) => {
       if(!!platform) {
         setTimeout(resolve, 0, {
@@ -38,7 +39,7 @@ const MockAPI = class {
   // in the real api, filter is passed to backend so repsonse contains a sub-set of total items..
   // in the mock api, the filter is just post-processing in the callback
   refreshPlatform({nickname,filter,page}){
-    console.log(`mockAPI.fetch /platforms/${nickname}/refresh ${JSON.stringify({filter,page})}`);
+    // console.log(`mockAPI.fetch /platforms/${nickname}/refresh ${JSON.stringify({filter,page})}`);
     const platform = platforms.find(p => p.nickname == nickname)
     return new Promise((resolve,reject) => {
       if(!platform) {
@@ -51,7 +52,9 @@ const MockAPI = class {
         //console.log(totalEps.map(ep => ep.name))
         const matches = totalEps.filter(e => this.isMatchingEpisode(e, filter))
         setTimeout(resolve, 0, {
-          ...platform, episodes: matches
+          ...platform, 
+          last_page: (platform.last_page + 1),
+          episodes: matches
         })
       }
     })

app/javascripts/__mocks__/platforms.js

@@ -27,7 +27,8 @@ export default [{
       "100x100",
       "800x800"
     ]
-  }]
+  }],
+  "last_page" : 0
 },
 {
   "id": 2,
@@ -51,7 +52,8 @@ export default [{
   "nickname": "rinse",
   "use_relative_images": false,
   "default_image": "https://etc.levels.io/rinse-fm/logo.png",
-  "post_processing_rules": null
+  "post_processing_rules": null,
+  "last_page" : 3
 }, {
   "id": 3,
   "name": "radar radio",
@@ -75,5 +77,6 @@ export default [{
   "nickname": "radar",
   "use_relative_images": true,
   "default_image": null,
-  "post_processing_rules": null
+  "post_processing_rules": null,
+  "last_page" : 2
 }]

app/javascripts/components/PlatformDetails.js

@@ -19,6 +19,7 @@ class PlatformDetails extends Component {
       pagination,
       refreshPlatform,
       episodes,
+      last_page,
       currentPage
     } = this.props
 
@@ -53,7 +54,8 @@ class PlatformDetails extends Component {
         <Link to={`/platforms/${nickname}/edit`}>Edit Platform</Link><br />
       </p>
       <p>
-        <b>Episodes</b>{' '}{this.refreshButton()}{' '}{this.deleteEpisodesButton()}
+        <b>Episodes</b>{' '}{this.refreshButton()}{' '}{this.deleteEpisodesButton()}<br />
+        <em>Last page fetched: {last_page} </em>
       </p>
       <p>
         {this.episodeGrid()}

app/javascripts/components/PlatformForm.js

@@ -11,7 +11,7 @@ class PlatformForm extends Component {
   render() {
     const {initialValues, handleSubmit, pristine, reset, submitting, loading, isNew } = this.props
     const {nickname} = initialValues || {}
-
+    console.log(initialValues)
     return (
       <div className={`form-container ${submitting || loading ? ' form-container--loading' : ''}`}>
         <form onSubmit={handleSubmit}>
@@ -29,6 +29,7 @@ class PlatformForm extends Component {
             parent='pagination' 
             attrs='param,url,itemsPerPage'
           />
+        <TextInput name='date_format' />
           <p>
             <button className='btn btn-primary' type="submit" disabled={pristine || submitting}>
               Submit

app/javascripts/redux/pagination.js

@@ -1,6 +1,6 @@
 import {combineReducers} from 'redux'
 import {createAction,createActions,handleActions} from 'redux-actions'
-import {refreshPlatform} from './platforms'
+import {refreshPlatform, LOAD_PLATFORM} from './platforms'
 // constants
 export const SET_PAGE = 'SET_PAGE';
 // export const SET_PAGE_AND_REFRESH_PLATFORM = 'SET_PAGE_AND_REFRESH_PLATFORM'
@@ -25,8 +25,20 @@ export const setPage = createAction(SET_PAGE)
 
 
 // reducers
-export const currentPage = (currentPage = 1, action = {}) => {
-  return action.type == SET_PAGE ? action.payload.page : currentPage
+export const currentPage = (currentPage=0, action = {}) => {
+  switch (action.type){
+
+    case `${LOAD_PLATFORM}_FULFILLED`:
+      const {platform} = action.payload
+      const last_page  = platform.last_page
+      return last_page !== undefined ? last_page : currentPage // sync counter with db
+
+    case SET_PAGE:
+      return action.payload.page
+
+    default:
+      return currentPage
+  }
 }
 
 export const pages = (pages={}, action={}) => {

app/javascripts/redux/platforms.js

@@ -103,12 +103,15 @@ export const refreshPlatform = function({nickname}) {
       type: REFRESH_PLATFORM,
       payload: API.refreshPlatform({nickname,filter,page})
         .then (json => {
+          // handle with middleware or chaining?
+          console.log(`|platforms| on refresh, set last_page to ${json.last_page +1}`)
           return {
             platform: json
           }
         })
-    })
+      })
   }
+
 }
 
 export const destroyPlatform = function({nickname}){

app/javascripts/tests/episodes.test.js

@@ -82,17 +82,18 @@ describe('Episodes', () => {
   describe('episodes#show', () => {
     it('dispatches an action to get the episode entry', async () => {
       const store = mockStore({})
-      const opts = {'id':'1960'}
+      const opts = {'id':1960}
       await store.dispatch(e.loadEpisode(opts))
       .then(() => {
         expectActions(store, [
           "LOAD_EPISODE_PENDING",
+          "FETCH_EMBED_PENDING",
           "LOAD_EPISODE_FULFILLED"
         ]);
 
         const state = resultingState(store, reducer)
         expect(state.episode).toBeTruthy()
-        // expect(state.episode.id).toEqual(opts.id)
+        expect(state.episode.id).toEqual(opts.id)
       })
     })
   })

app/javascripts/tests/pagination.test.js

@@ -11,8 +11,8 @@ import {
 describe('Pagination', () => {
 
   describe('currentPage', () => {
-    it('is set to 1 at init', () => {
-      expect(reducer().currentPage).toBe(1)
+    it('is set to 0 at init', () => {
+      expect(reducer().currentPage).toBe(0)
     })
     it('can be changed by setPage action', () => {
       const store = mockStore()

app/javascripts/tests/platforms.test.js

@@ -68,19 +68,20 @@ describe('Platforms', () => {
     })
   })
 
+  const refreshPlatform = ({nickname}) => {
+    const store = mockStore({})
+    return store.dispatch(p.refreshPlatform({nickname}))
+      .then(() => {
+        expectActions(store, [
+          `${p.REFRESH_PLATFORM}_PENDING`,
+          `${p.REFRESH_PLATFORM}_FULFILLED`,
+        ])
+        const state = resultingState(store, combinedRootReducer)
+        return {state, store: mockStore(state)}
+      })
+  }
+
   describe('platforms#refresh', () => {
-    const refreshPlatform = ({nickname}) => {
-      const store = mockStore({})
-      return store.dispatch(p.refreshPlatform({nickname}))
-        .then(() => {
-          expectActions(store, [
-            `${p.REFRESH_PLATFORM}_PENDING`,
-            `${p.REFRESH_PLATFORM}_FULFILLED`,
-          ])
-          const state = resultingState(store, combinedRootReducer)
-          return {state, store: mockStore(state)}
-        })
-    }
 
     const nickname = 'rinse'
     const opts = {nickname}
@@ -159,6 +160,33 @@ describe('Platforms', () => {
     })
   })
 
+
+  describe('lastPage', () => {
+    it('is incremented when after api returns a page of episodes', (done) => {
+      const opts = {'nickname':'rinse'}
+
+      let lastPageBefore,
+      lastPageAfter,
+      refreshedState
+
+      // 1. get a platform
+      getPlatform(opts).then((state1) => {
+        lastPageBefore = state1.platforms.platform.last_page
+      })
+      .then(() => {
+      // 2. get a page of episodes
+        return refreshPlatform(opts).then((xhr) => {
+          refreshedState = xhr.state
+        })
+      }).then(() => {
+      // 3. compare last_page before and after
+        lastPageAfter = refreshedState.platforms.platform.last_page
+        expect(lastPageAfter).toBeGreaterThan(lastPageBefore)
+        return done()
+      })
+    })
+  })
+
   describe('platforms#delete_episodes', () => {
     // see episodes tests
   })

app/models/platform.rb

@@ -24,6 +24,7 @@ def initialize(opts={})
   end
 
   after_find do
+    initialize_last_page
     init_client
   end
 
@@ -180,9 +181,21 @@ def refresh(opts={})
   def ready(result)
     puts "platform#ready"
     if result[:success]
+      increment_last_page!
       return create_episodes_from_html result[:body]
     else
       raise "#{result[:code]} error\n #{result[:message]} "
     end
   end
+
+  def initialize_last_page 
+    if self.last_page.nil?
+      self.last_page = 0
+    end
+  end
+
+  def increment_last_page!
+    self.last_page += 1
+    save
+  end
 end

db/migrate/20180906153751_add_last_page_to_platform.rb

@@ -0,0 +1,5 @@
+class AddLastPageToPlatform < ActiveRecord::Migration[5.1]
+  def change
+    add_column :platforms, :last_page, :integer
+  end
+end

db/platforms.rb

@@ -9,12 +9,12 @@ def self.sample_attributes
       has_details: true,
       use_relative_images: false,
       attr_map: {
-        "item"      => ".nts-grid-item",
-        "name"      => ".nts-grid-item__img img[alt]",
-        "image"     => ".nts-grid-item__img img[src]",
-        "media"     => ".nts-grid-item__img__play-btn[data-src]",
-        "details"   => ".nts-grid-item__img__play-btn[data-permalink]",
-        "date_str"  => ".nts-grid-item__subtitle__left"
+        "item"      => ".nts-grid-v2-item",
+        "name"      => ".nts-grid-picture__img[alt]",
+        "image"     => ".nts-grid-picture__img[src]",
+        "media"     => ".nts-grid-picture__overlay.mixcloud-btn[data-src]",
+        "date_str"  => ".nts-grid-v2-item__header span:first-child",
+        "details"   => ".nts-grid-picture__overlay.mixcloud-btn[data-permalink]"
       },
       pagination: {    
         "route"        => "/page/:page",
@@ -69,33 +69,21 @@ def self.sample_attributes
 
   def self.sample_html_entries
     <<-END
-    <div class="nts-grid-item">
-      <div class="nts-grid-item__img"><img src="https://media.ntslive.co.uk/resize/800x800/24463c4a-6d6d-48d7-9026-62c9af3b996f_1456963200.jpeg" data-src="https://media.ntslive.co.uk/resize/800x800/24463c4a-6d6d-48d7-9026-62c9af3b996f_1456963200.jpeg" alt="Murlo 31.01.18 Radio Episode"
-          class="img preload-img">
-        <div class="nts-grid-item__img__overlay">
-          <div class="nts-grid-item__img__play-btn mixcloud-btn" data-src="https://www.mixcloud.com/NTSRadio/murlo-31st-february-2018/" data-permalink="/shows/murlo/episodes/murlo-31st-january-2018"><span class="nts-grid-item__img__play-btn__text"><span class="icon icon-play text-bold"></span></span>
-          </div>
-        </div>
-      </div>
-      <div class="nts-grid-item__img nts-grid-item__img--link nts-app" data-href="/shows/murlo/episodes/murlo-31st-january-2018"><img src="https://media.ntslive.co.uk/resize/800x800/24463c4a-6d6d-48d7-9026-62c9af3b996f_1456963200.jpeg" data-src="https://media.ntslive.co.uk/resize/800x800/24463c4a-6d6d-48d7-9026-62c9af3b996f_1456963200.jpeg" alt="Murlo 31.01.18 Radio Episode"
-          class="img preload-img"></div>
-      <a href="/shows/murlo/episodes/murlo-31st-january-2018" class="nts-app nts-link nts-link--nohover">
-        <div class="nts-grid-item__header text-bold nts-link nts-link--highlighted">
-          <div class="nts-grid-item__title">Murlo</div>
-          <div class="nts-grid-item__subtitle">
-            <p class="nts-grid-item__subtitle__left">31.01.18</p>
-            <p class="nts-grid-item__subtitle__right">LDN</p>
-          </div>
-        </div>
-      </a>
-      <div class="nts-grid-item__footer">
-        <div class="nts-grid-item__genres"> <a class="genre-tag nts-app nts-link nts-link--highlighted genre-search-click-event" data-tag-id="caribbean-dancehall" href="/explore/genre/caribbean-dancehall">Dancehall</a> <a class="genre-tag nts-app nts-link nts-link--highlighted genre-search-click-event"
-            data-tag-id="ukdance-ukgarage" href="/explore/genre/ukdance-ukgarage">Garage</a> <a class="genre-tag nts-app nts-link nts-link--highlighted genre-search-click-event" data-tag-id="ukdance-grime" href="/explore/genre/ukdance-grime">Grime</a> <a class="genre-tag nts-app nts-link nts-link--highlighted genre-search-click-event"
-            data-tag-id="caribbean-soca" href="/explore/genre/caribbean-soca">Soca</a> </div>
-        <div class="nts-grid-item__action-btns">
-          <button class="nts-btn mixcloud-btn" data-src="https://www.mixcloud.com/NTSRadio/murlo-31st-february-2018/" data-permalink="/shows/murlo/episodes/murlo-31st-january-2018"><span class="icon icon-play text-bold"></span></button> <a class="nts-app nts-btn" href="/shows/murlo/episodes/murlo-31st-january-2018">TRACKLIST</a></div>
-      </div>
-    </div>
+    <article class="nts-grid-v2-item ">
+      <div class="nts-grid-v2-item__content">
+        <div class="nts-grid-picture"><img class="nts-grid-picture__img" src="https://media.ntslive.co.uk/resize/400x400/24463c4a-6d6d-48d7-9026-62c9af3b996f_1456963200.jpeg" alt="Murlo 18.07.18 Radio Episode">
+          <div role="button" tabindex="0" class="nts-grid-picture__overlay mixcloud-btn" data-src="https://www.mixcloud.com/NTSRadio/murlo-18th-july-2018/" data-permalink="/shows/murlo/episodes/murlo-18th-july-2018" data-event-label=""><svg
+              class="nts-icon nts-icon--l nts-icon--overlay" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
+              <title>Play</title>
+            </svg></div>
+        </div><a class="nts-grid-v2-item__header nts-app" href="/shows/murlo/episodes/murlo-18th-july-2018"><span>18.07.18</span><span>LDN</span>
+          <div class="nts-grid-v2-item__header__title">Murlo</div>
+        </a>
+        <div class="nts-grid-v2-item__footer"><a class="nts-tag nts-app" data-tag-id="newclub-reggaeton" href="/explore/genre/newclub-reggaeton">Reggaeton</a><a class="nts-tag nts-app" data-tag-id="caribbean-bashment"
+            href="/explore/genre/caribbean-bashment">Bashment</a><a class="nts-tag nts-app" data-tag-id="caribbean-dancehall" href="/explore/genre/caribbean-dancehall">Dancehall</a><a class="nts-tag nts-app" data-tag-id="ukdance-grime"
+            href="/explore/genre/ukdance-grime">Grime</a></div>
+      </div><a class="nts-grid-v2-item__extra nts-app nts-link" href="/shows/murlo/episodes/murlo-18th-july-2018">Tracklist</a>
+    </article>
     _BREAK_
     <div class="borderbottom left podcast-list-item" id="swamp81040218">
       <div class="left w8-16">