Refactor leaderboard components to use slice for top entries instead of filter

Author: tohyzhong

src/pages/leaderboard/subcomponents/ContestLeaderboard.tsx

@@ -65,8 +65,8 @@ const ContestLeaderboard: React.FC<Props> = ({ type, contestID }) => {
 
   // Display constants
   const visibleEntries = useTypedSelector(store => store.session.topContestLeaderboardDisplay);
-  const top3 = rankedLeaderboard.filter(x => x.rank !== undefined && x.rank <= 3);
-  const rest = rankedLeaderboard.filter(x => x.rank !== undefined && x.rank <= Number(visibleEntries) && x.rank > 3);
+  const top3 = rankedLeaderboard.slice(0, 3);
+  const rest = rankedLeaderboard.slice(3, Number(visibleEntries));
 
   // const workspaceLocation = 'assessment';
   const navigate = useNavigate();

src/pages/leaderboard/subcomponents/OverallLeaderboard.tsx

@@ -47,7 +47,7 @@ const OverallLeaderboard: React.FC = () => {
 
   // Display constants
   const visibleEntries = useTypedSelector(store => store.session.topLeaderboardDisplay);
-  const topX = rankedLeaderboard.filter(x => x.rank <= Number(visibleEntries));
+  const topX = rankedLeaderboard.slice(0, Number(visibleEntries));
 
   // Define column definitions for ag-Grid
   const columnDefs: ColDef<LeaderboardRow>[] = useMemo(