/ var / www / html / events / src / components / [ HOME SHELL ]

Name	Size	Permission	Action
ui	[ DIR ]	drwxrwxr-x
AddEvent.js	8.29 KB	-rw-rw-r--
AddUser.js	5.79 KB	-rw-rw-r--
CustomInput.js	3.43 KB	-rw-rw-r--
EventTableRow.js	2.23 KB	-rw-rw-r--
Events.js	3.39 KB	-rw-rw-r--
Home.js	11.2 KB	-rw-rw-r--
Navbar.js	10.61 KB	-rw-rw-r--
NextToast.js	62 B	-rw-rw-r--
PaginateItems.js	2.61 KB	-rw-rw-r--
Provider.js	171 B	-rw-rw-r--
ShowEvent.js	8.95 KB	-rw-rw-r--
ShowHomeEvent.js	3.26 KB	-rw-rw-r--
UpdateEvent.js	10.27 KB	-rw-rw-r--
UpdateUser.js	8.89 KB	-rw-rw-r--
UserTableRow.js	1.64 KB	-rw-rw-r--

Code Editor : ShowEvent.js

"use client";
import Image from "next/image";
import React, { useEffect } from "react";
import { useState } from "react";
import { toast } from "react-toastify";

const ShowEvent = ({ visible, handleCLick, data }) => {
  const [files, setFiles] = useState([]);

const [uploadedFiles, setUploadedFiles] = useState([]);
  const [speakers, setSpeakers] = useState([]);
  const handleSubmit = async() => {
    const formdata = new FormData();
    for (let i = 0; i < files.length; i++) {
      formdata.append("files[]", files[i]);
    }
    formdata.append("eventId", data.eventId);
    formdata.append("eventName", data.name);
    formdata.append("eventDate",data.date);
    await fetch("http://events.iiitd.edu.in/api/addEventFiles", {
      method: "POST",
      body: formdata,
    })
      .then((response) => {
        toast.success("Files uploaded successfully", {
          position: "top-right",
          autoClose: 5000,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          theme: "dark",
          progress: undefined,
        });
      })
      .catch((err) => {
        toast.error("Error uploading files", {
          position: "top-right",
          autoClose: 5000,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          theme: "dark",
          draggable: true,
          progress: undefined,
        });
      });
  };

const handleDelete = () => {
    const formdata = new FormData();
    formdata.append("eventId", data.eventId);

fetch("http://events.iiitd.edu.in/api/deleteEvent", {
      method: "POST",
      body: formdata,
    })
      .then((response) => {
        toast.success("Event deleted successfully", {
          position: "top-right",
          autoClose: 5000,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
          theme: "dark",
        });
        handleCLick();
      })
      .catch((err) => {
        toast.error("Error deleting event", {
          position: "top-right",
          autoClose: 5000,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          theme: "dark",
          progress: undefined,
        });
      });
  };

useEffect(() => {
    if (visible) {
      const sentdata = {
        uri: (data.name+data.date).replaceAll(' ',''),
      };
      fetch("http://events.iiitd.edu.in/api/getEventFiles", {
        method: "POST",
        body: JSON.stringify(sentdata),
        headers: {
          "Content-type": "application/json; charset=UTF-8",
        },
      })
        .then((response) => {
          if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
          }
          return response.json();
        })
        .then((jsonData) => {
          setUploadedFiles(jsonData.result);
        })
        .catch((error) => {
          // console.error("Error:", error);
        });
        console.log(uploadedFiles);
    }
  }, [uploadedFiles, visible]);

useEffect(() => {

if(visible){

const speaker_Id = data.speaker_id;
        fetch("http://events.iiitd.edu.in/api/getSpeakers", {
          method: "POST",
          body: JSON.stringify({speaker_Id}),
          headers: {
            "Content-type": "application/json; charset=UTF-8",
          },
        }).then((response) => {
          if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
          }
          return response.json();
        }).then((data) => {

setSpeakers(data.result);

}).catch((error) => {
          console.error("Error:", error);
        });

}else{
      setSpeakers([]);
      setUploadedFiles([]);
    }
    
    
  }, [visible])

