Move PhotoInfo into it's own context and add edit button

package.json

@@ -9,6 +9,7 @@
     "@mui/material": "^5.11.0",
     "axios": "^0.27.2",
     "lightbox2": "^2.11.3",
+    "notistack": "^3.0.1",
     "react": "^18.0.2",
     "react-dom": "^18.0.2",
     "react-helmet": "^6.1.0",

src/App.jsx

@@ -2,6 +2,7 @@ import { Helmet } from "react-helmet";
 import { Grid } from "@mui/material";
 import CssBaseline from "@mui/material/CssBaseline";
 import { ThemeProvider } from "@mui/material/styles";
+import { SnackbarProvider } from "notistack";
 
 import { useAppContext } from "./components/AppContext";
 import Body from "./components/Body/Body";
@@ -23,6 +24,7 @@ function App() {
                 <title>{title}</title>
                 <meta name="description" content={description}/>
             </Helmet>
+            <SnackbarProvider />
             <CssBaseline />
             <Grid container columns={10} height="100vh" p={2} pb={0} spacing={1}>
                 {desktop &&

src/Util/PhotoInfoHelper.js

@@ -0,0 +1,111 @@
+import { TAG_ALBUM, TAG_EVENT, TAG_PERSON, TAG_PHOTOGRAPHER, TAG_TEAM } from "../consts";
+
+const MAX_INT = 65535;
+
+const convertRel = (text) => convertNum(text) / MAX_INT;
+
+function getPosition(encodedPosition) {
+    return {
+        left: convertRel(encodedPosition.substr(0, 4)),
+        top: convertRel(encodedPosition.substr(4, 4)),
+        right: convertRel(encodedPosition.substr(8, 4)),
+        bottom: convertRel(encodedPosition.substr(12, 4)),
+    };
+}
+
+function serizalizePosition(position) {
+    return Math.round(position.left * MAX_INT).toString(16).padStart(4, "0") +
+        Math.round(position.top * MAX_INT).toString(16).padStart(4, "0") +
+        Math.round(position.right * MAX_INT).toString(16).padStart(4, "0") +
+        Math.round(position.bottom * MAX_INT).toString(16).padStart(4, "0");
+}
+
+function parsePerson(personTag) {
+    const openBracket = personTag.indexOf("(");
+    if (openBracket === -1) {
+        return null;
+    }
+    const name = personTag.substr(0, openBracket);
+    const closingBracket = personTag.indexOf(")", openBracket);
+    const encodedPosition = personTag.substr(openBracket + 1, closingBracket - openBracket - 1);
+    if (name === "") {
+        return null;
+    }
+    return {
+        name: name,
+        position: getPosition(encodedPosition)
+    };
+}
+
+function serizalizePerson(person) {
+    return person.name + "(" + serizalizePosition(person.position) + ")";
+}
+
+const convertNum = (text) => parseInt("0x" + text);
+
+function ParsePhotoInfo(tags, description) {
+    let photoInfo = {
+        event: [],
+        team: [],
+        person: [],
+        album: [],
+        photographer: [],
+    };
+    photoInfo.photographer.push(description?.replaceAll("Photographer: ", ""));
+    if (tags === null || tags === undefined) {
+        return photoInfo;
+    }
+    for (const tag of tags) {
+        if (tag === null) {
+            continue;
+        }
+        if (tag.startsWith(TAG_EVENT)) {
+            photoInfo.event.push(tag.replaceAll(TAG_EVENT + "$", ""));
+            continue;
+        }
+        if (tag.startsWith(TAG_TEAM)) {
+            photoInfo.team.push(tag.replaceAll(TAG_TEAM + "$", ""));
+            continue;
+        }
+        if (tag.startsWith(TAG_PERSON)) {
+            photoInfo.person.push({ name: tag.replaceAll(TAG_PERSON + "$", "") });
+            continue;
+        }
+        if (tag.startsWith(TAG_ALBUM)) {
+            photoInfo.album.push(tag.replaceAll(TAG_ALBUM + "$", ""));
+            continue;
+        }
+        if (tag.startsWith(TAG_PHOTOGRAPHER)) {
+            photoInfo.photographer.push(tag.replaceAll(TAG_PHOTOGRAPHER + "$", ""));
+            continue;
+        }
+        const parsedPerson = parsePerson(tag);
+        if (parsedPerson !== null) {
+            photoInfo.person.push(parsedPerson);
+        }
+    }
+    return photoInfo;
+}
+
+function SerializePhotoInfo(photoInfo) {
+    let tags = [];
+    for (const event of photoInfo.event) {
+        tags.push(TAG_EVENT + "$" + event);
+    }
+    for (const team of photoInfo.team) {
+        tags.push(TAG_TEAM + "$" + team);
+    }
+    for (const album of photoInfo.album) {
+        tags.push(TAG_ALBUM + "$" + album);
+    }
+    for (const photographer of photoInfo.photographer) {
+        tags.push(TAG_PHOTOGRAPHER + "$" + photographer);
+    }
+    for (const person of photoInfo.person) {
+        tags.push(serizalizePerson(person));
+    }
+    return tags.map(tag => `"${tag.trim()}"`);
+}
+
+
+export { ParsePhotoInfo, SerializePhotoInfo };

src/components/Body/Body.jsx

@@ -1,12 +1,13 @@
 import { useEffect, useRef, useState } from "react";
 import InfiniteScroll from "react-infinite-scroller";
-import { Box,Typography } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 
 import "../../consts";
 
 import usePhotoLoader from "../../Util/PhotoLoader";
 import { useAppContext } from "../AppContext";
 
+import { PhotoInfoProvider } from "./PhotoInfo/PhotoInfoContext";
 import MyModal from "./MyModal";
 import PhotoGridByYear from "./PhotoGridByYear";
 

src/components/Body/Lightbox.jsx

@@ -1,14 +1,12 @@
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
 import { IconButton } from "@mui/material";
 import styled from "styled-components";
 
-import { ParsePhotoInfo } from "../../Util/PhotoParser";
-import PhotoService from "../../Util/PhotoService";
-
+import { usePhotoInfo } from "./PhotoInfo/PhotoInfoContext";
+import PhotoInfoPanel from "./PhotoInfo/PhotoInfoPanel";
 import Control from "./Control";
 import FaceDiv from "./FaceDiv";
-import PhotoInfo from "./PhotoInfo";
 
 import "../../styles/Body.css";
 
@@ -19,18 +17,7 @@ const Lightbox = ({
     leftArrow,
     rightArrow
 }) => {
-    const [photoInfo, setPhotoInfo] = useState(null);
-
-    useEffect(() => {
-        PhotoService.getPhotoInfo(photo.id)
-            .then(response => {
-                const tags = response.data.photo.tags.tag?.map(tag => tag.raw);
-                const description = response.data.photo.description._content;
-                const newPhotoInfo = ParsePhotoInfo(tags, description);
-                setPhotoInfo(newPhotoInfo);
-            }
-            );
-    }, [photo.id]);
+    const { photoInfo, editMode } = usePhotoInfo();
 
     const [face, setFace] = useState(null);
     const imgRef = useRef(null);
@@ -63,14 +50,14 @@ const Lightbox = ({
                         face={face} setFace={setFace}
                         key={person.name + "facediv" + person.position.top} />))}
             </FacesWrapper>
-            <Control />
-            <PhotoInfo photo={photo} photoInfo={photoInfo} setFace={setFace} />
-            {leftArrow && <div className="overlay-arrows_left">
+            {!editMode && <Control />}
+            <PhotoInfoPanel photo={photo} setFace={setFace}/>
+            {leftArrow && !editMode && <div className="overlay-arrows_left">
                 <IconButton onClick={handleRotationLeft}>
                     <ArrowForwardIosIcon className="icon-button" style={{ transform: "scale(-1, 1)" }} />
                 </IconButton>
             </div>}
-            {rightArrow && <div className="overlay-arrows_right">
+            {rightArrow && !editMode && <div className="overlay-arrows_right">
                 <IconButton onClick={handleRotationRight}>
                     <ArrowForwardIosIcon className="icon-button" />
                 </IconButton>