60 lines
1.5 KiB
TypeScript
60 lines
1.5 KiB
TypeScript
import React from "react";
|
|
import { Paper, Typography } from "@material-ui/core";
|
|
import { makeStyles } from "@material-ui/core/styles";
|
|
import { useQuery } from "@apollo/client";
|
|
import {
|
|
GET_ALL_PAGE_INFO,
|
|
GetAllPageInfoResponse,
|
|
PageInfo,
|
|
} from "../backend/queries/page_info";
|
|
import { EditInformationField } from "./EditInformationField";
|
|
|
|
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 EditInformationProps {
|
|
loggedInPersonRowId: number;
|
|
}
|
|
|
|
export function EditInformation(
|
|
props: EditInformationProps
|
|
): React.ReactElement {
|
|
const infos =
|
|
useQuery<GetAllPageInfoResponse, null>(GET_ALL_PAGE_INFO).data
|
|
?.allUserAppInfos.nodes || [];
|
|
const classes = useStyles();
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<Typography component={"h2"} variant="h6" gutterBottom>
|
|
Bearbeite hier die Webseiten Info-Texte für deinen Candymat:
|
|
</Typography>
|
|
<Paper className={classes.root}>
|
|
{infos.map((info: PageInfo) => {
|
|
return (
|
|
<EditInformationField
|
|
loggedInPersonRowId={props.loggedInPersonRowId}
|
|
key={info.id}
|
|
info={info}
|
|
/>
|
|
);
|
|
})}
|
|
</Paper>
|
|
</React.Fragment>
|
|
);
|
|
}
|