Issue 22

src/components/SongList.js

@@ -13,11 +13,10 @@ import {
 } from "@material-ui/core";
 import { PlayArrow, Pause, Search } from "@material-ui/icons";
 import Skeleton from "@material-ui/lab/Skeleton";
-import { useSubscription, useMutation, useQuery } from "@apollo/react-hooks";
-import { GET_SONGS } from "../graphql/subscriptions";
+import { useMutation, useQuery } from "@apollo/react-hooks";
 import { SongContext } from "../App";
 import { REMOVE_OR_ADD_FROM_PLAYLIST } from "../graphql/mutations";
-import { GET_PLAYLIST_SONGS } from "../graphql/queries";
+import { GET_PLAYLIST_SONGS, GET_PAGINATED_SONGS } from "../graphql/queries";
 import PlaylistAddOutlinedIcon from "@material-ui/icons/PlaylistAddOutlined";
 import PlaylistAddCheckIcon from "@material-ui/icons/PlaylistAddCheck";
 import NightIcon from "./NightIcon";
@@ -59,12 +58,61 @@ function SongList() {
   const greaterThanSm = useMediaQuery((theme) => theme.breakpoints.up("sm"));
 
   const [darkTheme, changeTheme] = useMyTheme();
+  const [songFetchMoreRunning, setSongFetchMoreRunning] = React.useState(false);
 
   //But now we are subscribing to new data changes
-  const { data, loading, error } = useSubscription(GET_SONGS);
+  const { data, loading, error, fetchMore } = useQuery(
+    GET_PAGINATED_SONGS,
+    {
+      variables: {
+        offset: 0,
+        limit: 10
+      }
+    }
+  );
+
+  let lastScrollPosition = window.scrollY;
+
+  function hasScrolledDownToBottom(el) {
+    if (!el) {
+      return false;
+    }
+    const result = (el.getBoundingClientRect().bottom - 500) <= window.innerHeight && window.scrollY > lastScrollPosition;
+    lastScrollPosition = window.scrollY;
+    return result;
+  }
+
+  React.useEffect(() => {
+    const trackScrolling = () => {
+      const wrappedElement = document.getElementById('song-list');
+      if (hasScrolledDownToBottom(wrappedElement) && !songFetchMoreRunning && !loading && data) {
+        setSongFetchMoreRunning(true);
+        fetchMore({
+          variables: {
+            offset: data.songs.length
+          },
+          updateQuery: (prev, { fetchMoreResult }) => {
+            setSongFetchMoreRunning(false);
+            if (!fetchMoreResult) return prev;
+            return Object.assign({}, prev, {
+              songs: [...prev.songs, ...fetchMoreResult.songs]
+            });
+          }
+        })
+      }
+    };
+    document.addEventListener('scroll', trackScrolling);
+    // Specify how to clean up after this effect:
+    return function cleanup() {
+      document.removeEventListener('scroll', trackScrolling);
+    };
+  });
+
   const {
     data: { playlist },
   } = useQuery(GET_PLAYLIST_SONGS);
+
+  // const { data: paginatedSongs, loading: paginatedSongsLoad, error: paginatedSongsError } = useQuery(GET_PAGINATED_SONGS);
   const classes = useStyles();
 
   // Integrating Search bar inside SongList component
@@ -174,12 +222,17 @@ function SongList() {
           </IconButton>
         )}
       </div>
-      <div>
+      <div id="song-list">
         {handleDynamicSearch().map((song) => (
           /* There might be a more performant way to achieve this ... */
           <Song key={song.id} song={song} inPlaylist={isInPlaylist(song)} />
         ))}
       </div>
+      { songFetchMoreRunning && 
+        [...Array(2)].map((i, j) => (
+          <SkeletonList key={j} />
+        ))
+      }
     </React.Fragment>
   );
 }

src/graphql/queries.js

@@ -11,6 +11,19 @@ export const GET_PLAYLIST_SONGS = gql`
     }
   }
 `;
+
+export const GET_PAGINATED_SONGS = gql`
+  query getPaginatedSongs($offset: Int, $limit: Int) {
+    songs(order_by: { created_at: desc }, limit:$limit, offset:$offset) {
+      artist
+      duration
+      id
+      thumbnail
+      title
+      url
+    }
+  }
+`;
 // One imp thing we need to add in here, is annotation,
 // that tells apollo, only want to perform this query on client
 // using @client