made textareas editable, prepared info mutations

redaktions-app/src/backend/mutations/page_info.ts

@@ -0,0 +1,20 @@
+import { gql } from "@apollo/client";
+
+export const EDIT_INFOS = gql`
+  mutation UpdateInfos(
+    $id: ID!
+    $title: String
+    $content: String
+    $rowId: String
+  ) {
+    updateUserAppInfo(
+      input: {
+        id: $id
+        userAppInfoPatch: { content: $content, rowId: $rowId, title: $title }
+        clientMutationId: ""
+      }
+    ) {
+      clientMutationId
+    }
+  }
+`;

redaktions-app/src/components/EditInformation.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { Paper, Typography } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
 import { useQuery } from "@apollo/client";
@@ -36,6 +36,10 @@ export function EditInformation(
   const about = infos.find((info) => info.rowId === "about_page");
   const legal = infos.find((info) => info.rowId === "legal_page");
   const classes = useStyles();
+  const aboutTitle = about?.title || "";
+  const [aboutContent, setAboutContent] = useState(about?.content || "");
+  const legalTitle = legal?.title || "";
+  const [legalContent, setLegalContent] = useState(legal?.content || "");
 
   return (
     <div>
@@ -45,20 +49,28 @@ export function EditInformation(
       <Paper className={classes.root}>
         <Typography component={"h2"} variant="h6" color="primary" gutterBottom>
           {/* eslint-disable-next-line react/no-unescaped-entities */}
-          {about?.title || ""}
+          {aboutTitle}
         </Typography>
         <form>
-          <textarea className={classes.textArea} value={about?.content || ""}>
+          <textarea
+            className={classes.textArea}
+            onChange={(e) => setAboutContent(e.target.value)}
+            value={aboutContent}
+          >
             {/*Hier kommt der Inhalt aus der Datenbank*/}
           </textarea>
         </form>
 
         <Typography component={"h2"} variant="h6" color="primary" gutterBottom>
           {/* eslint-disable-next-line react/no-unescaped-entities */}
-          {legal?.title || ""}
+          {legalTitle}
         </Typography>
         <form>
-          <textarea className={classes.textArea} value={legal?.content || ""}>
+          <textarea
+            className={classes.textArea}
+            onChange={(e) => setLegalContent(e.target.value)}
+            value={legalContent}
+          >
             {/*Hier kommt der Inhalt aus der Datenbank*/}
           </textarea>
         </form>