Merge branch 'main' into fix-search-labels

# Conflicts: # src/components/search/autocompletion.tsx
therungg · Jul 10, 2024 · 3110296 · 3110296
2 parents bd8756b + ac463ac
commit 3110296
Show file tree

Hide file tree

Showing 35 changed files with 496 additions and 358 deletions.
diff --git a/app/(footer)/contact/contact.tsx b/app/(footer)/contact/contact.tsx
@@ -162,7 +162,7 @@ export const Contact = () => {
                                     })
                                 }
                             >
-                                <option value="">Select a category</option>
+                                <option>Select a category</option>
                                 <option value="bug">
                                     I want to report a bug
                                 </option>

diff --git a/app/homepage.tsx → app/home/homepage.tsx b/app/homepage.tsx → app/home/homepage.tsx
@@ -1,24 +1,14 @@
-"use client";
-
 import Link from "next/link";
-import { Button, Col, Row } from "react-bootstrap";
 import { PatreonBunnySvgWithoutLink } from "~app/patron/patreon-info";
-import { Run } from "~src/common/types";
-import { Game } from "~app/games/games.types";
+import React from "react";
+import { Col, Row, Button } from "react-bootstrap";
 import { DataHolder } from "~src/components/frontpage/data-holder";
 import { SkeletonPersonalBests } from "~src/components/skeleton/index/skeleton-personal-bests";
 import { PopularGames } from "~src/components/game/popular-games";
 import { SkeletonPopularGames } from "~src/components/skeleton/index/skeleton-popular-games";
-import React from "react";
 import { useTranslations } from "next-intl";
 
