Skip to content

Commit

Permalink
latest changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@mdnasirulhaque
mdnasirulhaque committed May 19, 2024
2 parents 3ba8573 + f20e733 commit cb6af0e
Show file tree
Hide file tree
Showing 3 changed files with 195 additions and 86 deletions.
250 changes: 174 additions & 76 deletions components/Events.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,15 @@ import LazyImage from "./blocks/LazyImage";
import Modal from "./blocks/Modal";

export default function Events() {
const [eventResult, setEventsResult] = useState<any[]>([])
const [showMoreToggle, setShowMoreToggle] = useState<boolean>(false)
const [showMoreEvents, setShowMoreEvents] = useState<any[]>([])
const [upcomingEventResult, setUpcomingEventsResult] = useState<any[]>([])
const [conductedEventResult, setConductedEventsResult] = useState<any[]>([])
const [showMoreUpcomingToggle, setShowMoreUpcomingToggle] = useState<boolean>(false)
const [showMoreConductedToggle, setShowMoreConductedToggle] = useState<boolean>(false)
const [showMoreUpcomingEvents, setShowMoreUpcomingEvents] = useState<any[]>([])
const [showMoreConductedEvents, setShowMoreConductedEvents] = useState<any[]>([])
const [slidesToShow, setSlidesToShow] = useState(3); // Default value for desktop
const [page, setPage] = useState({ pageSize: 3, pageNo: 0 })
const [upcomingPage, setUpcomingPage] = useState({ pageSize: 3, pageNo: 0 })
const [conductedPage, setConductedPage] = useState({ pageSize: 3, pageNo: 0 })

const handleResize = () => {
if (window.innerWidth <= 550) { // Mobile or smaller screens
Expand All @@ -36,46 +40,96 @@ export default function Events() {
};
}, []);

let bevyCall: BevyModel = {
chapterId: 311,
page_size: page.pageSize,
status: 'Completed',
include_cohosted_events: true,
visible_on_parent_chapter_only: true,
order: '-start_date',
fields: [
'title',
'start_date',
'event_type_title',
'cropped_picture_url',
'cropped_banner_url',
'url',
'cohost_registration_url',
'description',
'description_short',
] as const,
pageNo: page.pageNo ? page.pageNo : 1
};
let bevyCall: BevyModel[] = [
{
chapterId: 311,
page_size: upcomingPage.pageSize,
status: 'Live',
include_cohosted_events: true,
visible_on_parent_chapter_only: true,
order: '-start_date',
fields: [
'title',
'start_date',
'event_type_title',
'cropped_picture_url',
'cropped_banner_url',
'url',
'cohost_registration_url',
'description',
'description_short',
] as const,
pageNo: upcomingPage.pageNo ? upcomingPage.pageNo : 1
},
{
chapterId: 311,
page_size: conductedPage.pageSize,
status: 'Completed',
include_cohosted_events: true,
visible_on_parent_chapter_only: true,
order: '-start_date',
fields: [
'title',
'start_date',
'event_type_title',
'cropped_picture_url',
'cropped_banner_url',
'url',
'cohost_registration_url',
'description',
'description_short',
] as const,
pageNo: conductedPage.pageNo ? conductedPage.pageNo : 1
}
]

useEffect(() => {
if (!showMoreUpcomingToggle) {
setShowMoreUpcomingEvents([])
setUpcomingPage({ pageNo: 0, pageSize: 3 })
}
}, [showMoreUpcomingToggle])

useEffect(() => {
if (!showMoreToggle) {
setShowMoreEvents([])
setPage({ pageNo: 0, pageSize: 3 })
if (!showMoreConductedToggle) {
setShowMoreConductedEvents([])
setConductedPage({ pageNo: 0, pageSize: 3 })
}
}, [showMoreConductedToggle])

useEffect(() => {
async function fetchEvents() {
const response1 = await FetchBevyData(bevyCall[0]);

const res = await Promise.all([response1])
if (upcomingPage.pageNo < 1) {
setUpcomingEventsResult([...res[0].results]);
// setUpcomingEventsResult([...res[1].results]);
// setShowMoreEvents([...eventResult])
}
else if (res[0].results)
setShowMoreUpcomingEvents([...showMoreUpcomingEvents, ...res[0].results])
}
}, [showMoreToggle])
fetchEvents();
}, [upcomingPage.pageNo])

