Merge pull request #26 from miku0129/develop

Add Gallery page

README.md

@@ -8,8 +8,9 @@ This repository contains the TypeScript codebase of a website for "Jardinieresma
 
 - **Achieved scalable architecture:** by TypeScript + React 
 - **Obtains contents always up-to-date:** Assembled with Facebook API & Flickr API. 
-- **Simple Navigation:**  Smooth, user-friendly interface using by react-anchor-navigation.
 - **Appeal to the eye:** Enhance visuals with react-image-gallery and styled-component. 
+- **Deployment automation:** Integrate Github Actions for smoother development. 
+
 
 ## Demo
 

package.json

@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/material": "^5.15.18",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -12,7 +15,6 @@
     "firebase-tools": "^13.4.1",
     "flickr-sdk": "^7.0.0-beta.7",
     "react": "^18.2.0",
-    "react-anchor-navigation": "^0.2.7",
     "react-dom": "^18.2.0",
     "react-image-gallery": "^1.3.0",
     "react-router-dom": "^6.14.0",

src/App.tsx

@@ -1,20 +1,18 @@
-import { Route, Routes } from "react-router-dom";
-import { AnchorProvider } from "react-anchor-navigation";
-
-import BasicLayout from "./route/basic-layout/basic-layout";
-import Home from "./route/home/home.route";
-
-function App() {
-  return (
-    <AnchorProvider>
-      <div>{/* TypeScriptの型解決のためのdiv */}</div>
-      <Routes>
-        <Route path="/" element={<BasicLayout />}>
-          <Route index element={<Home />} />
-        </Route>
-      </Routes>
-    </AnchorProvider>
-  );
-}
-
-export default App;
+import { Route, Routes } from "react-router-dom";
+
+import BasicLayout from "./route/basic-layout/basic-layout";
+import Home from "./route/home/home.route";
+import Gallery from "./component/gallery/gallery.component";
+
+function App() {
+  return (
+    <Routes>
+      <Route path="/" element={<BasicLayout />}>
+        <Route index element={<Home />} />
+        <Route path="gallery" element={<Gallery />} />
+      </Route>
+    </Routes>
+  );
+}
+
+export default App;

src/component/content-contact/content-contact.component.tsx

