Added a MessageForm for postMessage mutation

Author: nreoch9

client/components/Messages/MessageForm.js

@@ -0,0 +1,62 @@
+import { Component } from "react";
+import gql from "graphql-tag";
+import { Mutation } from "react-apollo";
+import {
+ Card,
+ CardBody,
+ Button,
+ Form,
+ FormGroup,
+ Input,
+ FormText
+} from "reactstrap";
+
+const POST_MESSAGE = gql`
+ mutation postMessage($text: String!) {
+ postMessage(text: $text) {
+ text
+ }
+ }
+`;
+
+class MessageForm extends Component {
+ render() {
+ return (
+ <Mutation mutation={POST_MESSAGE}>
+ {(postMessage, { data, loading, error }) => {
+ const handleSubmit = evt => {
+ evt.preventDefault();
+ const text = evt.target.text.value;
+ if (!text) return;
+ postMessage({
+ variables: {
+ text
+ }
+ });
+ evt.target.text.value = "";
+ };
+ return (
+ <Card>
+ <CardBody>
+ <Form onSubmit={handleSubmit}>
+ <FormGroup>
+ <Input
+ type="text"
+ name="text"
+ placeholder="type a message"
+ />
+ </FormGroup>
+ <Button type="submit" color="primary" block>
+ Submit
+ </Button>
+ </Form>
+ </CardBody>
+ </Card>
+ );
+ }}
+ </Mutation>
+ );
+ }
+}
+
+export default MessageForm;

client/components/Protected.js

@@ -1,11 +1,15 @@
-import { Component } from "react";
+import { Component, Fragment } from "react";
+import MessageForm from "./Messages/MessageForm";
+import { Row, Col } from "reactstrap";
 
 class Protected extends Component {
  render() {
  return (
- <div>
- <h1>Protected</h1>
- </div>
+ <Row style={{ paddingTop: "30px" }}>
+ <Col>
+ <MessageForm />
+ </Col>
+ </Row>
  );
  }
 }