Added Info Text Component and implemented .map for Array of Page Infos

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

@@ -24,3 +24,15 @@ export interface GetAllPageInfoResponse {
     __typename: "UserAppInfosConnection";
   };
 }
+
+export interface GetPageInfoResponse {
+  userAppInfo(id: string): {
+    nodes: Array<{
+      id: string;
+      rowId: string;
+      title: string;
+      content: string;
+    }>;
+    __typename: "UserAppInfosConnection";
+  };
+}

redaktions-app/src/components/EditInformation.tsx

@@ -1,13 +1,12 @@
-import React, { useState } from "react";
-import { IconButton, Paper, Typography } from "@material-ui/core";
+import React from "react";
+import { Paper, Typography } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
-import { useMutation, useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client";
 import {
   GET_ALL_PAGE_INFO,
   GetAllPageInfoResponse,
 } from "../backend/queries/page_info";
-import { Save } from "@material-ui/icons";
-import { EDIT_INFOS, EditInfosResponse } from "../backend/mutations/page_info";
+import { EditInformationField } from "./EditInformationField";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -36,17 +35,7 @@ export function EditInformation(
   const infos =
     useQuery<GetAllPageInfoResponse, null>(GET_ALL_PAGE_INFO).data
       ?.allUserAppInfos.nodes || [];
-  const [edit, { loading, error }] = useMutation<EditInfosResponse>(EDIT_INFOS);
-  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);
-
-  if (loading) console.log("Loading");
-  if (error) return <p>An error occurred</p>;
 
   return (
     <div>
@@ -54,45 +43,15 @@ export function EditInformation(
         Bearbeite hier die Webseiten Info-Texte für deinen Candymat:
       </Typography>
       <Paper className={classes.root}>
-        <Typography component={"h2"} variant="h6" color="primary" gutterBottom>
-          {/* eslint-disable-next-line react/no-unescaped-entities */}
-          {aboutTitle}
-        </Typography>
-        <form>
-          <textarea
-            className={classes.textArea}
-            onChange={(e) => setAboutContent(e.target.value)}
-            value={aboutContent}
-          >
-            {/*Hier kommt der Inhalt aus der Datenbank*/}
-          </textarea>
-          <IconButton
-            onClick={(e) =>
-              edit({
-                variables: {
-                  id: about?.id,
-                  content: about?.content,
-                },
-              })
-            }
-          >
-            <Save />
-          </IconButton>
-        </form>
-
-        <Typography component={"h2"} variant="h6" color="primary" gutterBottom>
-          {/* eslint-disable-next-line react/no-unescaped-entities */}
-          {legalTitle}
-        </Typography>
-        <form>
-          <textarea
-            className={classes.textArea}
-            onChange={(e) => setLegalContent(e.target.value)}
-            value={legalContent}
-          >
-            {/*Hier kommt der Inhalt aus der Datenbank*/}
-          </textarea>
-        </form>
+        {infos.map((info) => {
+          return (
+            <EditInformationField
+              loggedInPersonRowId={props.loggedInPersonRowId}
+              key={info.id}
+              info={info}
+            />
+          );
+        })}
       </Paper>
     </div>
   );

redaktions-app/src/components/EditInformationField.tsx

@@ -0,0 +1,78 @@
+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";
+
+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: {
+    id: string;
+    rowId: string;
+    title: string;
+    content: string;
+  };
+  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: any) {
+    const changeInfoText = e.target.value;
+    setInfo(changeInfoText);
+  }
+
+  return (
+    <div key={info.id}>
+      <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>
+  );
+}