Implement infinite scrolling for visit list (v2)

[smattingly]

I found a good example of what we are trying to do. Here is the demo, and here is the tutorial.

• [x] Modify the current setup by removing the line shown below. This will no longer send any data to the browser, just an HTML page containing an empty table. https://github.com/dewv/nlcAttendance/blob/c056a0e1b0f4ffa03696875d92fbb474b72b7410/api/controllers/visit/get-list.js#L29
• [x] In /views/pages/visits/index.html, remove everything between the <tbody> and </tbody> tags. This logic will be replaced with similar code elsewhere on the server.

• [x] At the top of that same file, put the following code, modified from the example I found. (We will probably put this in its own .js file later.) I'm sure that there will be some errors to fix, and there are some pieces missing.

  
  <script>
  (function () {
  const visitsEl = document.querySelector('tbody');
  
  const getVisits = async (page, limit) => {
      const API_URL = `/visit?page=${page}&limit=${limit}`;
      const response = await fetch(API_URL, {
        headers: {"Content-type": "application/json"}
      });
  
      if (!response.ok) {
          throw new Error(`An error occurred: ${response.status}`);
      }
      return await response.json();
  }
  
  const showVisits = (visits) => {
      visits.forEach(visit => {
          const visitEl = document.createElement('tr');
          visitEl.innerHTML = `
              <td class="text-right">
                  ${ visit.id }  // modified
              </td>
              <td>
                  ${ visit.student } // modified
              </td>
              <td class="text-right">
                  ${ visit.checkInTime }
              </td>
              <td class="text-right">
                  ${ visit.checkOutTime }
              </td>
              <td class="text-right">${ visit.length }</td>
              <td>
                  ${visit.isLengthEstimated}
              </td>
      `;
  
          visitsEl.appendChild(visitEl);
      });
  };
  
  const hasVisits = (page, limit, total) => {
      const startIndex = (page - 1) * limit + 1;
      return total === 0 || startIndex < total;
  };
  
  const loadVisits = async (page, limit) => {
          try {
              // if having more quotes to fetch
              if (hasMoreVisits(page, limit, total)) {
                  // call the API to get quotes
                  const response = await getVisits(page, limit);
                  showVisits(response.data);
                  total = response.total;
              }
          } catch (error) {
              console.log(error.message);
          }
  };
  
  // control variables
  let currentPage = 1;
  const limit = 10;
  let total = 0;
  
  window.addEventListener('scroll', () => {
      const {
          scrollTop,
          scrollHeight,
          clientHeight
      } = document.documentElement;
  
      if (scrollTop + clientHeight >= scrollHeight - 5 &&
          hasMoreVisits(currentPage, limit, total)) {
          currentPage++;
          loadVisits(currentPage, limit);
      }
  }, {
      passive: true
  });
  
  // initialize
  loadVisits(currentPage, limit);

})();

- [x] We will need to implement the API URL that the browser code above accesses to fetch the data. This is where the logic removed from the `<tbody>` tags above will be relocated. To understand how this will work, load [page 1](https://api.javascripttutorial.net/v1/quotes/?page=1&limit=10) and [page 2](https://api.javascripttutorial.net/v1/quotes/?page=2&limit=10) from the demo I found. Notice how the URL is the same except for parameters. The browser code above fetches these data pages as needed and populates them in the table.

[BroadusA]

03/25: I have completed the first three checkboxes and am currently reviewing the demos from above.

[BroadusA]

3/29: Can we work on the API section tomorrow around 10:45 if possible ?

[smattingly]

@BroadusA I am nearly finished with my server side part. In the code I provided above, I have made an edit that changes two lines. Both lines are marked with a comment: // modified. Please change your code to match the edits to those two lines (but don't include the marker comments).

[smattingly]

@BroadusA Once again, I have modified the code given above, changing the URL and the fetch call in lines 6 and 7. Please match those changes in your code.

Then, you will need to pull my changes from GitHub. You can try doing that by clicking the "sync" arrows circle in the GitPod tool bar. Depending on what files you have changed, there may or may not be some cleanup we have to do to combine our changes. Let me know if you are able to pull my changes and launch the app in GitPod, then we'll debug from there.

[BroadusA]

4/9: Professor Mattingly and I have been working on some troubleshooting while trying to sync our codes together.

[smattingly]

Good work, @BroadusA. @dewv/managers will take it from here.