Merge pull request online-go#2753 from GreenAsJade/prevent_report_dupes

Prevent report dupes
GreenAsJade · Jul 13, 2024 · a4dd725 · a4dd725
2 parents 740f4c1 + 1ef2e0a
commit a4dd725
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 42 deletions.
diff --git a/src/components/AutoTranslate/AutoTranslate.styl b/src/components/AutoTranslate/AutoTranslate.styl
@@ -11,4 +11,11 @@
         text-align: right;
         themed background-color shade5
     }
+    .placeholder {
+        themed color fg;
+        font-style: italic;
+        font-size: smaller;
+        themed background-color bg
+        padding: 0.5em;
+    }
 }
diff --git a/src/components/AutoTranslate/AutoTranslate.tsx b/src/components/AutoTranslate/AutoTranslate.tsx
@@ -25,6 +25,7 @@ interface AutoTranslateProps {
     className?: string;
     markdown?: boolean;
     source_language?: string;
+    placeholder?: string;
 }
 
 interface Translation {
@@ -39,7 +40,15 @@ export function AutoTranslate({
     source_language,
     className,
     markdown,
+    placeholder,
 }: AutoTranslateProps): JSX.Element | null {
+    let showing_placeholder = false;
+
+    if (!source && placeholder) {
+        showing_placeholder = true;
+        source = placeholder;
+        markdown = false; // this is needed to ensure placeholder is formatted correctly
+    }
     const need_translation =
         source !== "" && (!source_language || source_language.toLowerCase() !== current_language);
 
@@ -76,14 +85,16 @@ export function AutoTranslate({
     // If we have a translation, then we show it in the primary formatting, followed by the original.
     // If we don't have a translation, then we show the original in primary formatting.
     return (
-        <div className={`AutoTranslate ${className || ""}`}>
+        <div className={`AutoTranslate ${className || ""} `}>
             {show_translation ? (
                 <>
-                    {markdown ? (
-                        <Markdown source={translation.target_text} />
-                    ) : (
-                        translation.target_text
-                    )}
+                    <div className={`primary ${showing_placeholder ? "placeholder" : ""}`}>
+                        {markdown ? (
+                            <Markdown source={translation.target_text} />
+                        ) : (
+                            translation.target_text
+                        )}
+                    </div>
                     <div className="language-map">
                         {pgettext(
                             "This label is placed on the original text of something that has been translated",
@@ -97,7 +108,9 @@ export function AutoTranslate({
             ) : markdown ? (
                 <Markdown source={source} />
             ) : (
-                source
+                <div className={`primary ${showing_placeholder ? "placeholder" : ""}`}>
+                    {source}
+                </div>
             )}
         </div>
     );

diff --git a/src/components/IncidentReportTracker/IncidentReportCard.tsx b/src/components/IncidentReportTracker/IncidentReportCard.tsx
@@ -103,7 +103,11 @@ export function IncidentReportCard({
             </div>
             {isEditing ? (
                 <div className="edit-notes">
-                    <textarea value={reporterNote} onChange={handleNoteChange} />
+                    <textarea
+                        value={reporterNote}
+                        onChange={handleNoteChange}
+                        placeholder={_("Provide details here")}
+                    />
                     <div className="edit-buttons">
                         <button className="primary" onClick={handleNoteSubmit}>
                             {_("Update")}
@@ -112,33 +116,33 @@ export function IncidentReportCard({
                     </div>
                 </div>
             ) : (
-                report.reporter_note && (
-                    <div className="note-container">
-                        <h4 className="notes">
-                            {report.reporter_note_translation ? (
-                                <>
-                                    {report.reporter_note_translation.source_text}
-                                    {report.reporter_note_translation.target_language !==
-                                        report.reporter_note_translation.source_language && (
-                                        <>
-                                            <div className="source-to-target-languages">
-                                                {report.reporter_note_translation.source_language}{" "}
-                                                =&gt;
-                                                {report.reporter_note_translation.target_language}
-                                            </div>
-                                            <div className="translated">
-                                                {report.reporter_note_translation.target_text}
-                                            </div>
-                                        </>
-                                    )}
-                                </>
-                            ) : (
-                                <AutoTranslate source={report.reporter_note} />
-                            )}
-                        </h4>
-                        <i className="fa fa-pencil-square-o" onClick={() => setIsEditing(true)}></i>
-                    </div>
-                )
+                <div className="note-container">
+                    <h4 className="notes">
+                        {report.reporter_note_translation?.target_text ? (
+                            <>
+                                {report.reporter_note_translation.source_text}
+                                {report.reporter_note_translation.target_language !==
+                                    report.reporter_note_translation.source_language && (
+                                    <>
+                                        <div className="source-to-target-languages">
+                                            {report.reporter_note_translation.source_language} =&gt;
+                                            {report.reporter_note_translation.target_language}
+                                        </div>
+                                        <div className="translated">
+                                            {report.reporter_note_translation.target_text}
+                                        </div>
+                                    </>
+                                )}
+                            </>
+                        ) : (
+                            <AutoTranslate
+                                source={report.reporter_note}
+                                placeholder="Provide details here"
+                            />
+                        )}
+                    </h4>
+                    <i className="fa fa-pencil-square-o" onClick={() => setIsEditing(true)}></i>
+                </div>
             )}
 
             {report.system_note && <h4 className="notes">{report.system_note}</h4>}

diff --git a/src/components/IncidentReportTracker/IncidentReportTracker.tsx b/src/components/IncidentReportTracker/IncidentReportTracker.tsx
@@ -34,7 +34,10 @@ import { IncidentReportCard } from "./IncidentReportCard";
 export function IncidentReportTracker(): JSX.Element | null {
     const user = useUser();
     const navigate = useNavigate();
-    const [show_incident_list, setShowIncidentList] = React.useState(false);
+    const [show_incident_list, setShowIncidentList] = React.useState(
+        data.get("ui-state.show_incident_list"),
+    );
+
     const [normal_ct, setNormalCt] = React.useState(0);
     const [prefer_hidden] = usePreference("hide-incident-reports");
     const [report_quota] = usePreference("moderator.report-quota");
@@ -53,7 +56,7 @@ export function IncidentReportTracker(): JSX.Element | null {
             signalUsed("incident-report-indicator");
             navigate("/reports-center/");
         } else {
-            setShowIncidentList(!show_incident_list);
+            data.set("ui-state.show_incident_list", !show_incident_list);
         }
     }
 
@@ -166,6 +169,8 @@ export function IncidentReportTracker(): JSX.Element | null {
         report_manager.on("active-count", updateCt);
         report_manager.on("update", refresh);
 
+        data.watch("ui-state.show_incident_list", setShowIncidentList);
+
         return () => {
             report_manager.off("incident-report", onReport);
             report_manager.off("active-count", updateCt);

diff --git a/src/components/Report/Report.tsx b/src/components/Report/Report.tsx
@@ -16,6 +16,7 @@
  */
 
 import * as React from "react";
+import * as data from "data";
 import * as ReactDOM from "react-dom/client";
 import * as player_cache from "player_cache";
 import { Card } from "material";
@@ -454,9 +455,6 @@ export function openReport(report: ReportProperties): void {
     const review_id = parseInt(
         document.location.pathname.match(/(review|demo\/view)\/([0-9]+)/)?.[2] || "0",
     );
-    container.className = "Report-container-container";
-    document.body.append(container);
-    const root = ReactDOM.createRoot(container);
 
     if (game_id && !("reported_game_id" in report)) {
         report["reported_game_id"] = game_id;
@@ -465,6 +463,17 @@ export function openReport(report: ReportProperties): void {
         report["reported_review_id"] = review_id;
     }
 
+    // Don't open the report creation dialog if they have already reported this game.
+    // Instead, open the incident report list to show them their current report, which they can edit.
+    // (arguably we might let them report the "other" player as well as the already reported one,
+    //  but that's a bit more complicated and not worth the effort for now.)
+    const already_reported = data.get("reported-games") as number[];
+    console.log("already_reported", already_reported, report.reported_game_id);
+    if (report.reported_game_id && already_reported.includes(report.reported_game_id)) {
+        data.set("ui-state.show_incident_list", true);
+        return;
+    }
+
     function onClose() {
         //ReactDOM.unmountComponentAtNode(container);
         root.unmount();
@@ -474,7 +483,9 @@ export function openReport(report: ReportProperties): void {
         }
     }
 
-    console.log("Preparing report: ", report);
+    container.className = "Report-container-container";
+    document.body.append(container);
+    const root = ReactDOM.createRoot(container);
 
     root.render(
         <React.StrictMode>

diff --git a/src/lib/data_schema.ts b/src/lib/data_schema.ts
@@ -268,6 +268,8 @@ export interface DataSchema
     "help-system-enabled": boolean;
     "rdh-system-state": string;
     "ignored-reports": { [report_id: number]: number /* id -> expiration */ };
+    "reported-games": number[];
+    "ui-state.show_incident_list": boolean;
 
     // A challenge that the user accepted, but we didn't tell the server yet, because
     // we are busy getting them logged in first.

diff --git a/src/lib/report_manager.tsx b/src/lib/report_manager.tsx
@@ -51,6 +51,7 @@ let post_connect_notification_squelch = true;
 class ReportManager extends EventEmitter<Events> {
     active_incident_reports: { [id: string]: Report } = {};
     sorted_active_incident_reports: Report[] = [];
+    this_user_reported_games: number[] = [];
 
     constructor() {
         super();
@@ -114,10 +115,17 @@ class ReportManager extends EventEmitter<Events> {
             (user.moderator_powers && report.escalated)
         ) {
             delete this.active_incident_reports[report.id];
+            this.this_user_reported_games = this.this_user_reported_games.filter(
+                (game_id) => game_id !== report.reported_game,
+            );
         } else {
             this.active_incident_reports[report.id] = report;
+            if (report.reported_game && report.reporting_user?.id === user.id) {
+                this.this_user_reported_games.push(report.reported_game);
+            }
         }
-
+        data.set("reported-games", this.this_user_reported_games);
+        console.log("ReportManager: reported games", this.this_user_reported_games);
         this.emit("incident-report", report);
         this.update();
     }