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” ]
}s
{
title: “Vue”,
description: “Some description about the vue”,
topics: [“Introduction”, “Javascript”, “Why Vue?”, “Vue
Bindings”, “Component Interaction” ]
}
],
topicsArr: [],
showAgendaBlock: false
}
changeFun = e => {
const value = e.target.value;
const name = e.target.name;
this.setState({ [name]: value })
}
topicFun = () => {
this.state.topicsArr.push(this.state.newTopic)
this.setState({ newTopic: “” });
agendaFun = () => {
var agenda = {
title: this.state.newTitle,
description: this.state.newDescription,
topics: this.state.topicsArr
}
this.setState({ newTitle: “” })
this.setState({ newDescription: “” })
this.setState({ newTopics: “” })
this.setState({ topicsArr: [] })
this.state.AddedAgenda.push( agenda)
formChec = (e) => {
e.preventDefault()
}
checkAgendaFun = () => {
this.state.showAgendaBlock === false ? this.setState({ showAgendaBlock:
true }) : 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”
onClick={this.checkAgendaFun} role=”goToView”>Click To View Agenda</button>
<form onSubmit={this.formCheck}>
<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.changeFun} />
<small className=”text-danger” datatestid=”invalidTitle”>
{this.state.newTitle.trim().length === @ ?
“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=”inputDescription” value={this.state.newDescription}
onChange={this.changeFun} />
<small className=”text-danger” datatestid=”invalidDescription”>
{this.state.newDescription.trim().length ===
@ ? “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=”inputTopic”
value={this.state.newTopic} onChange={this.changeFun} />
<small className=”text-danger” datatestid=”invalidTopic”>
{this.state.newlopic.trim().length === @ &&
this.state.topicsArr.length === ? “Topic is required” : “”}
</small>
</div>
<button className=”btn btn-success addAlign”
role=”addTopicBtn” onClick={this.topicFun}
disabled={this.state.newTopic.trim().length === @}>+ Add Topic</button>
<button className=”btn btn-success submitAlign”
role=”submitAgendaBtn” onClick={this.agendaFun}
disabled={this.state.newTitle.trim().length === @ ||
this.state.newDescription.trim().length === @ || this.state.topicsArr.length ===
@} >Submit Agenda</button>
</form>
{this.state.topicsArr.length === @ &&
<div className=”text-danger ml-2 mt-5" datatestid=”noTopicsMsg”>
No Topics Added
</div>
}
{this.state.topicsArr.length !== @ &&
<div className=”card my-3">
<div className=”card-header”>Added Topics</div>
<div className=”card-body”>
<ul className=”list-group”>
{this.state.topicsArr.map(topic => {
return (
<li className=”list-group-item”
role=”topicList”>{topic}</1li>
)
})}
</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.checkAgendaFun}>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-groupitem”>
{topic}
</li>
)
})}
</ul>
</div>
<div className=”card-footer”>
{agenda.description}
</div>
</div>
})}
</div>
}
</div>
);
}
}


export default App;