Notes

/* eslint-disable jsx-a11y/aria-role */
import React, { Component } from "react";

class App extends Component {

/**
* keep this following data as default data in agenda details as it is required for testing
* [
{
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"]
},
],
*/

state = {
// your data goes here
topiccount: 0,
enableButtonAdd: false,
enableButtonSubmit: false,
value: false,
toggle: false,
showForm: false,
show: false,
title: "",
description: "",
topic: "",
title_error: "",
description_error: "",
topic_error: "",
inputAdd: [
{
title: "",
description: "",
topic: ""
}
]
}

// your methods goes here

onTitleChanged = (e) => {
this.setState({
title: e.target.value,
value: true,
}, function () {
console.log("new title ", this.state);

if (this.validateTitleDescTopic(this.state.title, 0)) {
this.setState({
title_error: "please enter a valid title",

}, function () {
console.log("new title ", this.state);
this.handleEnableButton();
})
} else {
this.setState({
title_error: "",
}, function () {
console.log("new title ", this.state);
this.handleEnableButton();
})
}
});
};

onDescChanged = (e) => {
this.setState({
description: e.target.value,
value: true,
}, function () {
console.log("new description ", this.state);

if (this.validateTitleDescTopic(this.state.description, 0)) {
this.setState({
description_error: "please enter a valid description",

}, function () {
console.log("new description ", this.state);
this.handleEnableButton();
})
} else {
this.setState({
description_error: "",

}, function () {
console.log("new description ", this.state);
this.handleEnableButton();
})
}
});
};

onTopicChanged = (e) => {
this.setState({
topic: e.target.value,
value: true,
}, function () {
console.log("new topic ", this.state);

if (this.validateTitleDescTopic(this.state.topic, 0)) {
this.setState({
topic_error: "please enter a valid topic",

}, function () {
console.log("new topic ", this.state);
this.handleEnableButton();
})
} else {
this.setState({
topic_error: "",

}, function () {
console.log("new topic ", this.state);
this.handleEnableButton();
})
}
});
};

handleAdd = (e) => {

e.preventDefault();
this.setState({
topiccount: 1,
enableButtonAdd: false,
enableButtonSubmit: true,
inputAdd: [...this.state.inputAdd, {
title: this.state.title,
description: this.state.description,
topic: this.state.topic
}],
title:"",
topic:"",
description:""
}, function () {
console.log(this.state.inputAdd)
});
this.viewHolderMethod();
this.addHolderMethod();

this.myRef.reset();
};

validateTitleDescTopic(text, minLength) {

let result = !text || text.trim().length <= minLength;
console.log("Length" + result + " count::" + text.trim().length);
return result;
}

handleEnableButton = () => {
if (this.state.topic !== "" &&
this.state.topic_error === ""
) {
this.setState({
enableButtonAdd: true,
}, function () {
});
}
else {
this.setState({
enableButtonAdd: false,
}, function () {
});
}

if (this.state.title !== "" &&
this.state.description !== "" &&
this.state.title_error === "" &&
this.state.description_error === "" &&
this.state.topiccount !== 0
) {
this.setState({
enableButtonSubmit: true,
}, function () {
});
}
else {
this.setState({
enableButtonSubmit: false,
}, function () {
});
}
};

Toggle = (e) => {
console.log(e.target.id);
if (e.target.id === "zoy") {
this.setState({
show: true,

}, function () {
console.log(this.state.show)
});
console.log("1")
}
else {
console.log("2")
this.setState({
show: false,

}, function () {
console.log(this.state.show)
});
console.log("1")

}
this.viewHolderMethod();
this.addHolderMethod();
};





viewHolderMethod() {
return (<>
{this.state.show === false &&
<div className="container" role="addAgenda">
<button id="zoy" className="btn btn-info" role="goToView" onClick={this.Toggle}>Click To View Agenda</button>
<form ref={(e1) => this.myRef =e1}>
<div className="my-3">
<label className="form-label">Title</label>
{/* title */}
<input type="text" name="newTitle" placeholder="Enter the title" className="form-control" role="inputTitle" onChange={this.onTitleChanged} />
<small className="text-danger" data-testid="invalidTitle" >
{this.state.title_error !== "" && `Title is required`}
</small>
</div>
<div className="my-3">
<label className="form-label">Description</label>
{/* description */}
<input type="text" name="newDescription" placeholder="Enter the description" className="form-control" role="inputDescription" onChange={this.onDescChanged} />
<small className="text-danger" data-testid="invalidDescription">

{this.state.description_error !== "" && `Description is required`}

</small>

</div>
<div className="my-3 w-50">
<label className="form-label">Enter topic</label>
{/* topic */}
<input type="text" name="newTopic" placeholder="Enter the topic" className="form-control" role="inputTopic" onChange={this.onTopicChanged} />
<small className="text-danger" data-testid="invalidTopic">
{this.state.topic_error !== "" && `Topic is required`}
</small>
</div>
{/* on click should add topics and disable the button if invalid topic */}
<button className="btn btn-success addAlign" role="addTopicBtn" disabled={!this.state.enableButtonAdd} onClick={this.handleAdd}>+ Add Topic</button>



{/* on click should add agenda details and disable the button if invalid inputs */}
<button className="btn btn-success submitAlign" role="submitAgendaBtn" disabled={!this.state.enableButtonSubmit}>Submit Agenda</button>
</form>
{/* show if no topics added yet */}
{this.state.topiccount === 0 &&
<div className="text-danger ml-2 mt-5" data-testid="noTopicsMsg">
No Topics Added
</div>}
{/* display the list of topics added using li */}

<div className="card my-3">
<div className="card-header">Added Topics</div>
<div className="card-body">
{this.state.inputAdd.map((list,key) => (<ul className="list-group" >
{key={key} && this.state.inputAdd[key].topic!=="" && <li className="list-group-item" role="topicList">{ list.topic}
</li>}
</ul>))}
</div>
<div className="card-footer">Refer the topics you added</div>
</div>
</div>}
</>)
}

addHolderMethod() {
return (<>
{this.state.show === true &&
<div className="container" role="viewAgenda">
<button className="btn btn-info" role="goToAdd" onClick={this.Toggle}>Click To Add Agenda</button>
{/* iterate the agenda details to display */}
<div className="card my-3" role="cards">
<div className="card-header">
{/* {title} */}
</div>
<div className="card-body">
<ul className="list-group">
{/* iterate the topics to display */}
<li className="list-group-item">
{/* {topic} */}
</li>
</ul>
</div>
<div className="card-footer">
{/* {description} */}
</div>
</div>
</div>}

</>);
}

render() {

return (
<div>
<h1 className="mx-5 mb-5">Agenda Manager</h1>
{this.viewHolderMethod()}
{this.addHolderMethod()}
</div>
);
}

}

export default App;