index.jsx (2753B)
1 /* 2 GoToSocial 3 Copyright (C) GoToSocial Authors admin@gotosocial.org 4 SPDX-License-Identifier: AGPL-3.0-or-later 5 6 This program is free software: you can redistribute it and/or modify 7 it under the terms of the GNU Affero General Public License as published by 8 the Free Software Foundation, either version 3 of the License, or 9 (at your option) any later version. 10 11 This program is distributed in the hope that it will be useful, 12 but WITHOUT ANY WARRANTY; without even the implied warranty of 13 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 14 GNU Affero General Public License for more details. 15 16 You should have received a copy of the GNU Affero General Public License 17 along with this program. If not, see <http://www.gnu.org/licenses/>. 18 */ 19 20 "use strict"; 21 22 const React = require("react"); 23 const { Link, Switch, Route } = require("wouter"); 24 25 const query = require("../../lib/query"); 26 27 const FormWithData = require("../../lib/form/form-with-data"); 28 29 const ReportDetail = require("./detail"); 30 const Username = require("./username"); 31 const { useBaseUrl } = require("../../lib/navigation/util"); 32 33 module.exports = function Reports({ baseUrl }) { 34 return ( 35 <div className="reports"> 36 <Switch> 37 <Route path={`${baseUrl}/:reportId`}> 38 <ReportDetail /> 39 </Route> 40 <ReportOverview /> 41 </Switch> 42 </div> 43 ); 44 }; 45 46 function ReportOverview({ }) { 47 return ( 48 <> 49 <h1>Reports</h1> 50 <div> 51 <p> 52 Here you can view and resolve reports made to your instance, originating from local and remote users. 53 </p> 54 </div> 55 <FormWithData 56 dataQuery={query.useListReportsQuery} 57 DataForm={ReportsList} 58 /> 59 </> 60 ); 61 } 62 63 function ReportsList({ data: reports }) { 64 return ( 65 <div className="list"> 66 {reports.map((report) => ( 67 <ReportEntry key={report.id} report={report} /> 68 ))} 69 </div> 70 ); 71 } 72 73 function ReportEntry({ report }) { 74 const baseUrl = useBaseUrl(); 75 const from = report.account; 76 const target = report.target_account; 77 78 let comment = report.comment.length > 200 79 ? report.comment.slice(0, 200) + "..." 80 : report.comment; 81 82 return ( 83 <Link to={`${baseUrl}/${report.id}`}> 84 <a className={`report entry${report.action_taken ? " resolved" : ""}`}> 85 <div className="byline"> 86 <div className="usernames"> 87 <Username user={from} link={false} /> reported <Username user={target} link={false} /> 88 </div> 89 <h3 className="status"> 90 {report.action_taken ? "Resolved" : "Open"} 91 </h3> 92 </div> 93 <div className="details"> 94 <b>Created: </b> 95 <span>{new Date(report.created_at).toLocaleString()}</span> 96 97 <b>Reason: </b> 98 {comment.length > 0 99 ? <p>{comment}</p> 100 : <i className="no-comment">none provided</i> 101 } 102 </div> 103 </a> 104 </Link> 105 ); 106 }