useEffect(() => {
async function fetchEvents() {
const response = await FetchBevyData(bevyCall);
console.log(response.results)
if (page.pageNo < 1) {
setEventsResult([...response.results]);
// const response1 = await FetchBevyData(bevyCall[0]);
const response2 = await FetchBevyData(bevyCall[1]);

const res = await Promise.all([response2])
if (conductedPage.pageNo < 1) {
setConductedEventsResult([...res[0].results]);
// setUpcomingEventsResult([...res[1].results]);
// setShowMoreEvents([...eventResult])
}
else
setShowMoreEvents([...showMoreEvents, ...response.results])
else if (res[0].results)
setShowMoreConductedEvents([...showMoreConductedEvents, ...res[0].results])
}
fetchEvents();
console.log(page)
}, [page.pageNo])
}, [conductedPage.pageNo])

const settings = {
infinite: true,
slidesToShow: slidesToShow,
Expand All @@ -87,55 +141,99 @@ export default function Events() {
className: " items-center flex justify-center"
};
return (
<section className="flex flex-col w-full local-container gap-6 p-4" id="events">
<SectionHeader title1={EventsData.title_1} title_color={EventsData.title_color} title3={EventsData.title_3} description={EventsData.description} color={EventsData.color} />
{
showMoreToggle && showMoreEvents.length > 0 &&
<Modal onClose={setPage} setEventsResult={setShowMoreEvents} setOpen={setShowMoreToggle} isOpen={showMoreToggle} title="Events">
<div className="grid gap-y-4 md:gap-0 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
{showMoreEvents.map((data: Record<typeof bevyCall.fields[number], string>, key) => {
return (
<div key={key} className="p-2">
<EventCard eventData={data} imageUrl={data.cropped_banner_url} title={data.title} description={data.description.replace(/<\/?[^>]+>/g, '').replace(/'RSVP.*'/, '').substring(0, 300) + "..."} />
</div>
)
})}
</div>
<>
<section className="flex flex-col w-full local-container gap-6 p-4" id="events">
<SectionHeader title1={EventsData[0].title_1} title_color={EventsData[0].title_color} title3={EventsData[0].title_3} description={EventsData[0].description} color={EventsData[0].color} />
{
showMoreUpcomingToggle && showMoreUpcomingEvents.length > 0 &&
<Modal onClose={setUpcomingPage} setEventsResult={setShowMoreUpcomingEvents} setOpen={setShowMoreUpcomingToggle} isOpen={showMoreUpcomingToggle} title="Events">
<div className="grid gap-y-4 md:gap-0 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
{showMoreUpcomingEvents.map((data: Record<string, string>, key) => {
return (
<div key={key} className="p-2">
<EventCard eventData={data} imageUrl={data.cropped_banner_url} title={data.title} description={data.description.replace(/<\/?[^>]+>/g, '').replace(/'RSVP.*'/, '').substring(0, 300) + "..."} />
</div>
)
})}
</div>
<button onClick={() => {
setUpcomingPage({ ...upcomingPage, pageNo: upcomingPage.pageNo + 1, pageSize: 9 })
}} className="py-2 text-google-blue text-center w-full">Load more &#8594;</button>
</Modal>
}
{
upcomingEventResult.length > 0 &&
<Slider {...settings}>
{
upcomingEventResult.map((data: Record<string, string>, key) => {
return (
<div key={key} className="px-6">
<EventCard eventData={data} imageUrl={data.cropped_banner_url} title={data.title} description={data.description.replace(/^<[^>]*>/, '').replace(/'RSVP.*'/, '').substring(0, 200) + "..."} />
</div>
)
})
}
</Slider>
}
<button onClick={() => {
setShowMoreUpcomingToggle(true)
setUpcomingPage({ ...upcomingPage, pageNo: upcomingPage.pageNo + 1, pageSize: 9 })
}} className="py-2 text-google-blue">See more live events &#8594;</button>
</section >


<section className="flex flex-col w-full local-container gap-6 p-4" id="events">
<SectionHeader title1={EventsData[1].title_1} title_color={EventsData[1].title_color} title3={EventsData[1].title_3} description={EventsData[1].description} color={EventsData[1].color} />
{
showMoreConductedToggle && showMoreConductedEvents.length > 0 &&
<Modal onClose={setConductedPage} setEventsResult={setShowMoreConductedEvents} setOpen={setShowMoreConductedToggle} isOpen={showMoreConductedToggle} title="Events">
<div className="grid gap-y-4 md:gap-0 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
{showMoreConductedEvents.map((data: Record<string, string>, key) => {
return (
<div key={key} className="p-2">
<EventCard eventData={data} imageUrl={data.cropped_banner_url} title={data.title} description={data.description.replace(/<\/?[^>]+>/g, '').replace(/'RSVP.*'/, '').substring(0, 300) + "..."} />
</div>
)
})}
</div>
<button onClick={() => {
setConductedPage({ ...conductedPage, pageNo: conductedPage.pageNo + 1, pageSize: 9 })
}} className="py-2 text-google-blue text-center w-full">Load more &#8594;</button>
</Modal>
}
{
conductedEventResult.length > 0 &&
<Slider {...settings}>
{
conductedEventResult.map((data: Record<string, string>, key) => {
return (
<div key={key} className="px-6">
<EventCard eventData={data} imageUrl={data.cropped_banner_url} title={data.title} description={data.description.replace(/^<[^>]*>/, '').replace(/'RSVP.*'/, '').substring(0, 200) + "..."} />
</div>
)
})
}
</Slider>
}
{
<button onClick={() => {
setPage({ ...page, pageNo: page.pageNo + 1, pageSize: 9 })
}} className="py-2 text-google-blue text-center w-full">Load more &#8594;</button>
</Modal>
}
{
eventResult.length > 0 &&
<Slider {...settings}>
{
eventResult.map((data: Record<typeof bevyCall.fields[number], string>, key) => {
return (
<div key={key} className="px-6">
<EventCard eventData={data} imageUrl={data.cropped_banner_url} title={data.title} description={data.description.replace(/^<[^>]*>/, '').replace(/'RSVP.*'/, '').substring(0, 200) + "..."} />
</div>
)
})
}
</Slider>
}
<button onClick={() => {
setShowMoreToggle(true)
setPage({ ...page, pageNo: page.pageNo + 1, pageSize: 9 })
console.log(page)
}} className="py-2 text-google-blue">See more past events &#8594;</button>
</section >
setShowMoreConductedToggle(true)
setConductedPage({ ...conductedPage, pageNo: conductedPage.pageNo + 1, pageSize: 9 })
}} className="py-2 text-google-blue">See more past events &#8594;</button>
}
</section >
</>

)
}

