FRIENDSHIP - LEADERBOARD - HISTORY - INFINITE_SCROLL (#77)

backend/code/prisma/migrations/20231024181019_anme/migration.sql

@@ -0,0 +1,46 @@
+/*
+  Warnings:
+
+  - A unique constraint covering the columns `[createdAt]` on the table `messages` will be added. If there are existing duplicate values, this will fail.
+  - A unique constraint covering the columns `[Username]` on the table `users` will be added. If there are existing duplicate values, this will fail.
+
+*/
+-- CreateEnum
+CREATE TYPE "NotifType" AS ENUM ('addFriend');
+
+-- DropForeignKey
+ALTER TABLE "messages" DROP CONSTRAINT "messages_roomId_fkey";
+
+-- AlterTable
+ALTER TABLE "blocked_friends" ADD COLUMN     "dmRoomId" TEXT;
+
+-- AlterTable
+ALTER TABLE "room_members" ADD COLUMN     "bannedAt" TIMESTAMP(3);
+
+-- AlterTable
+ALTER TABLE "users" ADD COLUMN     "tfaSecret" TEXT,
+ADD COLUMN     "tfaStatus" BOOLEAN NOT NULL DEFAULT false;
+
+-- CreateTable
+CREATE TABLE "notifications" (
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "id" TEXT NOT NULL,
+    "recipientId" TEXT NOT NULL,
+    "content" "NotifType" NOT NULL,
+    "is_read" BOOLEAN NOT NULL DEFAULT false,
+    "readAt" TIMESTAMP(3),
+
+    CONSTRAINT "notifications_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "notifications_createdAt_key" ON "notifications"("createdAt");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "messages_createdAt_key" ON "messages"("createdAt");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "users_Username_key" ON "users"("Username");
+
+-- AddForeignKey
+ALTER TABLE "messages" ADD CONSTRAINT "messages_roomId_fkey" FOREIGN KEY ("roomId") REFERENCES "rooms"("id") ON DELETE CASCADE ON UPDATE CASCADE;

backend/code/src/game/game.controller.ts

@@ -1,4 +1,4 @@
-import { Controller, Get, Post, Query, UseGuards } from '@nestjs/common';
+import { Controller, Get, Post, Query, UseGuards, Param } from '@nestjs/common';
 import { GameService } from './game.service';
 import { AtGuard } from 'src/auth/guards/at.guard';
 import { GetCurrentUser } from 'src/auth/decorator/get_current_user.decorator';
@@ -21,4 +21,13 @@ export class GameController {
   ) {
     return this.gameService.getHistory(userId, offset, limit);
   }
+
+  @Get('history/:id')
+  @UseGuards(AtGuard)
+  getHistoryId(
+    @Param('id') userId: string,
+    @Query() { offset, limit }: QueryOffsetDto,
+  ) {
+    return this.gameService.getHistory(userId, offset, limit);
+  }
 }

backend/code/src/game/game.service.ts

@@ -51,12 +51,14 @@ export class GameService {
         score2: true,
         participant1: {
           select: {
+            userId:true,
             Username: true,
             avatar: true,
           },
         },
         participant2: {
           select: {
+            userId:true,
             Username: true,
             avatar: true,
           },
@@ -78,11 +80,13 @@ export class GameService {
         match: {
           createdAt: match.createdAt,
           Player1: {
+            id:match.participant1.userId,
             username: match.participant1.Username,
             score: match.score1,
             avatar: avatar1,
           },
           Player2: {
+            id:match.participant2.userId,
             username: match.participant2.Username,
             score: match.score2,
             avatar: avatar2,

backend/code/src/leaderboard/leaderboard.service.ts

@@ -16,9 +16,25 @@ export class LeaderBoardService {
         },
       },
     });
-    return leaderboard.map((user) => ({
-      userId: user.winner_id,
-      wins: user._count.id,
-    }));
+    const leaderboardsPromises =  leaderboard.map(async (user ) => {
+        const lead = await this.prisma.user.findUnique({
+        where: {
+          userId: user.winner_id,
+        },
+        select: {
+          Username: true,
+          firstName: true,
+          lastName: true,
+          avatar: true,
+          userId: true,
+        },
+      },
+      )
+      return {
+        ...lead,
+        wins: user._count.id
+      }
+    });
+    return await Promise.all(leaderboardsPromises);
   }
 }

frontend/Dockerfile.dev

@@ -1,4 +1,4 @@
-FROM node:20
+FROM node:18
 
 WORKDIR /app
 

frontend/code/package.json

@@ -25,9 +25,11 @@
     "react-hook-form": "^7.46.1",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^4.10.1",
+    "react-infinite-scroll-component": "^6.1.0",
     "react-konva": "^18.2.10",
     "socket.io-client": "^4.7.2",
     "react-scripts": "^5.0.1",
+    "socket.io-client": "^4.7.2",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4",
     "zustand": "^4.4.1"

frontend/code/src/Components/Home/LeaderBoard.tsx

@@ -1,12 +1,15 @@
 import { Chart } from './assets/Chart'
 import { Table } from './assets/Table'
-export const LeaderBoard = () => {
+
+
+export const LeaderBoard  = () => {
     return (
-        <div className='flex flex-col rounded-2xl justify-start items-start mt-6 sm:h-full h-full w-full  bg-base-200 overflow-auto no-scrollbar'>
+        <div className='flex flex-col rounded-2xl justify-start items-start mt-6 sm:h-full h-full w-full  bg-base-200'>
            <div className="flex justify-start items-start pl-2 pt-2 sm:pl-12 sm:pt-12 gap-x-4 py-4">
                <Chart/> <span className='font-montserrat'>Leader Board </span>
 
            </div>
+
             <Table />
         </div>
     )

frontend/code/src/Components/Home/assets/Table.tsx

@@ -1,50 +1,91 @@
 import { Trophy } from './Trophy' 
-import { useState,useEffect } from 'react'
+import { useState,useEffect, useCallback, useRef, FC } from 'react'
 import { Daimond } from './Daimond'
 import { Loading } from '../../Loading'
 import { Link } from 'react-router-dom'
-// import { useLoaderData } from 'react-router'
+import { NullPlaceHolder } from '../../Chat/Components/RoomChatHelpers'
+import { Logo } from '../../Layout/Assets/Logo'
+import InfiniteScroll from 'react-infinite-scroll-component';
+import api from '../../../Api/base'
+import toast from 'react-hot-toast'
 
-// export const dataLoader = async() => {
-
-//     var users :any[] = [];
-//     for (let i = 0 ; i < 10 ; ++i)
-//     {
-//       let response = await fetch(`https://randomuser.me/api/`)
-//       let data  = await response.json()
-//       if (data.results && data.results.length > 0) {
-//           const newUser = data.results[0];
-//           users.push(newUser)
-//       }
-//     }
-//        return users;
-
-
-// }
-export const Table = () =>
+export const Table: FC = () =>
 {
-    const [users, setUsers] = useState<any | undefined>([])
-    // const users : any = useLoaderData();
+  const [users, setUsers] = useState<any>([])
+  const [loading , setLoading] = useState<boolean>(true)
+  const page  = useRef(0);
+  const hasMoreItems = useRef(true)
+  const [nextPageUrl, setNextPageUrl] : any = useState(
+    "/leaderboard?offset=0&limit=20"
+
+  );
+
+  const [fetching, setFetching] = useState(false);
 
-    const [loading , setLoading] = useState<boolean>(true)
-    useEffect( ()  => {
-      const fetchdata = async() =>{
-            for (let i = 0 ; i < 10 ; ++i)
-            {
-              let response = await fetch(`https://randomuser.me/api/`)
-              let data  = await response.json()
-              if (data.results && data.results.length > 0) {
-                  const newUser = data.results[0];
-                  setUsers((oldUsers : any) => [...oldUsers, newUser]);
-              }
-            }
-            setLoading(false)
+  const fetchItems = useCallback(
+    async () => {
+      if (fetching) {
+        return;
       }
-      fetchdata().catch(console.error)  
-    },[])
-
+
+      setFetching(true);
+
+      try {
+        const newdata : any = await api.get(nextPageUrl);
+        if (newdata.data.length < 20) {
+          setUsers([...users, ...newdata.data]);
+          setNextPageUrl(null); 
+          return;
+        }
+        console.log(newdata.data.length)
+        if (!newdata.data || newdata.data.length === 0)
+        {
+          setNextPageUrl(null)
+          return ;
+        }
+        else
+        {
+          console.log(newdata.data)
+          console.log("here")
+          setUsers([...users, ...newdata.data]);
+          setNextPageUrl(`/leaderboard?offset=${page.current}&limit=20`);
+          page.current += 20;
+        }
+
+
+      }
+      catch(e)
+      {
+        toast.error("Can't get leadeboard");
+      }
+       finally {
+        setLoading(false)
+
+        setFetching(false);
+      }
+    },
+    [users, fetching, nextPageUrl]
+  );
+
+  useEffect(() => {
+    fetchItems()
+    page.current += 20;
+    //eslint-disable-next-line
+  },[])
+  hasMoreItems.current = !!nextPageUrl;
+
     return (
-        <div className="overflow-x-auto no-scrollbar w-full">
+      users?.length > 0 || loading ? (
+        <div className='w-full h-full'  >
+        <InfiniteScroll
+                    dataLength={users.length}
+                    next={fetchItems}
+                    loader={<div className='flex items-center justify-center w-full '><Logo x={"6"} y={"6"}/></div>}
+                    endMessage={<div className='p-4 flex justify-center items-center font-montserrat text-neutral'>No more results!</div>}
+                    hasMore={hasMoreItems.current} 
+                    scrollableTarget="scrollTarget"
+                    style={{overflow:"auto", height:"100%"}}
+                    >
           <table className="table w-full">
             <thead>
               <tr className='w-[80vw] flex justify-between px-10 items-center'>
@@ -53,11 +94,13 @@ export const Table = () =>
                 <th>Score</th>
               </tr>
             </thead>
-            <tbody className='flex flex-col justify-between items-center gap-2 sm:gap-4'>
-              { !loading && users.map((x: any, index: number) => (
+            <tbody className='flex flex-col justify-between  no-scrollbar items-center gap-2 sm:gap-4'>
+
+
+              {!loading && users.map((x: any, index: number) => (
                 <tr
                   key={index}
-                  className='bg-accent  border-base-200 rounded-xl w-11/12 flex justify-between sm:justify-between px-4 h-16 xl:h-20 sm:px-10 items-center'
+                  className='bg-accent border-base-200 rounded-xl w-11/12 flex justify-between sm:justify-between px-4 h-16 xl:h-28 sm:px-10 items-center'
                 >
                   <td>
                     <div className="flex items-center space-x-3">
@@ -67,22 +110,30 @@ export const Table = () =>
                     </div>
                   </td>
                     <td className='flex justify-start items-center gap-x-2 hover:cursor-pointer'>
-                    <Link to={`/Profile/${x.id.value}`}>
-                      <div className="flex flex justify-start items-center gap-x-2 hover:cursor-pointer"><div className="avatar">
+                    <Link to={`/Profile/${x.userId}`}>
+                      <div className="flex justify-start items-center gap-x-2 hover:cursor-pointer"><div className="avatar">
                       <div className="w-10 rounded-full ring ring-primary ring-offset-base-100 ring-offset-2">
-                      <img src={x.picture.thumbnail} alt="Avatar Tailwind CSS Component" />                      </div>
+                      <img src={`https://res.cloudinary.com/trandandan/image/upload/c_thumb,h_72,w_72/${x?.avatar}`} alt="Avatar Tailwind CSS Component" />                      </div>
                     </div>
-
-                    <div className="flex font-montserrat w-12 text-neutral font-semibold">{x.name.first}</div>
+                    <div className="flex font-montserrat w-12 text-neutral font-semibold">{x?.Username}</div>
                     </div>
                     </Link>
                     </td>
-                  <td className='flex justify-start items-center gap-x-1 w-18'><Daimond/> <div>{index + 123}</div></td>
+                  <td className='flex justify-start items-center gap-x-1 w-18'><Daimond/> <div>{x?.wins}</div></td>
                 </tr>
-              ))}
+
+
+               ))}
               {loading && (<Loading size={"lg"}/>)}
             </tbody>
           </table>
+          </InfiniteScroll>
+          </div>
+      ):(
+        <div className='h-full w-full flex items-center justify-center'>
+          <NullPlaceHolder message='No leaderboard available'/>
         </div>
+      )
+
       );
 }