75 lines
1.9 KiB
TypeScript
75 lines
1.9 KiB
TypeScript
import React, { useState } from "react";
|
|
import { IconButton, Typography } from "@material-ui/core";
|
|
import { makeStyles } from "@material-ui/core/styles";
|
|
import { useMutation } from "@apollo/client";
|
|
import { Save } from "@material-ui/icons";
|
|
import { EDIT_INFOS, EditInfosResponse } from "../backend/mutations/page_info";
|
|
import { PageInfo } from "../backend/queries/page_info";
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
root: {
|
|
width: "100%",
|
|
padding: theme.spacing(1),
|
|
marginBottom: theme.spacing(3),
|
|
},
|
|
textArea: {
|
|
width: "85%",
|
|
height: "150px",
|
|
padding: theme.spacing(1),
|
|
marginBottom: theme.spacing(3),
|
|
marginTop: theme.spacing(1),
|
|
resize: "none",
|
|
overflow: "auto",
|
|
},
|
|
}));
|
|
|
|
interface EditInformationFieldProps {
|
|
info: PageInfo;
|
|
loggedInPersonRowId: number;
|
|
}
|
|
|
|
export function EditInformationField(
|
|
props: EditInformationFieldProps
|
|
): React.ReactElement {
|
|
const [info, setInfo] = useState(props.info);
|
|
const [edit, { loading, error }] = useMutation<EditInfosResponse>(EDIT_INFOS);
|
|
const classes = useStyles();
|
|
|
|
if (loading) console.log("Loading");
|
|
if (error) return <p>An error occurred</p>;
|
|
|
|
function changeInfo(e: React.ChangeEvent<HTMLTextAreaElement>) {
|
|
const changeInfoText = e.target.value;
|
|
setInfo({ ...info, content: changeInfoText });
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<Typography component={"h2"} variant="h6" color="primary" gutterBottom>
|
|
{info.title}
|
|
</Typography>
|
|
<form>
|
|
<textarea
|
|
className={classes.textArea}
|
|
onChange={changeInfo}
|
|
value={info.content}
|
|
>
|
|
{/*Hier kommt der Inhalt aus der Datenbank*/}
|
|
</textarea>
|
|
<IconButton
|
|
onClick={() =>
|
|
edit({
|
|
variables: {
|
|
id: info.id,
|
|
content: info.content,
|
|
},
|
|
})
|
|
}
|
|
>
|
|
<Save />
|
|
</IconButton>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|