@@ -9,9 +9,12 @@ const ContentContact = () => {
           <Logo></Logo>
         </div>
         <div className="facebook-logo">
-          <a href="https://www.facebook.com/jardinieresmasquees" target="_blank" rel="noreferrer">
-          <FacebookLogo style={{ width: "30px", height: "30px" }} />
-
+          <a
+            href="https://www.facebook.com/jardinieresmasquees"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <FacebookLogo style={{ width: "30px", height: "30px" }} />
           </a>
         </div>
       </div>

src/component/gallery/gallery.component.scss

@@ -0,0 +1,11 @@
+.gallery{
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: darkgoldenrod;
+    width: 100vw; 
+}
+
+.gallery-container{
+    margin-top: 120px;
+}

src/component/gallery/gallery.component.tsx

@@ -1,29 +1,69 @@
-import { useState, useEffect } from "react";
-import ImageGallery from "react-image-gallery";
-import { getPhotos } from "../../utils/data.utils";
+import { useEffect, useState } from "react";
+
+import Box from "@mui/material/Box";
+import ImageList from "@mui/material/ImageList";
+import ImageListItem from "@mui/material/ImageListItem";
+
+import { useWindowSize } from "../../utils/useWindowSize";
+import { getPhotosForGallery } from "../../utils/data.utils";
+
+import "./gallery.component.scss";
 
 const Gallery = () => {
   const [photos, setPhotos] = useState([]);
+  const [width, height] = useWindowSize();
+  console.log("to avoid eslint issue: ", height);
 
   useEffect(() => {
     const pulltrigger = async () => {
-      const res = await getPhotos();
+      const res = await getPhotosForGallery();
       setPhotos(res);
     };
     pulltrigger();
   }, []);
 
+  const imageItem = () => {
+    return photos.map((photo) => {
+      return (
+        <ImageListItem key={photo}>
+          <img
+            srcSet={`${photo}?w=248&fit=crop&auto=format&dpr=2 2x`}
+            src={`${photo}?w=248&fit=crop&auto=format`}
+            alt={photo}
+            loading="lazy"
+          />
+        </ImageListItem>
+      );
+    });
+  };
+
+  const handleStyleOfImageList = () => {
+    if (width < 450) {
+      return (
+        <>
+          <ImageList variant="masonry" style={{ columnCount: "2" }} gap={8}>
+            {imageItem()}
+          </ImageList>
+        </>
+      );
+    } else {
+      return (
+        <>
+          <ImageList variant="masonry" style={{ columnCount: "3" }} gap={8}>
+            {imageItem()}
+          </ImageList>
+        </>
+      );
+    }
+  };
+
   return (
-    <div className="image-gallery-container">
-      <ImageGallery
-        items={photos}
-        showNav={true}
-        autoPlay={false}
-        showFullscreenButton={false}
-        useBrowserFullscreen={false}
-        showPlayButton={false}
-        showBullets={true}
-      />
+    <div className="gallery">
+      <div className="gallery-container">
+        <Box sx={{ width: "auto", overflowY: "scroll" }}>
+          {handleStyleOfImageList()}
+        </Box>
+      </div>
     </div>
   );
 };

src/component/main-visual/main-visual.component.tsx

@@ -0,0 +1,31 @@
+import { useState, useEffect } from "react";
+import ImageGallery from "react-image-gallery";
+import { getPhotosForMainVisual } from "../../utils/data.utils";
+
+const MainVisual = () => {
+  const [photos, setPhotos] = useState([]);
+
+  useEffect(() => {
+    const pulltrigger = async () => {
+      const res = await getPhotosForMainVisual();
+      setPhotos(res);
+    };
+    pulltrigger();
+  }, []);
+
+  return (
+    <div className="image-gallery-container">
+      <ImageGallery
+        items={photos}
+        showNav={true}
+        autoPlay={false}
+        showFullscreenButton={false}
+        useBrowserFullscreen={false}
+        showPlayButton={false}
+        showBullets={true}
+      />
+    </div>
+  );
+};
+
+export default MainVisual;

src/component/main/main.component.tsx

@@ -1,5 +1,4 @@
 import { Fragment } from "react";
-import { AnchorSection } from "react-anchor-navigation";
 
 import ArticlesPreview from "../../route/articles-preview/articles-preview.component";
 import ContentHeader from "../content-header/content-header.compoment";
@@ -9,21 +8,17 @@ import ContentContact from "../content-contact/content-contact.component";
 import "react-image-gallery/styles/css/image-gallery.css";
 import "./main.styles.scss";
 
-import Gallery from "../gallery/gallery.component";
+import MainVisual from "../main-visual/main-visual.component";
 
 const Main = () => {
   return (
     <Fragment>
       <div className="main-container">
-        <AnchorSection id="accueil" />
         <ContentHeader />
         <div className="contents-container">
-          <AnchorSection id="propos" />
           <ContentIntroduction />
-          <Gallery />
-          <AnchorSection id="infos" />
+          <MainVisual />
           <ArticlesPreview />
-          <AnchorSection id="contact" />
           <ContentContact />
         </div>
       </div>

src/component/nav/nav.component.tsx

@@ -1,6 +1,5 @@
 import { useState } from "react";
-
-import { AnchorLink } from "react-anchor-navigation";
+import { Link } from "react-router-dom";
 
 import { Navigation, Logo } from "./nav.styles";
 
@@ -18,22 +17,16 @@ const Nav = () => {
   return (
     <Navigation className={`${isNavshrunk ? "shrink" : ""}`}>
       <div className="logo-container">
-        <AnchorLink href="#accueil">
+        <Link to="/">
           <Logo className={`${isNavshrunk ? "shrink" : ""}`}></Logo>
-        </AnchorLink>
+        </Link>
       </div>
       <ul className="menu">
         <li>
-          <AnchorLink href="#accueil">Accueil</AnchorLink>
-        </li>
-        <li>
-          <AnchorLink href="#propos">A&nbsp;propos</AnchorLink>
-        </li>
-        <li>
-          <AnchorLink href="#infos">Infos</AnchorLink>
+          <Link to="/">Accueil</Link>
         </li>
         <li>
-          <AnchorLink href="#contact">Contact</AnchorLink>
+          <Link to="/gallery">Gallery</Link>
         </li>
       </ul>
     </Navigation>

src/component/nav/nav.styles.ts

@@ -23,7 +23,8 @@ export const Navigation = styled.div`
   .menu {
     list-style: none;
     display: flex;
-    gap: 20px;
+    gap: 30px;
+    margin-right: 30px; 
 
     li {
       a {
@@ -74,7 +75,7 @@ export const Navigation = styled.div`
 
     .menu {
       padding-left: 0;
-      justify-content: space-around;
+      justify-content: right;
       
       li {
         text-align: center;

src/index.js

@@ -10,7 +10,7 @@ import reportWebVitals from "./reportWebVitals";
 
 const router = createBrowserRouter([
   {
-    path: "/",
+    path: "/*",
     element: <App />,
   },
 ]);

src/utils/data.utils.tsx

@@ -1,28 +1,42 @@
 import { createFlickr } from "flickr-sdk";
 
-export const getPhotos = async () => {
+type FlickrPhotoInfo = {
+  farm: number;
+  id: string;
+  isfamily: number;
+  isfriend: number;
+  isprimary: string;
+  ispublic: number;
+  secret: string;
+  server: string;
+  title: string;
+};
+
+export const getPhotosForGallery = async () => {
+  const { flickr } = createFlickr(process.env.REACT_APP_FLICKR_API_KEY!);
+
+  const serverId = process.env.REACT_APP_FLICKR_SERVER_ID;
+  const res = await flickr("flickr.photosets.getPhotos", {
+    photoset_id: process.env.REACT_APP_FLICKR_GALLERY_PHOTOSET_ID!,
+    user_id: process.env.REACT_APP_FLICKR_USER_ID!,
+  });
+
+  const photos = res.photoset.photo.map((item: FlickrPhotoInfo) => {
+    return `https://live.staticflickr.com/${serverId}/${item.id}_${item.secret}.jpg`;
+  });
+  return photos;
+};
+
+export const getPhotosForMainVisual = async () => {
   const { flickr } = createFlickr(process.env.REACT_APP_FLICKR_API_KEY!);
 
   const serverId = process.env.REACT_APP_FLICKR_SERVER_ID;
   const res = await flickr("flickr.photosets.getPhotos", {
-    photoset_id: process.env.REACT_APP_FLICKR_PHOTOSET_ID!,
+    photoset_id: process.env.REACT_APP_FLICKR_MAINVISUAL_PHOTOSET_ID!,
     user_id: process.env.REACT_APP_FLICKR_USER_ID!,
   });
-  console.log(res.photoset.photo);
 
-  type FlickrPhotoInfo = {
-    farm: number;
-    id: string;
-    isfamily: number;
-    isfriend: number;
-    isprimary: string;
-    ispublic: number;
-    secret: string;
-    server: string;
-    title: string;
-  };
   const photos = res.photoset.photo.map((item: FlickrPhotoInfo) => {
-    console.log(item);
     const photoUrl = `https://live.staticflickr.com/${serverId}/${item.id}_${item.secret}.jpg`;
     const obj = {
       original: photoUrl,

src/utils/useWindowSize.ts

@@ -0,0 +1,16 @@
+import { useLayoutEffect, useState } from "react";
+
+export const useWindowSize = (): number[] => {
+  const [size, setSize] = useState([0, 0]);
+  useLayoutEffect(() => {
+    const updateSize = (): void => {
+      setSize([window.innerWidth, window.innerHeight]);
+    };
+
+    window.addEventListener("resize", updateSize);
+    updateSize();
+
+    return () => window.removeEventListener("resize", updateSize);
+  }, []);
+  return size;
+};