messages.js

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

class Messages extends React.Component{

    constructor(props){
        super(props)
        this.state = {
            messages: []
        }
    }

    static contextType = UserContext;

    componentDidMount(){
        fetch(`https://melody-annex-3000.codio-box.uk/api/v1/message`, {
            headers: {
                "Authorization": this.context.user.Authorization,
            }
        })
        .then(status)
        .then(json)
        .then(data => {
            console.log(data)
            this.setState({messages:data})
        })
        .catch(errorResponse => {
            alert("Creation failed" +errorResponse)
            console.log('Creation failed');
            alert(`Error: ${JSON.stringify(errorResponse)}`);
        });

        
        fetch(`https://melody-annex-3000.codio-box.uk/api/v1/message/${this.context.user.ID}`, {
            headers: {
                "Authorization": this.context.user.Authorization,
            }
        })
        .then(status)
        .then(json)
        .then(data => {
            console.log(data)
            this.setState({messages:data})
        })
        .catch(errorResponse => {
            alert("Creation failed" +errorResponse)
            console.log('Creation failed');
            alert(`Error: ${JSON.stringify(errorResponse)}`);
        });
        
    };

    

    delete(ID){
        fetch(`https://melody-annex-3000.codio-box.uk/api/v1/message/${ID}`, {
            method: "DELETE",
            headers: {
                "Authorization": this.context.user.Authorization,
            }
        })
        .then(status)
        .then(data => {
            console.log(data)
        })
        .catch(errorResponse => {
            console.log('Delete failed');
            alert(`Error: ${JSON.stringify(errorResponse)}`);
        });
    }
    


    render() {
        if (!this.state.messages.length) {
            return <h3>Loading messages...</h3>
          }
        const messageList = this.state.messages.map(message => {
            if(message.authorID===this.context.user.ID){
                return (
                <div style={{padding:"10px"}} key={message.ID}>
                    <Col>
                        <h3>{this.context.user.username}:</h3>
                        <p>{message.allText}</p>
                    </Col>
                </div>
                )
            }else{
                if(this.context.user.role==="admin"){
                    return (
                        <div style={{padding:"10px"}} key={message.ID}>
                            <Col>
                                <h3>User{message.authorID}:</h3>
                                <p>{message.allText}</p>
                                <button><Link to ={{pathname: `/reply/${message.authorID}`,state:{data:message.authorID}}}>Reply</Link></button>
                                <button onClick={()=>{this.delete(message.ID)}}>Delete</button>
                            </Col>
                        </div>
                    ) 
                }else{
                    return (
                        <div style={{padding:"10px"}} key={message.ID}>
                            <Col>
                                <h3>Admin:</h3>
                                <p>{message.allText}</p>
                            </Col>
                        </div>
                    )
                } 
            }
          });
        return (
            <Col type="flex" justify="space-around">
            {messageList}
            </Col>

        );

    };

};

export default withRouter(Messages);