diff --git a/src/components/IncidentReportTracker/IncidentReportTracker.styl b/src/components/IncidentReportTracker/IncidentReportTracker.styl index 85be655dc9..c9b4e7edc3 100644 --- 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 index 99513d2c69..800d32eb87 100644 --- 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 index 91226a4181..b031734627 100644 --- 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 { 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 index 51b931190e..ca0747ccbd 100644 --- 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 index 2f81a1620d..38bbcc4b22 100644 --- 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 index fe1769c7c4..bd315c2e61 100644 --- 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")} +
+
+ {report_manager.getReportsLeftUntilGoal() <= 0 + ? "All done, thank you!" + : report_manager.getHandledTodayCount() || ""} +
+
+ {report_manager.getHandledTodayCount() === 0 + ? "Daily report goal: " + DAILY_REPORT_GOAL + : ""} +
+
+
{visible_categories.map((report_type, idx) => { @@ -160,9 +189,11 @@ export function ReportsCenter(): JSX.Element { onClick={() => setCategory(report_type.type)} > {report_type.title} + {/* 0 ? "active" : "")}> {ct > 0 ? `(${ct})` : ""} + */}
); } @@ -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})` - : ""} + : "" + */}
), SingleValue: ({ innerProps, data }) => ( {data.title}{" "} - {"type" in data && counts[data.type] > 0 + {/* + "type" in data && counts[data.type] > 0 ? `(${counts[data.type] || 0})` - : ""} + : "" + */} ), ValueContainer: ({ children }) => (