Programming For Students: September 2024

CONTACTS LIST CODE:

"use client";

import { useSearchParams, useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import axios from "axios";
import {
  Button,
  Table,
  Row,
  Col,
  Modal,
  Container,
  Form,
} from "react-bootstrap";
import * as Icon from "react-bootstrap-icons";
import ViewContact from "@/components/contacts/view";
import UpdateContact from "@/components/contacts/update";

const Main = () => {
  const searchParams = useSearchParams();
  const [contactsList, setContactsList] = useState([]);
  const [groupssList, setGroupsList] = useState([]);
  const [showModal, setShowModal] = useState(false);
  const [modalTitle, setModalTitle] = useState("");
  const [searchKey, setSearchKey] = useState("");

  const fullName = searchParams.get("fullname");
  const router = useRouter();
  const mainUrl = sessionStorage.mainURL;
  const userId = sessionStorage.userId;
  //======== contact details ===================
  const [contact, setContact] = useState({
    contactId: "",
    contactName: "",
    contactPhone: "",
    contactEmail: "",
    contactAddress: "",
    contactGroup: "",
    contactGroupId: "",
  });

  const [currentModal, setCurrentModal] = useState({
    viewModal: false,
    updateModal: false,
  });

  const getContacts = async () => {
    const url = `${mainUrl}contacts.php`;
    const jsonData = { userId: userId };

    const response = await axios.get(url, {
      params: { json: JSON.stringify(jsonData), operation: "getContacts" },
    });

    setContactsList(response.data);
  };

  // const getGroups = async () => {
  //   const url = `${mainUrl}groups.php`;

  //   const response = await axios.get(url, {
  //     params: { json: "", operation: "getGroups" },
  //   });
  //   setGroupsList(response.data);
  // };

  const addContact = () => {
    sessionStorage.setItem("userId", userId);
    router.push("/addcontact");
  };

  const getContactDetails = async (contactId) => {
    const url = `${mainUrl}contacts.php`;
    const jsonData = { contactId: contactId };
    const response = await axios.get(url, {
      params: {
        json: JSON.stringify(jsonData),
        operation: "getContactDetails",
      },
    });
    const thisContact = response.data[0];
    setContact({
      contactId: thisContact.contact_id,
      contactName: thisContact.contact_name,
      contactPhone: thisContact.contact_phone,
      contactEmail: thisContact.contact_email,
      contactAddress: thisContact.contact_address,
      contactGroup: thisContact.grp_name,
      contactGroupId: thisContact.contact_group,
    });
  };

  const showViewModalForm = (contactId) => {
    getContactDetails(contactId);
    setCurrentModal({ viewModal: true, updateModal: false });
    setModalTitle("VIEW RECORD DETAILS");
    setShowModal(true);
  };

  const showUpdateModalForm = async (contactId) => {
    await getContactDetails(contactId);
    setCurrentModal({ viewModal: false, updateModal: true });
    setModalTitle("UPDATE RECORDS");
    setShowModal(true);
  };

  const closeModal = () => {
    setShowModal(false);
    setCurrentModal({ viewModal: false, updateModal: false });
  };

  const deleteContact = async (contactId) => {
    if (confirm("Are you sure you want to delete this contact?")) {
      const url = `${mainUrl}contacts.php`;

      const jsonData = {
        contactId: contactId,
      };

      const formData = new FormData();
      formData.append("operation", "deleteContact");
      formData.append("json", JSON.stringify(jsonData));

      const response = await axios({
        url: url,
        method: "POST",
        data: formData,
      });

      if (response.data == 1) {
        getContacts();
        alert("You have successfully DELETED your contact!");
      } else {
        alert("DELETE failed!");
      }
    }
  };

  const searchContact = async () => {
    const url = `${mainUrl}contacts.php`;
    const jsonData = { userId: userId, searchKey: searchKey };

    const response = await axios.get(url, {
      params: { json: JSON.stringify(jsonData), operation: "searchContact" },
    });

    setContactsList(response.data);
  };

  const getRecords = async () => {
    const url = `${mainUrl}utilities.php`;

    const jsonData = { userId: userId };

    const response = await axios.get(url, {
      params: {
        json: JSON.stringify(jsonData),
        operation: "getContactsGroups",
      },
    });

    setContactsList(response.data.contacts);
    setGroupsList(response.data.groups);
  };

  useEffect(() => {
    getRecords();
    // getContacts();
    // getGroups();
  }, []);

  return (
    <>
      <Container>
        <h1>Contacts of {fullName}</h1>
        <Row className="d-flex align-items-center">
          <Col md={10}>
            <Form.Control
              type="search"
              placeholder="Search Contacts"
              size="sm"
              className="m-3"
              value={searchKey}
              onChange={(e) => {
                setSearchKey(e.target.value);
              }}
            />
          </Col>
          <Col md={2} className="text-center">
            <Button onClick={searchContact} size="sm" className="w-100">
              <Icon.Search size={15} /> Search
            </Button>
          </Col>
        </Row>
        <Table striped hover>
          <thead bgcolor="red">
            <tr>
              <th className="bg-dark text-white">Name</th>
              <th className="bg-dark text-white">Address</th>
              <th className="bg-dark text-white">Phone</th>
              <th className="bg-dark text-white">Actions</th>
            </tr>
          </thead>
          <tbody>
            {contactsList.map((contact, index) => {
              return (
                <tr key={index}>
                  <td>{contact.contact_name}</td>
                  <td>{contact.contact_address}</td>
                  <td>{contact.contact_phone}</td>
                  <td>
                    <Icon.Eye
                      className="ms-3"
                      color="green"
                      style={{ cursor: "pointer" }}
                      onClick={() => {
                        showViewModalForm(contact.contact_id);
                      }}
                    />
                    <Icon.Pen
                      className="ms-3"
                      color="blue"
                      style={{ cursor: "pointer" }}
                      onClick={() => {
                        showUpdateModalForm(contact.contact_id);
                      }}
                    />
                    <Icon.Trash
                      className="ms-3"
                      color="red"
                      style={{ cursor: "pointer" }}
                      onClick={() => {
                        deleteContact(contact.contact_id);
                      }}
                    />
                  </td>
                </tr>
              );
            })}
          </tbody>
        </Table>
        <div className="fixed-bottom right-0 text-end p-2">
          <Button onClick={addContact}>
            <Icon.PlusCircle size={25} />
          </Button>
        </div>
        {/* ===================== VIEW MODAL ============== */}
        <Modal
          show={showModal}
          onHide={() => {
            setShowModal(false);
          }}
        >
          <Modal.Header closeButton className="bg-success text-white">
            <Modal.Title>{modalTitle}</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            {/*call ViewContact Component*/}
            {currentModal.viewModal && (
              <ViewContact contact={contact} closeMe={closeModal} />
            )}
            {/*call Update  Component*/}
            {currentModal.updateModal && (
              <UpdateContact
                contactDetails={contact}
                groupssList={groupssList}
                closeMe={closeModal}
                refreshDisplay={getContacts}
              />
            )}
          </Modal.Body>
        </Modal>
      </Container>
    </>
  );
};

export default Main;

COMPONENTS:

view.js

import { Container, Table, Row, Col, Button } from "react-bootstrap";

const ViewContact = ({contact, closeMe}) => {
  return (
    <Container>
      <Table>
        <tbody>
          <tr>
            <td>Name</td>
            <td>{contact.contactName}</td>
          </tr>
          <tr>
            <td>Address</td>
            <td>{contact.contactAddress}</td>
          </tr>
          <tr>
            <td>Phone</td>
            <td>{contact.contactPhone}</td>
          </tr>
          <tr>
            <td>Email</td>
            <td>{contact.contactEmail}</td>
          </tr>
          <tr>
            <td>Group</td>
            <td>{contact.contactGroup}</td>
          </tr>
        </tbody>
      </Table>
      <Row>
        <Col lg={12} className="text-end">
        <Button
              variant="secondary"
              onClick={closeMe} //callback function
              className="w-25"
            >
              Close
            </Button>
        </Col>
      </Row>
    </Container>
  );
};

export default ViewContact;

update.js

import { Container, Table, Row, Col, Button, Form } from "react-bootstrap";
import axios from "axios";
import { useEffect, useState } from "react";

const UpdateContact = ({ contactDetails, groupssList, closeMe, refreshDisplay }) => {
  const mainUrl = sessionStorage.mainURL;

  const [contact, setContact] = useState({
    contactId: contactDetails.contactId,
    contactName: contactDetails.contactName,
    contactPhone: contactDetails.contactPhone,
    contactEmail: contactDetails.contactEmail,
    contactAddress: contactDetails.contactAddress,
    contactGroup: contactDetails.contactGroup,
    contactGroupId: contactDetails.contactGroupId,
  });

  const updateContact = async () => {
    const url = `${mainUrl}contacts.php`;

    const jsonData = {
      contactId: contact.contactId,
      contactName: contact.contactName,
      contactEmail: contact.contactEmail,
      contactPhone: contact.contactPhone,
      contactAddress: contact.contactAddress,
      contactGroupId: contact.contactGroupId,
    };

    const formData = new FormData();
    formData.append("operation", "updateContact");
    formData.append("json", JSON.stringify(jsonData));

    const response = await axios({
      url: url,
      method: "POST",
      data: formData,
    });

    if (response.data == 1) {
      //getContacts();
      alert("You have successfully UPDATED your contact!");
    } else {
      alert("UPDATE failed!");
    }
  };

  return (
    <Container>
      <Table>
        <tbody>
          <tr>
            <td>Name</td>
            <td>
              <Form.Control
                type="text"
                value={contact.contactName}
                onChange={(e) => {
                  setContact({ ...contact, contactName: e.target.value });
                }}
              />
            </td>
          </tr>
          <tr>
            <td>Address</td>
            <td>
              <Form.Control
                type="text"
                value={contact.contactAddress}
                onChange={(e) => {
                  setContact({ ...contact, contactAddress: e.target.value });
                }}
              />
            </td>
          </tr>
          <tr>
            <td>Phone</td>
            <td>
              <Form.Control
                type="text"
                value={contact.contactPhone}
                onChange={(e) => {
                  setContact({ ...contact, contactPhone: e.target.value });
                }}
              />
            </td>
          </tr>
          <tr>
            <td>Email</td>
            <td>
              <Form.Control
                type="text"
                value={contact.contactEmail}
                onChange={(e) => {
                  setContact({ ...contact, contactEmail: e.target.value });
                }}
              />
            </td>
          </tr>
          <tr>
            <td>Group</td>
            <td>
              <Form.Select
                value={contact.contactGroupId}
                onChange={(e) => {
                  setContact({ ...contact, contactGroupId: e.target.value });
                }}
              >
                {groupssList.map((group, index) => {
                  return (
                    <option value={group.grp_id} key={group.grp_id}>
                      {group.grp_name}
                    </option>
                  );
                })}
              </Form.Select>
            </td>
          </tr>
        </tbody>
      </Table>
      <Row>
        <Col lg={6} className="text-center">
          <Button
            variant="secondary"
            onClick={closeMe} //callback function
            className="w-75 mt-2"
          >
            Close
          </Button>
        </Col>
        <Col lg={6} className="text-center">
          <Button
            variant="primary"
            onClick={()=>{
              updateContact();
              refreshDisplay();
              closeMe();
            }}
            className="w-75 mt-2"
          >
            Update
          </Button>
        </Col>
      </Row>
    </Container>
  );
};

export default UpdateContact;

Programming For Students

IMAGE: CODE SPLITTING - USE COMPONENTS (NEXT JS)

TEXT: CODE SPLITTING - USE COMPONENTS

UNITY: USING FIREBALL TO ELIMINATE ENEMIES

About This Blog

Labels