Updated reports center view to show daily goal instead of how many to…

…tal reports there are
online-go · Sep 13, 2023 · bf0ed26 · bf0ed26
1 parent 783d77d
commit bf0ed26
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 10 deletions.
diff --git a/src/components/IncidentReportTracker/IncidentReportTracker.styl b/src/components/IncidentReportTracker/IncidentReportTracker.styl
@@ -26,14 +26,14 @@
     themed color shade3
 
     .fa-exclamation-triangle.active {
-        themed color reject
+        themed color primary
     }
     &:hover {
         .fa-exclamation-triangle {
             themed color shade2
         }
         .fa-exclamation-triangle.active {
-            themed-lighten color reject 30%
+            themed-lighten color primary 30%
         }
     }
     .count {

diff --git a/src/components/IncidentReportTracker/IncidentReportTracker.tsx b/src/components/IncidentReportTracker/IncidentReportTracker.tsx
@@ -18,6 +18,7 @@
 import * as React from "react";
 import * as moment from "moment";
 import * as preferences from "preferences";
+import * as data from "data";
 import { Link, useNavigate } from "react-router-dom";
 import { alert } from "swal_config";
 import { _, pgettext } from "translate";
@@ -28,7 +29,7 @@ import { ignore, errorAlerter } from "misc";
 import { openReportedConversationModal } from "ReportedConversationModal";
 import { AutoTranslate } from "AutoTranslate";
 import { report_categories } from "Report";
-import { Report, report_manager } from "report_manager";
+import { Report, report_manager, DAILY_REPORT_GOAL } from "report_manager";
 import { useRefresh, useUser } from "hooks";
 
 export function IncidentReportTracker(): JSX.Element {
@@ -122,14 +123,30 @@ export function IncidentReportTracker(): JSX.Element {
             }
         };
 
+        function updateCt(count: number) {
+            const user = data.get("user");
+            if (user.is_moderator || user.moderator_powers > 0) {
+                const handled_today = user.reports_handled_today || 0;
+                setNormalCt(Math.max(0, Math.min(count, DAILY_REPORT_GOAL - handled_today)));
+            } else {
+                setNormalCt(count);
+            }
+        }
+
+        function updateUser() {
+            updateCt(report_manager.getAvailableReports().length);
+        }
+
+        data.watch("user", updateUser);
         report_manager.on("incident-report", onReport);
-        report_manager.on("active-count", setNormalCt);
+        report_manager.on("active-count", updateCt);
         report_manager.on("update", refresh);
 
         return () => {
             report_manager.off("incident-report", onReport);
-            report_manager.off("active-count", setNormalCt);
+            report_manager.off("active-count", updateCt);
             report_manager.off("update", refresh);
+            data.unwatch("user", updateUser);
         };
     }, []);
 

diff --git a/src/lib/report_manager.ts b/src/lib/report_manager.ts
@@ -31,6 +31,8 @@ import { emitNotification } from "Notifications";
 import { browserHistory } from "ogsHistory";
 import { get, post } from "requests";
 
+export const DAILY_REPORT_GOAL = 4;
+
 export interface Report {
     id: number;
     created: string;
@@ -318,6 +320,15 @@ class ReportManager extends EventEmitter<Events> {
         this.updateIncidentReport(res);
         return res;
     }
+
+    public getHandledTodayCount(): number {
+        return data.get("user").reports_handled_today || 0;
+    }
+    public getReportsLeftUntilGoal(): number {
+        const count = this.getAvailableReports().length;
+        const handled_today = this.getHandledTodayCount();
+        return Math.max(0, Math.min(count, DAILY_REPORT_GOAL - handled_today));
+    }
 }
 
 function compare_reports(a: Report, b: Report): number {

diff --git a/src/models/user.d.ts b/src/models/user.d.ts
@@ -72,6 +72,7 @@ declare namespace rest_api {
         email_validated: boolean | string; // VerifyEmail sets this to a Date string
         is_announcer: boolean;
         has_active_warning_flag?: boolean;
+        reports_handled_today?: number;
     }
 
     type AccountLinks = {

diff --git a/src/views/ReportsCenter/ReportsCenter.styl b/src/views/ReportsCenter/ReportsCenter.styl
@@ -140,6 +140,13 @@ reports_center_content_width=56rem
         }
     }
 
+    .progress {
+        margin-bottom: 0.5rem;
+    }
+
+    .progress-bar.empty {
+        themed background-color shade5
+    }
 }
 
 #ReportsCenterContainer {

diff --git a/src/views/ReportsCenter/ReportsCenter.tsx b/src/views/ReportsCenter/ReportsCenter.tsx
@@ -19,7 +19,7 @@ import * as React from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { useUser, useRefresh } from "hooks";
 import { report_categories, ReportDescription } from "Report";
-import { report_manager } from "report_manager";
+import { report_manager, DAILY_REPORT_GOAL } from "report_manager";
 import Select from "react-select";
 import { _ } from "translate";
 import { ViewReport } from "./ViewReport";
@@ -143,6 +143,35 @@ export function ReportsCenter(): JSX.Element {
                 {_("Reports Center")}
             </h2>
 
+            <div className="progress" style={{ minWidth: "10rem" }}>
+                <div
+                    className="progress-bar primary"
+                    style={{
+                        width: `${
+                            (Math.min(DAILY_REPORT_GOAL, report_manager.getHandledTodayCount()) /
+                                DAILY_REPORT_GOAL) *
+                            100
+                        }%`,
+                    }}
+                >
+                    {report_manager.getReportsLeftUntilGoal() <= 0
+                        ? "All done, thank you!"
+                        : report_manager.getHandledTodayCount() || ""}
+                </div>
+                <div
+                    className="progress-bar empty"
+                    style={{
+                        width: `${
+                            (report_manager.getReportsLeftUntilGoal() / DAILY_REPORT_GOAL) * 100
+                        }%`,
+                    }}
+                >
+                    {report_manager.getHandledTodayCount() === 0
+                        ? "Daily report goal: " + DAILY_REPORT_GOAL
+                        : ""}
+                </div>
+            </div>
+
             <div id="ReportsCenterContainer">
                 <div id="ReportsCenterCategoryList">
                     {visible_categories.map((report_type, idx) => {
@@ -160,9 +189,11 @@ export function ReportsCenter(): JSX.Element {
                                     onClick={() => setCategory(report_type.type)}
                                 >
                                     <span className="title">{report_type.title}</span>
+                                    {/*
                                     <span className={"count " + (ct > 0 ? "active" : "")}>
                                         {ct > 0 ? `(${ct})` : ""}
                                     </span>
+                                    */}
                                 </div>
                             );
                         }
@@ -218,17 +249,21 @@ export function ReportsCenter(): JSX.Element {
                                 }
                             >
                                 {data.title}{" "}
-                                {"type" in data && counts[data.type] > 0
+                                {/*
+                                "type" in data && counts[data.type] > 0
                                     ? `(${counts[data.type] || 0})`
-                                    : ""}
+                                    : ""
+                                */}
                             </div>
                         ),
                         SingleValue: ({ innerProps, data }) => (
                             <span {...innerProps} className="reports-center-category">
                                 {data.title}{" "}
-                                {"type" in data && counts[data.type] > 0
+                                {/*
+                                "type" in data && counts[data.type] > 0
                                     ? `(${counts[data.type] || 0})`
-                                    : ""}
+                                    : ""
+                                */}
                             </span>
                         ),
                         ValueContainer: ({ children }) => (