From cfedc6c695fad3382c4bde1b8988a9207877d093 Mon Sep 17 00:00:00 2001 From: Guryash Date: Fri, 1 Nov 2024 23:10:34 +1300 Subject: [PATCH 01/19] feat: added dependency injection --- web/src/components/SomePhotos.tsx | 78 +++++++-------------------- web/src/components/UpcomingEvents.tsx | 1 + web/src/screens/HomeScreen.tsx | 76 +++++++++++++++----------- 3 files changed, 64 insertions(+), 91 deletions(-) diff --git a/web/src/components/SomePhotos.tsx b/web/src/components/SomePhotos.tsx index 4db1c1d3..c6b9daa1 100644 --- a/web/src/components/SomePhotos.tsx +++ b/web/src/components/SomePhotos.tsx @@ -1,59 +1,27 @@ -import { useQuery } from "@apollo/client"; -import { GET_SOME_PHOTOS } from "../graphql/queries"; -import LoadingSpinner from "./LoadingSpinner"; import type { SomePhoto } from "../types/types"; -import { Mapper } from "../utils/Mapper"; -import { useState, useEffect } from "react"; -import { Link } from "react-router-dom"; -function SomePhotos() { - const { - loading: photosLoading, - data: photosData, - error: photosError, - } = useQuery(GET_SOME_PHOTOS); - - const [photos, setPhotos] = useState([]); - const [loading, setLoading] = useState(true); - const [noPhotos, setNoPhotos] = useState(false); - - useEffect(() => { - if (photosData) { - try { - const mappedPhotos = Mapper.mapToSomePhotos(photosData); - setPhotos(mappedPhotos); - setLoading(false); - } catch (error) { - setNoPhotos(true); - } - } - }, [photosData]); - - useEffect(() => { - if (!photosLoading) { - setLoading(false); - } - }, [photosLoading]); - - if (photosError) { - return
CMS Offline
; - } +function SomePhotos({ + photos, + noPhotos, +}: { + photos: SomePhoto[]; + noPhotos: boolean; +}) { return ( <> - {loading ? ( - - ) : ( -
-

- Some Photos! -

-
-
+
+

+ Previous Events +

+
+
+
{noPhotos ? ( -
There are no photos to display
+

Photos coming soon!

) : ( -
+
+ {/* Only grab first 4 images */} {photos.slice(0, 4).map((photo, index) => (
event pic

@@ -77,17 +45,9 @@ function SomePhotos() {

)}
-
- - Photo Gallery! - -
- )} +
); } diff --git a/web/src/components/UpcomingEvents.tsx b/web/src/components/UpcomingEvents.tsx index 05ac4ab2..2e6fe956 100644 --- a/web/src/components/UpcomingEvents.tsx +++ b/web/src/components/UpcomingEvents.tsx @@ -3,6 +3,7 @@ import { Event } from "../types/types"; interface UpcomingEventsProps { upcomingEvents: Event[]; + noEvents: boolean } const UpcomingEvents: React.FC = ({ upcomingEvents }) => { diff --git a/web/src/screens/HomeScreen.tsx b/web/src/screens/HomeScreen.tsx index cb2aeeeb..32daafed 100644 --- a/web/src/screens/HomeScreen.tsx +++ b/web/src/screens/HomeScreen.tsx @@ -2,14 +2,16 @@ import Hero from "@components/Hero"; import Intro from "@components/Intro"; import SomePhotos from "@components/SomePhotos"; import UpcomingEvents from "@components/UpcomingEvents"; -import { GET_EVENTS, GET_EXECS } from "../graphql/queries"; +import { GET_EVENTS, GET_SOME_PHOTOS } from "../graphql/queries"; import LoadingSpinner from "../components/LoadingSpinner"; import { useQuery } from "@apollo/client"; import { Mapper } from "@utils/Mapper"; import { useEffect, useState } from "react"; -import type { Event, Exec } from "../types/types"; +import type { Event, SomePhoto } from "../types/types"; export default function HomeScreen() { + + // Queries const { loading: eventsLoading, data: eventsData, @@ -17,53 +19,59 @@ export default function HomeScreen() { } = useQuery(GET_EVENTS); const { - loading: execsLoading, - data: execsData, - error: execsError, - } = useQuery(GET_EXECS); + loading: photosLoading, + data: photosData, + error: photosError, + } = useQuery(GET_SOME_PHOTOS); + // States const [events, setEvents] = useState([]); - const [, /*executives*/ setExecutives] = useState([]); - const [, /*noEvents*/ setNoEvents] = useState(false); - const [, /*noExecs*/ setNoExecs] = useState(false); - const [loading, setLoading] = useState(true); + const [loadingEvents, setLoadingEvents] = useState(false); + const [errorEvents, setErrorEvents] = useState(false); + + const [photos, setPhotos] = useState([]); + const [loadingPhotos, setLoadingPhotos] = useState(true); + const [errorPhotos, setErrorPhotos] = useState(false); + // useEffect useEffect(() => { + if (!eventsLoading) { + setLoadingEvents(false); + } + if (photosError){ + setErrorEvents(true) + } if (eventsData) { try { const mappedEvents = Mapper.mapToEvents(eventsData); setEvents(mappedEvents); } catch (error) { - setNoEvents(true); + setErrorEvents(true); } } - }, [eventsData]); + }, [eventsData, eventsError, eventsLoading]); useEffect(() => { - if (execsData) { - try { - const mappedExecs = Mapper.mapToExec(execsData); - setExecutives(mappedExecs); - } catch (error) { - setNoExecs(true); - } + if (!photosLoading) { + setLoadingPhotos(false); } - }, [execsData]); - useEffect(() => { - if (!eventsLoading && !execsLoading) { - setLoading(false); + if (photosError){ + setErrorPhotos(true) } - }, [eventsLoading, execsLoading]); - if (eventsError || execsError) { - return
CMS Offline
; - } + if (photosData) { + try { + const mappedPhotos = Mapper.mapToSomePhotos(photosData); + setPhotos(mappedPhotos); + } catch (error) { + setErrorPhotos(true); + } + } - if (loading) { - return ; - } + }, [photosData, photosError, photosLoading]); + // Filtering const currentDate = new Date(); const upcomingEvents = events.filter((event) => { const eventDate = new Date(event.eventDateStart); @@ -74,8 +82,12 @@ export default function HomeScreen() {
- - + {loadingEvents ? ( + + ) : ( + + )} + {loadingPhotos ? : }
); } From 347a89881d6d6a7bdf6f906e0e503c13d05b9345 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Fri, 1 Nov 2024 10:10:56 +0000 Subject: [PATCH 02/19] Format code with Prettier --- web/src/components/SomePhotos.tsx | 1 - web/src/components/UpcomingEvents.tsx | 2 +- web/src/screens/HomeScreen.tsx | 21 +++++++++++++-------- 3 files changed, 14 insertions(+), 10 deletions(-) diff --git a/web/src/components/SomePhotos.tsx b/web/src/components/SomePhotos.tsx index c6b9daa1..048390a2 100644 --- a/web/src/components/SomePhotos.tsx +++ b/web/src/components/SomePhotos.tsx @@ -7,7 +7,6 @@ function SomePhotos({ photos: SomePhoto[]; noPhotos: boolean; }) { - return ( <>
diff --git a/web/src/components/UpcomingEvents.tsx b/web/src/components/UpcomingEvents.tsx index 2e6fe956..7e2743a2 100644 --- a/web/src/components/UpcomingEvents.tsx +++ b/web/src/components/UpcomingEvents.tsx @@ -3,7 +3,7 @@ import { Event } from "../types/types"; interface UpcomingEventsProps { upcomingEvents: Event[]; - noEvents: boolean + noEvents: boolean; } const UpcomingEvents: React.FC = ({ upcomingEvents }) => { diff --git a/web/src/screens/HomeScreen.tsx b/web/src/screens/HomeScreen.tsx index 32daafed..e08106db 100644 --- a/web/src/screens/HomeScreen.tsx +++ b/web/src/screens/HomeScreen.tsx @@ -10,7 +10,6 @@ import { useEffect, useState } from "react"; import type { Event, SomePhoto } from "../types/types"; export default function HomeScreen() { - // Queries const { loading: eventsLoading, @@ -38,8 +37,8 @@ export default function HomeScreen() { if (!eventsLoading) { setLoadingEvents(false); } - if (photosError){ - setErrorEvents(true) + if (photosError) { + setErrorEvents(true); } if (eventsData) { try { @@ -56,8 +55,8 @@ export default function HomeScreen() { setLoadingPhotos(false); } - if (photosError){ - setErrorPhotos(true) + if (photosError) { + setErrorPhotos(true); } if (photosData) { @@ -68,7 +67,6 @@ export default function HomeScreen() { setErrorPhotos(true); } } - }, [photosData, photosError, photosLoading]); // Filtering @@ -85,9 +83,16 @@ export default function HomeScreen() { {loadingEvents ? ( ) : ( - + + )} + {loadingPhotos ? ( + + ) : ( + )} - {loadingPhotos ? : }
); } From cea10069a3d9499db6a77589f6f79512a37679e3 Mon Sep 17 00:00:00 2001 From: Guryash Date: Fri, 1 Nov 2024 23:18:16 +1300 Subject: [PATCH 03/19] feat: added navbar through dependency injection --- web/src/components/Hero.tsx | 5 +++-- web/src/main.tsx | 3 ++- web/src/screens/HomeScreen.tsx | 25 +++++++++++++++---------- 3 files changed, 20 insertions(+), 13 deletions(-) diff --git a/web/src/components/Hero.tsx b/web/src/components/Hero.tsx index 0fcfd9f9..56f960be 100644 --- a/web/src/components/Hero.tsx +++ b/web/src/components/Hero.tsx @@ -3,11 +3,12 @@ import auisHalfLogo1 from "../assets/peacock_white_left_side.png"; import auisAbbrev from "../assets/auis_no_depth.png"; import Header from "./Header"; -export default function Hero() { +export default function Hero({navbar}: {navbar : JSX.Element}) { return ( <>
-
+ {/*
*/} + {navbar}
}> - } /> + }/>} /> } /> } /> } /> diff --git a/web/src/screens/HomeScreen.tsx b/web/src/screens/HomeScreen.tsx index 32daafed..0068dd4a 100644 --- a/web/src/screens/HomeScreen.tsx +++ b/web/src/screens/HomeScreen.tsx @@ -9,8 +9,7 @@ import { Mapper } from "@utils/Mapper"; import { useEffect, useState } from "react"; import type { Event, SomePhoto } from "../types/types"; -export default function HomeScreen() { - +export default function HomeScreen({navbar} : {navbar: JSX.Element}) { // Queries const { loading: eventsLoading, @@ -38,8 +37,8 @@ export default function HomeScreen() { if (!eventsLoading) { setLoadingEvents(false); } - if (photosError){ - setErrorEvents(true) + if (photosError) { + setErrorEvents(true); } if (eventsData) { try { @@ -56,8 +55,8 @@ export default function HomeScreen() { setLoadingPhotos(false); } - if (photosError){ - setErrorPhotos(true) + if (photosError) { + setErrorPhotos(true); } if (photosData) { @@ -68,7 +67,6 @@ export default function HomeScreen() { setErrorPhotos(true); } } - }, [photosData, photosError, photosLoading]); // Filtering @@ -80,14 +78,21 @@ export default function HomeScreen() { return (
- + {loadingEvents ? ( ) : ( - + + )} + {loadingPhotos ? ( + + ) : ( + )} - {loadingPhotos ? : }
); } From 28d78966b0a95cb5ae15c04e7cd702dbde555ef7 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Fri, 1 Nov 2024 10:19:22 +0000 Subject: [PATCH 04/19] Format code with Prettier --- web/src/components/Hero.tsx | 2 +- web/src/main.tsx | 2 +- web/src/screens/HomeScreen.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/web/src/components/Hero.tsx b/web/src/components/Hero.tsx index 56f960be..878423d2 100644 --- a/web/src/components/Hero.tsx +++ b/web/src/components/Hero.tsx @@ -3,7 +3,7 @@ import auisHalfLogo1 from "../assets/peacock_white_left_side.png"; import auisAbbrev from "../assets/auis_no_depth.png"; import Header from "./Header"; -export default function Hero({navbar}: {navbar : JSX.Element}) { +export default function Hero({ navbar }: { navbar: JSX.Element }) { return ( <>
diff --git a/web/src/main.tsx b/web/src/main.tsx index 5bbf6498..92f7d671 100644 --- a/web/src/main.tsx +++ b/web/src/main.tsx @@ -39,7 +39,7 @@ if (!CLERK_PUBLISHABLE_KEY) { const router = createBrowserRouter( createRoutesFromElements( }> - }/>} /> + } />} /> } /> } /> } /> diff --git a/web/src/screens/HomeScreen.tsx b/web/src/screens/HomeScreen.tsx index 0068dd4a..1b34d9f8 100644 --- a/web/src/screens/HomeScreen.tsx +++ b/web/src/screens/HomeScreen.tsx @@ -9,7 +9,7 @@ import { Mapper } from "@utils/Mapper"; import { useEffect, useState } from "react"; import type { Event, SomePhoto } from "../types/types"; -export default function HomeScreen({navbar} : {navbar: JSX.Element}) { +export default function HomeScreen({ navbar }: { navbar: JSX.Element }) { // Queries const { loading: eventsLoading, From cf12a7abdf5371b58b26b97774c8d7895abcbe9d Mon Sep 17 00:00:00 2001 From: Guryash Date: Fri, 1 Nov 2024 23:23:59 +1300 Subject: [PATCH 05/19] feat: added navigate to sign up --- web/src/components/Hero.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/web/src/components/Hero.tsx b/web/src/components/Hero.tsx index 56f960be..e24bd9d3 100644 --- a/web/src/components/Hero.tsx +++ b/web/src/components/Hero.tsx @@ -1,13 +1,14 @@ import auisHalfLogo from "../assets/peacock_white_side.png"; import auisHalfLogo1 from "../assets/peacock_white_left_side.png"; import auisAbbrev from "../assets/auis_no_depth.png"; -import Header from "./Header"; +import { useNavigate } from "react-router"; + +export default function Hero({ navbar }: { navbar: JSX.Element }) { + const navigate = useNavigate(); -export default function Hero({navbar}: {navbar : JSX.Element}) { return ( <>
- {/*
*/} {navbar}
@@ -36,6 +37,9 @@ export default function Hero({navbar}: {navbar : JSX.Element}) { From 8f1d0a4be140f9cfa5fc039a63b6011407d48c0f Mon Sep 17 00:00:00 2001 From: Guryash Date: Fri, 1 Nov 2024 23:34:25 +1300 Subject: [PATCH 06/19] feat: added animations --- web/src/components/Header.tsx | 12 ++++++------ web/src/components/Hero.tsx | 2 +- web/src/components/Socials.tsx | 16 ++++++++-------- 3 files changed, 15 insertions(+), 15 deletions(-) diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx index 40759eca..04cdece9 100644 --- a/web/src/components/Header.tsx +++ b/web/src/components/Header.tsx @@ -20,7 +20,7 @@ function Header() {
{/* Logo */} -
+
setNavBar(false)} > {label.title} @@ -87,7 +87,7 @@ function Header() { @@ -96,7 +96,7 @@ function Header() { @@ -110,7 +110,7 @@ function Header() { @@ -119,7 +119,7 @@ function Header() { diff --git a/web/src/components/Hero.tsx b/web/src/components/Hero.tsx index e24bd9d3..5e2dfa2c 100644 --- a/web/src/components/Hero.tsx +++ b/web/src/components/Hero.tsx @@ -36,7 +36,7 @@ export default function Hero({ navbar }: { navbar: JSX.Element }) {
@@ -96,7 +96,7 @@ function Header() { @@ -110,7 +110,7 @@ function Header() { @@ -119,7 +119,7 @@ function Header() { diff --git a/web/src/components/Hero.tsx b/web/src/components/Hero.tsx index 5e2dfa2c..ac855e3d 100644 --- a/web/src/components/Hero.tsx +++ b/web/src/components/Hero.tsx @@ -36,7 +36,7 @@ export default function Hero({ navbar }: { navbar: JSX.Element }) {
{titles.map((label) => ( From b9d93176a0e8a98e43099e6d3394a2dcf745fc5f Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Fri, 1 Nov 2024 10:37:45 +0000 Subject: [PATCH 09/19] Format code with Prettier --- web/src/components/Header.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx index 3f3c2a42..e7ebc9fb 100644 --- a/web/src/components/Header.tsx +++ b/web/src/components/Header.tsx @@ -50,7 +50,7 @@ function Header() { ) : ( )} @@ -66,7 +66,10 @@ function Header() { className="absolute right-4 top-4 xl:hidden" onClick={() => setNavBar(false)} > - +
{titles.map((label) => ( From 9a894a6e24349664e3a4b078ee8f232803d85f54 Mon Sep 17 00:00:00 2001 From: Guryash Date: Sat, 2 Nov 2024 22:34:37 +1300 Subject: [PATCH 10/19] feat: change slick slider to keen slider --- package.json | 3 +- web/package.json | 1 + web/src/components/UpcomingEvents.tsx | 43 +++++++++++- web/src/components/UpcomingEventsList.tsx | 84 +++++++++++++++++++++-- web/src/hooks/useScreenSize.ts | 28 ++++++++ web/src/screens/HomeScreen.tsx | 2 +- web/yarn.lock | 5 ++ yarn.lock | 5 ++ 8 files changed, 164 insertions(+), 7 deletions(-) create mode 100644 web/src/hooks/useScreenSize.ts diff --git a/package.json b/package.json index 9c034f39..8f90b00e 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ }, "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e", "dependencies": { - "@apollo/client": "^3.10.8" + "@apollo/client": "^3.10.8", + "keen-slider": "^6.8.6" } } diff --git a/web/package.json b/web/package.json index 7d2d9218..557101bc 100644 --- a/web/package.json +++ b/web/package.json @@ -22,6 +22,7 @@ "axios": "^1.6.7", "dayjs": "^1.11.11", "graphql": "^16.8.2", + "keen-slider": "^6.8.6", "react": "^18.2.0", "react-cookies": "^0.1.1", "react-dom": "^18.2.0", diff --git a/web/src/components/UpcomingEvents.tsx b/web/src/components/UpcomingEvents.tsx index 7e2743a2..f6df5a19 100644 --- a/web/src/components/UpcomingEvents.tsx +++ b/web/src/components/UpcomingEvents.tsx @@ -1,5 +1,6 @@ import UpcomingEventsList from "./UpcomingEventsList"; import { Event } from "../types/types"; +import { IoArrowBackCircleOutline, IoArrowForwardCircleOutline } from "react-icons/io5"; interface UpcomingEventsProps { upcomingEvents: Event[]; @@ -12,11 +13,51 @@ const UpcomingEvents: React.FC = ({ upcomingEvents }) => {

Our Upcoming Events!

-
+
+ + console.log("clicked") + // e.stopPropagation() || instanceRef.current?.next() + } + disabled={false + // currentSlide >= + // instanceRef.current.track.details.slides.length - (screenSize.width > 640 ? (screenSize.width > 1000 ? 3 : 2) : 1) + } + /> + + console.log("clicked") + // e.stopPropagation() || instanceRef.current?.next() + } + disabled={false + // currentSlide >= + // instanceRef.current.track.details.slides.length - (screenSize.width > 640 ? (screenSize.width > 1000 ? 3 : 2) : 1) + } + />
); }; +function LeftArrow(props: { disabled: boolean; onClick: (e: any) => void }) { + const disabled = props.disabled ? " arrow--disabled" : ""; + return ( +
))}
- + {/* Loaded is needed to make sure all slider slides are loaded in */} {/* {loaded && instanceRef.current && ( <> diff --git a/web/src/hooks/useScreenSize.ts b/web/src/hooks/useScreenSize.ts index a5abdcf7..b1bc76e5 100644 --- a/web/src/hooks/useScreenSize.ts +++ b/web/src/hooks/useScreenSize.ts @@ -1,4 +1,4 @@ -import { useState, useEffect } from 'react'; +import { useState, useEffect } from "react"; const useScreenSize = () => { const [screenSize, setScreenSize] = useState({ @@ -14,15 +14,15 @@ const useScreenSize = () => { }); }; - window.addEventListener('resize', handleResize); + window.addEventListener("resize", handleResize); // Clean up the event listener when the component unmounts return () => { - window.removeEventListener('resize', handleResize); + window.removeEventListener("resize", handleResize); }; }, []); return screenSize; }; -export default useScreenSize; \ No newline at end of file +export default useScreenSize; From 266d78829d352da72ee6ae6692040a2a1fcfeb08 Mon Sep 17 00:00:00 2001 From: Guryash Date: Sat, 2 Nov 2024 23:10:55 +1300 Subject: [PATCH 12/19] feat: forward and back button for slider --- web/src/components/UpcomingEvents.tsx | 66 ++++++++++++------- web/src/components/UpcomingEventsList.tsx | 78 ++--------------------- 2 files changed, 47 insertions(+), 97 deletions(-) diff --git a/web/src/components/UpcomingEvents.tsx b/web/src/components/UpcomingEvents.tsx index f6df5a19..1aabc392 100644 --- a/web/src/components/UpcomingEvents.tsx +++ b/web/src/components/UpcomingEvents.tsx @@ -1,6 +1,12 @@ import UpcomingEventsList from "./UpcomingEventsList"; import { Event } from "../types/types"; -import { IoArrowBackCircleOutline, IoArrowForwardCircleOutline } from "react-icons/io5"; +import { + IoArrowBackCircleOutline, + IoArrowForwardCircleOutline, +} from "react-icons/io5"; +import useScreenSize from "../hooks/useScreenSize"; +import { useState } from "react"; +import { useKeenSlider } from "keen-slider/react"; interface UpcomingEventsProps { upcomingEvents: Event[]; @@ -8,33 +14,47 @@ interface UpcomingEventsProps { } const UpcomingEvents: React.FC = ({ upcomingEvents }) => { + const [currentSlide, setCurrentSlide] = useState(0); + const screenSize = useScreenSize(); + + const [sliderRef, instanceRef] = useKeenSlider({ + initial: 0, + slideChanged(slider) { + setCurrentSlide(slider.track.details.rel); + }, + mode: "free-snap", + slides: { + origin: "auto", + perView: screenSize.width > 640 ? (screenSize.width > 1000 ? 3 : 2) : 1, + }, + }); + return (

Our Upcoming Events!

- - console.log("clicked") - // e.stopPropagation() || instanceRef.current?.next() - } - disabled={false - // currentSlide >= - // instanceRef.current.track.details.slides.length - (screenSize.width > 640 ? (screenSize.width > 1000 ? 3 : 2) : 1) - } - /> - + + e.stopPropagation() || instanceRef.current?.prev() + } + disabled={currentSlide === 0} + /> + - console.log("clicked") - // e.stopPropagation() || instanceRef.current?.next() - } - disabled={false - // currentSlide >= - // instanceRef.current.track.details.slides.length - (screenSize.width > 640 ? (screenSize.width > 1000 ? 3 : 2) : 1) - } - /> + onClick={(e: any) => + e.stopPropagation() || instanceRef.current?.next() + } + disabled={ + currentSlide >= + upcomingEvents.length - + (screenSize.width > 640 ? (screenSize.width > 1000 ? 3 : 2) : 1) + } + />
); @@ -45,7 +65,7 @@ function LeftArrow(props: { disabled: boolean; onClick: (e: any) => void }) { return (