s3 changes merged

.env.example

@@ -0,0 +1 @@
+REACT_APP_BACKEND_URL=your_backend_url

.gitignore

@@ -19,6 +19,8 @@
 .env.test.local
 .env.production.local
 
+.env
+
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

src/App.js

@@ -2,7 +2,7 @@ import "./App.css";
 import Navbar from "./components/Navbar/Navbar";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Gallery from "./pages/Galllery/Gallery";
-import Alumni from "./pages/Alumni/Alumni";
+// import Alumni from "./pages/Alumni/Alumni";
 import Home from "./pages/Home/Home";
 import Eventpics from "./pages/Galllery/Eventpics";
 
@@ -11,10 +11,10 @@ function App() {
     <BrowserRouter>
       <Navbar />
       <Routes>
-        <Route path="/" element={<Home/>}></Route>
-        <Route path="/gallery" element={<Gallery/>}></Route>
-        <Route path="/alumni/:year?" element={<Alumni/>}></Route>
-        <Route path="/gallery/:year/:event" element={<Eventpics/>}></Route>
+        <Route path="/" element={<Home />}></Route>
+        <Route path="/gallery" element={<Gallery />}></Route>
+        {/* <Route path="/alumni/:year?" element={<Alumni/>}></Route> */}
+        <Route path="/gallery/:year/:event" element={<Eventpics />}></Route>
       </Routes>
     </BrowserRouter>
   );

src/components/Navbar/DrawerComp.js

