154 lines
4.1 KiB
TypeScript
154 lines
4.1 KiB
TypeScript
'use client'
|
|
import React from "react";
|
|
import styles from "@/styles/dev-tools.module.css"
|
|
import { IconButton, Snackbar, SnackbarCloseReason, Typography } from "@mui/material"
|
|
import CloseIcon from '@mui/icons-material/Close';
|
|
import { Card, Combo, EditorMode, Unit } from "@/types/dev-tools";
|
|
import { EditorContext } from "@/contexts/EditorContext";
|
|
import LeftMenu from "@/components/dev-tools/LeftMenu";
|
|
import { useEditor } from "@/hooks/useEditor";
|
|
import Editor from "@/components/dev-tools/Editor";
|
|
|
|
export default function Page(){
|
|
const [currentRecordNum, setCurrentRecordNum] = React.useState<number>(0);
|
|
const [currentDataId, setCurrentDataId] = React.useState<string>("");
|
|
const [editorMode, setEditorMode] = React.useState<EditorMode>("insert");
|
|
const [cards, setCards] = React.useState<Card[] | null>(null);
|
|
const [currentCombos, setCurrentCombos] = React.useState<Combo[] | null>(null);
|
|
const [units, setUnits] = React.useState<Unit[] | null>(null);
|
|
const [error, setError] = React.useState<string | null>(null);
|
|
const [open, setOpen] = React.useState<boolean>(false);
|
|
|
|
const changeCurrentRecordNum = (n: number) => setCurrentRecordNum(n)
|
|
const changeCurrentDataId = (id: string) => setCurrentDataId(id)
|
|
const changeEditorMode = (m: string) =>{
|
|
if(m !== "insert" && m !== "update") return
|
|
setEditorMode(m)
|
|
}
|
|
const changeError = (e: string) => setError(e);
|
|
|
|
React.useEffect(() => {
|
|
const getCards = async () => {
|
|
try{
|
|
// fetch our db
|
|
const res = await fetch("/api/dev/vor/cards", {
|
|
method: "GET",
|
|
})
|
|
const body = await res.json()
|
|
if(!res.ok){
|
|
console.error("Could not get vor cards:", body)
|
|
setCards(null);
|
|
} else{
|
|
setCards(body)
|
|
}
|
|
}catch (error) {
|
|
console.error("Could not get vor cards:", error)
|
|
setCards(null);
|
|
}
|
|
}
|
|
const getUnits = async () => {
|
|
try{
|
|
// fetch our db
|
|
const res = await fetch("/api/dev/vor/units", {
|
|
method: "GET",
|
|
})
|
|
const body = await res.json()
|
|
if(!res.ok){
|
|
console.error("Could not get vor units:", body)
|
|
setUnits(null);
|
|
} else{
|
|
setUnits(body)
|
|
}
|
|
}catch (error) {
|
|
console.error("Could not get vor units:", error)
|
|
setUnits(null);
|
|
}
|
|
}
|
|
getCards();
|
|
getUnits();
|
|
}, [])
|
|
|
|
React.useEffect(() => {
|
|
const getCombos = async () => {
|
|
// first check if the user has unconfirmed changes, if not then go for the query
|
|
try{
|
|
const res = await fetch(`/api/dev/vor/${currentDataId}/combos`, {
|
|
method: "GET",
|
|
})
|
|
const body = await res.json();
|
|
if(res.ok){
|
|
setCurrentCombos(body)
|
|
}else{
|
|
setCurrentCombos(null)
|
|
console.error("Failed to get combos for:", body)
|
|
}
|
|
} catch(error){
|
|
setCurrentCombos(null)
|
|
console.error("Could not get combos for:", error)
|
|
}
|
|
}
|
|
|
|
},[currentDataId])
|
|
|
|
const handleClose = (
|
|
event: React.SyntheticEvent | Event,
|
|
reason?: SnackbarCloseReason,
|
|
) => {
|
|
if (reason === 'clickaway') {
|
|
return;
|
|
}
|
|
|
|
setOpen(false);
|
|
};
|
|
|
|
const action = (
|
|
<React.Fragment>
|
|
<Typography>
|
|
{error}
|
|
</Typography>
|
|
<IconButton
|
|
size="small"
|
|
aria-label="close"
|
|
color="inherit"
|
|
onClick={handleClose}
|
|
>
|
|
<CloseIcon fontSize="small" />
|
|
</IconButton>
|
|
</React.Fragment>
|
|
);
|
|
|
|
|
|
return (
|
|
<EditorContext.Provider value={{
|
|
currentRecordNum,
|
|
currentDataId,
|
|
editorMode,
|
|
error,
|
|
cards,
|
|
units,
|
|
currentCombos,
|
|
|
|
changeCurrentRecordNum,
|
|
changeCurrentDataId,
|
|
changeEditorMode,
|
|
changeError
|
|
}}>
|
|
<div className={styles.maincontainer}>
|
|
<div className={styles.leftmenucontainer}>
|
|
<LeftMenu />
|
|
</div>
|
|
<div className={styles.editorcontainer}>
|
|
<Editor />
|
|
</div>
|
|
</div>
|
|
{error && <Snackbar
|
|
open={open}
|
|
autoHideDuration={6000}
|
|
onClose={handleClose}
|
|
action={action}
|
|
/>}
|
|
</EditorContext.Provider>
|
|
)
|
|
}
|
|
|