/ var / www / html / events / src / app / manageUsers / [ HOME SHELL ]

Name	Size	Permission	Action
page.js	3.72 KB	-rw-rw-r--

Code Editor : page.js

"use client";
import TopNavbar from "@/components/Navbar";
import React, { useState, useEffect } from "react";
import AddUser from "@/components/AddUser";
import UserTableRow from "@/components/UserTableRow";
import UpdateUser from "@/components/UpdateUser";

function Page() {
  const [visible, setVisible] = useState(false);

const [userDataToShow, setUserDataToShow] = useState({
    fName: "",
    lName: "",
    emailId: "",
    password: "",
    role: "",
    status: "",
  });

const handleCLick = () => {
    setVisible(false);
  };

const [updateUserVisible, setUpdateUserVisible] = useState(false);
  const handleUpdateUserCLick = () => {
    setUpdateUserVisible(false);
  };

const [data, setData] = useState([]);

useEffect(() => {
    fetch("http://events.iiitd.edu.in/api/getAllUsers")
      .then((res) => res.json())
      .then((json) => setData(json.result))
      .catch((err) => {});
  }, [visible, updateUserVisible]);

return (
    <div>
      <TopNavbar>
        <div className="pt-5 px-16 w-full">
          <div className="flex justify-between">
            <h1 className="text-xl font-bold">Users</h1>
            <button
              className="bg-teal-400 rounded-md p-2 hover:bg-teal-500"
              onClick={() => {
                setVisible(true);
              }}
            >
              Add User
            </button>
          </div>
          <div className="h-[28rem] overflow-y-auto  mt-20">
            <div className="w-full flex justify-center h-100dvh">
              <table className="table-auto border-4 border-slate-300 w-full">
                <thead className="">
                  <tr>
                    <th className="border-4 border-slate-300 ">S NO.</th>
                    <th className="border-4 border-slate-300 ">Name</th>
                    <th className="border-4 border-slate-300 ">Role</th>
                    <th className="border-4 border-slate-300 ">Email</th>
                    <th className="border-4 border-slate-300 ">Status</th>
                    <th className="border-4 border-slate-300 w-20 ">Modify</th>
                  </tr>
                </thead>
                <tbody className="">
                  {data.length === 0 ? (
                <tr>
                  <td
                    className="border-4 border-slate-300 text-center"
                    colSpan="6"
                  >
                    No Users Found
                  </td>
                </tr>
              ) : data.map((user, index) => (
                    <UserTableRow
                      key={index + 1}
                      id={index + 1}
                      name={user.fName}
                      lname={user.lName}
                      role={user.role}
                      email={user.emailId}
                      status={user.status}
                      password={user.pwd}
                      markUpdateUserVisibleTrue={markUpdateUserVisibleTrue}
                    />
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <AddUser visible={visible} handleCLick={handleCLick} />
        <UpdateUser
          visible={updateUserVisible}
          handleCLick={handleUpdateUserCLick}
          data={userDataToShow}
        />
      </TopNavbar>
    </div>
  );
}

export default Page;

Urban Research Lab

The Urban Research Lab (URL) at IIIT-Delhi was established in 2020, during a time when the pandemic brought the complexities of urban life more visible than ever. What started as an initiative by faculty and students has grown into a collaborative space for critically exploring and reimagining the urban questions through research, dialogue, and interdisciplinary engagement.

${this.title}

Code Editor : page.js

Urban Research Lab