function EventCard({ eventData, imageUrl, title, description }: any) {
return <div className="w-full border border-gray-400 rounded-lg h-96 flex flex-col flex-1">
<LazyImage height="100px" lazy={true} src={imageUrl} alt={""} className="relative flex items-center px-1 justify-center rounded-t-lg border-b" />
<div className="flex flex-col items-start flex-1 px-4 justify-between py-2 gap-y-3">
<h4 className="text-left font-medium text-google-blue">{title}</h4>
<h4 className="text-left font-medium text-google-blue" dangerouslySetInnerHTML={{ __html: title }}></h4>
<p dangerouslySetInnerHTML={{ __html: description }} className=" text-gray-500 text-clip text-sm"></p>
<a href={eventData?.url} target="_blank" className="py-3 text-google-blue">See event details &#8594;</a>
<a href={eventData?.url} target="_blank" className="py-3 text-google-blue">See Event Details &#8594;</a>
</div>
</div>
}
6 changes: 3 additions & 3 deletions components/blocks/Modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ export default function Modal({ setOpen, title, isOpen, children, handleSubmit }
<div>
<div id="modal" tabIndex={-1} aria-hidden="true" className="backdrop-blur-sm w-full flex overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center md:inset-0 h-[calc(100%)] max-h-full">
<div className="relative p-4 max-h-full">
<div className="relative bg-white rounded-lg shadow dark:bg-gray-700">
<div className="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
<div className="relative bg-white rounded-lg shadow dark:bg-gray-700 border border-gray-600">
<div className="flex items-center justify-between p-4 md:p-5 border-b rounded-t border-gray-600">
<h3 className="text-xl font-semibold text-gray-900 dark:text-white">
{title}
</h3>
Expand All @@ -28,7 +28,7 @@ export default function Modal({ setOpen, title, isOpen, children, handleSubmit }
<svg className="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
</svg>
<span className="sr-only">Close modal</span>
<span className="sr-only">Close Modal</span>
</button>}
</div>
<div className="p-4 md:p-5 max-h-[80vh] overflow-y-scroll">
Expand Down
25 changes: 18 additions & 7 deletions public/assets/content/events/content.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,18 @@
{
"title_1":"Events",
"title_color":"Conducted",
"title_3":"",
"color":"googleYellow",
"description":"The place for cloud developers and architects to come together to learn, discuss and explore the latest advances in cloud technologies."
}
[
{
"title_1": "Upcoming",
"title_color": "Events",
"title_3": "",
"type": "upcoming",
"color": "googleRed",
"description": "Checkout the events which are live and apply for them at the earliest"
},
{
"title_1": "Events",
"title_color": "Conducted",
"title_3": "",
"type": "completed",
"color": "googleYellow",
"description": "Events we have conducted so far ..."
}
]

0 comments on commit cb6af0e

Please sign in to comment.