buttons exist for making api requests

web/src/app/_components/webpage.tsx

@@ -1,10 +1,8 @@
 import Header from "./header";
 
 export default function Webpage({children}: Readonly<{children?: React.ReactNode}>) {
-    return (
+    return (<>
-        <>
+        <Header/>
-            <Header/>
+        {children}
-            {children}
+    </>)
-        </>
-    )
 }

web/src/app/submissions/[submissionId]/(styles)/page.scss

@@ -1,8 +1,9 @@
+@forward "./page/commentWindow.scss";
+@forward "./page/reviewStatus.scss";
+@forward "./page/ratingWindow.scss";
+@forward "./page/reviewButtons.scss";
 @forward "./page/comments.scss";
 @forward "./page/review.scss";
-@forward "./page/rating_window.scss";
-@forward "./page/leave_comment_window.scss";
-@forward "./page/review_status.scss";
 @forward "./page/map.scss";
 
 @use "../../../globals.scss";

web/src/app/submissions/[submissionId]/(styles)/page/ratingWindow.scss

@@ -3,7 +3,6 @@
 .rating-window {
     @include globals.border-with-radius;
     width: 100%;
-    height: 225px;
 
     .rating-type {
         display: flex;

web/src/app/submissions/[submissionId]/(styles)/page/reviewButtons.scss

@@ -0,0 +1,13 @@
+@use "../../../../globals.scss";
+
+.review-set {
+	@include globals.border-with-radius;
+	display: grid;
+	align-items: center;
+	gap: 10px;
+	padding: 10px;
+
+	button {
+		width: 100%;
+	}
+}

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

@@ -0,0 +1,66 @@
+import type { SubmissionInfo } from "@/app/ts/Submission";
+import { Button } from "@mui/material"
+import Window from "./_window";
+import SendIcon from '@mui/icons-material/Send';
+import Image from "next/image";
+
+interface CommentersProps {
+    comments_data: CreatorAndReviewStatus
+}
+
+interface CreatorAndReviewStatus {
+    creator: SubmissionInfo["DisplayName"],
+    review: SubmissionInfo["StatusID"],
+    comments: Comment[],
+    name: string
+}
+
+interface Comment {
+    picture?: string, //TEMP
+    comment: string,
+    date: string,
+    name: string
+}
+
+function AddComment(comment: Comment) {
+    const IsBhopMaptest = comment.name == "BhopMaptest" //Highlighted commenter
+
+    return (
+        <div className="commenter" data-highlighted={IsBhopMaptest}>
+            <Image src={comment.picture as string} alt={`${comment.name}'s comment`}/>
+            <div className="details">
+                <header>
+                    <p className="name">{comment.name}</p>
+                    <p className="date">{comment.date}</p>
+                </header>
+                <p className="comment">{comment.comment}</p>
+            </div>
+        </div>
+    );
+}
+
+function LeaveAComment() {
+	return (
+		<Window title="Leave a Comment:" className="leave-comment-window">
+            <textarea name="comment-box" id="comment-text-field"></textarea>
+            <Button variant="outlined" endIcon={<SendIcon/>}>Submit</Button>
+        </Window>
+	)
+}
+
+export default function Comments(stats: CommentersProps) {
+    return (<>
+        <section className="comments">
+            {stats.comments_data.comments.length===0
+            && <p className="no-comments">There are no comments.</p>
+            || stats.comments_data.comments.map(comment => (
+                <AddComment key={comment.name} name={comment.name} date={comment.date} comment={comment.comment}/>
+            ))}
+        </section>
+        <LeaveAComment/>
+    </>)
+}
+
+export {
+    type CreatorAndReviewStatus
+}

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

@@ -8,6 +8,7 @@ import Image from "next/image"
 interface AssetID {
     id: SubmissionInfo["AssetID"]
 }
+
 function MapImage(asset: AssetID) {
 	const [assetImage, setAssetImage] = useState("");
 

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

@@ -0,0 +1,29 @@
+import { Button, ButtonOwnProps } from "@mui/material";
+
+type Review = "Completed" | "Submit" | "Reject" | "Revoke" | "Validate" | "Publish"
+interface ReviewButton {
+	name: Review,
+	color: ButtonOwnProps["color"]
+}
+
+function ReviewButtonClicked(type: Review) {
+	//magical api requesting goes here, i hope it wont blow up
+	console.log(type)
+}
+
+function ReviewButton(props: ReviewButton) {
+	return <Button color={props.color} variant="contained" onClick={() => { ReviewButtonClicked(props.name) }}>{props.name}</Button>
+}
+
+export default function ReviewButtons() {
+	return (
+		<section className="review-set">
+			<ReviewButton color="error" name="Reject"/>
+			<ReviewButton color="info"  name="Revoke"/>
+			<ReviewButton color="info"  name="Publish"/>
+			<ReviewButton color="info"  name="Completed"/>
+			<ReviewButton color="info"  name="Submit"/>
+			<ReviewButton color="info"  name="Validate"/>
+		</section>
+	)
+}

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

@@ -0,0 +1,20 @@
+interface WindowStruct {
+    className: string,
+    title: string,
+    children: React.ReactNode
+}
+
+export default function Window(window: WindowStruct) {
+    return (
+        <section className={window.className}>
+            <header>
+                <p>{window.title}</p>
+            </header>
+            <main>{window.children}</main>
+        </section>
+    )
+}
+
+export {
+	type WindowStruct
+}

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

@@ -1,88 +1,51 @@
-'use client'
+"use client"
 
-import { SubmissionStatus, SubmissionStatusToString, type SubmissionInfo } from "@/app/ts/Submission";
+import { SubmissionStatus, SubmissionStatusToString } from "@/app/ts/Submission";
+import type { CreatorAndReviewStatus } from "./_comments";
 import { MapImage, type AssetID } from "./_map";
-import { Rating, Button } from "@mui/material";
-import SendIcon from '@mui/icons-material/Send';
-import Webpage from "@/app/_components/webpage";
 import { useParams } from "next/navigation";
-import Image from "next/image";
+import ReviewButtons from "./_reviewButtons";
+import { Rating } from "@mui/material";
+import Comments from "./_comments";
+import Webpage from "@/app/_components/webpage";
+import Window from "./_window";
 import Link from "next/link";
 
 import "./(styles)/page.scss";
 
-interface Window {
+function Ratings() {
-    className: string,
+	return (
-    title: string,
+		<Window className="rating-window" title="Rating">
-    children: React.ReactNode
+		    <section className="rating-type">
-}
+		        <aside className="rating-left">
-interface Comment {
+		            <p>Quality</p>
-    picture?: string, //TEMP
+		            <p>Difficulty</p>
-    comment: string,
+		            <p>Fun</p>
-    date: string,
+		            <p>Length</p>
-    name: string
+		        </aside>
-}
+		        <aside className="rating-right">
-interface CreatorAndReviewStatus {
+		            <Rating defaultValue={2.5} precision={0.5}/>
-    creator: SubmissionInfo["DisplayName"],
+		            <Rating defaultValue={2.5} precision={0.5}/>
-    review: SubmissionInfo["StatusID"],
+		            <Rating defaultValue={2.5} precision={0.5}/>
-    comments: Comment[],
+		            <Rating defaultValue={2.5} precision={0.5}/>
-    name: string
+		        </aside>
+		    </section>
+        </Window>
+	)
 }
 
-function Window(window: Window) {
+function RatingArea(asset: AssetID) {
-    return (
-        <section className={window.className}>
-            <header>
-                <p>{window.title}</p>
-            </header>
-            <main>{window.children}</main>
-        </section>
-    )
-}
-
-function ImageAndRatings(asset: AssetID) {
     return (
         <aside className="review-area">
         	<section className="map-image-area">
          		<MapImage id={asset.id}/>
          	</section>
-            <Window className="rating-window" title="Rating">
+            <Ratings/>
-	            <section className="rating-type">
+            <ReviewButtons/>
-	                <aside className="rating-left">
-	                    <p>Quality</p>
-	                    <p>Difficulty</p>
-	                    <p>Fun</p>
-	                    <p>Length</p>
-	                </aside>
-	                <aside className="rating-right">
-	                    <Rating defaultValue={2.5} precision={0.5}/>
-	                    <Rating defaultValue={2.5} precision={0.5}/>
-	                    <Rating defaultValue={2.5} precision={0.5}/>
-	                    <Rating defaultValue={2.5} precision={0.5}/>
-	                </aside>
-	            </section>
-            </Window>
         </aside>
     )
 }
 
-function Comment(comment: Comment) {
-    const IsBhopMaptest = comment.name == "BhopMaptest" //Highlighted commenter
-
-    return (
-        <div className="commenter" data-highlighted={IsBhopMaptest}>
-            <Image src={comment.picture as string} alt={`${comment.name}'s comment`}/>
-            <div className="details">
-                <header>
-                    <p className="name">{comment.name}</p>
-                    <p className="date">{comment.date}</p>
-                </header>
-                <p className="comment">{comment.comment}</p>
-            </div>
-        </div>
-    );
-}
-
 function TitleAndComments(stats: CreatorAndReviewStatus) {
     const Review = SubmissionStatusToString(stats.review)
 
@@ -96,48 +59,20 @@ function TitleAndComments(stats: CreatorAndReviewStatus) {
             </div>
             <p className="by-creator">by <Link href="" target="_blank">{stats.creator}</Link></p>
             <span className="spacer"></span>
-            <section className="comments">
+            <Comments comments_data={stats}/>
-            	{stats.comments.length===0
-                && <p className="no-comments">There are no comments.</p>
-                || stats.comments.map(comment => (
-                	<Comment key={comment.name} name={comment.name} date={comment.date} comment={comment.comment}/>
-             	))}
-            </section>
-            <Window title="Leave a Comment:" className="leave-comment-window">
-                <textarea name="comment-box" id="comment-text-field"></textarea>
-                <Button variant="contained" endIcon={<SendIcon/>}>Submit</Button>
-            </Window>
         </main>
     )
 }
 
-// const placeholder_Comments = [
-//     {
-//         comment: "This map has been accepted and is in the game.",
-//         date: "on Dec 8 '24 at 18:46",
-//         name: "BhopMaptest"
-//     },
-//     {
-//         comment: "This map is so mid...",
-//         date: "on Dec 8 '24 at 18:46",
-//         name: "vmsize"
-//     },
-//     {
-//         comment: "I prefer strafe client",
-//         date: "on Dec 8 '24 at 18:46",
-//         name: "Quaternions"
-//     }
-// ]
-
 export default function SubmissionInfoPage() {
-    const params = useParams<{submissionId: string}>()
+    const dynamicId = useParams<{submissionId: string}>()
 
     return (
         <Webpage>
             <main className="map-page-main">
                 <section className="review-section">
-                    <ImageAndRatings id={432}/>
+                    <RatingArea id={432}/>
-                    <TitleAndComments name={params.submissionId} creator="Quaternions" review={SubmissionStatus.Accepted} comments={[]}/>
+                    <TitleAndComments name={dynamicId.submissionId} creator="Quaternions" review={SubmissionStatus.Accepted} comments={[]}/>
                 </section>
             </main>
         </Webpage>