CS307-Team24/twistter-frontend/src/Writing_Microblogs.js

import React, { Component } from "react";
import { BrowserRouter as Router } from 'react-router-dom';
import Route from 'react-router-dom/Route';
import axios from 'axios';


class Writing_Microblogs extends Component {

    constructor(props) {
        super(props);
        this.state = {
            value: '',
            title: '',
            topics: '',
            characterCount: 250
            
        };

        
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleChangeforPost = this.handleChangeforPost.bind(this);
        this.handleChangeforTopics = this.handleChangeforTopics.bind(this);
    
    }

    handleChange(event) {
        this.setState( {title: event.target.value });
    }

    handleChangeforTopics(event) {
        this.setState( {topics: event.target.value});
    }

    handleSubmit(event) {

        const postData = {
            body: this.state.value, 

            userImage: "bing-url",
            microBlogTitle: this.state.title,
            microBlogTopics: this.state.topics.split(', ')
        }
        const headers = {
            headers: { 'Content-Type': 'application/json'}
        }
        
        axios
            .post('/putPost', postData, headers)
            .then((res) =>{
                alert('Post was shared successfully!')
                console.log(res.data);
            })
            .catch((err) => {
                alert('An error occured.');
                console.error(err);
            })
        event.preventDefault();
        this.setState({value: '', title: '',characterCount: 250, topics: ''})
    }

    handleChangeforPost(event) {
        this.setState({value: event.target.value })
    }

    handleChangeforCharacterCount(event) {
        const charCount = event.target.value.length
        const charRemaining = 250 - charCount
        this.setState({characterCount: charRemaining })
    
    }

    render() {
        return (
            <div>
            <div style={{ width: "200px", height: "50px", marginTop: "180px", marginLeft: "50px" }}>         
             <form>
                    <textarea placeholder="Enter Microblog Title" value={this.state.title} required onChange={this.handleChange} cols={30} rows={1} />

            </form>
            </div>
            <div style={{ width: "200px", height: "50px", marginLeft: "50px"}} >         
            <form>                    
                <textarea placeholder="Enter topics seperated by a comma" value={this.state.topics} required onChange={this.handleChangeforTopics} cols={40} rows={1} />
            </form>
             </div>
             
             <div style={{ width: "200px", marginLeft: "50px"}}>        
                <form onSubmit={this.handleSubmit}>
                    <textarea value={this.state.value} required maxLength="250" placeholder= "Write Microblog here..." 
                        onChange = { (e) => { this.handleChangeforPost(e); this.handleChangeforCharacterCount(e) } } cols={40} rows={20} />      
                 <div style={{ fontSize: "14px", marginRight: "-100px"}} >
                    <p2>Characters Left: {this.state.characterCount}</p2>
                 </div>
                 <div style={{ marginRight: "-100px"  }}>        
                    <button onClick>Share Post</button> 
                 </div>
                </form>
             </div>
             </div>
            
        );
    }

    
}

export default Writing_Microblogs;