Add user deletability as a thing.

client/package.json

@@ -82,7 +82,7 @@
 		"resolve": "1.12.0",
 		"resolve-url-loader": "3.1.0",
 		"socicon": "3.0.5",
-		"tachi-common": "0.3.10"
+		"tachi-common": "0.3.18"
 	},
 	"devDependencies": {
 		"@types/humanize-duration": "3.25.1",

client/pnpm-lock.yaml

@@ -84,7 +84,7 @@ specifiers:
   serve: 11.2.0
   socicon: 3.0.5
   style-loader: 1.0.0
-  tachi-common: 0.3.10
+  tachi-common: 0.3.18
   terser-webpack-plugin: 1.4.1
   ts-pnp: 1.1.4
   typescript: 4.3.5
@@ -156,7 +156,7 @@ dependencies:
   resolve: 1.12.0
   resolve-url-loader: 3.1.0
   socicon: 3.0.5
-  tachi-common: 0.3.10
+  tachi-common: 0.3.18
 
 devDependencies:
   '@types/humanize-duration': 3.25.1
@@ -11241,8 +11241,8 @@ packages:
       strip-ansi: 6.0.0
     dev: true
 
-  /tachi-common/0.3.10:
-    resolution: {integrity: sha512-OiEnRz8b7ix+m/W5bFwaN+0fgupmbYHKhsn4/IaFb8f2rCEHY/i3t8TGuYAx212Uo2hOsDSX5/yxVOrgcxZ1AA==}
+  /tachi-common/0.3.18:
+    resolution: {integrity: sha512-Qom4IbPtLv83+6mW2OU3+thdqZIGrcUJaH9vhTWN6FoFTw60l0FjtBGsB7343qwsuK7l9JqcEaEJ/psKTDZb1w==}
     dependencies:
       monk: 7.3.4
     transitivePeerDependencies:

client/src/app/pages/dashboard/users/UserSettingsPage.tsx

@@ -172,6 +172,7 @@ function PreferencesForm({ reqUser }: { reqUser: PublicUserDocument }) {
 			invisible: settings?.preferences.invisible ?? false,
 			contentiousContent: settings?.preferences.contentiousContent ?? false,
 			advancedMode: settings?.preferences.advancedMode ?? false,
+			deletableScores: settings?.preferences.deletableScores ?? false,
 		},
 		onSubmit: async values => {
 			const res = await APIFetchV1<UserSettings>(
@@ -224,6 +225,19 @@ function PreferencesForm({ reqUser }: { reqUser: PublicUserDocument }) {
 				/>
 				<Form.Text>Hide your last seen status.</Form.Text>
 			</Form.Group> */}
+			<Form.Group>
+				<Form.Check
+					type="checkbox"
+					id="deletableScores"
+					checked={formik.values.deletableScores}
+					onChange={formik.handleChange}
+					label="Deletable Scores"
+				/>
+				<Form.Text>
+					Enables the option to delete scores. Turn this off if the thought of deleting a
+					score gives you anxiety.
+				</Form.Text>
+			</Form.Group>
 			<Form.Group>
 				<Form.Check
 					type="checkbox"

client/src/components/tables/dropdowns/GenericScoreDropdown.tsx

@@ -22,6 +22,7 @@ import useApiQuery from "components/util/query/useApiQuery";
 import HasDevModeOn from "components/util/HasDevModeOn";
 import PBCompare from "./components/PBCompare";
 import { UserSettingsContext } from "context/UserSettingsContext";
+import ManageScore from "./components/ManageScore";
 
 export interface ScoreState {
 	highlight: boolean;
@@ -46,7 +47,7 @@ export default function GenericScoreDropdown<I extends IDStrings = IDStrings>({
 	user: PublicUserDocument;
 	chart: ChartDocument;
 	scoreState: ScoreState;
-	defaultView?: "vsPB" | "moreInfo" | "history" | "debug";
+	defaultView?: "vsPB" | "moreInfo" | "history" | "debug" | "manage";
 	thisScore: ScoreDocument;
 	DocComponent?: (props: {
 		score: ScoreDocument<I> | PBScoreDocument<I>;
@@ -55,6 +56,8 @@ export default function GenericScoreDropdown<I extends IDStrings = IDStrings>({
 	}) => JSX.Element;
 } & GamePT) {
 	const [view, setView] = useState(defaultView);
+	const { user: currentUser } = useContext(UserContext);
+	const { settings } = useContext(UserSettingsContext);
 
 	const { isLoading, error, data } = useApiQuery<UGPTChartPBComposition<I>>(
 		`/users/${user.id}/games/${game}/${playtype}/pbs/${chart.chartID}?getComposition=true`
@@ -94,6 +97,8 @@ export default function GenericScoreDropdown<I extends IDStrings = IDStrings>({
 		body = <DocComponent score={thisScore as any} scoreState={scoreState} pbData={data} />;
 	} else if (view === "vsPB") {
 		body = <PBCompare data={data} DocComponent={DocComponent} scoreState={scoreState} />;
+	} else if (view === "manage") {
+		body = <ManageScore score={thisScore} />;
 	}
 
 	return (
@@ -112,6 +117,12 @@ export default function GenericScoreDropdown<I extends IDStrings = IDStrings>({
 						<Icon type="history" />
 						Play History
 					</SelectButton>
+					{currentUser?.id === user.id && settings?.preferences.deletableScores && (
+						<SelectButton setValue={setView} value={view} id="manage">
+							<Icon type="trash" />
+							Manage Score
+						</SelectButton>
+					)}
 					<HasDevModeOn>
 						<SelectButton setValue={setView} value={view} id="debug">
 							<Icon type="bug" />

client/src/components/tables/dropdowns/components/ManageScore.tsx

@@ -0,0 +1,45 @@
+import React, { useMemo, useReducer, useState } from "react";
+import { ScoreDocument } from "tachi-common";
+import { APIFetchV1 } from "util/api";
+import { DelayedPageReload } from "util/misc";
+
+export default function ManageScore({ score }: { score: ScoreDocument }) {
+	const [warn, upgWarn] = useReducer(r => r + 1, 0);
+	const message = useMemo(() => {
+		if (warn === 0) {
+			return "Delete Score (Requires Further Confirmation)";
+		} else if (warn === 1) {
+			return "Are you absolutely sure? This score will be gone. Permanently.";
+		} else if (warn === 2) {
+			return "I'm serious. You will lose this score. It will be gone. Are you REALLY sure you want to do this?";
+		} else if (warn === 3) {
+			return "OK. Click me one last time, then.";
+		}
+
+		return "lol unknown state";
+	}, [warn]);
+
+	return (
+		<div className="d-flex w-100 justify-content-center">
+			<div
+				className="btn btn-danger"
+				onClick={() => {
+					if (warn < 3) {
+						upgWarn();
+					} else {
+						APIFetchV1(
+							`/scores/${score.scoreID}`,
+							{
+								method: "DELETE",
+							},
+							true,
+							true
+						).then(() => DelayedPageReload());
+					}
+				}}
+			>
+				{message}
+			</div>
+		</div>
+	);
+}