Skip to content

Commit

Permalink
Removed references to old events api (#46)
Browse files Browse the repository at this point in the history 
* what I changed

in The AboutUsSection I changed the margin top to 96 from 32

In the home page section I commented out the useEffect() that was fetching calendar events as well as the imports for said events

In the events section I commented out the loading conditions as well as the conditional statements and created a div to hold all the iframes that we currently have to put in manually for all the Luma events.

added const iframeStyle so you can change the height width etc of all iframes in EventsSection

Carousel event thunks and event tsx files were modified by commenting out anything relying on fetching events from the google calendar api
  • Loading branch information
@dennisysj
dennisysj authored Sep 13, 2024
1 parent 5b5a5f0 commit 3907598
Show file tree
Hide file tree
Showing 11 changed files with 327 additions and 290 deletions.
8 changes: 3 additions & 5 deletions frontend/src/app/Conditional.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
import { ReactNode } from 'react';

interface ConditionalProps
{
interface ConditionalProps {
Condition: boolean;

children: ReactNode;
}

export default function Conditional({Condition, children} : ConditionalProps): JSX.Element
{
export default function Conditional({ Condition, children }: ConditionalProps): JSX.Element {
if (Condition)
return (<>{children}</>);

return <></>;
}
62 changes: 30 additions & 32 deletions frontend/src/app/EventsOnHomePage/Carosel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@ import { experimental_useEffectEvent, useEffect, useState } from "react";
import { useAppDispatch, useAppSelector } from "../hooks/hooks";
import { SetCurrentPage } from "../slices/pageSlice";

import { fetchEventsAsync } from "../thunks/EventThunks";
// import { fetchEventsAsync } from "../thunks/EventThunks";
import { AppDispatch } from "../stores/store";
import { CalendarEvent, DefaultCalendarEvent, SetCalendarEvents, SetCurrentEvent, SetFetchIntervalStarted, selectEvent } from "../slices/eventSlice";
// import { CalendarEvent, DefaultCalendarEvent, SetCalendarEvents, SetCurrentEvent, SetFetchIntervalStarted, selectEvent } from "../slices/eventSlice";
import { Timer } from "../hacks/Timer";
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuItem, DropdownMenuContent } from "@/components/ui/dropdown-menu";
import Conditional from "../Conditional";
Expand All @@ -27,11 +27,9 @@ import { Button } from "@/components/ui/button";
import { Select, SelectItem, SelectTrigger, SelectContent } from "@/components/ui/select";
import EventInstance from "./EventForCarousel"

interface EventsProps {
Events: CalendarEvent[];


}
// interface EventsProps {
// // Events: CalendarEvent[];
// }

export class Range {
Start: number;
Expand All @@ -58,29 +56,29 @@ export function CarouselMy() {
const router = useRouter();
const mainDispatch = useAppDispatch();

const event = useAppSelector(selectEvent);
// const event = useAppSelector(selectEvent);

mainDispatch(SetCurrentPage("/events"));

const [currentYear, setCurrentYear] = useState(new Date().getFullYear());

const [loading, setLoading] = useState(event.Events.length < 1);
// const [loading, setLoading] = useState(event.Events.length < 1);

const [currentEvent, setCurrentEvent] = useState("");



useEffect(() => {
(async () => {
console.log("Fetching events.");
if (event.Events.length < 1) {
const fetchedEvents: CalendarEvent[] = (await mainDispatch(fetchEventsAsync() as AppDispatch)) as unknown as CalendarEvent[];
// useEffect(() => {
// (async () => {
// console.log("Fetching events.");
// if (event.Events.length < 1) {
// const fetchedEvents: CalendarEvent[] = (await mainDispatch(fetchEventsAsync() as AppDispatch)) as unknown as CalendarEvent[];

mainDispatch(SetCalendarEvents(fetchedEvents));
setLoading(false);
}
})();
});
// mainDispatch(SetCalendarEvents(fetchedEvents));
// setLoading(false);
// }
// })();
// });



Expand Down Expand Up @@ -139,26 +137,26 @@ export function CarouselMy() {



<Conditional Condition={!loading}>
{/* <Conditional Condition={!loading}>
<Conditional Condition={loading}>Loading</Conditional>
<Carousel setApi={setApi} className="w-full max-w-xs" >
<CarouselContent>
<CarouselContent> */}

{/* <Events Events={[...event.Events].filter(event => event.Start.getFullYear() == currentYear)} /> */}

{
[...event.Events]
.filter(event => event.Start.getFullYear() == currentYear)
.sort((a, b) => b.Start.getTime() - a.Start.getTime())
.slice(0, 4)
.map((event, index) => (
<CarouselItem key={index}>
<EventInstance key={event.Title} Event={event} />
</CarouselItem>
))
// [...event.Events]
// .filter(event => event.Start.getFullYear() == currentYear)
// .sort((a, b) => b.Start.getTime() - a.Start.getTime())
// .slice(0, 4)
// .map((event, index) => (
// <CarouselItem key={index}>
// <EventInstance key={event.Title} Event={event} />
// </CarouselItem>
// ))
}


{/*
</CarouselContent>
<div className="py-2 text-center text-sm text-muted-foreground">
<a className={"text-xl font-bold hover:text-lang-orange max-[600px]:text-lg select-none"} href="./events">More Events Here</a>
Expand All @@ -167,7 +165,7 @@ export function CarouselMy() {
<CarouselPrevious />
<CarouselNext />
</Carousel>
</Conditional>
</Conditional> */}

</>

Expand Down
10 changes: 6 additions & 4 deletions frontend/src/app/EventsOnHomePage/Decision.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,16 +19,18 @@ function Decision() {
return (
<div className=' bg-body-gray'>
{isWideScreen ? (

<EventsSection />


) : (

<div className='flex w-full items-center justify-center h-96 '>
{/* carouselMy might be broken */}
<CarouselMy />

</div>

)}
</div>
);
Expand Down
94 changes: 39 additions & 55 deletions frontend/src/app/EventsOnHomePage/EventeSection.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,6 @@
import { experimental_useEffectEvent, useEffect, useState } from "react";
import { useAppDispatch, useAppSelector } from "../hooks/hooks";
import { SetCurrentPage } from "../slices/pageSlice";
import Events from "./Events";
import { fetchEventsAsync } from "../thunks/EventThunks";
import { AppDispatch } from "../stores/store";
import { CalendarEvent, DefaultCalendarEvent, SetCalendarEvents, SetCurrentEvent, SetFetchIntervalStarted, selectEvent } from "../slices/eventSlice";
import { Timer } from "../hacks/Timer";
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuItem, DropdownMenuContent } from "@/components/ui/dropdown-menu";
import Conditional from "../Conditional";
import IconLabel from "../IconLabel";
import { useRouter } from "next/navigation";
import Image from "next/image"
import { Button } from "@/components/ui/button";
import { Select, SelectItem, SelectTrigger, SelectContent } from "@/components/ui/select";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";


export class Range {
Start: number;
Expand All @@ -48,26 +26,15 @@ export default function EventsSection() {
const router = useRouter();
const mainDispatch = useAppDispatch();

const event = useAppSelector(selectEvent);

mainDispatch(SetCurrentPage("/events"));

const [currentYear, setCurrentYear] = useState(new Date().getFullYear());

const [loading, setLoading] = useState(event.Events.length < 1);

useEffect(() => {
(async () => {
console.log("Fetching events.");
if (event.Events.length < 1) {
const fetchedEvents: CalendarEvent[] = (await mainDispatch(fetchEventsAsync() as AppDispatch)) as unknown as CalendarEvent[];

mainDispatch(SetCalendarEvents(fetchedEvents));
setLoading(false);
}
})();
});

const iframeStyle = {
border: '1px solid black',
borderRadius: '4px',
boxShadow: '0px 0px 3px 1px black ',
height: `760px`,
width: '500px'
};

const getYearsSince = (year: number) => {
return new Range(year, new Date().getFullYear() + 1).ToArray();
Expand All @@ -94,26 +61,43 @@ export default function EventsSection() {

<div className="bg-body-gray h-[60vh] max-[600px]:h-[80vh]">
<div className={"flex flex-row bg-body-gray w-screen"}>
<div className="mt-1 flex flex-col gap-1">


</div>

<div className=" flex flex-col justify-center items-center w-full ">

<div className=" flex flex-row justify-center w-full items-baseline gap-72">
<Conditional Condition={!loading}>


<div className={"text-[36px] font-bold"}>Events</div>
<a href="../events" className={"text-xl font-bold hover:text-lang-orange max-[600px]:text-lg select-none"}>See more events</a>

</Conditional>
<div className={"text-[48px] font-bold"}>Events</div>
{/* add Luma Event Iframes here */}
<div className="flex flex-row justify-center w-full items-baseline gap-5 mb-5" >
<iframe
src="https://lu.ma/embed/event/evt-CcEhJ9sUgoWfRZL/simple"
style={iframeStyle}
allowFullScreen
aria-hidden="false"
tabIndex={0}
/>
<iframe
src="https://lhacks.langaracs.ca/"
style={iframeStyle}
allowFullScreen
aria-hidden="false"
tabIndex={0}
/>
<iframe
src="https://lu.ma/embed/event/evt-ADFRul3ebIYu65p/simple"
style={iframeStyle}
allowFullScreen
aria-hidden="false"
tabIndex={0}
/>


</div>
<div className="mt-1 flex flex-row gap-1 items-center content-center h-96 w-full">
<Conditional Condition={loading}>Loading</Conditional>
<Events Events={[...event.Events].filter(event => event.Start.getFullYear() == currentYear)} />
<div className=" flex flex-row justify-center w-full items-baseline">

<a href="../events" className={"text-xl font-bold hover:text-lang-orange max-[600px]:text-lg select-none"}>See more events</a>

</div>
<div className={"text-xl font-bold max-[600px]:text-lg select-none"}>or </div>
<div><a href="https://lhacks.langaracs.ca/" className={"text-xl font-bold hover:text-lang-orange max-[600px]:text-lg select-none"}>Check out the hackthon website</a></div>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 3907598

Please sign in to comment.