lolpee69 / reactapp.js

/* eslint-disable jsx-a11y/aria-role */ import React, { useState } from "react"; function App() { // Default agenda data for testing const [agenda, setAgenda] = 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"], }, ]); const [newTitle, setNewTitle] = useState(""); const [newDescription, setNewDescription] = useState(""); const [newTopic, setNewTopic] = useState(""); const [topics, setTopics] = useState([]); const [showAddAgenda, setShowAddAgenda] = useState(true); const [errors, setErrors] = useState({ title: "", description: "", topic: "", }); // Form validation const validateTitle = (title) => (title.trim() === "" ? "Title is required" : ""); const validateDescription = (description) => (description.trim() === "" ? "Description is required" : ""); const validateTopic = (topic) => (topic.trim() === "" ? "Topic is required" : ""); const handleTitleChange = (e) => { setNewTitle(e.target.value); setErrors({ ...errors, title: validateTitle(e.target.value) }); }; const handleDescriptionChange = (e) => { setNewDescription(e.target.value); setErrors({ ...errors, description: validateDescription(e.target.value) }); }; const handleTopicChange = (e) => { setNewTopic(e.target.value); setErrors({ ...errors, topic: validateTopic(e.target.value) }); }; const addTopic = () => { if (validateTopic(newTopic) === "") { setTopics([...topics, newTopic.trim()]); setNewTopic(""); } }; const submitAgenda = () => { if ( validateTitle(newTitle) === "" && validateDescription(newDescription) === "" && topics.length > 0 ) { setAgenda([...agenda, { title: newTitle.trim(), description: newDescription.trim(), topics }]); setNewTitle(""); setNewDescription(""); setTopics([]); } }; return ( <div> <h1 className="mx-5 mb-5">Agenda Manager</h1> {/* Add Agenda Template */} {showAddAgenda && ( <div className="container" role="addAgenda"> <button className="btn btn-info" role="goToView" onClick={() => setShowAddAgenda(false)}> Click To View Agenda </button> <form> <div className="my-3"> <label className="form-label">Title</label> <input type="text" placeholder="Enter the title" className="form-control" role="inputTitle" value={newTitle} onChange={handleTitleChange} /> <small className="text-danger" data-testid="invalidTitle"> {errors.title} </small> </div> <div className="my-3"> <label className="form-label">Description</label> <input type="text" placeholder="Enter the description" className="form-control" role="inputDescription" value={newDescription} onChange={handleDescriptionChange} /> <small className="text-danger" data-testid="invalidDescription"> {errors.description} </small> </div> <div className="my-3 w-50"> <label className="form-label">Enter topic</label> <input type="text" placeholder="Enter the topic" className="form-control" role="inputTopic" value={newTopic} onChange={handleTopicChange} /> <small className="text-danger" data-testid="invalidTopic"> {errors.topic} </small> </div> <button type="button" className="btn btn-success addAlign" role="addTopicBtn" onClick={addTopic} disabled={validateTopic(newTopic) !== ""} > + Add Topic </button> <button type="button" className="btn btn-success submitAlign" role="submitAgendaBtn" onClick={submitAgenda} disabled={ validateTitle(newTitle) !== "" || validateDescription(newDescription) !== "" || topics.length === 0 } > Submit Agenda </button> </form> {topics.length === 0 && ( <div className="text-danger ml-2 mt-5" data-testid="noTopicsMsg"> No Topics Added </div> )} {topics.length > 0 && ( <div className="card my-3"> <div className="card-header">Added Topics</div> <div className="card-body"> <ul className="list-group"> {topics.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> )} {/* View Agenda Template */} {!showAddAgenda && ( <div className="container" role="viewAgenda"> <button className="btn btn-info" role="goToAdd" onClick={() => setShowAddAgenda(true)}> Click To Add Agenda </button> {agenda.map((item, index) => ( <div className="card my-3" role="cards" key={index}> <div className="card-header">{item.title}</div> <div className="card-body"> <ul className="list-group"> {item.topics.map((topic, idx) => ( <li className="list-group-item" key={idx}> {topic} </li> ))} </ul> </div> <div className="card-footer">{item.description}</div> </div> ))} </div> )} </div> ); } export default App;