import React from "react";
import "../Events/events.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 "../Loading/LoadingAnimation";
import "add-to-calendar-button";
import { AddToCalendarButton } from "add-to-calendar-button-react";
import RegisterModal from "./RegisterModal/RegisterModal";
/**
* Represents SingleEventPage page component
* @module SingleEventPage
* @returns {JSX.Element}
*/
const SingleEventPage = () => {
/**
* React state that holds event data
* @constant eventData
* @type {object}
* @default {}
* @memberof module:SingleEventPage
*/
const [eventData, setEventData] = useState({});
/**
* React state that holds loading status
* @constant isLoading
* @type {boolean}
* @default true
* @memberof module:SingleEventPage
*/
const [isLoading, setIsLoading] = useState(true);
/**
* React state that holds phone number
* @constant phoneNumber
* @type {string}
* @default ''
* @memberof module:SingleEventPage
*/
const [isModalOpen, setIsModalOpen] = useState(false);
const { id } = useParams();
/**
* constant that holds start date
* @constant start_date
* @type {string}
* @memberof module:SingleEventPage
*/
const startDateTimeString = eventData?.event_start_date;
/**
* constant that holds end date
* @constant end_date
* @type {string}
* @memberof module:SingleEventPage
*/
const endDateTimeString = eventData?.event_end_date;
/**
* constant that holds formatted start date
* @constant formattedStartDate
* @type {Date}
* @memberof module:SingleEventPage
*/
const start_date = new Date(startDateTimeString);
/**
* constant that holds formatted end date
* @constant formattedDateEnd
*
* @type {Date}
* @memberof module:SingleEventPage
*/
const end_date = new Date(endDateTimeString);
/**
* constant that holds formatted start date
* @constant formattedStartDate
* @type {string}
* @memberof module:SingleEventPage
*/
const formattedStartDate = start_date.toLocaleDateString();
/**
* constant that holds formatted end date
* @constant formattedDateEnd
* @type {string}
* @memberof module:SingleEventPage
*/
const formattedDateEnd = end_date.toLocaleDateString();
useEffect(() => {
eventDataApiCall();
}, []);
/**
* Function that handle phone number click
* @memberof module:SingleEventPage
* @function handlePhoneNumberClick
* @returns {void}
*
*/
const handlePhoneNumberClick = () => {
window.location.href = `tel:${phoneNumber}`;
};
/**
* Function that handle event data api call
* @memberof module:SingleEventPage
* @function eventDataApiCall
* @async
* @returns {Promise<void>}
*/
const eventDataApiCall = async () => {
try {
const detail = localStorage.getItem("token");
const res = await axios({
method: "get",
url: `${baseUrl}/api/event/${id}/`,
headers: {
Authorization: `Token ${detail}`,
},
});
setEventData(res?.data?.data);
setIsLoading(false);
} catch (error) {
console.log(error);
}
};
if (isLoading) {
return <LoadingAnimation />;
}
return (
<div className="singleEvent_container">
<RegisterModal
isModalOpen={isModalOpen}
setIsModalOpen={setIsModalOpen}
id={id}
/>
<div className="single_event_body single_event_body_content">
<div className="single_event_body_left single_event_body_left_content">
{/* <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 event_content_wrapper">
<h6
dangerouslySetInnerHTML={{
__html: eventData?.event_information,
}}
/>
</div>
<div className="mt-3">
{<p dangerouslySetInnerHTML={{ __html: eventData?.content }} />}
</div>
<div className="news_publish_date mb-2">
<ion-icon name="home-outline"></ion-icon>
<small className="ms-1">
White House Party Palace, Srijana Chowk, Pokhara-8, Kaski
</small>
</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="event_registration_bt"
onClick={() => setIsModalOpen(true)}
>
<button>Register Now</button>
</div>
<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 SingleEventPage;
Source