Subheader refactor

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() {
 				<div className="text-center mb-10 mb-lg-10">
 					<img
 						src={toAbsoluteUrl("/media/logos/logo-wordmark.png")}
-						alt="Kamaitachi"
+						alt={TachiConfig.name}
 						width="256px"
 					/>
 				</div>

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.</>;
 }

client/src/app/pages/dashboard/games/GamesPage.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function GamesPage() {
+	return <div></div>;
+}

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 <div></div>;
+}

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() {
 			<p>
 				{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."
 				)}
 			</p>

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 () => {

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<PBDataset<"iidx:SP">>([]);
-	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 () => {

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() {
 					<UserRoutes />
 				</Route>
 
+				<Route path="/dashboard/games/:game">
+					<GameRoutes />
+				</Route>
+
 				<Route path="*">
 					<ErrorPage statusCode={404} />
 				</Route>

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 <ErrorPage statusCode={404} customMessage="This game is not supported." />;
+	}
+
+	const gameConfig = GetGameConfig(game);
+
+	return (
+		<Switch>
+			<Route exact path="/dashboard/games/:game">
+				{gameConfig.validPlaytypes.length === 1 ? (
+					<Redirect to={`/dashboard/games/${game}/${gameConfig.validPlaytypes[0]}`} />
+				) : (
+					<PlaytypeSelect game={game} />
+				)}
+			</Route>
+
+			<Route exact path="/dashboard/games/:game/:playtype">
+				<GamePlaytypeRoutes game={game} />
+			</Route>
+
+			<Route path="*">
+				<ErrorPage statusCode={400} />
+			</Route>
+		</Switch>
+	);
+}
+
+function GamePlaytypeRoutes({ game }: { game: Game }) {
+	const { playtype } = useParams<{ playtype: string }>();
+
+	if (!IsSupportedPlaytype(game, playtype)) {
+		return <ErrorPage statusCode={400} customMessage="This playtype is not supported." />;
+	}
+
+	return (
+		<Switch>
+			<Route exact path="/dashboard/games/:game/:playtype">
+				{game} {playtype}
+			</Route>
+		</Switch>
+	);
+}

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 <ErrorPage statusCode={404} customMessage="This game is not supported." />;
+		return <ErrorPage statusCode={400} customMessage="This game is not supported." />;
 	}
 
 	return (
@@ -65,7 +65,7 @@ function UserGamePlaytypeRoutes({ reqUser, game }: { reqUser: PublicUserDocument
 	const { playtype } = useParams<{ playtype: string }>();
 
 	if (!IsSupportedPlaytype(game, playtype)) {
-		return <ErrorPage statusCode={404} customMessage="This game is not supported." />;
+		return <ErrorPage statusCode={400} customMessage="This playtype is not supported." />;
 	}
 
 	return (

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 <Loading />;

client/src/components/layout/header/SearchBar.tsx

@@ -66,7 +66,9 @@ function SearchResults({ results }: { results: SearchReturns }) {
 						{results.songs.map(s => (
 							<SearchResult
 								key={s.id + s.game}
-								link={`/dashboard/games/${s.game}/${s.id}`}
+								link={`/dashboard/games/${s.game}/${
+									GetGameConfig(s.game).defaultPlaytype
+								}/songs/${s.id}`}
 								tabIndex={0}
 							>
 								<strong>{s.title}</strong>

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);
+}