fix: improve import page

client/src/app/pages/dashboard/import/ImportPage.tsx

@@ -9,7 +9,7 @@ import Loading from "components/util/Loading";
 import useApiQuery from "components/util/query/useApiQuery";
 import { UserContext } from "context/UserContext";
 import { TachiConfig } from "lib/config";
-import React, { useContext, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { Row } from "react-bootstrap";
 import { Link } from "react-router-dom";
 import {
@@ -27,6 +27,14 @@ export default function ImportPage({ user }: { user: UserDocument }) {
 
 	const [game, setGame] = useState<Game | null>(null);
 
+	const queryGame = new URLSearchParams(window.location.search).get("game");
+
+	useEffect(() => {
+		if (queryGame) {
+			setGame(queryGame as Game);
+		}
+	}, [queryGame]);
+
 	return (
 		<div>
 			<div>
@@ -50,6 +58,7 @@ export default function ImportPage({ user }: { user: UserDocument }) {
 			<select
 				className="form-control"
 				onChange={(e) => setGame(e.target.value === "" ? null : (e.target.value as Game))}
+				value={game}
 			>
 				<option value="">Please select a game.</option>
 				{TachiConfig.games.map((e) => (

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

@@ -1,6 +1,17 @@
 import React from "react";
+import { FormatGame, GetGameConfig } from "tachi-common";
+import { TachiConfig } from "lib/config";
 import MenuLink from "./MenuLink";
+import MenuDropdown from "./MenuDropdown";
 
 export default function ImportScoresLink() {
-	return <MenuLink to="/import" name="Import Scores"></MenuLink>;
+	const links = [];
+
+	for (const game of TachiConfig.games) {
+		const gameConfig = GetGameConfig(game);
+
+		links.push(<MenuLink key={game} name={gameConfig.name} to={`/import?game=${game}`} />);
+	}
+
+	return <MenuDropdown name="Import Scores">{links}</MenuDropdown>;
 }