fix:pvp fixes

Author: shubham-1806

src/components/BattleTV/BattleTV.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react';
-import ReactPaginate from 'react-paginate';
 import { getLogAction } from '../../store/rendererLogs/logSlice';
 import { useNavigate } from 'react-router-dom';
 import styles from './BattleTV.module.css';
@@ -88,7 +87,6 @@ function getUsersGame(
 }
 
 function PaginatedItems({ battleTvType }: { battleTvType: BattleType }) {
-  const [pageCount, setPageCount] = useState(0);
   const navigate = useNavigate();
   const currentBattles =
     battleTvType == BattleType.PVP
@@ -99,25 +97,17 @@ function PaginatedItems({ battleTvType }: { battleTvType: BattleType }) {
   const loading = useAppSelector(loadingSelector);
   const loggedInUser = useAppSelector(user);
   const hasErrors = useAppSelector(hasErrorsSelector);
+  const pageCount = currentBattles.page;
 
   // initialize the redux hook
   const dispatch = useAppDispatch();
 
   if (!currentBattles.hasbeenFetched) {
-    if (currentBattles.page !== pageCount) {
-      dispatch(
-        fetchBattlesAction({ battleTvType: battleTvType, page: pageCount }),
-      );
-    }
-  }
-
-  const handlePageClick = (event: { selected: number }) => {
-    setPageCount(event.selected);
+    console.log('fetching battles');
     dispatch(
-      fetchBattlesAction({ battleTvType: battleTvType, page: event.selected }),
+      fetchBattlesAction({ battleTvType: battleTvType, page: pageCount }),
     );
-    console.log('changed');
-  };
+  }
 
   return (
     <>
@@ -237,21 +227,37 @@ function PaginatedItems({ battleTvType }: { battleTvType: BattleType }) {
         )}
       </>
       <nav className={styles.paginationouter}>
-        <ReactPaginate
-          previousLabel="<"
-          nextLabel=">"
-          pageLinkClassName={styles.pageNum}
-          previousLinkClassName={styles.pageNum}
-          nextLinkClassName={styles.pageNum}
-          breakLabel="..."
-          breakLinkClassName={styles.pageNum}
-          pageCount={69}
-          marginPagesDisplayed={2}
-          pageRangeDisplayed={5}
-          onPageChange={handlePageClick}
-          containerClassName={styles.pagination}
-          activeClassName="active"
-        />
+        <button
+          type="button"
+          className={styles.button}
+          onClick={() => {
+            if (pageCount !== 0) {
+              dispatch(
+                fetchBattlesAction({
+                  battleTvType: battleTvType,
+                  page: pageCount - 1,
+                }),
+              );
+            }
+          }}
+        >
+          {'<'}
+        </button>
+        <div className={styles.button}>{pageCount + 1}</div>
+        <button
+          type="button"
+          className={styles.button}
+          onClick={() => {
+            dispatch(
+              fetchBattlesAction({
+                battleTvType: battleTvType,
+                page: pageCount + 1,
+              }),
+            );
+          }}
+        >
+          {'>'}
+        </button>
         <button
           type="button"
           className={styles.button}

src/components/CommitModal/CommitModal.tsx

@@ -2,8 +2,12 @@ import { CodeApi, Language } from '@codecharacter-2024/client';
 import React, { useState } from 'react';
 import { Button, Form, Modal, Row } from 'react-bootstrap';
 import { apiConfig, ApiError } from '../../api/ApiConfig';
-import { GameType, UserCode, UserLanguage } from '../../store/editor/code';
-import { CurrentGameType } from '../../store/editor/code';
+import {
+  GameType,
+  UserCode,
+  UserLanguage,
+  CurrentGameType,
+} from '../../store/editor/code';
 import {
   IsCommitModalOpen,
   isCommitModalOpened,

src/components/Leaderboard/Leaderboard.tsx

@@ -479,8 +479,13 @@ function PaginatedItems(props: LeaderboardType.Props) {
           type="button"
           className={styles.button}
           onClick={() => {
-            fetchLeaderboardByTier(0, activeTier);
-            setPage(0);
+            if (props.page == 'Normal') {
+              fetchLeaderboardByTier(0, activeTier);
+              setPage(0);
+            } else {
+              fetchPvPLeaderboard(0);
+              setPage(0);
+            }
           }}
           id="refresh"
         >

src/store/BattleTV/BattleTvSlice.ts

@@ -7,6 +7,7 @@ import {
 import { apiConfig } from '../../api/ApiConfig';
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 import { RootState } from '../store';
+import toast from 'react-hot-toast';
 
 export enum BattleType {
   NORMAL,
@@ -35,19 +36,19 @@ export const initialState = {
     battleType: BattleType.NORMAL,
     battles: [] as Match[],
     hasbeenFetched: false,
-    page: 1,
+    page: 0,
   },
   PvPbattles: {
     battleType: BattleType.PVP,
     battles: [] as PvPMatch[],
     hasbeenFetched: false,
-    page: 1,
+    page: 0,
   },
   Dcbattles: {
     battleType: BattleType.DC,
     battles: [] as Match[],
     hasbeenFetched: false,
-    page: 1,
+    page: 0,
   },
 };
 
@@ -57,14 +58,14 @@ export const fetchBattlesAction = createAsyncThunk(
     reqobj: { battleTvType: BattleType; page: number },
     { rejectWithValue },
   ) => {
+    console.log('called');
     try {
       switch (reqobj.battleTvType) {
         case BattleType.NORMAL:
           const matchesAPI = new MatchApi(apiConfig);
           const normalResponse = await matchesAPI.getUserNormalMatches(
             reqobj.page,
           );
-          // console.log(normalResponse)
           return {
             battles: normalResponse,
             battleType: BattleType.NORMAL,
@@ -99,23 +100,39 @@ const battleTvSlice = createSlice({
   reducers: {},
   extraReducers: builder => {
     builder.addCase(fetchBattlesAction.fulfilled, (state, { payload }) => {
-      state.loading = false;
-      switch (payload.battleType) {
-        case BattleType.NORMAL:
-          state.Normalbattles.battles = payload.battles as Match[];
-          state.Normalbattles.hasbeenFetched = true;
-          state.Normalbattles.page = payload.page;
-          break;
-        case BattleType.PVP:
-          state.PvPbattles.battles = payload.battles as PvPMatch[];
-          state.PvPbattles.hasbeenFetched = true;
-          state.PvPbattles.page = payload.page;
-          break;
-        case BattleType.DC:
-          state.Dcbattles.battles = payload.battles as Match[];
-          state.Dcbattles.hasbeenFetched = true;
-          state.Dcbattles.page = payload.page;
-          break;
+      if (payload.battles.length !== 0) {
+        state.loading = false;
+        switch (payload.battleType) {
+          case BattleType.NORMAL:
+            state.Normalbattles.battles = payload.battles as Match[];
+            state.Normalbattles.hasbeenFetched = true;
+            state.Normalbattles.page = payload.page;
+            break;
+          case BattleType.PVP:
+            state.PvPbattles.battles = payload.battles as PvPMatch[];
+            state.PvPbattles.hasbeenFetched = true;
+            state.PvPbattles.page = payload.page;
+            break;
+          case BattleType.DC:
+            state.Dcbattles.battles = payload.battles as Match[];
+            state.Dcbattles.hasbeenFetched = true;
+            state.Dcbattles.page = payload.page;
+            break;
+        }
+      } else {
+        state.loading = false;
+        toast.error('No more battles to show');
+        switch (payload.battleType) {
+          case BattleType.NORMAL:
+            state.Normalbattles.hasbeenFetched = true;
+            break;
+          case BattleType.PVP:
+            state.PvPbattles.hasbeenFetched = true;
+            break;
+          case BattleType.DC:
+            state.Dcbattles.hasbeenFetched = true;
+            break;
+        }
       }
     });
     builder.addCase(fetchBattlesAction.rejected, state => {