Skip to content

Commit

Permalink
Merge pull request #131 from UoaWDCC/duptala/events-page/124
Browse files Browse the repository at this point in the history 
Duptala/events page/124
  • Loading branch information
@gmat224
gmat224 authored Nov 1, 2024
2 parents d60f43e + c7bd1dc commit e9fd61c
Show file tree
Hide file tree
Showing 6 changed files with 109 additions and 67 deletions.
73 changes: 50 additions & 23 deletions web/__test__/components/SomePhotos.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@ import { render, screen } from "@testing-library/react";
import SomePhotos from "../../src/components/SomePhotos";
import React from "react";
import { GraphQLError } from "graphql";
import { MemoryRouter } from "react-router-dom";

// Mock data with some photos
const mocks = [
{
request: {
Expand Down Expand Up @@ -36,6 +38,7 @@ const mocks = [
},
];

// Mock for no data case
const noDataMock = {
request: {
query: GET_SOME_PHOTOS,
Expand All @@ -49,45 +52,69 @@ const noDataMock = {
},
};

// Mock for error case
const errorMock = {
request: {
query: GET_SOME_PHOTOS,
},
result: {
errors: [new GraphQLError("Error!")],
},
};

describe("SomePhotos Component", () => {
it("renders loading", async () => {
it("renders loading spinner", async () => {
render(
<MockedProvider mocks={mocks} addTypename={false}>
<SomePhotos />
</MockedProvider>
<MemoryRouter>
<MockedProvider mocks={mocks} addTypename={false}>
<SomePhotos />
</MockedProvider>
</MemoryRouter>
);
// Ensure the loading spinner is displayed
expect(screen.getByTestId("loading-spinner")).toBeInTheDocument();

// Wait for the mocked data to load and the spinner to be removed
await screen.findByText("AUIS Stein");
});

it("renders the mocked data", async () => {
render(
<MockedProvider mocks={mocks} addTypename={false}>
<SomePhotos />
</MockedProvider>
<MemoryRouter>
<MockedProvider mocks={mocks} addTypename={false}>
<SomePhotos />
</MockedProvider>
</MemoryRouter>
);
expect(await screen.findByText("AUIS Stein")).toBeInTheDocument();
expect(await screen.findByText("2024")).toBeInTheDocument();

// Wait for the data to load
await screen.findByText("AUIS Stein");
await screen.findByText("2024");
});
it("renders error", async () => {
const execMock = {
request: {
query: GET_SOME_PHOTOS,
},
error: new GraphQLError("Error!"),
};

it("renders error message", async () => {
render(
<MockedProvider mocks={[execMock]} addTypename={false}>
<SomePhotos />
</MockedProvider>
<MemoryRouter>
<MockedProvider mocks={[errorMock]} addTypename={false}>
<SomePhotos />
</MockedProvider>
</MemoryRouter>
);

// Wait for the error message to be displayed
expect(await screen.findByText("CMS Offline")).toBeInTheDocument();
});
it("renders no data from cms", async () => {

it("renders 'no photos' message when there is no data", async () => {
render(
<MockedProvider mocks={[noDataMock]} addTypename={false}>
<SomePhotos />
</MockedProvider>
<MemoryRouter>
<MockedProvider mocks={[noDataMock]} addTypename={false}>
<SomePhotos />
</MockedProvider>
</MemoryRouter>
);

// Wait for the "no photos" message to be displayed
expect(
await screen.findByText("There are no photos to display")
).toBeInTheDocument();
Expand Down
53 changes: 32 additions & 21 deletions web/src/components/SimpleSlider.tsx → web/src/components/EventSlider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,16 @@ import {
} from "react-icons/io5";
import { useRef } from "react";

interface SimpleSliderProps {
interface EventSliderProps {
children: React.ReactNode;
cardType?: "upcoming" | "past";
}

const SimpleSlider: React.FC<SimpleSliderProps> = ({ children, cardType }) => {
const EventSlider: React.FC<EventSliderProps> = ({ children, cardType }) => {
const sliderRef = useRef<Slider>(null);

const settings = {
dots: true,
infinite: false,
speed: 500,
slidesToShow: cardType === "past" ? 1 : 3,
slidesToScroll: 1,
Expand Down Expand Up @@ -51,39 +50,51 @@ const SimpleSlider: React.FC<SimpleSliderProps> = ({ children, cardType }) => {
sliderRef.current?.slickPrev();
};

// Helper function to group children into chunks of 3 for "past" events
const groupChildren = (childrenArray: React.ReactNode[]) => {
const grouped: React.ReactNode[][] = [];
for (let i = 0; i < childrenArray.length; i += 3) {
grouped.push(childrenArray.slice(i, i + 3));
}
return grouped;
};

const childrenArray = Array.isArray(children) ? children : [children]; // Ensure children is always an array

return (
<div className="flex w-full items-center justify-center">
{/* Previous Arrow */}
<IoArrowBackCircleOutline
onClick={previous}
className="mx-4 hidden h-16 w-16 text-gray-400 hover:cursor-pointer sm:flex"
/>

{/* Slider container */}
<div className="h-auto w-full sm:w-[calc(100%-8rem)]">
<Slider ref={sliderRef} {...settings}>
{/* Conditionally group past events into sets of 3 */}
{cardType === "past"
? React.Children.toArray(children)
.reduce((acc: any, child: any, index: number) => {
if (index % 3 === 0) acc.push([]);
acc[acc.length - 1].push(child);
return acc;
}, [])
.map((group: any, index: number) => (
<div key={index} className="p-2">
<div className="flex flex-col">
{group.map((child: any, subIndex: number) => (
<div key={subIndex} className="p-2">
{child}
</div>
))}
</div>
? groupChildren(childrenArray).map((group, index) => (
<div key={index} className="p-2">
<div className="flex flex-col">
{group.map((child, subIndex) => (
<div key={subIndex} className="p-2">
{child}
</div>
))}
</div>
))
: React.Children.map(children, (child, index) => (
</div>
))
: // For upcoming events, simply render each child
childrenArray.map((child, index) => (
<div key={index} className="p-2">
{child}
</div>
))}
</Slider>
</div>

{/* Next Arrow */}
<IoArrowForwardCircleOutline
onClick={next}
className="mx-4 hidden h-16 w-16 text-gray-400 hover:cursor-pointer sm:flex"
Expand All @@ -92,4 +103,4 @@ const SimpleSlider: React.FC<SimpleSliderProps> = ({ children, cardType }) => {
);
};

export default SimpleSlider;
export default EventSlider;
2 changes: 1 addition & 1 deletion web/src/components/PastEventsList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import SimpleSlider from "./SimpleSlider";
import SimpleSlider from "./EventSlider";
import PastEventCard from "./PastEventCard";
import { Event } from "../types/types";
import { Link } from "react-router-dom";
Expand Down
20 changes: 12 additions & 8 deletions web/src/components/SomePhotos.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ 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 {
Expand Down Expand Up @@ -44,10 +45,10 @@ function SomePhotos() {
<LoadingSpinner />
) : (
<div className="bg-white">
<h1 className="mx-3 py-12 text-center text-5xl font-bold text-white">
Our Upcoming Events!
<h1 className="pt-12 text-center text-4xl font-bold text-black">
Some Photos!
</h1>
<div className="mt-20 flex w-full flex-col justify-center">
<div className="flex w-full flex-col justify-center py-12">
<div className="flex flex-col justify-center lg:flex-row">
{noPhotos ? (
<div>There are no photos to display</div>
Expand Down Expand Up @@ -76,11 +77,14 @@ function SomePhotos() {
</div>
)}
</div>
</div>
<div className="flex flex-col items-center bg-white py-12">
<h2 className="mb-8 text-center text-4xl font-bold text-black">
Some Photos!
</h2>
<div className="mt-14 flex justify-center">
<Link
to="/events"
className="bg-primary-orange w-fit rounded-2xl px-10 py-3 text-xl font-bold text-white hover:drop-shadow-xl hover:duration-500 hover:ease-in-out"
>
Photo Gallery!
</Link>
</div>
</div>
</div>
)}
Expand Down
10 changes: 5 additions & 5 deletions web/src/components/UpcomingEventsList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import SimpleSlider from "./SimpleSlider";
import EventSlider from "./EventSlider";
import { Event } from "../types/types";
import UpcomingEventCard from "./UpcomingEventCard";
import { Link } from "react-router-dom";
Expand All @@ -12,15 +12,15 @@ const UpcomingEventsList: React.FC<UpcomingEventsListProps> = ({
}) => {
return (
<>
<SimpleSlider cardType="upcoming">
{upcomingEvents.map((event, index) => (
<div key={index} className="p-2 hover:cursor-pointer">
<EventSlider cardType="upcoming">
{upcomingEvents.map((event) => (
<div key={event.id} className="p-2 hover:cursor-pointer">
<Link to={`/events/${event.id}`}>
<UpcomingEventCard upcomingEvent={event} />
</Link>
</div>
))}
</SimpleSlider>
</EventSlider>
</>
);
};
Expand Down
18 changes: 9 additions & 9 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,9 @@
zen-observable-ts "^1.2.5"

"@babel/runtime@^7.21.0":
version "7.25.6"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.6.tgz#9afc3289f7184d8d7f98b099884c26317b9264d2"
integrity sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==
version "7.25.7"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.7.tgz#7ffb53c37a8f247c8c4d335e89cdf16a2e0d0fb6"
integrity sha512-FjoyLe754PMiYsFaN5C94ttGiOmBNYTf6pLr4xXHAT5uctHb092PBszndLDR5XA/jghQvn4n7JMHl7dmTgbm9w==
dependencies:
regenerator-runtime "^0.14.0"

Expand Down Expand Up @@ -204,9 +204,9 @@ optimism@^0.18.0:
tslib "^2.3.0"

prettier-plugin-tailwindcss@^0.6.5:
version "0.6.6"
resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.6.tgz#93e524d3c30f3fb45dc9e99de985b2a584ff063f"
integrity sha512-OPva5S7WAsPLEsOuOWXATi13QrCKACCiIonFgIR6V4lYv4QLp++UXVhZSzRbZxXGimkQtQT86CC6fQqTOybGng==
version "0.6.8"
resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.8.tgz#8a178e1679e3f941cc9de396f109c6cffea676d8"
integrity sha512-dGu3kdm7SXPkiW4nzeWKCl3uoImdd5CTZEJGxyypEPL37Wj0HT2pLqjrvSei1nTeuQfO4PUfjeW5cTUNRLZ4sA==

prettier@^3.3.2:
version "3.3.3"
Expand Down Expand Up @@ -312,9 +312,9 @@ ts-invariant@^0.10.3:
tslib "^2.1.0"

tslib@^2.1.0, tslib@^2.3.0:
version "2.7.0"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.7.0.tgz#d9b40c5c40ab59e8738f297df3087bf1a2690c01"
integrity sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==
version "2.8.0"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.0.tgz#d124c86c3c05a40a91e6fdea4021bd31d377971b"
integrity sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==

wrap-ansi@^7.0.0:
version "7.0.0"
Expand Down

0 comments on commit e9fd61c

Please sign in to comment.