reply.js

import React from 'react';
import { Form, Input, Button} from 'antd';
import { status, json } from '../utilities/requestHandlers';
import UserContext from '../contexts/user';
import {withRouter} from 'react-router-dom';

const formItemLayout = {
    labelCol: { xs: { span: 24 }, sm: { span: 6 } },
    wrapperCol: { xs: { span: 24 }, sm: { span: 12 } }
};

const tailFormItemLayout = {
    wrapperCol: { xs: { span: 24, offset: 0 }, sm: { span: 16, offset: 6 } },
};

class Reply extends React.Component{

    constructor(props){
        super(props)
        this.add = this.add.bind(this)
    }

    static contextType = UserContext;

    add(values){
        console.log(values)
        console.log(this.props.location.state.data)
        const { confirm, ...data } = values;
        fetch(`https://melody-annex-3000.codio-box.uk/api/v1/message/${this.props.location.state.data}`, {
            method: "POST",
            body: JSON.stringify(data),
            headers: {
                "Authorization": this.context.user.Authorization,
                'Content-Type': 'application/json'
            }
        })
        .then(status)
        .then(json)
        .then(data => {
            console.log("Created succesfully");
            console.log(data)
            this.props.history.push(`/messages}`);
        })
        .catch(errorResponse => {
            alert("Creation failed" +errorResponse)
            console.log('Creation failed');
            alert(`Error: ${JSON.stringify(errorResponse)}`);
        });
    };

    render() {
        return (
            <Form {...formItemLayout} name="Create" onFinish={this.add} scrollToFirstError >

                <Form.Item name="allText" label="Your Message">
                    <Input />
                </Form.Item>
                
                <Form.Item {...tailFormItemLayout}>
                    <Button type="primary" htmlType="submit">Add</Button>
                </Form.Item>
            </Form>

        );

    };

};

export default withRouter(Reply);