Merge pull request #196 from Bux42/staging

[Release] Implement react-query on front-end

app/components/common/CleanButton.tsx

@@ -116,8 +116,8 @@ const CleanButton = ({
     disabled,
     darkenOnHover,
     className,
-}: CleanButtonProps) => {
-    const button = useMemo(() => (
+}: CleanButtonProps): JSX.Element => {
+    const buttonComponent: React.ReactNode = useMemo(() => (
         <ButtonComponent
             onClick={onClick}
             style={style}
@@ -137,16 +137,28 @@ const CleanButton = ({
     ), [children, onClick, style, backColor, textColor, type, url, size,
         openInNewTab, hoverAnimation, disabled, darkenOnHover, className]);
 
+    // If there is no URL, return button directly
+    if (!url) {
+        return (
+            <>
+                {buttonComponent}
+            </>
+        );
+    }
+
+    // Handle URL return types depending on whether it should opened in a new tab
     return (
         <>
-            {url && openInNewTab ? (
+            {openInNewTab ? (
                 <Link href={url}>
                     <a target="_blank" rel="noreferrer" href={url}>
-                        {button}
+                        {buttonComponent}
                     </a>
                 </Link>
             ) : (
-                button
+                <Link href={url}>
+                    {buttonComponent}
+                </Link>
             )}
         </>
     );

app/components/landing/MapReplayTableWithSearchbar.tsx

@@ -1,41 +1,39 @@
-import React, { useEffect, useState } from 'react';
-import { useRouter } from 'next/router';
-import {
-    Input, Table, Tooltip, Button, Spin,
-} from 'antd';
+import React, { useMemo, useState } from 'react';
+import { Input, Table, Tag } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 
-import { PieChartOutlined, ReloadOutlined } from '@ant-design/icons';
+import { PieChartOutlined, SyncOutlined } from '@ant-design/icons';
 import Link from 'next/link';
-import { AvailableMap, getAvailableMaps } from '../../lib/api/apiRequests';
+import { useQueryClient } from '@tanstack/react-query';
 import { timeDifference } from '../../lib/utils/time';
 import CleanButton from '../common/CleanButton';
+import { useAllMaps } from '../../lib/api/reactQuery/hooks/query/maps';
+import { MapWithStats } from '../../lib/api/requests/maps';
+import QUERY_KEYS from '../../lib/api/reactQuery/queryKeys';
 
-interface ExtendedAvailableMap extends AvailableMap {
+interface ExtendedAvailableMap extends MapWithStats {
     key: string;
 }
 
 const MapReplayTableWithSearchbar = () => {
-    const router = useRouter();
+    const queryClient = useQueryClient();
 
-    const [maps, setMaps] = useState<ExtendedAvailableMap[]>([]);
-    const [loadingReplays, setLoadingReplays] = useState<boolean>(true);
     const [searchString, setSearchString] = useState<string>('');
 
-    const fetchMaps = async () => {
-        setLoadingReplays(true);
-        const fetchedMaps = await getAvailableMaps(searchString);
-        const preparedMaps = fetchedMaps.map((fetchedMap) => ({
-            ...fetchedMap,
-            key: fetchedMap.mapUId,
-        }));
-        setMaps(preparedMaps);
-        setLoadingReplays(false);
-    };
+    const { data: maps, isLoading, isFetching } = useAllMaps(searchString);
 
-    useEffect(() => {
-        fetchMaps();
-    }, [searchString]);
+    const totalReplays = useMemo(() => {
+        if (!maps) return 0;
+        return maps.reduce((acc, map) => acc + map.count, 0);
+    }, [maps]);
+
+    const tableData: ExtendedAvailableMap[] | undefined = useMemo(
+        () => maps?.map((map) => ({
+            ...map,
+            key: map.mapUId,
+        })),
+        [maps],
+    );
 
     const columns: ColumnsType<ExtendedAvailableMap> = [
         {
@@ -94,59 +92,69 @@ const MapReplayTableWithSearchbar = () => {
         {
             title: 'Replays',
             dataIndex: 'count',
+            render: (count) => count.toLocaleString(),
             sorter: (a, b) => a.count - b.count,
             width: '15%',
         },
     ];
 
     return (
-        <Spin spinning={loadingReplays}>
-            <div className="flex flex-col gap-4">
-                <div className="flex flex-row items-center gap-4">
-                    <Input.Search
-                        className="rounded-md"
-                        placeholder="Search"
-                        size="large"
-                        onSearch={(searchVal) => setSearchString(searchVal)}
-                        style={{ borderRadius: '10px' }}
-                    />
-                    <Tooltip title="Refresh">
-                        <Button
-                            shape="circle"
-                            className="mr-2"
-                            icon={<ReloadOutlined />}
-                            onClick={fetchMaps}
-                        />
-                    </Tooltip>
-                </div>
-
-                <Table
-                    className="overflow-x-auto select-none"
-                    dataSource={maps}
-                    columns={columns}
-                    onHeaderRow={() => ({
-                        style: {
-                            backgroundColor: '#1F1F1F',
-                            fontSize: '1rem',
-                        },
-                    })}
-                    onRow={() => ({
-                        style: {
-                            backgroundColor: '#1F1F1F',
-                        },
-                    })}
-                    showSorterTooltip={false}
-                    size="small"
-                    pagination={{
-                        pageSize: 10,
-                        hideOnSinglePage: true,
-                        position: ['bottomCenter'],
-                        showSizeChanger: false,
-                        size: 'small',
+        <div className="flex flex-col gap-4">
+            <div className="flex flex-col sm:flex-row place-self-center justify-center items-center gap-4 w-full">
+                <Input.Search
+                    className="w-full sm:w-1/2 bg-gray-800"
+                    placeholder="Map name"
+                    size="large"
+                    allowClear
+                    loading={isFetching}
+                    onSearch={(value) => {
+                        setSearchString(value);
+                        queryClient.invalidateQueries(QUERY_KEYS.allMaps(value));
                     }}
                 />
+
+                <div className="flex flex-row w-full sm:w-1/2 justify-center sm:justify-start">
+                    <Tag
+                        className="text-base rounded"
+                        icon={isLoading ? <SyncOutlined spin /> : null}
+                    >
+                        {`${(maps ? maps.length : 0).toLocaleString()} maps`}
+                    </Tag>
+                    <Tag
+                        className="text-base rounded"
+                        icon={isLoading ? <SyncOutlined spin /> : null}
+                    >
+                        {`${totalReplays.toLocaleString()} replays`}
+                    </Tag>
+                </div>
             </div>
-        </Spin>
+
+            <Table
+                className="overflow-x-auto select-none"
+                columns={columns}
+                dataSource={tableData}
+                loading={isLoading}
+                onHeaderRow={() => ({
+                    style: {
+                        backgroundColor: '#1F1F1F',
+                        fontSize: '1rem',
+                    },
+                })}
+                onRow={() => ({
+                    style: {
+                        backgroundColor: '#1F1F1F',
+                    },
+                })}
+                size="small"
+                pagination={{
+                    pageSize: 10,
+                    hideOnSinglePage: true,
+                    position: ['bottomCenter'],
+                    showSizeChanger: false,
+                    size: 'small',
+                }}
+            />
+        </div>
     );
 };
 

app/components/mapStats/common/MapStatsTypeSwitcher.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { MapInfo } from '../../../lib/api/apiRequests';
+import { MapInfo } from '../../../lib/api/requests/maps';
 import { AuthContext } from '../../../lib/contexts/AuthContext';
 import { cleanTMFormatting } from '../../../lib/utils/formatting';
 import CleanButton from '../../common/CleanButton';
@@ -21,7 +21,7 @@ interface MapStatsTypeSwitcherProps {
     mapData: MapInfo;
     toggleMapStatsType: () => void;
 }
-export const MapStatsTypeSwitcher = ({ mapStatsType, mapData, toggleMapStatsType } : MapStatsTypeSwitcherProps) => {
+export const MapStatsTypeSwitcher = ({ mapStatsType, mapData, toggleMapStatsType }: MapStatsTypeSwitcherProps) => {
     const { user, startAuthFlow } = useContext(AuthContext);
 
     return (

app/components/mapStats/statistics/AggregateMapStats.tsx

@@ -1,10 +1,10 @@
 import { Col, Row, Statistic } from 'antd';
 import React from 'react';
-import { FileResponse } from '../../../lib/api/apiRequests';
+import { ReplayInfo } from '../../../lib/api/requests/replays';
 import { msToTime } from '../../../lib/utils/time';
 
 interface AggregateMapStatsProps {
-    replays: FileResponse[];
+    replays: ReplayInfo[];
 }
 const AggregateMapStats = ({ replays }: AggregateMapStatsProps) => {
     const totalRecordedTime = replays.reduce((a, b) => a + b.endRaceTime, 0);

app/components/mapStats/statistics/FastestTimeProgression.tsx

@@ -6,38 +6,38 @@ import Highcharts, { some } from 'highcharts';
 import HighchartsReact from 'highcharts-react-official';
 import dayjs from 'dayjs';
 import { getRaceTimeStr, timeDifference } from '../../../lib/utils/time';
-import { FileResponse } from '../../../lib/api/apiRequests';
 import calculateFastestTimeProgressions from '../../../lib/utils/fastestTimeProgression';
 import PlayerLink from '../../common/PlayerLink';
-import { UserInfo } from '../../../lib/api/auth';
+import { ReplayInfo } from '../../../lib/api/requests/replays';
+import { AuthUserInfo } from '../../../lib/api/requests/auth';
 
 interface ChartDataPoint {
     x: number;
     y: number;
-    replay: FileResponse;
+    replay: ReplayInfo;
 }
 
-const replaysToDataPoints = (replays_: FileResponse[]): ChartDataPoint[] => replays_.map((replay) => ({
+const replaysToDataPoints = (replays_: ReplayInfo[]): ChartDataPoint[] => replays_.map((replay) => ({
     x: replay.date,
     y: replay.endRaceTime,
     replay,
 }));
 
-const replaysToProgressionDataPoints = (replays: FileResponse[]) => {
+const replaysToProgressionDataPoints = (replays: ReplayInfo[]) => {
     const progression = calculateFastestTimeProgressions(replays);
     const dataPoints = replaysToDataPoints(progression);
     return dataPoints;
 };
 
-const filterReplaysByUser = (loggedInUser: UserInfo, inputReplays: FileResponse[]) => {
+const filterReplaysByUser = (loggedInUser: AuthUserInfo, inputReplays: ReplayInfo[]) => {
     const filtered = inputReplays.filter((r) => r.webId === loggedInUser.accountId);
     return filtered;
 };
 
 interface FastestTimeProgressionProps {
-    replays: FileResponse[];
+    replays: ReplayInfo[];
     onlyShowUserProgression: boolean;
-    userToShowProgression?: UserInfo;
+    userToShowProgression?: AuthUserInfo;
 }
 const FastestTimeProgression = ({
     replays,
@@ -178,6 +178,7 @@ const FastestTimeProgression = ({
             },
             series: {
                 turboThreshold: 0,
+                animation: false,
             },
         },
         series: [{

app/components/mapStats/statistics/ReplayTimesHistogram.tsx

@@ -5,14 +5,14 @@ import Highcharts from 'highcharts';
 import HighchartsReact from 'highcharts-react-official';
 import bellcurve from 'highcharts/modules/histogram-bellcurve';
 import { getRaceTimeStr } from '../../../lib/utils/time';
-import { FileResponse } from '../../../lib/api/apiRequests';
+import { ReplayInfo } from '../../../lib/api/requests/replays';
 
 if (typeof Highcharts === 'object') {
     bellcurve(Highcharts);
 }
 
 interface ReplayTimesHistogramProps {
-    replays: FileResponse[];
+    replays: ReplayInfo[];
     binSize: number;
 }
 const ReplayTimesHistogram = ({ replays, binSize }: ReplayTimesHistogramProps) => {
@@ -131,11 +131,13 @@ const ReplayTimesHistogram = ({ replays, binSize }: ReplayTimesHistogramProps) =
                 groupPadding: 0,
                 shadow: false,
             },
+            series: {
+                animation: false,
+            },
         },
         series: [{
             name: 'Finish Times',
             data: histogramData,
-
         }],
     };
 

app/components/maps/ChartsDrawer.tsx

@@ -8,7 +8,7 @@ import Highcharts, { AxisSetExtremesEventObject } from 'highcharts/highstock';
 import HighchartsReact from 'highcharts-react-official';
 import { CheckboxChangeEvent } from 'antd/lib/checkbox';
 import { CaretUpOutlined, LineChartOutlined } from '@ant-design/icons';
-import { ReplayData } from '../../lib/api/apiRequests';
+import { ReplayData } from '../../lib/api/requests/replays';
 import { SettingsContext } from '../../lib/contexts/SettingsContext';
 import { getRaceTimeStr } from '../../lib/utils/time';
 import { ReplayDataPoint } from '../../lib/replays/replayData';

app/components/maps/LoadedReplays.tsx

@@ -1,17 +1,17 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import {
-    CaretLeftOutlined, CaretRightOutlined, EyeOutlined,
+    CaretRightOutlined, EyeOutlined,
 } from '@ant-design/icons';
 import {
-    Button, Drawer, Row, Col, Radio, RadioChangeEvent, List, Divider,
+    Drawer, Row, Col, Radio, RadioChangeEvent, List, Divider,
 } from 'antd';
 import React, {
     useContext, useMemo, useState,
 } from 'react';
 import * as ReactColor from 'react-color';
 import * as THREE from 'three';
-import { ReplayData } from '../../lib/api/apiRequests';
+import { ReplayData } from '../../lib/api/requests/replays';
 import { CameraMode, SettingsContext } from '../../lib/contexts/SettingsContext';
 import GlobalTimeLineInfos from '../../lib/singletons/timeLineInfos';
 import { addPlural, getRaceTimeStr } from '../../lib/utils/time';