Untitled

import React, { Component } from "react";
class App extends Component {
    state = {
        newTitle: "",
        newDescription: "",
        newTopic: "",

        addedAgenda: [
            {
                title: "Angular",
                description: "Some description about the angular",
                topics: ["Introduction", "Typescript","Why Angular?","Understanding Versions", “Fundamentals”]
            },
            {
                title: "Vue",
                description:”Some description about the vue“,
                topics: [“Introduction”, "Javascript",”Why Vue?","Vue Bindings”,“Component Interaction“]
            }
        ],
        addedTopic : [],
        showAgendaBlock : false
    }
    handleChangeFn = e =>{
        const value = e.target.value;
        const name = e.target.name;
        this.setState({[name]:value})
    }
    
    addTopicFn = () => {
        this.state.addedTopic.push(this.state.newTopic)
        this.setState({newTopic : ""});

    addAgendaFn = () => {
        var agenda ={
            title : this.state.newTitle,
            description: this.state.newDescription,
            topics : this.state.addedTopic
        }
        this.setState({newTitle: ""})
        this.setState({ newDescription:""})
        this.setState({ newTopic: ""}) 
        this.setState({ addedTopic:[]})
        this.state.addedAgenda.push(agenda)
    }
    
    preventSubmit = (e) => {
        e.preventDefault()
    }
    
    showAgendaBlockFn = () => {
        this.state.showAgendaBlock === false ? this.setState({showAgendaBlock: false})
    }

    render() {
        return(
            <div>
                <h1 className="mx-5 mb-5">Agenda Manager</h1>
                {!this.state.showAgendaBlock && 
                    <div className=”container” role="addAgenda">
                        <button className="btn btn-info" role="goToView" onClick={this.showAgendaBlockFn} >Click To View Agenda</button>
                        <form onSubmit={this.preventSubmit}>
                            <div className="my-3">
                                <label className="form-label">Title</label>
                                    <input type="text" name="newTitle" placeholder="Enter the title" className="form-control" role="inputTitle" value={this.state.newTitle} onChange={this.handleChangeFn}/>
                                    <small className="text-danger" data-testid="invalidTitle"> 
                                    {this.state.newTitle.trim().length ===0  ? "Title is required":""}
                                    </small>
                            </div>
                            <div className="my-3">
                                <label className="form-label">Description</label>
                                    ‹input type="text" name=”newDescription" placeholder=”Enter the description"
                                    className="form-control" role="input Description" value={this.state.newDescription} onChange={this.handleChangeFn}/>
                                    ‹small className="text-danger" data-testid="invalidDescription"›
                                    {this.state.newDescription.trim().length === 0 ?"Description is required":""}
                                    </small>                                
                            </div>
                            <div className="my-3 w-50">
                                ‹label className="form-label"> Enter topic</label>
                                    <input type="text" name="newTopic"  placeholder="Enter the topic" className="form-control" role="input Topic" 
                                    value={this.state.newTopic} onChange={this.handleChangeFn}/> 
                                    ‹small className="text-danger” data--testid="invalidTopic"›
                                    {this.state.newToplc.trim().length === 0 & this.state.addedTopic.length === 0 ? "Topic is required":""}
                                    ‹/small›
                            </div>
                            <button className="btn btn-success addAlign" role="addTopicBtn" onClick={this.addTopicFn} disabled={this.state.newTopic.trim().length === 0}>+ Add Topic
                            </button>
                            <button className=”btn btn-success submitAlign" role="submitAgendaBtn" onClick={this.addAgendaFn} disabled={this.state.newTitle.trim().length === 0 || this.state.newDescription.trim().length === 0 || this.state.addedTopic.length === 0}>
                            Submit Agenda 
                            </button>
                        ‹/form>
                        {this.state.addedTopic.length === 0 && 
                            <div className="text-danger ml-2 mt-5" data-testid = "noTopicsMsg"> 
                                No TopicsAdded
                            </div>
                        }
                        {this.state/addedTopic.length ! == 0 && 
                            <div className="card my-3">
                                <div className="card-header">Added Topics </div> 
                                    <div classNmae ="card-body">
                                        <ul className = "list-group">
                                            {this.state.addedTopic.map(topic => {
                                                return (
                                                    <li className = "list-group-item" role = "topicList"> {topic} </li>
                                                )
                                            })}
                                        </ul>
                                    </div> 
                                    <div className="card-footer">Refer the topics you added</div>
                            </div>
                        }
                    </div>
                }

                {this.state.showAgendaBlock &&
                    <div className="container" role="viewAgenda">
                        <button className="btn btn-info" role="goToAdd" onClick={this.showAgentBlockFn}> Click to Add Agenda </button>
                        {this.state.addedAgenda.map(agenda => {
                            return (
                                <div className="card my-3" role="cards">
                            <div className="card-header">
                                {agenda.title}
                            </div>
                            <div className="card-body">
                                <ul className="list-group">
                                    {agenda.topics.map(topic=> {
                                        return(
                                            <li className="list-group-item">
                                                {topic}
                                            </li>
                                        )
                                    })}
                            <div className="card-footer">
                                {agenda.description}
                            </div>
                        </div>
                            )
                        })}
                                
                    </div>   
                }
                </div>
            );
        }
    }
export default App;