import React from "react";
// import "./event.css";
import { useParams } from "react-router-dom";
import { useState, useEffect } from "react";
import axios from "axios";
import baseUrl from "../../array/base/config";
import LoadingAnimation from "../Dashboard/Loading/LoadingAnimation";
import "add-to-calendar-button";
import { AddToCalendarButton } from "add-to-calendar-button-react";
/**
* PublicEvent page for displaying public events.
* @module PublicEvent
* @returns {JSX.Element} The PublicEvent component.
*/
const PublicEvent = () => {
const [eventData, setEventData] = useState({});
const [isLoading, setIsLoading] = useState(true);
const { id } = useParams();
const startDateTimeString = eventData?.event_start_date;
const endDateTimeString = eventData?.event_end_date;
const start_date = new Date(startDateTimeString);
const end_date = new Date(endDateTimeString);
const formattedStartDate = start_date.toLocaleDateString();
const formattedDateEnd = end_date.toLocaleDateString();
useEffect(() => {
document.body.style.overflowY = "scroll";
eventDataApiCall();
}, []);
/**
* Handle clicking the phone number link.
* @function handlePhoneNumberClick
*/
const handlePhoneNumberClick = () => {
window.location.href = `tel:${phoneNumber}`;
};
/**
* Fetch event data from the API.
* @function eventDataApiCall
* @async
*/
const eventDataApiCall = async () => {
try {
const res = await axios({
method: "get",
url: `${baseUrl}/api/event/${id}/`,
});
setEventData(res?.data?.data);
setIsLoading(false);
} catch (error) {
console.log(error);
}
};
if (isLoading) {
return <LoadingAnimation />;
}
return (
<div className="singleEvent_container pt-5">
<div className="single_event_body">
<div className="single_event_body_left">
{/* <h1>{eventData?.title}</h1> */}
<div className="single_event_heading">
{/* <img src={eventData.image} alt="" /> */}
<div className="event_heading_text">
<h3>{eventData?.title}</h3>
</div>
</div>
<div className="content_body">
{/* {<p dangerouslySetInnerHTML={{ __html: eventData?.content }} />} */}
<div className="event_image">
<img className="img" src={eventData?.image} alt="" />
</div>
<div className="event_information">
<h6
dangerouslySetInnerHTML={{
__html: eventData?.event_information,
}}
/>
</div>
<div className="mt-3">
{<p dangerouslySetInnerHTML={{ __html: eventData?.content }} />}
</div>
{/* ----------------Footer Section starts form here------------------- */}
<div className="single_event_footer">
<div className="event_contact_details">
<h3>GET IN TOUCH WITH US</h3>
<div className="event_contact_div">
<ul>
<li>
<a href={`mailto:${eventData?.company[0]?.email}`}>
<ion-icon
name="mail"
style={{ color: "#677483" }}
></ion-icon>
</a>
</li>
<li>
<a
href={`tel:${eventData?.company[0]?.phone_number}`}
onClick={handlePhoneNumberClick}
>
<ion-icon
name="call"
style={{ color: "#075E54" }}
></ion-icon>
</a>
</li>
<li>
<a href={eventData?.company[0]?.facebook} target="_blank">
<ion-icon
name="logo-facebook"
style={{ color: "#00acee" }}
></ion-icon>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div className="single_event_body_right">
<div className="event_right_col1">
<div className="add_to_calendar ">
<AddToCalendarButton
name={eventData?.title || ""}
options={["Apple", "Google", "Yahoo", "iCal"]}
location={eventData?.location || ""}
startDate={eventData?.event_start_date}
endDate={eventData?.event_end_date}
description={eventData?.content}
trigger="click"
></AddToCalendarButton>
</div>
</div>
<div className="event_right_col1">
{/* <div className="event_start_date"> */}
{/* </div> */}
<div className="event_right_heading">
<h3>Event Date and Time</h3>
</div>
<div className="event_start_date">
<div className="event_start_date_left">
<ion-icon name="calendar-clear-outline"></ion-icon>
</div>
<div className="event_start_date_right">
<small>Start Date</small>
<p>{formattedStartDate}</p>
</div>
</div>
<div className="event_start_date">
<div className="event_start_date_left">
<ion-icon name="calendar-clear-outline"></ion-icon>
</div>
<div className="event_start_date_right">
<small>End Date</small>
<p>{formattedDateEnd}</p>
</div>
</div>
<div className="event_time">
<div className="event_start_date_left">
<ion-icon name="time-outline"></ion-icon>
</div>
<div className="event_start_date_right">
<small>Duration</small>
<p>{eventData?.days} Days</p>
</div>
</div>
</div>
{/* ----------------------------------------------------- */}
<div className="event_right_col1">
<div className="event_right_heading">
<h3>Event Organizer</h3>
</div>
<div className="event_start_date">
<div className="event_start_date_left">
<ion-icon name="people-outline"></ion-icon>
</div>
<div className="event_start_date_right">
<small>Organizer</small>
<p>{eventData?.company[0]?.name}</p>
</div>
</div>
<div className="event_organizer">
<div className="event_start_date_left">
<ion-icon name="newspaper-outline"></ion-icon>
</div>
<div className="event_organizer_info">
<div className="organizer_info_title">
<small>Organizer Information</small>
</div>
<div className="organizer_logo">
<img src={eventData?.company[0]?.logo} alt="" />
</div>
<div className="organizer_info_title">
<small>{eventData?.company[0]?.website}</small>
</div>
</div>
</div>
</div>
{/* ----------------------------------------------------- */}
<div className="event_right_col1">
<div className="event_right_heading">
<h3>Event Contact Details</h3>
</div>
<div className="event_start_date">
<div className="event_start_date_left">
<ion-icon name="call-outline"></ion-icon>
</div>
<a
href={`tel:${eventData?.company[0]?.phone_number}`}
onClick={handlePhoneNumberClick}
>
<div className="event_start_date_right">
<small>Phone</small>
<p>{eventData?.company[0]?.phone_number}</p>
</div>
</a>
</div>
<div className="event_time">
<div className="event_start_date_left">
<ion-icon name="navigate-circle-outline"></ion-icon>
</div>
<div className="event_start_date_right">
<small>Location</small>
<p>{eventData?.location}</p>
</div>
</div>
<a href={eventData?.company[0]?.website} target="_blank">
<div className="event_time">
<div className="event_start_date_left">
<ion-icon name="globe-outline"></ion-icon>
</div>
<div className="event_start_date_right">
<small>Website</small>
<p>{eventData?.company[0]?.website}</p>
</div>
</div>
</a>
<a href={`mailto:${eventData?.company[0]?.email}`}>
<div className="event_time">
<div className="event_start_date_left">
<ion-icon name="mail-outline"></ion-icon>
</div>
<div className="event_start_date_right">
<small>Email</small>
<p>{eventData?.company[0]?.email}</p>
</div>
</div>
</a>
<a href={eventData?.company[0]?.facebook} target="_blank">
<div className="event_time">
<div className="event_start_date_left">
<ion-icon name="logo-facebook"></ion-icon>
</div>
<div className="event_start_date_right">
<small>Facebook</small>
<p>{eventData?.company[0]?.facebook}</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
);
};
export default PublicEvent;
Source