Chat report table working

README.md

@@ -44,6 +44,7 @@ To set up this template in development mode:
 
 # Features List
 
+- Mainly one language across the codebase (JavaScript)
 - Full documentation
 	- Setup tutorial
 - Fully Featured Account System (as a microservice)

client/components/pages/mod.jsx

@@ -3,6 +3,9 @@ import { Redirect } from 'react-router-dom';
 
 import { TokenContext } from '../utilities/token-provider';
 
+import ChatReports from '../panels/chat-reports';
+import BanUser from '../panels/ban-user';
+
 const Mod = props => {
 	//context
 	const authTokens = useContext(TokenContext);
@@ -15,6 +18,8 @@ const Mod = props => {
 	return (
 		<div className='page'>
 			<h1 className='centered'>Moderation Tools</h1>
+			<ChatReports />
+			<BanUser />
 		</div>
 	);
 };

client/components/panels/ban-user.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const BanUser = props => {
+	return (
+		<></>
+	);
+};
+
+export default BanUser;

client/components/panels/chat-reports.jsx

@@ -0,0 +1,67 @@
+import React, { useState, useEffect, useContext } from 'react';
+import { TokenContext } from '../utilities/token-provider';
+import dateFormat from 'dateformat';
+
+const ChatReports = props => {
+	const [reports, setReports] = useState([]);
+
+	const authTokens = useContext(TokenContext);
+
+	useEffect(async () => {
+		const result = await authTokens.tokenFetch(`${process.env.CHAT_URI}/admin/reports`, {
+			method: 'GET',
+			headers: {
+				'Access-Control-Allow-Origin': '*'
+			}
+		});
+
+		if (!result.ok) {
+			const err = `${result.status}: ${await result.text()}`;
+			console.log(err);
+			alert(err);
+		} else {
+			setReports(await result.json());
+		}
+	}, []);
+
+	return (
+		<table>
+			<thead>
+				<tr>
+					<th>Date</th> 
+					<th>Username</th>
+					<th>Room Name</th>
+					<th>Content</th>
+					<th>Reported By</th>
+				</tr>
+			</thead>
+			<tbody>
+				{reports.map((report, index) => (
+					<tr key={index}>
+						<td>{dateFormat(report.chatlog.createdAt, 'yyyy-mm-dd, H:MM:ss')}</td>
+						<td>{report.chatlog.username}</td>
+						<td>{report.chatlog.room}</td>
+						<td>{report.chatlog.text}</td>
+						<td>{report.reporter.join(', ')}</td>
+						<td><button onClick={() => deleteReportsFor(report.chatlogId, authTokens.tokenFetch, setReports)}>Delete</button></td>
+					</tr>
+				))}
+			</tbody>
+		</table>
+	);
+};
+
+const deleteReportsFor = (chatlogId, tokenFetch, setReports) => {
+	tokenFetch(`${process.env.CHAT_URI}/admin/reports`, {
+		method: 'DELETE',
+		headers: {
+			'Content-Type': 'application/json',
+			'Access-Control-Allow-Origin': '*'
+		},
+		body: JSON.stringify({ chatlogId })
+	});
+
+	setReports(reports => reports.filter(report => report.chatlogId != chatlogId));
+};
+
+export default ChatReports;