implement UI for mypagescraper import

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

@@ -244,10 +244,11 @@ function ImportInfoDisplayer({ game }: { game: Game }) {
 	} else if (game === "wacca") {
 		Content.unshift(
 			<ImportInfoCard
-				name="WACCA Site Importer"
-				href="wacca-site"
-				desc="Scrape your scores from the WACCA website."
-				key="WACCA Site Importer"
+				name="WaccaMyPageScraper"
+				href="wacca-mypage-scraper"
+				desc="Use your data from WaccaMyPageScraper."
+				moreInfo="If you saved your play data from MyPage using XezolesS's WaccaMyPageScraper project, you can import it here."
+				key="WACCA MyPage Scraper"
 			/>
 		);
 	} else if (game === "museca") {
@@ -454,6 +455,10 @@ function ImportTypeInfoCard({
 					key="PLI .csv"
 				/>
 			);
+		case "file/mypagescraper-records-csv":
+		case "file/mypagescraper-player-csv":
+			// We only expect people to use these import types once ever, so don't recommend them.
+			return <></>;
 		default:
 			// For some reason, the webpack tschecker thinks
 			// that the above switch isn't exhaustive. However, it is.

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

@@ -0,0 +1,101 @@
+import ImportFileInfo from "components/imports/ImportFileInfo";
+import useSetSubheader from "components/layout/header/useSetSubheader";
+import Divider from "components/util/Divider";
+import ExternalLink from "components/util/ExternalLink";
+import React from "react";
+
+function RecordsParseFunction(data: string) {
+	if (
+		!data.startsWith(
+			"music_id,music_title,music_artist,music_genre,music_levels,music_play_counts,music_scores,music_achieves\n"
+		)
+	) {
+		throw new Error(
+			"The first line of the CSV doesn't have the right headers. Are you sure this is the records.csv file?"
+		);
+	}
+
+	return {
+		// not sure why we need this since we're expected to throw if it's invalid?
+		valid: true,
+		info: {
+			// Note: Most other file import types provide a number of scores. It
+			// doesn't make senes for this import type since we always expect
+			// all the songs to be present - the only indicator for an unplayed
+			// song/chart is that the score is 0, so to provide this would would
+			// need to basically parse the whole file anyway.
+		},
+	};
+}
+
+function PlayerParseFunction(data: string) {
+	if (
+		!data.startsWith(
+			"player_name,player_level,player_rate,player_stage,player_play_count,player_play_count_versus,player_play_count_coop,player_total_rp_earned,player_total_rp_spent\n"
+		)
+	) {
+		throw new Error(
+			"The first line of the CSV doesn't have the right headers. Are you sure this is the player.csv file?"
+		);
+	}
+
+	return {
+		valid: true,
+		info: {},
+	};
+}
+export default function WACCASiteImportPage() {
+	useSetSubheader(["Import Scores", "WaccaMyPageScraperImporter"]);
+
+	return (
+		<div>
+			<h1 className="text-center mb-4">What Is WaccaMyPageScraper?</h1>
+			<div>
+				<ExternalLink href="https://github.com/XezolesS/WaccaMyPageScraper/">
+					WaccaMyPageScraper
+				</ExternalLink>{" "}
+				is a scraper for the official WACCA MyPage service site. Since the site is offline
+				as of September 1, 2022, this is only useful if you have used the scraper before
+				then.
+			</div>
+			<h1 className="text-center my-4">What can I import?</h1>
+			<div>
+				Based on the data saved from the scraper, your <b>PBs</b> and{" "}
+				<b>maximum Stage Up rank</b> can be imported. WaccaMyPageScraper doesn't record any
+				recent plays, so if you have played a chart multiple times, only the PB will be
+				imported.
+			</div>
+			<h1 className="text-center my-4">How does it work?</h1>
+			<div>
+				Within the WaccaMyPageScraper directory there is a "data" directory, which contains
+				two files we care about:
+				<ul>
+					<li>
+						<b>records/records.csv</b> contains all your personal bests.
+					</li>
+					<li>
+						<b>player/player.csv</b> contains your player info, including your Stage Up
+						rank.
+					</li>
+				</ul>
+				Both of these can be imported below in the corresponding sections.
+			</div>
+			<Divider />
+			<h1 className="text-center my-4">Import PBs</h1>
+			<ImportFileInfo
+				acceptMime="text/csv"
+				importType="file/mypagescraper-records-csv"
+				name="data/records/records.csv"
+				parseFunction={RecordsParseFunction}
+			/>
+			<Divider />
+			<h1 className="text-center my-4">Import Stage Up</h1>
+			<ImportFileInfo
+				acceptMime="text/csv"
+				importType="file/mypagescraper-player-csv"
+				name="data/player/player.csv"
+				parseFunction={PlayerParseFunction}
+			/>
+		</div>
+	);
+}

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

@@ -1,26 +0,0 @@
-import useSetSubheader from "components/layout/header/useSetSubheader";
-import Divider from "components/util/Divider";
-import ExternalLink from "components/util/ExternalLink";
-import { TachiConfig } from "lib/config";
-import React from "react";
-
-export default function WACCASiteImportPage() {
-	useSetSubheader(["Import Scores", "WACCA Site Importer"]);
-
-	return (
-		<div>
-			<h1 className="text-center mb-4">What is the WACCA site importer?</h1>
-			<div>
-				The WACCA Site Importer is a script that will scrape your profile on the WACCA
-				website and import it to {TachiConfig.name}.
-			</div>
-			<Divider />
-			<h1 className="text-center my-4">Setup Instructions</h1>
-			Instructions are available on{" "}
-			<ExternalLink href="https://github.com/cg505/kt-wacca-site-importer">
-				the GitHub repository
-			</ExternalLink>
-			.
-		</div>
-	);
-}

client/src/app/routes/ImportRoutes.tsx

@@ -15,7 +15,7 @@ import SilentHookPage from "app/pages/dashboard/import/SilentHookPage";
 import SSSXMLPage from "app/pages/dashboard/import/SSSXMLPage";
 import USCDBPage from "app/pages/dashboard/import/USCDBPage";
 import USCIRPage from "app/pages/dashboard/import/USCIRPage";
-import WACCASiteImportPage from "app/pages/dashboard/import/WACCASiteImportPage";
+import WACCAMyPageScraperPage from "app/pages/dashboard/import/WACCAMyPageScraperPage";
 import KAIIntegrationPage from "components/imports/KAIIntegrationPage";
 import Divider from "components/util/Divider";
 import { UserContext } from "context/UserContext";
@@ -183,8 +183,8 @@ export default function ImportRoutes() {
 								<CGIntegrationPage cgType="prod" game="museca" />
 							</Route>
 
-							<Route exact path="/import/wacca-site">
-								<WACCASiteImportPage />
+							<Route exact path="/dashboard/import/wacca-mypage-scraper">
+								<WACCAMyPageScraperPage />
 							</Route>
 						</>
 					)}

server/src/server/router/api/v1/users/_userID/router.ts

@@ -395,6 +395,9 @@ router.get("/recent-imports", async (req, res) => {
 				userID: user.id,
 				timeFinished: { $gt: Date.now() - ONE_MONTH },
 				userIntent: true,
+				importType: {
+					$nin: ["file/mypagescraper-records-csv", "file/mypagescraper-player-csv"],
+				},
 			},
 		},
 		{