From a7e9dbb94d9b4f6b54708fbd3c5741ed71e7d054 Mon Sep 17 00:00:00 2001 From: rhpidfyre Date: Thu, 19 Dec 2024 02:24:38 -0500 Subject: [PATCH] web: fix up When possible you should not use inline styling and instead use SCSS files for following convention and keeping consistency, Grid is also a deprecated React component in Material UI You should also separate components that are client only to its own .tsx module rather than having it be mixed with components that aren't required for being client only --- web/src/app/submissions/(styles)/page.scss | 15 +++++++---- .../[submissionId]/_reviewButtons.tsx | 26 +++++++++++-------- .../app/submissions/[submissionId]/page.tsx | 18 ++++++------- web/src/app/submissions/_card.tsx | 18 ++++++------- web/src/app/submissions/_loading.tsx | 25 ++++++++++-------- web/src/app/submissions/_window.tsx | 16 +++++------- web/src/app/submissions/page.tsx | 25 +++++++++--------- 7 files changed, 77 insertions(+), 66 deletions(-) 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