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 = {
   data: [
     {
       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"
       ]
     }
   ],
   activeView: "add",
   newAgenda: {
     title: "",
     description: "",
     topics: []
   },
   topicName: ""
   // your data goes here
 };
 // your methods goes here
 changeViewHandler = val => {
   console.log(val);
   this.setState({ activeView: val });
 };
 inputHandler = (val, fieldName) => {
   const { newAgenda } = this.state;
   const text = val.target.value;
   if (fieldName === "title") {
     this.setState({ newAgenda: { ...newAgenda, title: text } });
   } else if (fieldName === "description") {
     this.setState({ newAgenda: { ...newAgenda, description: text } });
   } else {
     this.setState({ topicName: text });
   }
 };
 addTopic = e => {
   e.preventDefault();
   const { topicName, newAgenda } = this.state;
   const newTopicsArr = [...newAgenda.topics, topicName];
   this.setState({
     newAgenda: { ...newAgenda, topics: newTopicsArr },
     topicName: ""
   });
 };
 addAgenda = e => {
   e.preventDefault();
   const { newAgenda, data } = this.state;
   const updatedAgenda = [...data, newAgenda];
   this.setState({
     data: updatedAgenda,
     newAgenda: {
       title: "",
       description: "",
       topics: []
     }
   });
 };
 render() {
   const { data, activeView, newAgenda, topicName } = this.state;
   return (
     <div>
       <h1 className="mx-5 mb-5">Agenda Manager</h1>
       {activeView === "add" ? (
         <div className="container" role="addAgenda">
           <button
             className="btn btn-info"
             role="goToView"
             onClick={() => this.changeViewHandler("view")}
           >
             Click To View Agenda
           </button>
           <form onSubmit={this.addAgenda}>
             <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"
                 value={newAgenda.title}
                 onChange={e => this.inputHandler(e, "title")}
               />
               <small className="text-danger" data-testid="invalidTitle" id='invalidTitle'>
                 {newAgenda.title.trim() ? "" : "Title is required"}
                 {/**
                  * show empty string if title input is valid
                  * else show '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"
                 value={newAgenda.description}
                 onChange={e => this.inputHandler(e, "description")}
               />
               <small className="text-danger" data-testid="invalidDescription">
                 {newAgenda.description.trim() ? "" : "Description is required"}
                 {/**
                  * show empty string if description input is valid
                  * else show '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"
                 value={topicName}
                 onChange={e => this.inputHandler(e, "topic")}
               />
               <small className="text-danger" data-testid="invalidTopic">
                 {topicName.trim() || newAgenda.topics.length ? "" : "Topic is required"}
                 {/**
                  * show empty string if topic input is valid
                  * else show '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={!topicName.trim()}
               onClick={this.addTopic}
             >
               + Add Topic
             </button>
             {/* on click should add agenda details and disable the button if invalid inputs */}
             <button
               className="btn btn-success submitAlign"
               role="submitAgendaBtn"
               type='submit'
               disabled={
                 !(
                   newAgenda.description.trim() &&
                   newAgenda.title.trim() &&
                   newAgenda.topics.length
                 )
               }
             >
               Submit Agenda
             </button>
           </form>
           {/* show if no topics added yet */}
           {!newAgenda.topics.length ? (
             <div className="text-danger ml-2 mt-5" data-testid="noTopicsMsg">
               No Topics Added
             </div>
           ) : (
             <div className="card my-3">
               <div className="card-header">Added Topics</div>
               <div className="card-body">
                 <ul className="list-group">
                   {newAgenda.topics.map(topic => {
                     return (
                       <li className="list-group-item" role="topicList">
                         {topic}
                         {/* topics list */}
                       </li>
                     );
                   })}
                 </ul>
               </div>
               <div className="card-footer">Refer the topics you added</div>
             </div>
           )}
           {/* display the list of topics added using li */}
         </div>
       ): <div className="container" role="viewAgenda">
       <button
         className="btn btn-info"
         role="goToAdd"
         onClick={() => this.changeViewHandler("add")}
>
Click To Add Agenda
</button>
{/* iterate the agenda details to display */}
{data.map(item => {
return (
<div className="card my-3" role="cards">
<div className="card-header">{item.title}</div>
<div className="card-body">
<ul className="list-group">
{/* iterate the topics to display */}
{item.topics.map(topic => {
return <li className="list-group-item">{topic}</li>;
})}
</ul>
</div>
<div className="card-footer">{item.description}</div>
</div>
);
})}
</div>}
</div>
);
}
}

export default App;