web: ai the maps page
This commit is contained in:
@ -7,51 +7,85 @@ import { useParams } from "next/navigation";
|
|||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { useState, useEffect } from "react";
|
import { useState, useEffect } from "react";
|
||||||
|
|
||||||
interface Button {
|
// MUI Components
|
||||||
name: string,
|
import {
|
||||||
href: string,
|
Typography,
|
||||||
|
Box,
|
||||||
|
Button as MuiButton,
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
Skeleton
|
||||||
|
} from "@mui/material";
|
||||||
|
|
||||||
|
interface ButtonProps {
|
||||||
|
name: string;
|
||||||
|
href: string;
|
||||||
}
|
}
|
||||||
function Button(button: Button) {
|
|
||||||
return (
|
function Button({ name, href }: ButtonProps) {
|
||||||
<Link href={button.href}>
|
return (
|
||||||
<button>{button.name}</button>
|
<Link href={href} passHref>
|
||||||
</Link>
|
<MuiButton variant="contained" color="primary" sx={{ mt: 2 }}>
|
||||||
)
|
{name}
|
||||||
|
</MuiButton>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Map() {
|
export default function Map() {
|
||||||
const {mapId} = useParams()
|
const { mapId } = useParams();
|
||||||
|
const [map, setMap] = useState<MapInfo | null>(null);
|
||||||
|
|
||||||
const [map, setMap] = useState<MapInfo | null>(null)
|
useEffect(() => {
|
||||||
|
async function getMap() {
|
||||||
|
const res = await fetch(`/api/maps/${mapId}`);
|
||||||
|
if (res.ok) {
|
||||||
|
setMap(await res.json());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
getMap();
|
||||||
|
}, [mapId]);
|
||||||
|
|
||||||
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 getMap() {
|
|
||||||
const res = await fetch(`/api/maps/${mapId}`)
|
|
||||||
if (res.ok) {
|
|
||||||
setMap(await res.json())
|
|
||||||
}
|
|
||||||
}
|
|
||||||
getMap()
|
|
||||||
}, [mapId])
|
|
||||||
|
|
||||||
if (!map) {
|
|
||||||
return <Webpage>
|
|
||||||
{/* TODO: Add skeleton loading thingy ? Maybe ? (https://mui.com/material-ui/react-skeleton/) */}
|
|
||||||
</Webpage>
|
|
||||||
}
|
|
||||||
return (
|
return (
|
||||||
<Webpage>
|
<Webpage>
|
||||||
<p>MapID: { mapId }</p>
|
{!map ? (
|
||||||
<p>Display Name: { map.DisplayName }</p>
|
<Card>
|
||||||
<p>Creator: { map.Creator }</p>
|
<CardContent>
|
||||||
<p>GameID: { map.GameID }</p>
|
<Skeleton variant="text" width={200} height={40} />
|
||||||
<p>Release Date: { new Date(map.Date * 1000).toLocaleString() }</p>
|
<Skeleton variant="text" width={300} />
|
||||||
<Button name="Submit A Mapfix For This Map" href={`/maps/${mapId}/fix`}/>
|
<Skeleton variant="rectangular" height={200} />
|
||||||
<aside className="review-area">
|
</CardContent>
|
||||||
<section className="map-image-area">
|
</Card>
|
||||||
<MapImage id={map.ID}/>
|
) : (
|
||||||
</section>
|
<Box display="flex" flexDirection={{ xs: "column", md: "row" }} gap={4}>
|
||||||
</aside>
|
<Box flex={1}>
|
||||||
</Webpage>
|
<Card>
|
||||||
)
|
<CardContent>
|
||||||
|
<Typography variant="h5" gutterBottom>
|
||||||
|
Map Info
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="body1"><strong>Map ID:</strong> {mapId}</Typography>
|
||||||
|
<Typography variant="body1"><strong>Display Name:</strong> {map.DisplayName}</Typography>
|
||||||
|
<Typography variant="body1"><strong>Creator:</strong> {map.Creator}</Typography>
|
||||||
|
<Typography variant="body1"><strong>Game ID:</strong> {map.GameID}</Typography>
|
||||||
|
<Typography variant="body1"><strong>Release Date:</strong> {new Date(map.Date * 1000).toLocaleString()}</Typography>
|
||||||
|
<Button name="Submit A Mapfix For This Map" href={`/maps/${mapId}/fix`} />
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box flex={1}>
|
||||||
|
<Card>
|
||||||
|
<CardContent>
|
||||||
|
<Typography variant="h6" gutterBottom>
|
||||||
|
Map Preview
|
||||||
|
</Typography>
|
||||||
|
<MapImage id={map.ID} />
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
</Webpage>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user