From 494c5dbd2cdae001a639182dcb1d14943b9da55b Mon Sep 17 00:00:00 2001 From: hamisirizwan Date: Tue, 5 Sep 2023 12:43:54 +0300 Subject: [PATCH 01/15] added add organiser function --- src/ADMIN/components/Organizers.jsx | 150 ++++++++++++------- src/ADMIN/pages/chapters/AllChaptersPage.jsx | 42 ++++++ 2 files changed, 138 insertions(+), 54 deletions(-) diff --git a/src/ADMIN/components/Organizers.jsx b/src/ADMIN/components/Organizers.jsx index b2c222c8..1c72eb93 100644 --- a/src/ADMIN/components/Organizers.jsx +++ b/src/ADMIN/components/Organizers.jsx @@ -1,82 +1,124 @@ -import * as React from "react"; +import { useState } from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faPlus } from "@fortawesome/free-solid-svg-icons"; function Organizers() { - const [selectedImage, setSelectedImage] = React.useState(null); - const handleImageChange = (event) => { - const imageFile = event.target.files[0]; - setSelectedImage(imageFile); + const handleImageChange = (event, index) => { + const updatedOrganizers = [...organizers] + updatedOrganizers[index].image = event.target.files[0] + setOrganizers(updatedOrganizers); }; - const handleUploadImageClick = () => { - document.getElementById("imageInput").click(); + const handleUploadImageClick = (e,id) => { + document.getElementById(id).click(); }; - const handleUploadImageKeyDown = (event) => { + + const handleUploadImageKeyDown = (event,id) => { if (event.key === "Enter") { - handleUploadImageClick(); + handleUploadImageClick(event,id); } }; + const handleChange =(e, index)=>{ + const updatedOrganizers = [...organizers] + updatedOrganizers[index] = {...updatedOrganizers[index], [e.target.name.slice(0, -1)]:e.target.value} + setOrganizers(updatedOrganizers); + // console.log(organizers) + } + const [organizers, setOrganizers] = useState([ + { + name: "", + role:"", + image:null + }, + ]); + + const addOrganiser = () =>{ + setOrganizers([...organizers, { + name: "", + role:"", + image:null + }]); + // console.log(organizers) + } + return (

Organizers

-
- -
-
- -
-
- -
-
-
- Upload Organizer’s Image -
+ {organizers.map((organizer, index) => ( +
+ {organizers.length > 1 && ( +

+ {`Organiser ${index + 1}`} +

+ )} +
+ handleChange(e, index)} + />
- {selectedImage ? ( -
-

{selectedImage.name}

-
- ) : ( -
-
- PNG, JPG, JFIF +
+ handleChange(e, index)} + /> +
+
handleUploadImageClick(e,`imageInput${index}`)} + onKeyDown={(e)=>handleUploadImageKeyDown((e,`imageInput${index}`))} + tabIndex="0" + role="button" + > + handleImageChange(e, index)} + style={{ display: "none" }} + /> +
+
+
+ Upload Organizer’s Image +
+ {organizer.image ? ( +
+

{organizer.image.name}

+
+ ) : ( +
+
+ PNG, JPG, JFIF +
+
+ )}
- )} +
-
+ ))} + + {/* add organisers button */}
From 082dccb1fa05e01b1b867e7fba5b8e1da6c95e4d Mon Sep 17 00:00:00 2001 From: sonylomo Date: Tue, 5 Sep 2023 14:05:54 +0300 Subject: [PATCH 02/15] feat: calendar view --- package.json | 1 + src/ADMIN/components/events/Calendar.jsx | 224 +++++++++++++++++++- src/ADMIN/components/events/EventsTable.jsx | 2 +- src/ADMIN/pages/events/AllEventsPage.jsx | 8 +- 4 files changed, 226 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index c4cf47e8..68e28409 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@fortawesome/free-solid-svg-icons": "^6.4.0", "@fortawesome/react-fontawesome": "^0.2.0", "@headlessui/react": "^1.7.15", + "date-fns": "^2.30.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.11.2", diff --git a/src/ADMIN/components/events/Calendar.jsx b/src/ADMIN/components/events/Calendar.jsx index a967e0a4..714ae3a6 100644 --- a/src/ADMIN/components/events/Calendar.jsx +++ b/src/ADMIN/components/events/Calendar.jsx @@ -1,9 +1,225 @@ -import React from 'react' +import React, { useState } from 'react'; +import { + eachDayOfInterval, + format, + isEqual, + isSameDay, + isSameMonth, + isToday, + parse, + parseISO, + startOfToday, + subDays, + addDays, +} from 'date-fns'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { + faChevronLeft, + faChevronRight, +} from '@fortawesome/free-solid-svg-icons'; + +const meetings = [ + { + id: 1, + title: 'How to Master Database Engineering using SQL', + location: 'Twitter Spaces', + tag: 'red-800', + startDatetime: '2023-09-11T13:00', + endDatetime: '2023-09-11T14:30', + }, + { + id: 2, + title: 'How to Master Database Engineering using SQL', + location: 'Sarit Center, Nairobi', + tag: 'blue-800', + startDatetime: '2023-09-09T13:00', + endDatetime: '2023-09-09T14:30', + }, + { + id: 3, + title: 'How to Master Database Engineering using SQL', + location: 'Twitter Spaces', + tag: 'red-800', + startDatetime: '2023-09-20T17:00', + endDatetime: '2023-09-20T18:30', + }, + { + id: 4, + title: 'How to Master Database Engineering using SQL', + location: 'Twitter Spaces', + tag: 'red-800', + startDatetime: '2023-09-09T13:00', + endDatetime: '2023-09-09T14:30', + }, + { + id: 5, + title: 'How to Master Database Engineering using SQL', + location: 'Sarit Center, Nairobi', + tag: 'blue-800', + startDatetime: '2023-09-13T14:00', + endDatetime: '2023-09-13T14:30', + }, +]; + +function classNames(...classes) { + return classes.filter(Boolean).join(' '); +} + +function EventCard({ event }) { + const startDateTime = parseISO(event.startDatetime); + const endDateTime = parseISO(event.endDatetime); + + return ( +
+

{event.title}

+

+ {' '} + + {' '} + - + {' '} + +

+
+

{event.location}

+ +
+
+ ); +} function Calendar() { + const today = startOfToday(); + const [selectedDay, setSelectedDay] = useState(today); + const [currentMonth, setCurrentMonth] = useState(format(today, 'MMM-yyyy')); + const firstDayCurrentMonth = parse(currentMonth, 'MMM-yyyy', new Date()); + const [startDate, setStartDate] = useState(subDays(new Date(), 4)); + const endDate = addDays(startDate, 10); + + const days = eachDayOfInterval({ start: startDate, end: endDate }); + + function previousWeek() { + setStartDate(subDays(startDate, 11)); + } + + function nextWeek() { + setStartDate(addDays(startDate, 11)); + } + + const selectedDayMeetings = meetings.filter((meeting) => isSameDay(parseISO(meeting.startDatetime), selectedDay)); + return ( -
Calendar
- ) +
+
+ + + + +
+ +
+ Chapters +
+
+
+ {days.map((day, dayIdx) => ( +
+ + +
+ {meetings.some((meeting) => isSameDay(parseISO(meeting.startDatetime), day)) &&
} +
+
+ ))} +
+
+ +
+ SYT Nairobi +
+
+ {selectedDayMeetings.map((event) => ( + + ))} +
+
+ SYT Tanzania +
+
+ {selectedDayMeetings.map((event) => ( + + ))} +
+
+ ); } -export default Calendar \ No newline at end of file +export default Calendar; diff --git a/src/ADMIN/components/events/EventsTable.jsx b/src/ADMIN/components/events/EventsTable.jsx index 517aac3c..0f828dd8 100644 --- a/src/ADMIN/components/events/EventsTable.jsx +++ b/src/ADMIN/components/events/EventsTable.jsx @@ -147,7 +147,7 @@ function EventsTable() { const currentData = filteredData.slice(indexOfFirstRow, indexOfLastRow); return ( -
+
{/* header */}

SYT events

diff --git a/src/ADMIN/pages/events/AllEventsPage.jsx b/src/ADMIN/pages/events/AllEventsPage.jsx index 77dd53fc..985d649e 100644 --- a/src/ADMIN/pages/events/AllEventsPage.jsx +++ b/src/ADMIN/pages/events/AllEventsPage.jsx @@ -1,6 +1,6 @@ -import React from "react"; -import Calendar from "../../components/events/Calendar"; -import EventsTable from "../../components/events/EventsTable"; +import React from 'react'; +import Calendar from '../../components/events/Calendar'; +import EventsTable from '../../components/events/EventsTable'; function AllEventsPage() { return ( @@ -22,7 +22,7 @@ function AllEventsPage() {
- {/* */} +
); From 7fb723badc328a71abaa0460c7cc176a4e00ea9b Mon Sep 17 00:00:00 2001 From: sonylomo Date: Tue, 5 Sep 2023 14:31:25 +0300 Subject: [PATCH 03/15] fix: added `/admin/events` to Navbar --- src/ADMIN/components/AdminHeader.jsx | 4 ++-- src/ADMIN/components/BottomNavBar.jsx | 4 ++-- src/ADMIN/components/events/Calendar.jsx | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/ADMIN/components/AdminHeader.jsx b/src/ADMIN/components/AdminHeader.jsx index cc114ca1..736cd97a 100644 --- a/src/ADMIN/components/AdminHeader.jsx +++ b/src/ADMIN/components/AdminHeader.jsx @@ -56,13 +56,13 @@ function AdminHeader() { Chapters Events diff --git a/src/ADMIN/components/BottomNavBar.jsx b/src/ADMIN/components/BottomNavBar.jsx index aec3018f..72566801 100644 --- a/src/ADMIN/components/BottomNavBar.jsx +++ b/src/ADMIN/components/BottomNavBar.jsx @@ -18,13 +18,13 @@ function BottomNavBar() { Chapters Events diff --git a/src/ADMIN/components/events/Calendar.jsx b/src/ADMIN/components/events/Calendar.jsx index 714ae3a6..f0f9d0e0 100644 --- a/src/ADMIN/components/events/Calendar.jsx +++ b/src/ADMIN/components/events/Calendar.jsx @@ -153,10 +153,10 @@ function Calendar() {
-
+
Chapters
-
+
{days.map((day, dayIdx) => (
From 0a2ced0b0a8e3f4c2caf3c046f1d24c17b25932f Mon Sep 17 00:00:00 2001 From: hamisirizwan Date: Tue, 5 Sep 2023 14:33:10 +0300 Subject: [PATCH 04/15] added mock data for chapters --- src/ADMIN/components/AdminHeader.jsx | 8 ++++---- src/ADMIN/index.js | 7 ------- src/ADMIN/pages/chapters/AllChaptersPage.jsx | 1 + 3 files changed, 5 insertions(+), 11 deletions(-) diff --git a/src/ADMIN/components/AdminHeader.jsx b/src/ADMIN/components/AdminHeader.jsx index cc114ca1..85a98da0 100644 --- a/src/ADMIN/components/AdminHeader.jsx +++ b/src/ADMIN/components/AdminHeader.jsx @@ -50,25 +50,25 @@ function AdminHeader() { Blogs Chapters Events Calendar diff --git a/src/ADMIN/index.js b/src/ADMIN/index.js index 44ce7b6c..d3724d52 100644 --- a/src/ADMIN/index.js +++ b/src/ADMIN/index.js @@ -6,13 +6,6 @@ import AllEventsPage from "./pages/events/AllEventsPage"; import UpdateEventPage from "./pages/events/UpdateEventPage"; import AdminLayout from "./components/AdminLayout"; -// {default as AllBlogsPage} -// {default as AddChapterPage} -// {default as AllChaptersPage} -// {default as AddEventPage} -// {default as AllEventsPage} -// {default as UpdateEventPage} - export { AddChapterPage, AddEventPage, diff --git a/src/ADMIN/pages/chapters/AllChaptersPage.jsx b/src/ADMIN/pages/chapters/AllChaptersPage.jsx index 2cd7deca..2853838c 100644 --- a/src/ADMIN/pages/chapters/AllChaptersPage.jsx +++ b/src/ADMIN/pages/chapters/AllChaptersPage.jsx @@ -48,4 +48,5 @@ function AllChaptersPage() { ) } + export default AllChaptersPage \ No newline at end of file From 13adc1542dab77c3641a616bcfdb9a480e6df224 Mon Sep 17 00:00:00 2001 From: hamisirizwan Date: Tue, 5 Sep 2023 19:21:15 +0300 Subject: [PATCH 05/15] added vercel config for page rewrites on refresh --- vercel.json | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 vercel.json diff --git a/vercel.json b/vercel.json new file mode 100644 index 00000000..8240ce54 --- /dev/null +++ b/vercel.json @@ -0,0 +1,8 @@ +{ + "rewrites": [ + { + "source": "/(.*)", + "destination": "/index.html" + } + ] + } \ No newline at end of file From 7bb3662c7d442785c341988f82d9755fbbc63f50 Mon Sep 17 00:00:00 2001 From: sonylomo Date: Tue, 5 Sep 2023 19:23:36 +0300 Subject: [PATCH 06/15] fix: made responsive on mobile --- src/ADMIN/components/events/Calendar.jsx | 32 ++++++++++++--------- src/ADMIN/components/events/EventsTable.jsx | 28 +++++++++--------- 2 files changed, 32 insertions(+), 28 deletions(-) diff --git a/src/ADMIN/components/events/Calendar.jsx b/src/ADMIN/components/events/Calendar.jsx index f0f9d0e0..d8087c68 100644 --- a/src/ADMIN/components/events/Calendar.jsx +++ b/src/ADMIN/components/events/Calendar.jsx @@ -71,8 +71,8 @@ function EventCard({ event }) { return (
-

{event.title}

-

+

{event.title}

+

{' '}

-
+

{event.location}

@@ -157,7 +157,7 @@ function Calendar() { Chapters
-
+
{days.map((day, dayIdx) => (
-
+
SYT Nairobi
-
- {selectedDayMeetings.map((event) => ( - - ))} +
+
+ {selectedDayMeetings.map((event) => ( + + ))} +
-
+
SYT Tanzania
-
- {selectedDayMeetings.map((event) => ( - - ))} +
+
+ {selectedDayMeetings.map((event) => ( + + ))} +
); diff --git a/src/ADMIN/components/events/EventsTable.jsx b/src/ADMIN/components/events/EventsTable.jsx index 0f828dd8..eb6216f8 100644 --- a/src/ADMIN/components/events/EventsTable.jsx +++ b/src/ADMIN/components/events/EventsTable.jsx @@ -170,7 +170,7 @@ function EventsTable() { {/* table actions */}
-
+
{/* table display */} -
+
- + - - - - + + + + @@ -222,7 +222,7 @@ function EventsTable() { : 'hover:bg-[#F7F7F7] text-[#656767] text-sm' } > - - + - - - - - + + + + + ))} From 033829f5799ade73775f37733da7b199cdfd005e Mon Sep 17 00:00:00 2001 From: sonylomo Date: Wed, 6 Sep 2023 08:45:11 +0300 Subject: [PATCH 07/15] fix: fixed table cell display --- src/ADMIN/components/events/EventsTable.jsx | 22 ++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/ADMIN/components/events/EventsTable.jsx b/src/ADMIN/components/events/EventsTable.jsx index eb6216f8..c8e6913a 100644 --- a/src/ADMIN/components/events/EventsTable.jsx +++ b/src/ADMIN/components/events/EventsTable.jsx @@ -202,13 +202,13 @@ function EventsTable() {
{}{} Event Name CityDateFromToChapterDateFromToChapter RSVPs
+ {row.eventName}{row.eventName} {row.city}{row.date}{row.from}{row.to}{row.chapter}{row.rsvp}{row.date}{row.from}{row.to}{row.chapter}{row.rsvp}
- + - - - - + + + + @@ -222,7 +222,7 @@ function EventsTable() { : 'hover:bg-[#F7F7F7] text-[#656767] text-sm' } > - - - - - - + + + + + ))} From 412c3296746245d3e25ef801ddcc8216542aef37 Mon Sep 17 00:00:00 2001 From: sonylomo Date: Wed, 6 Sep 2023 23:41:41 +0300 Subject: [PATCH 08/15] feat: add event page --- src/ADMIN/pages/events/AddEventPage.jsx | 104 ++++++++++++++++++++++- src/ADMIN/pages/events/AllEventsPage.jsx | 13 +-- src/router/index.jsx | 20 ++++- 3 files changed, 124 insertions(+), 13 deletions(-) diff --git a/src/ADMIN/pages/events/AddEventPage.jsx b/src/ADMIN/pages/events/AddEventPage.jsx index fd12940c..777238cc 100644 --- a/src/ADMIN/pages/events/AddEventPage.jsx +++ b/src/ADMIN/pages/events/AddEventPage.jsx @@ -1,9 +1,105 @@ -import React from 'react' +import React from "react"; function AddEventPage() { return ( -
AddEventPage
- ) +
+
+

Events

+

Create Event

+

Add new event details

+
+ + {/* Form */} + + +
{}{} Event Name CityDateFromToChapterDateFromToChapter RSVPs
+ {row.eventName} {row.city}{row.date}{row.from}{row.to}{row.chapter}{row.rsvp}{row.date}{row.from}{row.to}{row.chapter}{row.rsvp}