Skip to content

Commit

Permalink
Format code with Prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
@github-actions
github-actions[bot] committed Aug 6, 2024
1 parent 1c798d0 commit de16c79
Show file tree
Hide file tree
Showing 3 changed files with 107 additions and 108 deletions.
2 changes: 1 addition & 1 deletion web/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Outlet } from "react-router-dom";
import Footer from "./components/Footer";
import Home from './screens/HomeScreen';
import Home from "./screens/HomeScreen";

const App = () => {
return (
Expand Down
211 changes: 105 additions & 106 deletions web/src/components/SomePhotos.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,119 +6,118 @@ import { Mapper } from "../utils/Mapper";
import { useState, useEffect } from "react";

function SomePhotos() {
const {
loading: photosLoading,
data: photosData,
error: photosError,
} = useQuery(GET_SOME_PHOTOS);
const {
loading: photosLoading,
data: photosData,
error: photosError,
} = useQuery(GET_SOME_PHOTOS);

const [photos, setPhotos] = useState<SomePhoto[]>([]);
const [loading, setLoading] = useState(true);
const [noPhotos, setNoPhotos] = useState(false);
const [photos, setPhotos] = useState<SomePhoto[]>([]);
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 (photosData) {
try {
const mappedPhotos = Mapper.mapToSomePhotos(photosData);
setPhotos(mappedPhotos);
setLoading(false);
} catch (error) {
setNoPhotos(true);
}
}
}, [photosData]);

useEffect(() => {
if (!photosLoading) {
setLoading(false);
}
}, [photosLoading]);
useEffect(() => {
if (!photosLoading) {
setLoading(false);
}
}, [photosLoading]);

if (photosError) {
return <div>CMS Offline</div>;
}
if (photosError) {
return <div>CMS Offline</div>;
}

return (
<>
{loading ? (
<LoadingSpinner />
) : (
<div className=" bg-white">
<h1 className="mx-3 py-12 text-center text-5xl font-bold text-white">
Our Upcoming Events!
</h1>
<div className="mt-20 flex flex-col justify-center w-full">
<div className="flex flex-col lg:flex-row justify-center">
{noPhotos ? (
<div>There are no photos to display</div>
) : (
<div className="relative flex lg:flex-row flex-col items-center space-x-4">

<div className="bg-white p-4 rounded-lg shadow-lg transform -rotate-3 hover:rotate-0 transition-transform z-10">
<img
src={`${photos[0].image}`}
alt="event pic"
className="w-48 h-60 object-cover mb-4 border-b-2 border-gray-200"
/>
<p className="text-center font-sans text-black">
{`${photos[0].title}`}
</p>
</div>

<div className="bg-white p-4 rounded-lg shadow-lg transform rotate-3 hover:rotate-0 transition-transform z-20">
<img
src={`${photos[0].image}`}
alt="event pic"
className="w-48 h-60 object-cover mb-4 border-b-2 border-gray-200"
/>
<p className="text-center font-sans text-black">
{`${photos[0].title}`}
</p>
</div>

<div className="bg-white p-4 rounded-lg shadow-lg transform -rotate-3 hover:rotate-0 transition-transform z-30">
<img
src={`${photos[0].image}`}
alt="event pic"
className="w-48 h-60 object-cover mb-4 border-b-2 border-gray-200"
/>
<p className="text-center font-sans text-black">
return (
<>
{loading ? (
<LoadingSpinner />
) : (
<div className="bg-white">
<h1 className="mx-3 py-12 text-center text-5xl font-bold text-white">
Our Upcoming Events!
</h1>
<div className="mt-20 flex w-full flex-col justify-center">
<div className="flex flex-col justify-center lg:flex-row">
{noPhotos ? (
<div>There are no photos to display</div>
) : (
<div className="relative flex flex-col items-center space-x-4 lg:flex-row">
<div className="z-10 -rotate-3 transform rounded-lg bg-white p-4 shadow-lg transition-transform hover:rotate-0">
<img
src={`${photos[0].image}`}
alt="event pic"
className="mb-4 h-60 w-48 border-b-2 border-gray-200 object-cover"
/>
<p className="text-center font-sans text-black">
{`${photos[0].title}`}
</p>
</div>

<div className="bg-white p-4 rounded-lg shadow-lg transform rotate-3 hover:rotate-0 transition-transform z-40">
<img
src={`${photos[0].image}`}
alt="event pic"
className="w-48 h-60 object-cover mb-4 border-b-2 border-gray-200"
/>
<p className="text-center font-sans text-black">
{`${photos[0].title}`}
</p>
</div>
</div>
)}
</div>
</div>
<div className="bg-white py-12 flex flex-col items-center">
<h2 className="text-4xl text-black font-bold text-center mb-8">
Some Photos!
</h2>
</p>
</div>

<div className="text-center mt-8">
<button
type="button"
className="bg-orange-500 text-white py-2 px-6 rounded-full text-xl hover:bg-orange-600 transition-colors"
>
Photo Gallery!
</button>
</div>
</div>
</div>
)}
</>
);
<div className="z-20 rotate-3 transform rounded-lg bg-white p-4 shadow-lg transition-transform hover:rotate-0">
<img
src={`${photos[0].image}`}
alt="event pic"
className="mb-4 h-60 w-48 border-b-2 border-gray-200 object-cover"
/>
<p className="text-center font-sans text-black">
{`${photos[0].title}`}
</p>
</div>

<div className="z-30 -rotate-3 transform rounded-lg bg-white p-4 shadow-lg transition-transform hover:rotate-0">
<img
src={`${photos[0].image}`}
alt="event pic"
className="mb-4 h-60 w-48 border-b-2 border-gray-200 object-cover"
/>
<p className="text-center font-sans text-black">
{`${photos[0].title}`}
</p>
</div>

<div className="z-40 rotate-3 transform rounded-lg bg-white p-4 shadow-lg transition-transform hover:rotate-0">
<img
src={`${photos[0].image}`}
alt="event pic"
className="mb-4 h-60 w-48 border-b-2 border-gray-200 object-cover"
/>
<p className="text-center font-sans text-black">
{`${photos[0].title}`}
</p>
</div>
</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-8 text-center">
<button
type="button"
className="rounded-full bg-orange-500 px-6 py-2 text-xl text-white transition-colors hover:bg-orange-600"
>
Photo Gallery!
</button>
</div>
</div>
</div>
)}
</>
);
}

export default SomePhotos;
2 changes: 1 addition & 1 deletion web/src/main.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const router = createBrowserRouter(
<Route path="/about-us" element={<AboutUsScreen />} />
<Route path="/events" element={<EventScreen />} />
<Route path="/photos" element={<PhotosScreen />} />
<Route path="/about-us" element={<AboutUsSCreen/>}/>
<Route path="/about-us" element={<AboutUsSCreen />} />
</Route>
)
);
Expand Down

0 comments on commit de16c79

Please sign in to comment.