-export default function Homepage({
-    runs,
-    gamestats,
-}: {
-    runs: Run[];
-    gamestats: Game[];
-}) {
+export const Homepage = () => {
     const t = useTranslations("homepage");
 
     return (
@@ -57,32 +47,22 @@ export default function Homepage({
                 </div>
             </div>
 
-            <DataSection runs={runs} gamestats={gamestats} />
-        </div>
-    );
-}
-
-const DataSection = ({
-    runs,
-    gamestats,
-}: {
-    runs: Run[];
-    gamestats: Game[];
-}) => {
-    return (
-        <div>
-            <Row className="text-center">
-                <Col xl={6} lg={12} className="mt-4">
-                    <h2>Recent Personal Bests</h2>
-                    {runs && <DataHolder runs={runs} />}
-                    {!runs && <SkeletonPersonalBests />}
-                </Col>
-                <Col xl={6} lg={12} className="mt-4">
-                    <h2>Popular Games</h2>
-                    {gamestats && <PopularGames gamestats={gamestats} />}
-                    {!gamestats && <SkeletonPopularGames />}
-                </Col>
-            </Row>
+            <div>
+                <Row className="text-center">
+                    <Col xl={6} className="mt-4">
+                        <h2>Recent Personal Bests</h2>
+                        <React.Suspense fallback={<SkeletonPersonalBests />}>
+                            <DataHolder />
+                        </React.Suspense>
+                    </Col>
+                    <Col xl={6} className="mt-4">
+                        <h2>Popular Games</h2>
+                        <React.Suspense fallback={<SkeletonPopularGames />}>
+                            <PopularGames />
+                        </React.Suspense>
+                    </Col>
+                </Row>
+            </div>
         </div>
     );
 };
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -23,12 +23,14 @@ export default async function RootLayout({
 }: {
     children: React.ReactNode;
 }) {
-    const session = await getSession();
+    const [
+        session,
+        locale,
+        // Providing all messages to the client
+        // side is the easiest way to get started
+        messages,
+    ] = await Promise.all([getSession(), getLocale(), getMessages()]);
     const sessionError = session.sessionError;
-    const locale = await getLocale();
-    // Providing all messages to the client
-    // side is the easiest way to get started
-    const messages = await getMessages();
     return (
         <html lang={locale} suppressHydrationWarning>
             <body>

diff --git a/app/marathon/show-marathon.tsx b/app/marathon/show-marathon.tsx
@@ -128,7 +128,7 @@ const BasePage: React.FunctionComponent<BasePageProps> = ({
                             setSelectedUser(e.target.value);
                         }}
                     >
-                        <option key="">Select a user</option>
+                        <option>Select a user</option>
                         {Object.keys(updatedLiveDataMap).map((key) => {
                             return <option key={key}>{key}</option>;
                         })}

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,18 +1,8 @@
 import React from "react";
-import { getPersonalBestRuns } from "~src/lib/get-personal-best-runs";
-import { getTabulatedGameStatsPopular } from "~src/components/game/get-tabulated-game-stats";
-import Homepage from "~app/homepage";
+import { Homepage } from "~app/home/homepage";
 
 export const revalidate = 60;
 
 export default async function Page() {
-    const runsPromise = getPersonalBestRuns();
-    const gamestatsPromise = getTabulatedGameStatsPopular();
-
-    const [runs, gamestats] = await Promise.all([
-        runsPromise,
-        gamestatsPromise,
-    ]);
-
-    return <Homepage runs={runs} gamestats={gamestats} />;
+    return <Homepage />;
 }
diff --git a/app/races/[race]/edit/edit-race.tsx b/app/races/[race]/edit/edit-race.tsx
@@ -12,6 +12,7 @@ import {
     BreadcrumbItem,
 } from "~src/components/breadcrumbs/breadcrumb";
 import { UnderlineTooltip } from "~src/components/tooltip";
+import React from "react";
 
 export const EditRace = ({ race, user }: { race: Race; user: User }) => {
     const [state, formAction] = useFormState(editRace, { message: "" });
@@ -85,6 +86,21 @@ export const EditRace = ({ race, user }: { race: Race; user: User }) => {
                                 defaultValue={race.forceStream}
                             />
                         </Form.Group>
+                        <Form.Group controlId="password">
+                            <Form.Label>
+                                <UnderlineTooltip
+                                    title="Password"
+                                    content="Sets a password. Participants need to enter this password in order to join the race."
+                                    element="Password"
+                                />
+                            </Form.Label>
+                            <Form.Control
+                                name="password"
+                                type="text"
+                                placeholder="Enter a Race Password"
+                                required={false}
+                            />
+                        </Form.Group>
                         <div className="text-end">
                             <SubmitButton />
                         </div>

diff --git a/app/races/race-faq.tsx b/app/races/race-faq.tsx
@@ -37,11 +37,11 @@ export const RaceFaq = () => {
 
 const RaceFaqBody = () => {
     return (
-        <div className="">
+        <div>
             <p className="flex-center fs-4">
                 This is an attempt to modernize speedrun racing.
             </p>
-            <p className="">
+            <p>
                 It has a modern ELO-based rating system, live tracking of the
                 race with live-standings as the race happens with full LiveSplit
                 Integration. It is extremely easy to start, join and participate

diff --git a/app/races/races.types.ts b/app/races/races.types.ts
@@ -140,6 +140,7 @@ export interface EditRaceInput {
     description?: string;
     customName?: string;
     forceStream?: string;
+    password?: string;
 }
 
 export type WebsocketRaceMessageType =

diff --git a/app/races/stats/[game]/category-stats-list.tsx b/app/races/stats/[game]/category-stats-list.tsx
@@ -34,7 +34,7 @@ export const CategoryStatsListDisplay = ({
     );
 
     return (
-        <div className="">
+        <div>
             <PaginationSearch text="Search for category" />
             <div className="mt-2 mb-4">
                 {pagination.data.map((gameStats) => {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -35,6 +35,7 @@
     "cookies-next": "^4.1.0",
     "country-flag-icons": "^1.5.9",
     "d3": "^7.8.5",
+    "fuse.js": "^7.0.0",
     "globby": "^14.0.0",
     "joi": "^17.11.0",
     "jquery": "^3.7.1",

diff --git a/src/actions/races/edit-race.action.ts b/src/actions/races/edit-race.action.ts
@@ -13,6 +13,7 @@ export async function editRace(_prevState: unknown, raceInput: FormData) {
         description: raceInput.get("description") as string,
         customName: raceInput.get("customName") as string,
         forceStream: raceInput.get("forceStream") as string,
+        password: raceInput.get("password") as string,
     };
 
     const raceId = raceInput.get("raceId") as string;
@@ -54,6 +55,7 @@ export const validateInput = (
         customName: Joi.string().min(0).max(40).optional(),
         description: Joi.string().min(0).max(1000).optional(),
         forceStream: Joi.string().min(0).max(100).optional(),
+        password: Joi.string().min(0).max(40).optional(),
     });
 
     return raceSchema.validate(input);

diff --git a/src/components/css/Search.module.scss b/src/components/css/Search.module.scss
diff --git a/src/components/frontpage/data-holder.tsx b/src/components/frontpage/data-holder.tsx
@@ -1,11 +1,11 @@
-"use client";
-
 import { Col, Row, Table } from "react-bootstrap";
 import { RunPreview } from "./run-preview";
 import React from "react";
 import { type Run } from "../../common/types";
+import { getPersonalBestRuns } from "~src/lib/get-personal-best-runs";
 
-export const DataHolder = ({ runs }: { runs: Run[] }) => {
+export const DataHolder = async () => {
+    const runs = await getPersonalBestRuns();
     return (
         <Row>
             <Col>

diff --git a/src/components/game/get-tabulated-game-stats.ts b/src/components/game/get-tabulated-game-stats.ts
@@ -1,4 +1,4 @@
-import { PaginatedGameResult } from "~app/games/games.types";
+import { Game, PaginatedGameResult } from "~app/games/games.types";
 import { getApiKey } from "~src/actions/api-key.action";
 
 const fetchData = async (url: string) => {
@@ -43,7 +43,7 @@ export const getTabulatedGameStats = async () => {
     return fetchData(url);
 };
 
-export const getTabulatedGameStatsPopular = async () => {
+export const getTabulatedGameStatsPopular = async (): Promise<Game[]> => {
     const url = `${process.env.NEXT_PUBLIC_DATA_URL}/games/stats/`;
 
     return fetchData(url);

diff --git a/src/components/game/popular-games.tsx b/src/components/game/popular-games.tsx
@@ -1,17 +1,12 @@
-"use client";
-
-import { Game } from "~app/games/games.types";
 import { Row, Table } from "react-bootstrap";
 import { GameLink, UserLink } from "../links/links";
 import { DurationToFormatted } from "../util/datetime";
 import React from "react";
 import { GameImage } from "~src/components/image/gameimage";
+import { getTabulatedGameStatsPopular } from "./get-tabulated-game-stats";
 
-interface PopularGamesProps {
-    gamestats: Game[];
-}
-
-export const PopularGames: React.FC<PopularGamesProps> = ({ gamestats }) => {
+export const PopularGames = async () => {
+    const gamestats = await getTabulatedGameStatsPopular();
     return (
         <div>
             <Table striped bordered hover responsive>

diff --git a/src/components/links/links.tsx b/src/components/links/links.tsx
@@ -1,3 +1,4 @@
+"use client";
 import Link from "next/link";
 import { ReactNode } from "react";
 import { usePatreons } from "../patreon/use-patreons";

diff --git a/src/components/patreon/patreon-name.tsx b/src/components/patreon/patreon-name.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { useEffect, useState } from "react";
 import patreonStyles from "./patreon-styles";
 import { PatreonBunnySvgWithoutLink } from "~app/patron/patreon-info";

diff --git a/src/components/patreon/use-patreons.ts b/src/components/patreon/use-patreons.ts
@@ -1,3 +1,4 @@
+"use client";
 import useSWR from "swr";
 import { fetcher } from "../../utils/fetcher";
 import { PatronList } from "../../../types/patreon.types";