implimented the scroll functionality

Author: saadazghour

src/Containers/App.js

@@ -2,77 +2,102 @@
 // import './App.css';
 import React, { Component } from 'react';
 import RepoList from '../Components/RepoList';
+// import Repo from '../Components/Repo';
 import axios from 'axios';
 import moment from 'moment';
 
 
+
 class App extends Component {
     constructor(){
         super();
         this.state = {
             repo: [],
-            error: ''
+            error: '',
+            page: 1,
+            loading: true,
+
         }
     }
 
 
     componentDidMount(){
-        // Getting the data from Github API
 
-        const DATE_30_DAYS_BEFORE = moment().subtract(30, 'days').format('YYYY-MM-DD')
+      this.loadRepo()       // load the initial Repos
+      window.addEventListener('scroll', this.handleLoadMore )
+    }
+
+
+    loadRepo = () => {
+
+      const { page, repo } = this.state
 
-        axios.get(
-            ` https://api.github.com/search/repositories?q=created:>${ DATE_30_DAYS_BEFORE }&sort=stars&order=desc&page=3 `
-        )
+      const DATE_30_DAYS_BEFORE = moment().subtract(30, 'days').format('YYYY-MM-DD')
+
+    // Getting the data from Github API
+
+      axios.get(
+        ` https://api.github.com/search/repositories?q=created:>${ DATE_30_DAYS_BEFORE }&sort=stars&order=desc&page=${ page } `
+      )
 
         .then(resp => {
-            // console.log(resp);
-            this.setState({
-              repo: resp.data.items,
-            });
+          // console.log(resp);
+
+          this.setState({
+            // repo: resp.data.items,
+            repo: [...repo, ...resp.data.items ],  // here when scrolling, Repo get updated instantly
+            loading: false,
+
+          });
+
+          // console.log("Repo Updated: ", repo);
         })
 
         .catch((error) => {
-            // console.log('Catch Here... : ', error)
-            this.setState({
-              error: error,
-            });
+          this.setState({
+            error: error,
+            loding: false,
+          });
         })
+    }
 
+
+    handleLoadMore = () => {
+
+      const { loading } = this.state
+
+      if( window.pageYOffset + window.innerHeight >= window.innerHeight && !loading ){
+        this.loadData();
+      }
+    }
+
+
+    loadData = () => {
+
+      const { page } = this.state
+
+      this.setState((prevState) => ({
+        page: prevState.page + page,
+        loading: true,
+      }))
+
+      this.loadRepo();
     }
 
 
   render() {
 
     const { repo } = this.state
 
-    return (
-      <div>
-        <RepoList repo={ repo }/>
-      </div>
-    );
+      return (
+        <div>
+          <RepoList repo={ repo } />
+          <div> Loading ...</div>
+        </div>
+      )
   }
+
 }
 
-// function App() {
-//   return (
-//     <div className="App">
-//       <header className="App-header">
-//         <img src={logo} className="App-logo" alt="logo" />
-//         <p>
-//           Edit <code>src/App.js</code> and save to reload.
-//         </p>
-//         <a
-//           className="App-link"
-//           href="https://reactjs.org"
-//           target="_blank"
-//           rel="noopener noreferrer"
-//         >
-//           Learn React
-//         </a>
-//       </header>
-//     </div>
-//   );
-// }
-
-export default App;
+
+export default App

src/index.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
+// import './index.css';
 import App from './Containers/App';
 // import Repo from './Components/Repo';
 import * as serviceWorker from './serviceWorker';
 
+
 ReactDOM.render(<App />, document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change