wind-explorer/ecoconnect
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated create events and event details

Browse Source
This commit is contained in:
Harini312821
2024-08-01 13:56:44 +08:00
parent 661c3b709e
commit da7152b6b3
2 changed files with 84 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
client/src/pages/CreateEventsPage.tsx
View File

@@ -1,3 +1,4 @@
import React, { useState, useEffect } from "react";
import { Button } from "@nextui-org/react";
import { Formik, Form } from "formik";
import * as Yup from "yup";
@@ -8,6 +9,7 @@ import NextUIFormikTextarea from "../components/NextUIFormikTextarea";
import config from "../config";
import { ArrowUTurnLeftIcon } from "../icons";
// Validation schema
const validationSchema = Yup.object({
title: Yup.string()
.trim()
@@ -40,8 +42,22 @@ const validationSchema = Yup.object({
});
const CreateEventsPage = () => {
const [townCouncils, setTownCouncils] = useState<string[]>([]);
const navigate = useNavigate();
useEffect(() => {
const fetchTownCouncils = async () => {
try {
const res = await axios.get(`${config.serverAddress}/users/town-councils-metadata`);
setTownCouncils(JSON.parse(res.data).townCouncils);
} catch (error) {
console.error("Failed to fetch town councils:", error);
}
};
fetchTownCouncils();
}, []);
const initialValues = {
title: "",
description: "",
@@ -100,7 +116,7 @@ const CreateEventsPage = () => {
validationSchema={validationSchema}
onSubmit={handleSubmit}
>
{({ isValid, dirty, isSubmitting }) => (
{({ isValid, dirty, isSubmitting, setFieldValue }) => (
<Form className="flex flex-col gap-5">
<NextUIFormikInput
label="Title"
@@ -128,13 +144,21 @@ const CreateEventsPage = () => {
placeholder="Enter event time"
labelPlacement="inside"
/>
<NextUIFormikInput
label="Location"
name="location"
type="text"
placeholder="Enter event location"
labelPlacement="inside"
/>
<div>
<label className="block text-gray-700">Location</label>
<select
name="location"
className="form-select mt-1 block w-full"
onChange={(e) => setFieldValue("location", e.target.value)}
>
<option value="">Select a town council</option>
{townCouncils.map((townCouncil, index) => (
<option key={index} value={townCouncil}>
{townCouncil}
</option>
))}
</select>
</div>
<NextUIFormikInput
label="Category"
name="category"

56
client/src/pages/EventDetailsPage.tsx
View File

@@ -1,13 +1,14 @@
import React, { useState, useEffect } from "react";
import { useState, useEffect } from "react";
import { useParams, useNavigate } from "react-router-dom";
import instance from "../security/http";
import config from "../config";
import { Card, CardHeader, CardBody, Button } from "@nextui-org/react";
import { Card, CardHeader, CardBody, Button, CardFooter } from "@nextui-org/react";
import { ArrowUTurnLeftIcon } from "../icons"; // Make sure this path is correct
const EventDetailsPage = () => {
const { id } = useParams<{ id: string }>(); // Get the event ID from the URL
const [event, setEvent] = useState<any>(null); // State to store event details
const [similarEvents, setSimilarEvents] = useState<any[]>([]); // State to store similar events
const navigate = useNavigate();
useEffect(() => {
@@ -17,6 +18,18 @@ const EventDetailsPage = () => {
const res = await instance.get(`${config.serverAddress}/events/${id}`);
console.log("Fetched event details:", res.data); // Log the fetched data
setEvent(res.data);
// Fetch all events to find similar ones
const allEventsRes = await instance.get(`${config.serverAddress}/events`);
const allEvents = allEventsRes.data;
// Find similar events based on location and category, excluding the current event
const similar = allEvents.filter((e: any) =>
e.id !== Number(id) && // Make sure to exclude the current event
(e.location === res.data.location || e.category === res.data.category)
);
setSimilarEvents(similar);
} catch (error) {
console.error("Failed to fetch event details:", error);
}
@@ -31,7 +44,7 @@ const EventDetailsPage = () => {
<div className="w-full h-full p-8">
<Button
className="mb-4 bg-gray-200 text-black rounded px-4 py-2 hover:bg-gray-300"
onClick={() => navigate(-1)}
onClick={() => navigate('/events')} // Navigate directly to the events page
>
<ArrowUTurnLeftIcon />
Back to Events
@@ -65,13 +78,48 @@ const EventDetailsPage = () => {
<strong>Slots Available:</strong> {event.slotsAvailable}
</p>
<Button
className="mt-4 bg-red-500 text-white rounded px-4 py-2 hover:red"
className="mt-4 bg-red-500 text-white rounded px-4 py-2 hover:bg-red-600"
onClick={() => navigate(`/register/${id}`)}
>
Register for Event
</Button>
</CardBody>
</Card>
{/* Similar Events Section */}
<div className="mt-8">
<h2 className="text-2xl font-semibold mb-4">Similar Events You Might Be Interested In</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{similarEvents.length === 0 ? (
<p className="text-gray-600">No similar events available.</p>
) : (
similarEvents.map((similarEvent: any) => (
<Card key={similarEvent.id} className="bg-white rounded-lg overflow-hidden border">
<CardHeader className="pb-0 pt-2 px-4 flex-col items-start">
<h4 className="font-bold text-large">{similarEvent.title}</h4>
</CardHeader>
<CardBody className="pb-0 pt-2 px-4 flex-col items-start">
<img
alt={similarEvent.title}
className="object-cover rounded-xl"
src={similarEvent.imageUrl}
width="100%"
height={180}
/>
</CardBody>
<CardFooter className="flex flex-col items-start p-4">
<Button
className="bg-primary-600 text-white rounded px-4 py-2 hover:bg-primary-700"
onClick={() => navigate(`/event/${similarEvent.id}`)}
>
View event details
</Button>
</CardFooter>
</Card>
))
)}
</div>
</div>
</div>
);
};