Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Upload

Welcome to Scribd!

  • 22 views

    Home

    Uploaded by

    9discoveryanimal
    This component defines a Home page with authentication, navigation links, a modal form for adding records, and validation. It imports React and context libraries and defines state and handlers for authentication, navigation, and form submission.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd

    Home

    Uploaded by

    9discoveryanimal
    22 views4 pages
    This component defines a Home page with authentication, navigation links, a modal form for adding records, and validation. It imports React and context libraries and defines state and handlers for authentication, navigation, and form submission.

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This component defines a Home page with authentication, navigation links, a modal form for adding records, and validation. It imports React and context libraries and defines state and handlers for authentication, navigation, and form submission.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    22 views4 pages

    Home

    Uploaded by

    9discoveryanimal
    This component defines a Home page with authentication, navigation links, a modal form for adding records, and validation. It imports React and context libraries and defines state and handlers for authentication, navigation, and form submission.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    You are on page 1of 4

    Home.

    jsx

    import { Button, Modal, Form } from "react-bootstrap";


    import { useState } from "react";
    import { useNavigate } from "react-router";
    import { useUserAuth } from "../context/UserAuthContext";

    const Home = () => {


    const { logOut, user } = useUserAuth();
    const navigate = useNavigate();
    const [showModal, setShowModal] = useState(false);
    const [id, setId] = useState("");
    const [name, setName] = useState("");
    const [city, setCity] = useState("");
    const [idError, setIdError] = useState("");
    const [nameError, setNameError] = useState("");
    const [cityError, setCityError] = useState("");

    const handleLogout = async () => {


    try {
    await logOut();
    navigate("/");
    } catch (error) {
    console.log(error.message);
    }
    };

    const handleModalSubmit = () => {


    let isValid = true;

    // ID validation
    if (!id.trim()) {
    setIdError("ID is required");
    isValid = false;
    } else {
    setIdError("");
    }

    // Name validation
    if (!name.trim()) {
    setNameError("Name is required");
    isValid = false;
    } else {
    setNameError("");
    }
    // City validation
    if (!city.trim()) {
    setCityError("City is required");
    isValid = false;
    } else {
    setCityError("");
    }

    // Submit if all fields are valid


    if (isValid) {
    // Your submit logic goes here
    setShowModal(false);
    }
    };

    return (
    <>
    <div className="flex">
    <div className="w-1/6 h-screen bg-gray-200">
    <ul className="py-4">
    <li className="px-4 py-2 my-2 text-gray-800 hover:bg-gray-
    300 cursor-pointer">
    <a href="#">Student</a>
    </li>
    <li className="px-4 py-2 my-2 text-gray-800 hover:bg-gray-
    300 cursor-pointer">
    <a href="#">Project</a>
    </li>
    </ul>
    </div>
    <div className="w-5/6 p-4">
    <div className="p-4 box mt-3 text-center">
    Hello Welcome <br />
    {user && user.email}
    </div>

    <div className="d-grid gap-2">


    <Button variant="primary" onClick={() =>
    setShowModal(true)}>
    Open Modal
    </Button>
    <Button variant="primary" onClick={handleLogout}>
    Log out
    </Button>
    </div>

    {/* Modal */}


    <Modal show={showModal} onHide={() => setShowModal(false)}>
    <Modal.Header closeButton>
    <Modal.Title>Modal Title</Modal.Title>
    </Modal.Header>
    <Modal.Body>
    <Form>
    <Form.Group className="mb-3" controlId="formId">
    <Form.Label>ID</Form.Label>
    <Form.Control
    type="text"
    placeholder="Enter ID"
    value={id}
    onChange={(e) => setId(e.target.value)}
    isInvalid={!!idError}
    />
    <Form.Control.Feedback type="invalid">
    {idError}
    </Form.Control.Feedback>
    </Form.Group>

    <Form.Group className="mb-3" controlId="formName">


    <Form.Label>Name</Form.Label>
    <Form.Control
    type="text"
    placeholder="Enter Name"
    value={name}
    onChange={(e) => setName(e.target.value)}
    isInvalid={!!nameError}
    />
    <Form.Control.Feedback type="invalid">
    {nameError}
    </Form.Control.Feedback>
    </Form.Group>

    <Form.Group className="mb-3" controlId="formCity">


    <Form.Label>City</Form.Label>
    <Form.Control
    type="text"
    placeholder="Enter City"
    value={city}
    onChange={(e) => setCity(e.target.value)}
    isInvalid={!!cityError}
    />
    <Form.Control.Feedback type="invalid">
    {cityError}
    </Form.Control.Feedback>
    </Form.Group>
    </Form>
    </Modal.Body>
    <Modal.Footer>
    <Button variant="secondary" onClick={() =>
    setShowModal(false)}>
    Close
    </Button>
    <Button variant="primary" onClick={handleModalSubmit}>
    Save Changes
    </Button>
    </Modal.Footer>
    </Modal>
    </div>
    </div>
    </>
    );
    };

    export default Home;

    You might also like