Merge branch 'v2-development' of https://github.com/SoftUni-Internal/…

…OpenJudgeSystem into 1679-setup-end-to-end-tests

Servers/UI/OJS.Servers.Ui/ClientApp/src/common/types.ts

@@ -846,6 +846,34 @@ interface IContestsBulkEdit {
     categoryId: number;
 }
 
+interface IProfilePageContests {
+    id: number;
+    name: string;
+    startTime: Date;
+    endTime: Date;
+    practiceStartTime: Date;
+    practiceEndTime: Date;
+    canBePracticed: boolean;
+    canBeCompeted: boolean;
+    hasContestPassword: boolean;
+    hasPracticePassword: boolean;
+    isOnlineExam: boolean;
+    isWithRandomTasks: boolean;
+    category: string;
+    categoryId: number | null;
+    isLoading: boolean;
+    numberOfProblems: number;
+    practiceResults: number;
+    competeResults: number;
+    competeMaximumPoints: number;
+    practiceMaximumPoints: number;
+    userParticipationResult?: IUserParticipationResult;
+    createdOn: Date;
+    modifiedOn: Date | null;
+    officialParticipants: number;
+    requirePasswordForCompete: boolean;
+    requirePasswordForPractice: boolean;
+}
 
 export type {
     IIndexContestsType,

Servers/UI/OJS.Servers.Ui/ClientApp/src/components/profile/profile-contest-participations/ProfileContestParticipations.tsx

@@ -110,59 +110,113 @@ const ProfileContestParticipations = ({ userIsProfileOwner, isChosenInToggle }:
         setUserContestParticipationsPage(page);
     }, []);
 
-    const renderContestCard = useCallback(
-        (contest: IIndexContestsType) => 
-            <ContestCard
-          contest={contest}
-          showPoints={userIsProfileOwner || internalUser.isAdmin}
-        />
-        , [ internalUser, userIsProfileOwner ],
+    // Precompute contests for each category
+    const categoryContestsMap = useMemo(() => {
+        if (!allParticipatedContests) {
+            return new Map<number, IIndexContestsType[]>();
+        }
+
+        const categoryMap = new Map<number, IIndexContestsType[]>();
+
+        allParticipatedContests.forEach((contest) => {
+            if (contest.categoryId) {
+                if (!categoryMap.has(contest.categoryId)) {
+                    categoryMap.set(contest.categoryId, []);
+                }
+                categoryMap.get(contest.categoryId)!.push(contest);
+            }
+        });
+
+        return categoryMap;
+    }, [ allParticipatedContests ]);
+
+    // Precompute dropdown items for each category
+    const contestDropdownItemsMap = useMemo(() => {
+        const dropdownMap = new Map<number, IDropdownItem[]>();
+
+        categoryContestsMap.forEach((contests, categoryId) => {
+            dropdownMap.set(
+                categoryId,
+                contests.map((contest) => ({
+                    id: contest.id,
+                    name: `${contest.name} (${contest.category})`,
+                })),
+            );
+        });
+
+        // Add a special entry for "all contests" (category not selected)
+        dropdownMap.set(0, allParticipatedContests?.map((contest) => ({
+            id: contest.id,
+            name: `${contest.name} (${contest.category})`,
+        })) || []);
+
+        return dropdownMap;
+    }, [ categoryContestsMap, allParticipatedContests ]);
+
+    // Get contests for the selected category efficiently
+    const filteredContestDropdownItems = useMemo(
+        () => contestDropdownItemsMap
+            .get(selectedCategory === null
+                ? 0
+                : Number(selectedCategory.id)) ||
+            [],
+        [ selectedCategory, contestDropdownItemsMap ],
     );
 
-    const render = useCallback(() => {
-        if (areContestParticipationsLoading) {
-            return <div style={{ ...flexCenterObjectStyles }}><SpinningLoader /></div>;
+    const categoryDropdownItems = useMemo(() => {
+        if (!allParticipatedContests) {
+            return [];
         }
 
-        if (!isNil(contestParticipationsQueryError)) {
-            return <span>Error fetching user contest participations</span>;
-        }
+        const uniqueCategories = new Map<number, string>();
+        allParticipatedContests.forEach((contest) => {
+            if (contest.categoryId && contest.category && !uniqueCategories.has(contest.categoryId)) {
+                uniqueCategories.set(contest.categoryId, contest.category);
+            }
+        });
 
-        if (!shouldRender) {
-            return null;
-        }
+        return Array.from(uniqueCategories.entries())
+            .map(([ id, name ]) => ({
+                id,
+                name: `${name} (#${id})`,
+            }))
+            .sort((a, b) => a.name.localeCompare(b.name));
+    }, [ allParticipatedContests ]);
 
+    const handleContestSelect = useCallback((item: IDropdownItem | undefined) => {
+        setSelectedContest(item || null);
+        setUserContestParticipationsPage(1);
+    }, []);
+
+    const handleContestClear = useCallback(() => {
+        setSelectedContest(null);
+        setUserContestParticipationsPage(1);
+    }, []);
+
+    const handleCategorySelect = useCallback((item: IDropdownItem | undefined) => {
+        setSelectedCategory(item || null);
+        setSelectedContest(null);
+        setUserContestParticipationsPage(1);
+    }, []);
+
+    const handleCategoryClear = useCallback(() => {
+        setSelectedCategory(null);
+        setUserContestParticipationsPage(1);
+    }, []);
+
+    const renderContestCard = useCallback((contest: IIndexContestsType) => (
+        <ContestCard
+          key={contest.id}
+          contest={contest}
+          showPoints={userIsProfileOwner || internalUser.isAdmin}
+        />
+        , [ internalUser, userIsProfileOwner ],
+    );
+
+    if (areContestParticipationsLoading || areAllContestsLoading) {
         return (
-            <div>
-                { ((!isLoggedIn || isLoggedIn && !userIsProfileOwner && !internalUser.canAccessAdministration) &&
-                    userContestParticipations !== undefined &&
-                    !isNilOrEmpty(userContestParticipations.items) &&
-                    <h2 className={styles.participationsHeading}>Participated In:</h2>)}
-                <List
-                  values={userContestParticipations!.items}
-                  itemFunc={renderContestCard}
-                  orientation={Orientation.vertical}
-                  fullWidth
-                />
-                {!isEmpty(userContestParticipations) && userContestParticipations.pagesCount > 1 && 
-                    <PaginationControls
-                      count={userContestParticipations.pagesCount}
-                      page={userContestParticipations.pageNumber}
-                      onChange={onPageChange}
-                    />
-                }
-                { isChosenInToggle &&
-                    userContestParticipations !== undefined &&
-                    isNilOrEmpty(userContestParticipations.items) &&
-
-                        <div className={concatClassNames(
-                            styles.noParticipationsText,
-                            getColorClassName(themeColors.textColor),
-                        )}
-                        >
-                            No participations in contests yet
-                        </div>
-                    }
+            <div style={{ ...flexCenterObjectStyles, minHeight: '200px' }}>
+                <SpinningLoader />
             </div>
         );
     }