added infinite scrolling

app/Http/Controllers/ObservationsController.php

@@ -271,20 +271,23 @@ public function delete($id, Request $request)
     public function getObservationFeed(Request $request)
     {
         $this->validate($request, [
-            'limit' => 'nullable|integer|min:6|max:90',
+            'take' => 'nullable|integer|min:0|max:1000',
+            'skip' => 'nullable|integer|min:0|max:1000',
         ]);
 
-        $limit = $request->limit ?: 10;
+        $take = $request->take;
+        $skip = $request->skip;
 
         $observations = Observation::with([
             'user' => function ($query) {
                 $query->select(['id', 'is_anonymous', 'name']);
             },
         ])
             ->select(['id', 'user_id', 'observation_category', 'created_at', 'thumbnail'])
-            ->orderBy('created_at', 'desc')
+            ->orderBy('id', 'desc')
             ->where('is_private', false)
-            ->limit($limit)
+            ->skip($skip)
+            ->take($take)
             ->get();
 
         $observations->map(function ($observation) {

resources/assets/js/components/ObservationsFeed.jsx

@@ -1,31 +1,79 @@
 import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
+import { useState } from 'react';
+
 
 export default class ObservationsFeed extends Component {
   constructor(props) {
     super(props)
 
     this.state = {
       observations: [],
-      loading     : true
+      moreObservations: [],
+      loading     : true,
+      take: 10,
+      skip: 0
     }
+    this.handleScroll = this.handleScroll.bind(this);
+    this.loadMoreObservations = this.loadMoreObservations.bind(this);
+    this.loadObservations = this.loadObservations.bind(this);
   }
 
   componentDidMount() {
     this.loadObservations()
 
-    setInterval(this.loadObservations.bind(this), 120000)
   }
 
   loadObservations() {
-    axios.get(`/web/observations/feed`).then(response => {
-      this.setState({observations: response.data.data, loading: false})
+    axios.get(`/web/observations/feed/`,{
+      params:{
+        take: this.state.take,
+        skip: this.state.skip
+      }
+    })
+    .then(response => {
+      // this.setState({observations: response.data.data, loading: false})
+      this.setState({observations: response.data.data })
+      this.setState({loading: false})
+
+    }).catch(error => {
+      console.log(error)
+      this.setState({loading: false})
+    })
+  }  
+
+  loadMoreObservations(skip) {
+    axios.get(`/web/observations/feed/`,{
+      params:{
+        take: this.state.take,
+        skip: skip
+      }
+    })
+    .then(response => {
+      // this.setState({observations: response.data.data, loading: false})
+      this.setState({observations: [...this.state.observations, ...response.data.data] })
+      this.setState({loading: false})     
+
     }).catch(error => {
       console.log(error)
       this.setState({loading: false})
     })
   }
 
+  handleScroll(event){
+      const bottom = event.target.scrollHeight - event.target.scrollTop === event.target.clientHeight;
+      if (bottom && (this.state.loading==false)) {
+        const newSkip = this.state.skip + 10
+        this.setState({skip: newSkip})
+        this.setState({loading: true})
+        var delayInMilliseconds = 1000;
+
+        setTimeout(() => {
+          this.loadMoreObservations(newSkip);
+        }, 1000);
+      }
+    }
+
   renderObservation(observation) {
     return (
       <div key={observation.id}
@@ -51,16 +99,16 @@ export default class ObservationsFeed extends Component {
 
   render() {
     return (
-      <div style={{maxHeight: 487, overflowY: 'auto'}} className={'invisible-scrollbar'}>
-        {this.state.loading ?
-          <p className="has-text-centered">
-            <i className="fa fa-spinner fa-spin"></i>
-          </p>
-          : null}
+      <div style={{maxHeight: 487, overflowY: 'auto'}} onScroll={this.handleScroll}>
         {this.state.observations.map(this.renderObservation.bind(this))}
         {this.state.observations.length === 0 && !this.state.loading ?
           <p className="text-dark-muted has-text-centered">There are no observations at this time</p>
           : null}
+          {this.state.loading ?
+            <p className="has-text-centered">
+              <i className="fa fa-spinner fa-spin"></i>
+            </p>
+            : null}
       </div>
     )
   }