added mutation - nsfp

backend/sql/03_create_content_tables.sql

@@ -60,9 +60,8 @@ create table candymat_data.user_app_info
 grant select on table candymat_data.user_app_info to candymat_anonymous, candymat_person;
 grant insert, update, delete on table candymat_data.user_app_info to candymat_editor;
 delete from candymat_data.user_app_info where row_id = 'about_page';
+delete from candymat_data.user_app_info where row_id = 'legal_page';
 insert into candymat_data.user_app_info (row_id, title, content) values
 ('about_page', 'About Candymat', '<h1>Wer steckt eigentlich hinter dem Kandimat?</h1><p>Der Kandimat wurde von den ehrenamtlichen Mitgliedern des Netzbegrünung e.V. entwickelt. Eure Geschäftsstelle und die Kandidat*innen haben die redaktionelle Arbeit für die Inhalte des Kandimats geleistet.</p>');
 insert into candymat_data.user_app_info (row_id, title, content) values
-('contact_page', 'Contact Candymat', '<h1>Kontakt</h1><p>Kontakt Infos</p>');
-insert into candymat_data.user_app_info (row_id, title, content) values
 ('legal_page', 'Legal Candymat', '<h1>Impressum</h1><p>Impressum Infos</p>');

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

@@ -1,4 +1,5 @@
 import { gql } from "@apollo/client";
+import { GetAllPageInfoResponse } from "../queries/page_info";
 
 export const EDIT_INFOS = gql`
   mutation UpdateInfos(
@@ -18,3 +19,7 @@ export const EDIT_INFOS = gql`
     }
   }
 `;
+
+export interface EditInfosResponse {
+  updateUserAppInfo: GetAllPageInfoResponse;
+}

redaktions-app/src/components/EditInformation.tsx

@@ -1,11 +1,13 @@
 import React, { useState } from "react";
-import { Paper, Typography } from "@material-ui/core";
+import { IconButton, Paper, Typography } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
-import { useQuery } from "@apollo/client";
+import { useMutation, 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";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -15,6 +17,7 @@ const useStyles = makeStyles((theme) => ({
   },
   textArea: {
     width: "85%",
+    height: "150px",
     padding: theme.spacing(1),
     marginBottom: theme.spacing(3),
     marginTop: theme.spacing(1),
@@ -33,13 +36,17 @@ 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 [aboutContent, setAboutContent] = useState(about?.content);
   const legalTitle = legal?.title || "";
-  const [legalContent, setLegalContent] = useState(legal?.content || "");
+  const [legalContent, setLegalContent] = useState(legal?.content);
+
+  if (loading) console.log("Loading");
+  if (error) return <p>An error occurred</p>;
 
   return (
     <div>
@@ -59,6 +66,18 @@ export function EditInformation(
           >
             {/*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>