Feature/fg 37 (#742)

* changed sizing of overall page containers to be more consistant * made a page for 'expo sjef' to view all pictures that is considered good for posting on instagram * done with expo page, grid of all good images with possibility to select and download pictures * fixed jzip and file-saver import * changed the api requests to get allPictures * made the page more responsive * fixed problem with key identifer * mini fix * mini fix2 * fixed problem * fixed code smells * fixed code smells * fixed code smells * made sonar ignore line with math.random * removed duplicate folder * to remove duplicate code, i made a image context for the lightbox, so we can open it from everywhere a picture is * mooo mooo code smell fix * mooo mooo code smell fix * created a text showing up if no images --------- Co-authored-by: endre2112 <[email protected]>
Fotogjengen · Aug 18, 2023 · cf353c9 · cf353c9
1 parent 15c18dd
commit cf353c9
Show file tree

Hide file tree

Showing 13 changed files with 630 additions and 203 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -42,9 +42,11 @@
     "axios": "0.27.2",
     "classnames": "2.3.2",
     "date-fns": "^2.29.3",
+    "file-saver": "^2.0.5",
     "form-data": "4.0.0",
     "formik": "^2.2.9",
     "husky": "7.0.4",
+    "jszip": "^3.10.1",
     "react": "17.0.2",
     "react-context": "0.0.3",
     "react-dom": "17.0.2",
@@ -61,6 +63,7 @@
     "@babel/core": "^7.19.3",
     "@babel/types": "7.19.3",
     "@types/classnames": "2.3.1",
+    "@types/file-saver": "^2.0.5",
     "@types/lodash": "^4.14.186",
     "@types/react": "^17.0.39",
     "@types/react-dom": "17.0.11",

diff --git a/src/AppRoutes.tsx b/src/AppRoutes.tsx
@@ -12,12 +12,14 @@ import Motives from "./views/Intern/Motives/Motives";
 import LoggInn from "./views/Intern/LoggInn/LoggInn";
 import EditMotive from "./views/Intern/EditMotive/EditMotive";
 import InternNav from "./views/Intern/InternNav/InternNav";
+import Expo from "./views/Intern/Expo/Expo";
 import Redirect from "./utils/Redirect/Redirect";
 import MotiveHeader from "./components/ImageViewer/MotiveHeader";
+import { Box } from "@mui/material";
 
 const AppRoutes: FC = () => {
   return (
-    <>
+    <Box sx={{ m: "1rem" }}>
       <Routes>
         <Route path="/" element={<App />} />
         <Route path="/motive/:id" element={<MotiveHeader />} />
@@ -30,8 +32,10 @@ const AppRoutes: FC = () => {
         <Route path="/intern/arkivsjef" element={<Arkivsjef />} />
         <Route path="/intern/motive" element={<Motives />} />
         <Route path="/intern/motive/:id" element={<EditMotive />} />
+        <Route path="/intern/expo" element={<Expo />} />
         <Route path="/logg-inn" element={<LoggInn />} />
         <Route path="/intern" element={<InternNav />} />
+
         <Route path="*" element={<NotFound />} />
         <Route
           path="/samf-wiki"
@@ -52,7 +56,7 @@ const AppRoutes: FC = () => {
           element={<Redirect link="https://github.com/Fotogjengen/" />}
         />
       </Routes>
-    </>
+    </Box>
   );
 };
 

diff --git a/src/components/Header/Header.module.css b/src/components/Header/Header.module.css
@@ -1,14 +1,9 @@
-.nav {
-    margin-top: 2rem;
-    margin-bottom: 1rem;
-}
+
 .navHead {
+    margin-bottom: 1rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding-top: 1rem;
-    padding-bottom: 0.5rem;
-    padding-right: 0.5rem;
 }
 
 .hamburger {
@@ -38,8 +33,6 @@
     align-items: center;
     justify-content: space-between;
     width: 90vw;
-    margin: 1rem 0rem;
-    padding: 0.2rem 0.6rem;
     box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 3px 0px;
 
 }
@@ -49,7 +42,6 @@
 }
 
 .navContainer {
-    margin: 1rem;
     font-size: 1.5rem;
     display: none;
     grid-template-columns: 8fr 2fr;

diff --git a/src/components/ImageViewer/GridImageViewer.tsx b/src/components/ImageViewer/GridImageViewer.tsx
@@ -1,20 +1,19 @@
-import React, { FC, useState } from "react";
+import React, { FC, useContext } from "react";
 import styles from "./imageStyle.module.css";
 import MotiveImage from "./MotiveImage";
-import Lightbox from "react-image-lightbox";
 import "react-image-lightbox/style.css";
 import { PhotoDto } from "../../../generated";
 import { createImgUrl } from "../../utils/createImgUrl/createImgUrl";
+import { ImageContext } from "../../contexts/ImageContext";
 
 interface Props {
   photos: PhotoDto[];
 }
 
 const ShowMotive: FC<Props> = ({ photos }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [photoIndex, setPhotoIndex] = useState(0);
-
+  const { setPhotos, setPhotoIndex, setIsOpen } = useContext(ImageContext);
   const updateIndex = (index: number) => {
+    setPhotos(photos);
     setPhotoIndex(index);
     setIsOpen(true);
   };
@@ -47,22 +46,6 @@ const ShowMotive: FC<Props> = ({ photos }) => {
           </div>
         </div>
       </div>
-      {isOpen && (
-        <Lightbox
-          mainSrc={createImgUrl(photos[photoIndex])}
-          nextSrc={createImgUrl(photos[(photoIndex + 1) % photos.length])}
-          prevSrc={createImgUrl(
-            photos[(photoIndex + photos.length - 1) % photos.length],
-          )}
-          onCloseRequest={() => setIsOpen(false)}
-          onMovePrevRequest={() =>
-            setPhotoIndex((photoIndex + photos.length - 1) % photos.length)
-          }
-          onMoveNextRequest={() =>
-            setPhotoIndex((photoIndex + 1) % photos.length)
-          }
-        />
-      )}
     </>
   );
 };

diff --git a/src/components/ImageViewer/ShowGoodMotive.tsx b/src/components/ImageViewer/ShowGoodMotive.tsx
@@ -0,0 +1,89 @@
+import React, { FC, useState, useEffect, useContext } from "react";
+import MotiveImage from "./MotiveImage";
+import "react-image-lightbox/style.css";
+import { MotiveDto, PhotoDto } from "../../../generated";
+import { MotiveApi } from "../../utils/api/MotiveApi";
+import { PhotoApi } from "../../utils/api/PhotoApi";
+import { createImgUrl } from "../../utils/createImgUrl/createImgUrl";
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Grid,
+  Typography,
+} from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { ImageContext } from "../../contexts/ImageContext";
+
+interface Props {
+  id: string;
+  index: number;
+}
+
+const ShowGoodMotive: FC<Props> = ({ id, index }: Props) => {
+  const [photoResponse, setPhotoResponse] = useState<PhotoDto[]>([]);
+  const [motiveResponse, setMotiveResponse] = useState<MotiveDto>(
+    {} as MotiveDto,
+  );
+
+  const { setPhotos, setPhotoIndex, setIsOpen } = useContext(ImageContext);
+
+  const bgcolors = ["#da7777", "#f3ee78", "#9c77da", "#BADA77", "#7793da"];
+
+  const updateIndex = (index: number) => {
+    setPhotos(photoResponse);
+    setPhotoIndex(index);
+    setIsOpen(true);
+  };
+
+  const imageItems = photoResponse.map((image: PhotoDto, index: number) => {
+    const key = `is-good-picture-${index}`;
+    return (
+      <Grid key={key} item>
+        <MotiveImage
+          id={image.photoId.id}
+          image={createImgUrl(image)}
+          imageListProp={photoResponse}
+          index={index}
+          updateIndex={() => updateIndex(index)}
+          title={image.motive.title}
+        />
+      </Grid>
+    );
+  });
+
+  useEffect(() => {
+    if (id) {
+      MotiveApi.getById(id)
+        .then((res) => setMotiveResponse(res))
+        .catch((e) => console.log(e));
+      PhotoApi.getAll()
+        .then((res) => setPhotoResponse(res))
+        .catch((e) => console.log(e));
+    }
+  }, []);
+
+  return (
+    <>
+      {photoResponse.length != 0 && (
+        <Accordion>
+          <AccordionSummary
+            expandIcon={<ExpandMoreIcon />}
+            aria-controls="panel1a-content"
+            id="panel1a-header"
+            sx={{ boxShadow: 1, bgcolor: bgcolors[index % bgcolors.length] }}
+          >
+            <Typography>
+              {motiveResponse.title} | {motiveResponse.dateCreated}
+            </Typography>
+          </AccordionSummary>
+          <AccordionDetails>
+            <Grid container>{imageItems}</Grid>
+          </AccordionDetails>
+        </Accordion>
+      )}
+    </>
+  );
+};
+
+export default ShowGoodMotive;
diff --git a/src/components/ImageViewer/imageStyle.module.css b/src/components/ImageViewer/imageStyle.module.css
@@ -2,8 +2,6 @@
     height: 200px;
     width: 300px;
     box-shadow: 0px 4px 4px 0px rgba(0,0,0, 0.25);
-    padding: 0px;
-    margin: 10px;
     background-color: #F3F3F3;
 }
 

diff --git a/src/contexts/ImageContext.ts b/src/contexts/ImageContext.ts
@@ -0,0 +1,17 @@
+import { createContext, Dispatch, SetStateAction } from "react";
+import { PhotoDto } from "../../generated";
+
+
+
+interface IImageContext {
+  isOpen: boolean;
+  photoIndex: number;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+  setPhotoIndex: Dispatch<SetStateAction<number>>;
+  photos: PhotoDto[],
+  setPhotos: Dispatch<SetStateAction<Array<PhotoDto>>>
+}
+
+const defaultState = {} as IImageContext;
+
+export const ImageContext = createContext<IImageContext>(defaultState);
diff --git a/src/index.css b/src/index.css
@@ -4,7 +4,3 @@ html {
   margin: 0 !important;
 }
 
-.container {
-  width: 90vw;
-  margin: auto;
-}
diff --git a/src/index.tsx b/src/index.tsx
@@ -3,21 +3,28 @@ import { render } from "react-dom";
 import "./index.css";
 import AppRoutes from "./AppRoutes";
 import { BrowserRouter as Router } from "react-router-dom";
-import { ThemeProvider } from "@mui/material";
-import guistyles from "./styles/utilities.module.css";
+import { Box, ThemeProvider } from "@mui/material";
 import { GuiFooter } from "./gui-components";
 import HeaderComponent from "./components/Header/Header";
 import { theme } from "./styles/muiStyles";
 import { Auth0Provider } from "@auth0/auth0-react";
 import { AlertContext, severityEnum } from "./contexts/AlertContext";
+import { ImageContext } from "./contexts/ImageContext";
 import Alert from "./components/Alert/Alert";
+import Lightbox from "react-image-lightbox";
+import { PhotoDto } from "../generated";
+import { createImgUrl } from "./utils/createImgUrl/createImgUrl";
 
 const Root: FC = () => {
   // Hooks for the Alert component
   const [open, setOpen] = useState(false);
   const [message, setMessage] = useState("");
   const [severity, setSeverity] = useState(severityEnum.INFO);
 
+  const [photos, setPhotos] = useState<PhotoDto[]>([]);
+  const [isOpen, setIsOpen] = useState(false);
+  const [photoIndex, setPhotoIndex] = useState(0);
+
   return (
     <>
       <Auth0Provider
@@ -26,34 +33,61 @@ const Root: FC = () => {
         redirectUri={window.location.origin}
       >
         <ThemeProvider theme={theme}>
-          <AlertContext.Provider
+          <ImageContext.Provider
             value={{
-              open,
-              setOpen,
-              setMessage,
-              message,
-              setSeverity,
-              severity,
+              isOpen,
+              setIsOpen,
+              photoIndex,
+              setPhotoIndex,
+              photos,
+              setPhotos,
             }}
           >
-            {open ? (
-              <Alert
-                open={open}
-                setOpen={setOpen}
-                message={message}
-                severity={severity}
-              />
-            ) : null}
-            <div className={guistyles.container}>
-              <div className={"container"}>
+            <AlertContext.Provider
+              value={{
+                open,
+                setOpen,
+                setMessage,
+                message,
+                setSeverity,
+                severity,
+              }}
+            >
+              {open ? (
+                <Alert
+                  open={open}
+                  setOpen={setOpen}
+                  message={message}
+                  severity={severity}
+                />
+              ) : null}
+              <Box sx={{ m: "2rem" }}>
                 <Router>
                   <HeaderComponent />
                   <AppRoutes />
                 </Router>
-              </div>
-            </div>
-            <GuiFooter />
-          </AlertContext.Provider>
+              </Box>
+              <GuiFooter />
+            </AlertContext.Provider>
+            {isOpen && (
+              <Lightbox
+                mainSrc={createImgUrl(photos[photoIndex])}
+                nextSrc={createImgUrl(photos[(photoIndex + 1) % photos.length])}
+                prevSrc={createImgUrl(
+                  photos[(photoIndex + photos.length - 1) % photos.length],
+                )}
+                onCloseRequest={() => setIsOpen(false)}
+                onMovePrevRequest={() =>
+                  setPhotoIndex(
+                    (photoIndex + photos.length - 1) % photos.length,
+                  )
+                }
+                onMoveNextRequest={() =>
+                  setPhotoIndex((photoIndex + 1) % photos.length)
+                }
+              />
+            )}
+          </ImageContext.Provider>
         </ThemeProvider>
       </Auth0Provider>
     </>