if (!visible) {
    
    return null;
  }
  return (
    <div className="fixed inset-x-72 inset-y-5 bg-slate-200 overflow-y-auto">
      <div className=" flex justify-center items-center">
        <div className=" w-4/5 flex-col items-center">
          <div className="flex justify-between">
            <div>
              <h1 className="text-black text-2xl font-bold mt-10 mb-3">
                {data.name}
              </h1>
            </div>

<div
              className="mt-10 mb-3 hover:cursor-pointer"
              onClick={() => {
                handleCLick();
              }}
            >
              <Image src="/close.png" height={25} width={30} alt="cross" />
            </div>
          </div>

<div className="mt-5 overflow-auto">
            <h2 className="my-1 font-semibold">Description</h2>
            <p className="">{data.description}</p>
            <ul className="mt-5">
              <li className="my-1 font-semibold">
                Event Date: <span className="font-normal">{data.date}</span>
              </li>
              <li className="my-1 font-semibold">
                Event Time: <span className="font-normal">{data.eTime}</span>
              </li>

<li className="my-1 font-semibold">
                Event Organiser:{" "}
                <span className="font-normal">{data.organiser}</span>
              </li>
              <li className="my-1 font-semibold">
                No. of Partipants:{" "}
                <span className="font-normal">{data.numParticipants}</span>
              </li>
              <li className="my-1 font-semibold">
                Speakers:{" "}
                <span className="font-normal">
                  { speakers &&
                    speakers.map((speaker,index) => (
                    <p key={index}>{speaker.title+" "+speaker.name+" "+speaker.affiliation}</p>
                  ))}
                </span>

</li>

<li className="my-1 font-semibold">
                Event Funded By:{" "}
                <span className="font-normal">{data.fundedBy}</span>
              </li>
              <li className="my-1 font-semibold">
                Event Budget: <span className="font-normal">{data.fund}</span>
              </li>
              <li className="my-1 font-semibold">
                Event Link: <span className="font-normal">{data.link}</span>
              </li>
            </ul>
            <div className="mt-5">
              <h1 className=" font-bold text-xl">Event Files</h1>
              <label
                htmlFor="uploadFile"
                className="mt-3 rounded-md w-3/5 cursor-pointer"
              >
                <span>
                  <Image
                    src="/upload.png"
                    height={25}
                    width={30}
                    alt="add"
                    className="inline-block mr-3"
                  />
                </span>
                Upload Files
              </label>
              <input
                className="m-2 rounded-md p-1 w-3/5 hidden"
                type="file"
                id="uploadFile"
                placeholder="Event Files"
                multiple={true}
                onChange={async (e) => {
                  setFiles(e.target.files);
                  await handleSubmit();
                }}
              />
            </div>
          </div>
          <div className="flex flex-nowrap">
            {uploadedFiles.map((file, index) => (
              <div className="m-2" key={file + index}>
                <a
                  href={`/uploads/${(data.name + data.date).replaceAll(' ', '')}/${file}`}
                  target="_blank"
                >
                  { file.split(".")[1] === "pdf" ? (
                    <Image
                      src="/pdf.png"
                      height={150}
                      width={150}
                      alt="event pdf"
                      className="object-fit hover:cursor-pointer hover:opacity-50"
                    />
                  ) : (
                    <Image
                      src={`/uploads/${(data.name + data.date).replaceAll(' ', '')}/${file}`}
                      height={200}
                      width={200}
                      alt="event image"
                      className="object-fit hover:cursor-pointer hover:opacity-50"
                    />
                  )}
                </a>
              </div>
            ))}
          </div>
          <div className="flex justify-center items-center mt-5">
            <button
              className="bg-red-400 rounded-md p-2 hover:bg-red-500 mb-4"
              onClick={() => {
                handleDelete();
              }}
            >
              Delete Event
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ShowEvent;

Urban Research Lab

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.