diff --git a/client/src/app/pages/LoginPage.tsx b/client/src/app/pages/LoginPage.tsx index 65e3e8095..cba98f06e 100644 --- a/client/src/app/pages/LoginPage.tsx +++ b/client/src/app/pages/LoginPage.tsx @@ -8,6 +8,7 @@ import { Link, useHistory } from "react-router-dom"; import { UserContext } from "context/UserContext"; import { PublicUserDocument } from "tachi-common"; import toast from "react-hot-toast"; +import { TachiConfig } from "lib/config"; export default function LoginPage() { const [err, setErr] = useState(""); @@ -63,7 +64,7 @@ export default function LoginPage() {
Kamaitachi
diff --git a/client/src/app/pages/dashboard/DashboardPage.tsx b/client/src/app/pages/dashboard/DashboardPage.tsx index 38806bf59..5cb14a7e5 100644 --- a/client/src/app/pages/dashboard/DashboardPage.tsx +++ b/client/src/app/pages/dashboard/DashboardPage.tsx @@ -1,13 +1,8 @@ -import { SubheaderContext } from "context/SubheaderContext"; -import React, { useContext, useEffect } from "react"; +import useSetSubheader from "components/layout/header/useSetSubheader"; +import React from "react"; export function DashboardPage() { - const { setBreadcrumbs, setTitle } = useContext(SubheaderContext); - - useEffect(() => { - setBreadcrumbs([]); - setTitle("Dashboard"); - }, []); + useSetSubheader("Dashboard"); return <>To be honest, I have no idea what is going to go here just yet.; } diff --git a/client/src/app/pages/dashboard/games/GamesPage.tsx b/client/src/app/pages/dashboard/games/GamesPage.tsx new file mode 100644 index 000000000..37d191864 --- /dev/null +++ b/client/src/app/pages/dashboard/games/GamesPage.tsx @@ -0,0 +1,5 @@ +import React from "react"; + +export default function GamesPage() { + return
; +} diff --git a/client/src/app/pages/dashboard/games/_game/PlaytypeSelect.tsx b/client/src/app/pages/dashboard/games/_game/PlaytypeSelect.tsx new file mode 100644 index 000000000..d3ac02888 --- /dev/null +++ b/client/src/app/pages/dashboard/games/_game/PlaytypeSelect.tsx @@ -0,0 +1,10 @@ +import React from "react"; +import { Game, GetGameConfig } from "tachi-common"; + +export default function PlaytypeSelect({game}: {game:Game}) { + const gameConfig = GetGameConfig(game); + + + + return
; +} diff --git a/client/src/app/pages/dashboard/misc/CreditsPage.tsx b/client/src/app/pages/dashboard/misc/CreditsPage.tsx index 0c5200fa6..1060e2456 100644 --- a/client/src/app/pages/dashboard/misc/CreditsPage.tsx +++ b/client/src/app/pages/dashboard/misc/CreditsPage.tsx @@ -1,16 +1,12 @@ import ExternalLink from "components/util/ExternalLink"; -import React, { useContext, useEffect, useState } from "react"; +import React, { useState } from "react"; import { Contributors } from "util/constants/contributors"; import { RFA } from "util/misc"; -import { UpdateSubheader } from "util/subheader"; -import { SubheaderContext } from "context/SubheaderContext"; +import { TachiConfig } from "lib/config"; +import useSetSubheader from "components/layout/header/useSetSubheader"; export default function CreditsPage() { - const { setTitle, setBreadcrumbs } = useContext(SubheaderContext); - - useEffect(() => { - UpdateSubheader(["Credits"], setTitle, setBreadcrumbs); - }, []); + useSetSubheader("Credits"); const [alt, setAlt] = useState(false); @@ -23,12 +19,12 @@ export default function CreditsPage() {

{a( <> - Kamaitachi has been the work of many people, and many more contributors. - None of this would be possible without these people. + {TachiConfig.name} has been the work of many people, and many more + contributors. None of this would be possible without these people. , "Funding for this program was made possible by by by by by-", - "Kamaitachi actually just appeared here one day, and we're not sure how.", - "Actually, we just ran npm install kamaitachi.", + `${TachiConfig.name} actually just appeared here one day, and we're not sure how.`, + `Actually, we just ran npm install ${TachiConfig.name}.`, "To be honest, we had a surplus of monkeys and typewriters." )}

diff --git a/client/src/app/pages/dashboard/users/UserPage.tsx b/client/src/app/pages/dashboard/users/UserPage.tsx index 3c11e4df0..4afe55199 100644 --- a/client/src/app/pages/dashboard/users/UserPage.tsx +++ b/client/src/app/pages/dashboard/users/UserPage.tsx @@ -3,17 +3,15 @@ import { BackgroundContext } from "context/BackgroundContext"; import React, { useContext, useEffect } from "react"; import { PublicUserDocument } from "tachi-common"; import { ToAPIURL } from "util/api"; -import { UpdateSubheader } from "util/subheader"; -import { SubheaderContext } from "context/SubheaderContext"; import Divider from "components/util/Divider"; +import useSetSubheader from "components/layout/header/useSetSubheader"; export default function UserPage({ reqUser }: { reqUser: PublicUserDocument }) { - const { setBreadcrumbs, setTitle } = useContext(SubheaderContext); const { setBackground } = useContext(BackgroundContext); - useEffect(() => { - UpdateSubheader(["Users", `${reqUser.username}'s Profile`], setTitle, setBreadcrumbs); + useSetSubheader(["Users", `${reqUser.username}'s Profile`], [reqUser]); + useEffect(() => { setBackground(ToAPIURL(`/users/${reqUser.id}/banner`)); return () => { diff --git a/client/src/app/pages/dashboard/users/games/game/playtype/PBsPage.tsx b/client/src/app/pages/dashboard/users/games/_game/_playtype/PBsPage.tsx similarity index 82% rename from client/src/app/pages/dashboard/users/games/game/playtype/PBsPage.tsx rename to client/src/app/pages/dashboard/users/games/_game/_playtype/PBsPage.tsx index c220286fc..80b4d0383 100644 --- a/client/src/app/pages/dashboard/users/games/game/playtype/PBsPage.tsx +++ b/client/src/app/pages/dashboard/users/games/_game/_playtype/PBsPage.tsx @@ -1,7 +1,7 @@ +import useSetSubheader from "components/layout/header/useSetSubheader"; import IIDXPBTable from "components/tables/IIDXPBTable"; import Loading from "components/util/Loading"; import { BackgroundContext } from "context/BackgroundContext"; -import { SubheaderContext } from "context/SubheaderContext"; import React, { useContext, useEffect, useState } from "react"; import { useQuery } from "react-query"; import { @@ -9,14 +9,11 @@ import { ChartDocument, SongDocument, PublicUserDocument, - Playtypes, - Game, GetGameConfig, } from "tachi-common"; import { GamePT } from "types/react"; import { PBDataset } from "types/tables"; import { APIFetchV1, ToAPIURL } from "util/api"; -import { UpdateSubheader } from "util/subheader"; export default function PBsPage({ reqUser, @@ -26,19 +23,17 @@ export default function PBsPage({ reqUser: PublicUserDocument; } & GamePT) { const [dataset, setDataset] = useState>([]); - const { setTitle, setBreadcrumbs } = useContext(SubheaderContext); const { setBackground } = useContext(BackgroundContext); const gameConfig = GetGameConfig(game); - useEffect(() => { - UpdateSubheader( - ["Users", reqUser.username, "Games", gameConfig.name, playtype], - setTitle, - setBreadcrumbs, - `${reqUser.username}'s ${gameConfig.name} ${playtype} Profile` - ); + useSetSubheader( + ["Users", reqUser.username, "Games", gameConfig.name, playtype], + [reqUser], + `${reqUser.username}'s ${gameConfig.name} ${playtype} Profile` + ); + useEffect(() => { setBackground(ToAPIURL(`/users/${reqUser.username}/banner`)); return () => { diff --git a/client/src/app/routes/DashboardRoutes.tsx b/client/src/app/routes/DashboardRoutes.tsx index ff15ad5f6..a9d6ecdff 100644 --- a/client/src/app/routes/DashboardRoutes.tsx +++ b/client/src/app/routes/DashboardRoutes.tsx @@ -4,6 +4,7 @@ import { Route, Switch } from "react-router-dom"; import { Layout } from "_metronic/layout"; import { DashboardPage } from "../pages/dashboard/DashboardPage"; import CreditsPage from "../pages/dashboard/misc/CreditsPage"; +import GameRoutes from "./GameRoutes"; import UserRoutes from "./UserRoutes"; export default function DashboardRoutes() { @@ -22,6 +23,10 @@ export default function DashboardRoutes() { + + + + diff --git a/client/src/app/routes/GameRoutes.tsx b/client/src/app/routes/GameRoutes.tsx new file mode 100644 index 000000000..be22f0316 --- /dev/null +++ b/client/src/app/routes/GameRoutes.tsx @@ -0,0 +1,52 @@ +import PlaytypeSelect from "app/pages/dashboard/games/_game/PlaytypeSelect"; +import { ErrorPage } from "app/pages/ErrorPage"; +import React from "react"; +import { Redirect, Route, Switch, useParams } from "react-router-dom"; +import { Game, GetGameConfig } from "tachi-common"; +import { IsSupportedGame, IsSupportedPlaytype } from "util/asserts"; + +export default function GameRoutes() { + const { game } = useParams<{ game: string }>(); + + if (!IsSupportedGame(game)) { + return ; + } + + const gameConfig = GetGameConfig(game); + + return ( + + + {gameConfig.validPlaytypes.length === 1 ? ( + + ) : ( + + )} + + + + + + + + + + + ); +} + +function GamePlaytypeRoutes({ game }: { game: Game }) { + const { playtype } = useParams<{ playtype: string }>(); + + if (!IsSupportedPlaytype(game, playtype)) { + return ; + } + + return ( + + + {game} {playtype} + + + ); +} diff --git a/client/src/app/routes/UserRoutes.tsx b/client/src/app/routes/UserRoutes.tsx index 41ccd9252..c21270a8c 100644 --- a/client/src/app/routes/UserRoutes.tsx +++ b/client/src/app/routes/UserRoutes.tsx @@ -5,7 +5,7 @@ import { Route, Switch, useParams } from "react-router-dom"; import { Game, PublicUserDocument } from "tachi-common"; import { APIFetchV1 } from "util/api"; import { IsSupportedGame, IsSupportedPlaytype } from "util/asserts"; -import PBsPage from "../pages/dashboard/users/games/game/playtype/PBsPage"; +import PBsPage from "../pages/dashboard/users/games/_game/_playtype/PBsPage"; import UserPage from "../pages/dashboard/users/UserPage"; export default function UserRoutes() { @@ -49,7 +49,7 @@ function UserGameRoutes({ reqUser }: { reqUser: PublicUserDocument }) { const { game } = useParams<{ game: string }>(); if (!IsSupportedGame(game)) { - return ; + return ; } return ( @@ -65,7 +65,7 @@ function UserGamePlaytypeRoutes({ reqUser, game }: { reqUser: PublicUserDocument const { playtype } = useParams<{ playtype: string }>(); if (!IsSupportedPlaytype(game, playtype)) { - return ; + return ; } return ( diff --git a/client/src/components/layout/header/HeaderMenu.tsx b/client/src/components/layout/header/HeaderMenu.tsx index 8ed4dec2b..7ecc146c3 100644 --- a/client/src/components/layout/header/HeaderMenu.tsx +++ b/client/src/components/layout/header/HeaderMenu.tsx @@ -35,11 +35,11 @@ export function HeaderMenu() { } useEffect(() => { - if (data) { + if (!isLoading) { KTLayoutHeader.init("kt_header", "kt_header_mobile"); KTLayoutHeaderMenu.init("kt_header_menu", "kt_header_menu_wrapper"); } - }, [data]); + }, [isLoading]); if (isLoading) { return ; diff --git a/client/src/components/layout/header/SearchBar.tsx b/client/src/components/layout/header/SearchBar.tsx index 62877c376..721c80615 100644 --- a/client/src/components/layout/header/SearchBar.tsx +++ b/client/src/components/layout/header/SearchBar.tsx @@ -66,7 +66,9 @@ function SearchResults({ results }: { results: SearchReturns }) { {results.songs.map(s => ( {s.title} diff --git a/client/src/components/layout/header/useSetSubheader.tsx b/client/src/components/layout/header/useSetSubheader.tsx new file mode 100644 index 000000000..069e940c6 --- /dev/null +++ b/client/src/components/layout/header/useSetSubheader.tsx @@ -0,0 +1,25 @@ +import { SubheaderContext } from "context/SubheaderContext"; +import { useContext, useEffect } from "react"; +import { UpdateSubheader } from "util/subheader"; + +export default function useSetSubheader( + content: string[] | string, + // eslint-disable-next-line default-param-last + deps: unknown[] = [], + overrideTitle?: string +) { + const { setTitle, setBreadcrumbs } = useContext(SubheaderContext); + + useEffect(() => { + UpdateSubheader( + Array.isArray(content) ? content : [content], + setTitle, + setBreadcrumbs, + overrideTitle + ); + + return () => { + UpdateSubheader([], setTitle, setBreadcrumbs); + }; + }, deps); +}