diff --git a/web/src/app/submissions/(styles)/page.scss b/web/src/app/submissions/(styles)/page.scss index 1339edc..7e40626 100644 --- a/web/src/app/submissions/(styles)/page.scss +++ b/web/src/app/submissions/(styles)/page.scss @@ -11,9 +11,14 @@ position: relative; } -a { color:rgb(255, 255, 255) } +a { + color:rgb(255, 255, 255); -a:visited { text-decoration: none; color:rgb(255, 255, 255); } -a:hover { text-decoration: none; color:rgb(255, 255, 255); } -a:focus { text-decoration: none; color:rgb(255, 255, 255); } -a:hover, a:active { text-decoration: none; color:rgb(192, 192, 192) } \ No newline at end of file + &:visited, &:hover, &:focus { + text-decoration: none; + color: rgb(255, 255, 255); + } + &:active { + color: rgb(192, 192, 192) + } +} \ No newline at end of file diff --git a/web/src/app/submissions/[submissionId]/_reviewButtons.tsx b/web/src/app/submissions/[submissionId]/_reviewButtons.tsx index d0bb359..d8cec81 100644 --- a/web/src/app/submissions/[submissionId]/_reviewButtons.tsx +++ b/web/src/app/submissions/[submissionId]/_reviewButtons.tsx @@ -1,16 +1,18 @@ import { Button, ButtonOwnProps } from "@mui/material"; import { SubmissionInfo } from "@/app/ts/Submission"; -type Review = "Completed" | "Submit" | "Reject" | "Revoke" | "Accept" | "Validate" | "Upload" -type Action = "completed" | "submit" | "reject" | "revoke" | "trigger-validate" | "trigger-upload" +type Actions = "Completed" | "Submit" | "Reject" | "Revoke" +type Review = Actions | "Accept" | "Validate" | "Upload" +type Action = Lowercase | "trigger-validate" | "trigger-upload" + interface ReviewButton { name: Review, action: Action, - submissionId: number, + submissionId: string, color: ButtonOwnProps["color"] } -function ReviewButtonClicked(action: Action, submissionId: number) { +function ReviewButtonClicked(action: Action, submissionId: string) { fetch(`/api/submissions/${submissionId}/status/${action}`, { method: "POST", headers: { @@ -27,15 +29,17 @@ function ReviewButton(props: ReviewButton) { } export default function ReviewButtons(props: SubmissionInfo) { + const submissionId = props.ID.toString() + return (
- - - - - - - + + + + + + +
) } diff --git a/web/src/app/submissions/[submissionId]/page.tsx b/web/src/app/submissions/[submissionId]/page.tsx index 994f041..1444f91 100644 --- a/web/src/app/submissions/[submissionId]/page.tsx +++ b/web/src/app/submissions/[submissionId]/page.tsx @@ -71,22 +71,22 @@ export default function SubmissionInfoPage() { const dynamicId = useParams<{submissionId: string}>() const [submission, setSubmission] = useState(null) - + 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 data = await res.json() - setSubmission(data) + if (res.ok) { + setSubmission(await res.json()) + } } getSubmission() }, [dynamicId.submissionId]) - if (!submission) return ( - - {/* TODO: Add skeleton loading thingy ? Maybe ? (https://mui.com/material-ui/react-skeleton/) */} - - ) - + if (!submission) { + return + {/* TODO: Add skeleton loading thingy ? Maybe ? (https://mui.com/material-ui/react-skeleton/) */} + + } return (
diff --git a/web/src/app/submissions/_card.tsx b/web/src/app/submissions/_card.tsx index a58fdb9..34dbdf5 100644 --- a/web/src/app/submissions/_card.tsx +++ b/web/src/app/submissions/_card.tsx @@ -3,22 +3,22 @@ import Image from "next/image"; import Link from "next/link"; interface SubmissionCardProps { - id: number; - assetId: number; displayName: string; - author: string; + assetId: number; rating: number; + author: string; + id: number; } -export default function SubmissionCard({ id, displayName, author, rating }: SubmissionCardProps) { +export default function SubmissionCard(props: SubmissionCardProps) { return ( - +
{/* TODO: Grab image of model */} - {displayName} -

{displayName}

-

By {author}

-

⭐ {rating}

{/* TODO: paste the star element from submission/1 page */} + {props.displayName} +

{props.displayName}

+

By {props.author}

+

⭐ {props.rating}

{/* TODO: paste the star element from submission/1 page */}
); diff --git a/web/src/app/submissions/_loading.tsx b/web/src/app/submissions/_loading.tsx index 7d720bb..f7a936d 100644 --- a/web/src/app/submissions/_loading.tsx +++ b/web/src/app/submissions/_loading.tsx @@ -1,22 +1,25 @@ +//This can all be solved using 0 JavaScript, +//display: grid, ->1fr unit<- + import React, { useState, useEffect } from 'react'; import { Grid, Skeleton } from '@mui/material'; -const SkeletonGrid = () => { +const elementWidth = 220; + +function calculateSkeletonCount(setState: React.Dispatch>) { + const viewportWidth = window.innerWidth - 100 * 2; + setState(Math.floor(viewportWidth / elementWidth) * 2); +}; + +function SkeletonGrid() { const [skeletonCount, setSkeletonCount] = useState(0); - const calculateSkeletonCount = () => { - const viewportWidth = window.innerWidth - 100 * 2; - const elementWidth = 220; - const count = Math.floor(viewportWidth / elementWidth); - setSkeletonCount(count * 2); - }; - useEffect(() => { - calculateSkeletonCount(); - window.addEventListener('resize', calculateSkeletonCount); + calculateSkeletonCount(setSkeletonCount); + window.addEventListener('resize', () => { calculateSkeletonCount(setSkeletonCount) }); return () => { - window.removeEventListener('resize', calculateSkeletonCount); + window.removeEventListener('resize', () => { calculateSkeletonCount(setSkeletonCount) }); }; }, []); diff --git a/web/src/app/submissions/_window.tsx b/web/src/app/submissions/_window.tsx index 866b5a4..b71e7e2 100644 --- a/web/src/app/submissions/_window.tsx +++ b/web/src/app/submissions/_window.tsx @@ -1,18 +1,16 @@ interface WindowStruct { + children: React.ReactNode, className: string, title: string, - children: React.ReactNode } export default function Window(window: WindowStruct) { - return ( -
-
-

{window.title}

-
-
{window.children}
-
- ) + return
+
+

{window.title}

+
+
{window.children}
+
} export { diff --git a/web/src/app/submissions/page.tsx b/web/src/app/submissions/page.tsx index 866e2e6..074121a 100644 --- a/web/src/app/submissions/page.tsx +++ b/web/src/app/submissions/page.tsx @@ -1,35 +1,36 @@ 'use client' import React, { useState, useEffect } from 'react' -import Webpage from "@/app/_components/webpage"; +import { SubmissionInfo } from '../ts/Submission'; import { Grid2 as Grid } from '@mui/material'; import SubmissionCard from "./_card"; import SkeletonGrid from './_loading'; +import Webpage from "@/app/_components/webpage"; import "./(styles)/page.scss"; -import { SubmissionInfo } from '../ts/Submission'; export default function SubmissionInfoPage() { const [submissions, setSubmissions] = useState([]) - + 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 fetchSubmissions() { const res = await fetch('/api/submissions?Page=1&Limit=100') - const data = await res.json() - setSubmissions(data) + if (res.ok) { + setSubmissions(await res.json()) + } } setTimeout(() => { // testing loading screen made by chatGerbertPT fetchSubmissions() }, 250); }, []) - if (!submissions) return ( - -
- -
- - ) + if (!submissions) { + return +
+ +
+ + } return ( // TODO: Add filter settings & searchbar & page selector