web: implement audit log on submissions

web/src/app/submissions/[submissionId]/_comments.tsx

@@ -51,7 +51,7 @@ function LeaveAComment() {
 	)
 }
 
-export default function Comments(stats: CommentersProps) {
+export function Comments(stats: CommentersProps) {
     return (<>
         <section className="comments">
             {stats.comments_data.comments.length===0
@@ -65,5 +65,6 @@ export default function Comments(stats: CommentersProps) {
 }
 
 export {
-    type CreatorAndReviewStatus
+    type CreatorAndReviewStatus,
+    type Comment,
 }

web/src/app/submissions/[submissionId]/page.tsx

@@ -5,7 +5,8 @@ import type { CreatorAndReviewStatus } from "./_comments";
 import { MapImage } from "./_mapImage";
 import { useParams } from "next/navigation";
 import ReviewButtons from "./_reviewButtons";
-import Comments from "./_comments";
+import { Comments, Comment } from "./_comments";
+import { AuditEvent, decodeAuditEvent as auditEventMessage } from "@/app/ts/AuditEvent";
 import Webpage from "@/app/_components/webpage";
 import Link from "next/link";
 import { useState, useEffect } from "react";
@@ -53,19 +54,42 @@ function TitleAndComments(stats: CreatorAndReviewStatus) {
 }
 
 export default function SubmissionInfoPage() {
-    const dynamicId = useParams<{submissionId: string}>()
+	const { submissionId } = useParams < { submissionId: string } >()
 
     const [submission, setSubmission] = useState<SubmissionInfo | null>(null)
+    const [auditEvents, setAuditEvents] = useState<AuditEvent[]>([])
 
 	useEffect(() => { // needs to be client sided since server doesn't have a session, nextjs got mad at me for exporting an async function: (https://nextjs.org/docs/messages/no-async-client-component)
 		async function getSubmission() {
-			const res = await fetch(`/api/submissions/${dynamicId.submissionId}`)
+			const res = await fetch(`/api/submissions/${submissionId}`)
 			if (res.ok) {
 				setSubmission(await res.json())
 			}
 		}
-        getSubmission()
-	}, [dynamicId.submissionId])
+		async function getAuditEvents() {
+			const res = await fetch(`/api/submissions/${submissionId}/audit-events?Page=1&Limit=100`)
+			if (res.ok) {
+				setAuditEvents(await res.json())
+			}
+		}
+		getSubmission()
+		getAuditEvents()
+	}, [submissionId])
+
+	const comments:Comment[] = auditEvents.map((auditEvent) => {
+		let user = auditEvent.User.toString();
+		if (auditEvent.User == 9223372036854776000) {
+			user = "[Validator]";
+		}
+		if (submission && auditEvent.User == submission.Submitter) {
+			user = "[Submitter]";
+		}
+		return {
+			date: auditEvent.CreatedAt,
+			name: user,
+			comment: auditEventMessage(auditEvent),
+		}
+	})
 
 	if (!submission) {
 		return <Webpage>
@@ -76,8 +100,8 @@ export default function SubmissionInfoPage() {
         <Webpage>
             <main className="map-page-main">
                 <section className="review-section">
-					<RatingArea assetId={submission.AssetID} submissionId={dynamicId.submissionId} submissionStatus={submission.StatusID} submissionSubmitter={submission.Submitter}/>
-                    <TitleAndComments name={submission.DisplayName} creator={submission.Creator} review={submission.StatusID} asset_id={submission.AssetID} submitter={submission.Submitter} uploaded_asset_id={submission.UploadedAssetID} comments={[]}/>
+					<RatingArea assetId={submission.AssetID} submissionId={submissionId} submissionStatus={submission.StatusID} submissionSubmitter={submission.Submitter}/>
+                    <TitleAndComments name={submission.DisplayName} creator={submission.Creator} review={submission.StatusID} asset_id={submission.AssetID} submitter={submission.Submitter} uploaded_asset_id={submission.UploadedAssetID} comments={comments}/>
                 </section>
             </main>
         </Webpage>