Added create new modal for Fragen

redaktions-app/src/App.tsx

@@ -6,6 +6,9 @@ import { CustomAppBar } from 'components/CustomAppBar/CustomAppBar';
 import { Overview } from 'components/Overview/Overview';
 
 
+export const dataApi = 'http://127.0.0.1:5000'
+
+
 const styles = createStyles({
   root: {
     flexGrow: 1,

redaktions-app/src/components/CreateQuestionModal/CreateQuestionModal.tsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import { createStyles, WithStyles } from '@material-ui/core/styles';
+import Modal from '@material-ui/core/Modal';
+import { TextField, Button } from '@material-ui/core';
+import { withStyles } from '@material-ui/styles';
+import { dataApi } from 'App';
+
+
+const styles = createStyles({
+  paper: {
+    margin: 'auto',
+    width: 400,
+    backgroundColor: 'white',
+    border: '2px solid #000',
+    padding: 8,
+  },
+  textField: {
+    width: '100%',
+  },
+  buttonBar: {
+    display: 'flex',
+    flexDirection: 'row',
+  },
+  button: {
+    margin: 2,
+  },
+})
+
+interface OwnState {
+  frageText: string,
+  kategorieText: string,
+}
+
+interface OwnProps {
+  open?: boolean,
+  handleClose(): void,
+}
+
+interface CreateQuestionModalProps extends OwnProps, WithStyles<typeof styles> { }
+
+class ProtoCreateQuestionModal extends React.PureComponent<CreateQuestionModalProps, OwnState> {
+  public constructor(props: CreateQuestionModalProps) {
+    super(props)
+
+    this.state = {
+      frageText: '',
+      kategorieText: '',
+    }
+  }
+  public render() {
+    return (
+      <Modal
+        aria-labelledby="simple-modal-title"
+        aria-describedby="simple-modal-description"
+        open={this.props.open ? true : false}
+        onClose={this.props.handleClose}
+      >
+        <div className={this.props.classes.paper}>
+          <h2 id="simple-modal-title">Neue Frage erstellen</h2>
+          <TextField
+            id="frage-text"
+            label="Frage"
+            multiline
+            rows="4"
+            className={this.props.classes.textField}
+            margin="normal"
+            variant="outlined"
+            value={this.state.frageText}
+            onChange={(e) => this.setState({ frageText: e.target.value })}
+          />
+          <TextField
+            id="kategorie-name"
+            label="Kategorie"
+            className={this.props.classes.textField}
+            margin="normal"
+            variant="outlined"
+            value={this.state.kategorieText}
+            onChange={(e) => this.setState({ kategorieText: e.target.value })}
+          />
+          <div className={this.props.classes.buttonBar}>
+            <Button
+              className={this.props.classes.button}
+              variant='contained'
+              color='primary'
+              onClick={this.createFrage}
+            >
+              Erstellen
+            </Button>
+            <Button
+              className={this.props.classes.button}
+              variant='contained'
+              color='primary'
+              onClick={this.props.handleClose}
+            >
+              Abbrechen
+            </Button>
+          </div>
+        </div>
+      </Modal>
+    );
+  };
+
+  private readonly createFrage = () => {
+    fetch(`${dataApi}/fragen`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({}),
+    })
+      .then(res => {
+        if (res.status === 200) {
+          this.props.handleClose();
+          alert("Frage wurde erfolgreich erstellt");
+        } else {
+          alert(`Es ist etwas schief gelaufen. Response: ${res.text}`);
+        }
+      })
+      .catch(err => alert(`Es ist etwas schief gelaufen. Fehler: ${err}`))
+  };
+}
+
+export const CreateQuestionModal = withStyles(styles)(ProtoCreateQuestionModal)

redaktions-app/src/components/ExistingQuestions/ExistingQuestions.tsx

@@ -1,5 +1,6 @@
 import { WithStyles, createStyles, withStyles } from "@material-ui/core";
 import React from "react";
+import { dataApi } from "App";
 
 
 const styles = createStyles({
@@ -14,7 +15,6 @@ const styles = createStyles({
   }
 })
 
-const dataApi = 'http://127.0.0.1:5000'
 
 interface Question {
   id: number,
@@ -38,7 +38,7 @@ class ProtoExistingQuestions extends React.PureComponent<ExistingQuestionsProps,
   }
 
   componentDidMount() {
-    fetch(`${dataApi}/fragen`)
+    fetch(`${dataApi}/fragen/neu`, {method: 'GET'})
       .then(res => res.json())
       .then(json => this.setState({ existingQuestions: json }))
   }

redaktions-app/src/components/Overview/Overview.tsx

@@ -1,6 +1,7 @@
 import { WithStyles, createStyles, Paper, Typography, Button, withStyles } from "@material-ui/core";
 import React from "react";
 import { ExistingQuestions } from "components/ExistingQuestions/ExistingQuestions";
+import { CreateQuestionModal } from "components/CreateQuestionModal/CreateQuestionModal";
 
 
 const styles = createStyles({
@@ -14,8 +15,18 @@ const styles = createStyles({
 
 interface OverviewProps extends WithStyles<typeof styles> { }
 
+interface OwnState {
+  modalOpen: boolean,
+}
+
+class ProtoOverview extends React.PureComponent<OverviewProps, OwnState> {
+  public constructor(props: OverviewProps) {
+    super(props)
+    this.state = {
+      modalOpen: false,
+    }
+  }
 
-class ProtoOverview extends React.PureComponent<OverviewProps> {
   public render() {
     return (
       <Paper className={this.props.classes.mainPaper}>
@@ -23,11 +34,20 @@ class ProtoOverview extends React.PureComponent<OverviewProps> {
           Existierende Fragen
         </Typography>
         <ExistingQuestions />
-        <Button variant='contained' color='primary'>
+        <Button variant='contained' color='primary' onClick={this.createFrage}>
           Neue Frage erstellen
         </Button>
+        <CreateQuestionModal open={this.state.modalOpen} handleClose={this.onModalClose}/>
       </Paper>
     )
+  };
+
+  private readonly createFrage = () => {
+    this.setState({modalOpen: true})
+  }
+
+  private readonly onModalClose = () => {
+    this.setState({modalOpen: false})
   }
 }