@@ -22,7 +22,7 @@ const useStyles = makeStyles(() => ({
 }));
 
 function DrawerComponent() {
-    const pathname = useLocation().pathname;
+  const pathname = useLocation().pathname;
   const classes = useStyles();
   const [openDrawer, setOpenDrawer] = useState(false);
   return (
@@ -33,28 +33,30 @@ function DrawerComponent() {
         onClose={() => setOpenDrawer(false)}
       >
         <List>
-          {pathname!=="/" && <Link style={{ color: "white" }} to="/">
-            <ListItem
-              className="menu-item-drawer"
-              onClick={() => setOpenDrawer(false)}
-            >
-              <ListItemText>Home</ListItemText>
-            </ListItem>
-          </Link>}
-          {pathname === "/" && 
+          {pathname !== "/" && (
+            <Link style={{ color: "white" }} to="/">
+              <ListItem
+                className="menu-item-drawer"
+                onClick={() => setOpenDrawer(false)}
+              >
+                <ListItemText>Home</ListItemText>
+              </ListItem>
+            </Link>
+          )}
+          {pathname === "/" && (
             <Link style={{ color: "white" }}>
-            <ListItem
-            className="menu-item-drawer"
-            onClick={() => setOpenDrawer(false)}
-            >
-            <ListItemText>
-                <HashLink smooth to="/#home" style={{ color: "white" }}>
-                Home
-                </HashLink>
-            </ListItemText>
-            </ListItem>
-        </Link>
-          }
+              <ListItem
+                className="menu-item-drawer"
+                onClick={() => setOpenDrawer(false)}
+              >
+                <ListItemText>
+                  <HashLink smooth to="/#home" style={{ color: "white" }}>
+                    Home
+                  </HashLink>
+                </ListItemText>
+              </ListItem>
+            </Link>
+          )}
           <Link style={{ color: "white" }} to="/gallery">
             <ListItem
               className="menu-item-drawer"
@@ -63,14 +65,14 @@ function DrawerComponent() {
               <ListItemText>Gallery</ListItemText>
             </ListItem>
           </Link>
-          <Link style={{ color: "white" }} to="/alumni">
+          {/* <Link style={{ color: "white" }} to="/alumni">
             <ListItem
               className="menu-item-drawer"
               onClick={() => setOpenDrawer(false)}
             >
               <ListItemText>Alumni</ListItemText>
             </ListItem>
-          </Link>
+          </Link> */}
           <Link style={{ color: "white" }}>
             <ListItem
               className="menu-item-drawer"

src/components/Navbar/Navbar.js

@@ -21,55 +21,56 @@ export default function Navbar() {
   // const isMobile = useMediaQuery(theme.breakpoints.down("xs"));
   const isMobile = useMediaQuery("(max-width: 780px)");
 
-
   return (
     <Box sx={{ flexGrow: 1 }}>
       <CssBaseline />
       <AppBar position="fixed" style={{ background: "black" }}>
         <Toolbar>
           <Typography variant="h5" component="div" sx={{ flexGrow: 1 }}>
             <div className="logo-container">
-            <a href="/">
-              <img
-                src={Logo}
-                alt="RKH"
-                style={{ maxWidth: 30, marginRight: "10px" }}
-              />
-            </a>
+              <a href="/">
+                <img
+                  src={Logo}
+                  alt="RKH"
+                  style={{ maxWidth: 30, marginRight: "10px" }}
+                />
+              </a>
             </div>
           </Typography>
           {isMobile ? (
             <DrawerComp />
           ) : (
             <div className="menu-items">
-             {pathname!=='/' && <Button
-                className="menu-item"
-                color="inherit"
-                onClick={() => Navigate("/")}
-              >
-                Home
-              </Button>}
-              {pathname==='/'  && 
-                <HashLink smooth to="/#home" style={{ color: "white" }}>
-                <Button className="menu-item" color="inherit">
+              {pathname !== "/" && (
+                <Button
+                  className="menu-item"
+                  color="inherit"
+                  onClick={() => Navigate("/")}
+                >
                   Home
                 </Button>
-              </HashLink>
-              }
+              )}
+              {pathname === "/" && (
+                <HashLink smooth to="/#home" style={{ color: "white" }}>
+                  <Button className="menu-item" color="inherit">
+                    Home
+                  </Button>
+                </HashLink>
+              )}
               <Button
                 className="menu-item"
                 color="inherit"
                 onClick={() => Navigate("/gallery")}
               >
                 Gallery
               </Button>
-              <Button
+              {/* <Button
                 className="menu-item"
                 color="inherit"
                 onClick={() => Navigate("/alumni")}
               >
                 Alumni
-              </Button>
+              </Button> */}
               <HashLink smooth to="/#AboutUs" style={{ color: "white" }}>
                 <Button className="menu-item" color="inherit">
                   About Us

src/pages/Galllery/Eventpics.js

@@ -56,8 +56,8 @@ function Eventpics() {
               currentIndex={currentImage}
               views={photos.map((x) => ({
                 ...x,
-                srcset: x.srcSet,
-                caption: x.title,
+                srcset: x?.srcSet,
+                caption: x?.title,
               }))}
             />
           </Modal>

src/pages/Galllery/Gallery.js

@@ -37,7 +37,7 @@ export function Gallery() {
       <Yearbox year={i} selected={year === i} handleClick={handleClick} />
     ));
 
-  const mobileyeargroup = [...Array(5).keys()]
+  const mobileyeargroup = [...Array(1).keys()]
     .map((i) => 2022 - i)
     .map(
       (i) =>
@@ -48,7 +48,9 @@ export function Gallery() {
 
   return (
     <div className={styles.gallerypage}>
-      <div className={`${styles.leftbox} ${yearmenu ? `${styles.active}` : ""}`}>
+      <div
+        className={`${styles.leftbox} ${yearmenu ? `${styles.active}` : ""}`}
+      >
         <div className={styles.boxHeader}>
           {event > 0 && (
             <FontAwesomeIcon
@@ -59,18 +61,24 @@ export function Gallery() {
           )}
           <span>Gallery</span>
         </div>
-        <div 
+        <div
         // className="years"
-        >{yeargroup}</div>
+        >
+          {yeargroup}
+        </div>
       </div>
 
       {/* years  */}
-      <div className={`
-      ${styles.mobileyears} ${yearmenu ? `${styles.active}` : ""}`}>
+      <div
+        className={`
+      ${styles.mobileyears} ${yearmenu ? `${styles.active}` : ""}`}
+      >
         {mobileyeargroup}
       </div>
 
-      <div className={`${styles.rightbox} ${event > 0 ? `${styles.active}` : ""}`}>
+      <div
+        className={`${styles.rightbox} ${event > 0 ? `${styles.active}` : ""}`}
+      >
         <Event
           id={"illu-rangoli"}
           event="Illumination & Rangoli"

src/pages/Galllery/imagedata.js

@@ -1,45 +1,7 @@
-// import React, { useEffect } from "react";
-// import { useState } from "react";
-// import axios from "axios";
-
-// export default function Imagedata(event, year) {
-//   console.log(event);
-//   console.log(year);
-//   const [photos, setPhotos] = useState([]);
-//   const url = `https://rk-gallery-api.onrender.com/api/${year}/${event}`;
-
-//   useEffect(() => {
-//     getPics();
-//   }, [url]);
-
-//   function getPics() {
-//     axios
-//       .get(`${url}`)
-//       .then((response) => {
-//         const pics = response.data.phtoturls;
-//         console.log(pics);
-//         setPhotos(
-//           pics.map((obj) => (
-//             {
-//               "src": obj.url,
-//               "width": obj.width,
-//               "height": obj.height
-//             }
-//           ))
-//         );
-//       })
-//       .catch((error) => {
-//         console.log(error);
-//       });
-//   }
-
-//   return photos;
-// }
-
 import { useEffect, useState } from "react";
 import axios from "axios";
 
-console.log(12345);
+const BACKEND_URL = process.env.REACT_APP_BACKEND_URL;
 
 export default function Imagedata(event, year) {
   console.log(event);
@@ -48,7 +10,7 @@ export default function Imagedata(event, year) {
   const [isLoading, setIsLoading] = useState(true);
   const [currentPage, setCurrentPage] = useState(1);
   const imagesPerPage = 30;
-  const url = `https://rk-gallery-api.onrender.com/api/${year}/${event}`;
+  const url = `${BACKEND_URL}/api/${year}/${event}`;
 
   useEffect(() => {
     getPics();
@@ -57,16 +19,18 @@ export default function Imagedata(event, year) {
   function getPics() {
     setIsLoading(true);
     axios
-      .get(`${url}?page=${currentPage}&per_page=${imagesPerPage}`)
+      .get(`${url}`)
       .then((response) => {
-        const pics = response.data.phtoturls;
+        const pics = response.data.photoURLs;
         console.log(pics);
         setPhotos(
-          pics.map((obj) => ({
-            src: obj.url,
-            width: obj.width,
-            height: obj.height,
-          }))
+          pics.map((imageUrl) => {
+            return {
+              src: imageUrl,
+              width: 4,
+              height: 3,
+            };
+          })
         );
         setIsLoading(false);
       })