Implement react-intersection-observer to facilitate infinite scroll

Uses react-intersection-observer to load more comments when the last of the previously loaded comments is in the viewport.

prisma/seed/create/createNewUsers.ts

@@ -18,7 +18,7 @@ const createNewUsers = async ({ numberOfUsers }: CreateNewUsersArgs) => {
 
   // eslint-disable-next-line no-plusplus
   for (let i = 0; i < numberOfUsers; i++) {
-    const randomValue = crypto.randomBytes(4).toString('hex');
+    const randomValue = crypto.randomBytes(8).toString('hex');
     const firstName = faker.name.firstName();
     const lastName = faker.name.lastName();
     const username = `${firstName[0]}.${lastName}.${randomValue}`;

prisma/seed/index.ts

@@ -29,7 +29,7 @@ import createNewUsers from './create/createNewUsers';
       createNewBeerTypes({ joinData: { users } }),
     ]);
     const beerPosts = await createNewBeerPosts({
-      numberOfPosts: 48,
+      numberOfPosts: 200,
       joinData: { breweryPosts, beerTypes, users },
     });
 
@@ -41,11 +41,11 @@ import createNewUsers from './create/createNewUsers';
       breweryImages,
     ] = await Promise.all([
       createNewBeerPostComments({
-        numberOfComments: 1000,
+        numberOfComments: 45000,
         joinData: { beerPosts, users },
       }),
       createNewBreweryPostComments({
-        numberOfComments: 1000,
+        numberOfComments: 45000,
         joinData: { breweryPosts, users },
       }),
       createNewBeerPostLikes({