Merge pull request #371 from inventaire/paginate-listings

Paginate listings

app/api/listings.js

@@ -6,9 +6,15 @@ export default {
   byId (id) {
     return action('by-id', { id })
   },
-  byCreators (usersIds, withElements = false) {
+  byCreators ({ usersIds, withElements = false, offset, limit }) {
     usersIds = forceArray(usersIds).join('|')
-    return action('by-creators', { users: usersIds, 'with-elements': withElements })
+    const params = {
+      users: usersIds,
+      'with-elements': withElements,
+      offset,
+      limit
+    }
+    return action('by-creators', params)
   },
   byEntities ({ uris, lists }) {
     uris = forceArray(uris).join('|')

app/modules/listings/components/entity_listings_layout.svelte

@@ -24,7 +24,7 @@
   {#await waitingForListings}
     <p class="loading">{I18n('loading')}<Spinner /></p>
   {:then}
-    <ListingsLayout listingsWithElements={listings} />
+    <ListingsLayout {listings} />
   {/await}
 </div>
 

app/modules/listings/components/listings_layout.svelte

@@ -2,14 +2,14 @@
   import ListingLi from '#modules/listings/components/listing_li.svelte'
   import { i18n } from '#user/lib/i18n'
 
-  export let listingsWithElements, onUserLayout = false
+  export let listings, onUserLayout = false
 </script>
 
 <ul class="listings-layout">
-  {#each listingsWithElements as listing (listing._id)}
+  {#each listings as listing (listing._id)}
     <ListingLi {listing} {onUserLayout} />
   {/each}
-  {#if listingsWithElements.length === 0}
+  {#if listings.length === 0}
     <li class="empty">
       {i18n('There is nothing here')}
     </li>

app/modules/listings/components/user_listings.svelte → app/modules/listings/components/users_listings.svelte

@@ -1,22 +1,46 @@
 <script>
+  import { i18n } from '#user/lib/i18n'
+  import { isNonEmptyArray } from '#lib/boolean_tests'
   import Flash from '#lib/components/flash.svelte'
   import Spinner from '#components/spinner.svelte'
   import ListingsLayout from '#modules/listings/components/listings_layout.svelte'
   import { getListingsByCreators, serializeListing } from '#modules/listings/lib/listings'
   import Modal from '#components/modal.svelte'
   import ListingEditor from '#listings/components/listing_editor.svelte'
-  import { i18n } from '#user/lib/i18n'
   import { icon } from '#lib/handlebars_helpers/icons'
 
-  export let user
+  export let usersIds, onUserLayout
 
-  let listings, flash
+  let listings = []
+  let flash
+  const paginationSize = Math.trunc(window.visualViewport.width / 100) + 5
+  let offset = paginationSize
+  let fetching
+  let windowScrollY = 0
+  let listingBottomEl
+  let hasMore = true
+
+  const getNextListingsBatch = async (offset, limit) => {
+    try {
+      const { listings: newListings } = await getListingsByCreators({
+        usersIds,
+        withElements: true,
+        limit,
+        offset
+      })
+      if (isNonEmptyArray(newListings)) {
+        listings = [ ...listings, ...newListings.map(serializeListing) ]
+        offset += paginationSize
+      }
+      if (newListings.length < paginationSize) hasMore = false
+    } catch (err) {
+      flash = err
+    }
+  }
 
-  const waitingForListings = getListingsByCreators(user._id, true)
-    .then(res => listings = res.listings.map(serializeListing))
-    .catch(err => flash = err)
+  const waitingForInitialListings = getNextListingsBatch(0, paginationSize)
 
-  const isMainUser = user._id === app.user.id
+  const isMainUser = usersIds[0] === app.user.id
 
   let showListingCreationModal = false
   async function addNewListing (newListing) {
@@ -27,10 +51,25 @@
       flash = err
     }
   }
-</script>
 
+  const fetchMore = async () => {
+    if (fetching || hasMore === false) return
+    fetching = true
+    await getNextListingsBatch(offset, paginationSize)
+    offset += paginationSize
+    fetching = false
+  }
+
+  $: {
+    if (listingBottomEl != null && hasMore) {
+      const screenBottom = windowScrollY + window.visualViewport.height
+      if (screenBottom + 100 > listingBottomEl.offsetTop) fetchMore()
+    }
+  }
+</script>
+<svelte:window bind:scrollY={windowScrollY} />
 <div class="user-listings">
-  {#await waitingForListings}
+  {#await waitingForInitialListings}
     <Spinner />
   {:then}
     {#if isMainUser}
@@ -44,10 +83,12 @@
         </button>
       </div>
     {/if}
-    <ListingsLayout
-      listingsWithElements={listings}
-      onUserLayout={true}
-    />
+    <ListingsLayout {listings} {onUserLayout} />
+    {#if hasMore}
+      <p bind:this={listingBottomEl}>
+        <Spinner center={true} />
+      </p>
+    {/if}
   {/await}
   <Flash state={flash} />
 </div>

app/modules/listings/lib/listings.js

@@ -7,8 +7,8 @@ export const getListingWithElementsById = async (id, limit) => {
   return { listing }
 }
 
-export const getListingsByCreators = async (userId, withElements) => {
-  const { lists: listings } = await preq.get(app.API.listings.byCreators(userId, withElements))
+export const getListingsByCreators = async params => {
+  const { lists: listings } = await preq.get(app.API.listings.byCreators(params))
   return { listings }
 }
 
@@ -27,7 +27,7 @@ export const getListingsByEntityUri = async uri => {
 }
 
 export const getUserListingsByEntityUri = async ({ userId, uri }) => {
-  const { listings } = await getListingsByCreators(userId)
+  const { listings } = await getListingsByCreators({ usersIds: userId })
   const listingsIds = pluck(listings, '_id')
   return getListingsContainingEntityUri({ listingsIds, uri })
 }
@@ -58,7 +58,7 @@ export const serializeListing = listing => {
 }
 
 export async function countListings (userId) {
-  const { lists: listings } = await preq.get(app.API.listings.byCreators(userId))
+  const { lists: listings } = await preq.get(app.API.listings.byCreators({ usersIds: userId }))
   return Object.keys(listings).length
 }
 

app/modules/listings/lib/stores/user_listings.js

@@ -11,7 +11,7 @@ function start (setStoreValue) {
 }
 
 async function refresh (setStoreValue) {
-  const { lists: listings } = await preq.get(app.API.listings.byCreators(app.user.id))
+  const { lists: listings } = await preq.get(app.API.listings.byCreators({ usersIds: app.user.id }))
   setStoreValue(listings)
 }
 

app/modules/users/views/users_home_layout.js

@@ -15,6 +15,7 @@ import screen_ from '#lib/screen'
 import InventoryWelcome from '#inventory/views/inventory_welcome.js'
 import error_ from '#lib/error'
 import assert_ from '#lib/assert_types'
+import { getAllGroupMembersIds } from '#groups/lib/groups'
 
 const navs = {
   network: NetworkUsersNav,
@@ -261,21 +262,18 @@ export default Marionette.View.extend({
 
   async showListingsSection ({ userModel, groupModel }) {
     try {
+      let props
+      const { default: UserListings } = await import('#listings/components/users_listings.svelte')
       if (userModel) {
-        const { default: UserListings } = await import('#listings/components/user_listings.svelte')
-        this.showChildComponent('listings', UserListings, {
-          props: {
-            user: userModel.toJSON()
-          }
-        })
+        props = {
+          usersIds: [ userModel.toJSON()._id ],
+          onUserLayout: true
+        }
       } else {
-        const { default: GroupListings } = await import('#listings/components/group_listings.svelte')
-        this.showChildComponent('listings', GroupListings, {
-          props: {
-            group: groupModel.toJSON()
-          }
-        })
+        const membersIds = getAllGroupMembersIds(groupModel.toJSON())
+        props = { usersIds: membersIds }
       }
+      this.showChildComponent('listings', UserListings, { props })
       this.emptyRegion('shelvesList')
       this.emptyRegion('shelfInfo')
       this.emptyRegion('itemsList')