Untitled

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

function App() {
  /**
 * 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"]
      },
    ],
 */

  // your data goes here (state)
const [newTitle,setNewTitle]=useState("");
const [newDescription,setNewDescription]=useState("");
const [newTopic,setNewTopic]=useState("");
const[addedAgenda,setAddedAgenda]=useState([
  {
    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"]
  }

]);
  // your methods goes here
const [topicsArr,setTopicsArr]=useState([]);
const [showAgendaBlock,setShowAgendaBlock]=useState(false)

const changeFun = e=>{
  const {value,name}=e.target;
  switch (name){
    case "newTitle":
      setNewTitle(value);
      break;
      case "newDescription":
        setNewDescription(value);
        break;
        case "newTopic":
          setNewTopic(value);
          break;
          default:
            break;
  }
}


const topicFun = () =>{
    if(newTopic.trim()!==""){
setTopicsArr(prevTopicArr=>[...prevTopicArr,newTopic]);
setNewTopic("");
    }
}

const agendaFun=()=>{
  if(newTitle.trim() !== "" && newDescription.trim()!=="" && topicsArr.length>0){
      const agenda={
        title:newTitle,
        description:newDescription,
        topics:topicsArr
      };
setAddedAgenda(prevAddedAgenda=>[...prevAddedAgenda,agenda]);
setNewTitle("");
setNewDescription("");
setNewTopic("");
setTopicsArr([]);
  }
};

const formCheck=e=>{
  e.preventDefault();
}

const checkAgendaFun=()=>{
  setShowAgendaBlock(prevShowAgendaBlock=>!prevShowAgendaBlock);
}

  return (
    <div>
      <h1 className="mx-5 mb-5">Agenda Manager</h1>
      {/* show/hide this following add agenda template */}
      {!showAgendaBlock &&(
      <div className="container" role="addAgenda">
        <button className="btn btn-info" role="goToView" onClick={checkAgendaFun}>
          Click To View Agenda
        </button>
        <form onSubmit={formCheck}>
          <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={newTitle}
              onChange={changeFun}
            />

            <small className="text-danger" data-testid="invalidTitle">
              {/**
               * show empty string if title input is valid
               * else show 'Title is required'
               */}
               {newTitle.trim().length === 0 && "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={newDescription}
              onChange={changeFun}
            />

            <small className="text-danger" data-testid="invalidDescription">
              {/**
               * show empty string if description input is valid
               * else show 'Title is required'
               */}
               {newDescription.trim().length === 0 && "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={newTopic}
              onChange={changeFun}
            />

            <small className="text-danger" data-testid="invalidTopic">
              {/**
               * show empty string if topic input is valid
               * else show 'Topic is required'
               */}
                {(newTopic.trim().length === 0 && topicsArr.length===0 )&& "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"
          onClick={topicFun} disabled={newTopic.trim()===""}
          >
            + Add Topic
          </button>
          {/* on click should add agenda details and disable the button if invalid inputs */}
          <button
            className="btn btn-success submitAlign"
            role="submitAgendaBtn"
            onClick={agendaFun}
            disabled={newTitle.trim()==="" || newDescription.trim()===""||topicsArr.length===0}
          >
            Submit Agenda
          </button>
        </form>
        {/* show if no topics added yet */}
        {topicsArr.length===0 &&(
        <div className="text-danger ml-2 mt-5" data-testid="noTopicsMsg">
          No Topics Added
        </div>)}
        {/* display the list of topics added using li */}
        {topicsArr.length>0 &&(
        <div className="card my-3">
          <div className="card-header">Added Topics</div>
          <div className="card-body">
            <ul className="list-group">
              {topicsArr.map((topic,index)=>(

              
              <li className="list-group-item" role="topicList" key={index}>
                {topic}
                
              </li>))}
            </ul>
          </div>
          <div className="card-footer">Refer the topics you added</div>
        </div>
        )}
      </div>)}
      {/* show/hide this following view agenda template */}
            {showAgendaBlock && (      <div className="container" role="viewAgenda">
        <button className="btn btn-info" role="goToAdd" onClick={checkAgendaFun}>
          Click To Add Agenda
        </button>
        {/* iterate the agenda details to display */}
        {addedAgenda.map((agenda,index)=>(
        <div className="card my-3" role="cards" key={index}>
          <div className="card-header">{agenda.title}</div>
          <div className="card-body">
            <ul className="list-group">
              {/* iterate the topics to display */}
              {agenda.topics.map((topic,index)=>(
              <li className="list-group-item" key={index}>
                {topic}
              </li>
              ))}
            </ul>
         </div>
          <div className="card-footer">{agenda.description}</div>
        </div>
        ))}
      </div>)}
    </div>
  );
}

export default App;