Move game information edition

src/components/EditInfoButton.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+import BoardConfig from "./BoardConfig";
+
+import Touch from "./ui/Touch";
+import Modal from "./ui/Modal";
+
+const EditInfoButton = () => {
+  const { t } = useTranslation();
+
+  const [show, setShow] = React.useState(false);
+
+  return (
+    <>
+      <Touch
+        onClick={() => setShow((prev) => !prev)}
+        alt={t("Edit game info")}
+        title={t("Edit game info")}
+        label={t("Edit game info")}
+        icon={"new-message"}
+      />
+      <Modal
+        title={t("Edit game information")}
+        setShow={setShow}
+        show={show}
+        position="left"
+      >
+        <section>
+          <BoardConfig />
+        </section>
+      </Modal>
+    </>
+  );
+};
+
+export default EditInfoButton;

src/components/MainView.jsx

@@ -12,6 +12,7 @@ import ImageDropNPaste from "./ImageDropNPaste";
 import AddItemButton from "./AddItemButton";
 import { MessageButton } from "./message";
 import { insideClass } from "./utils";
+import EditInfoButton from "./EditInfoButton";
 
 const StyledBoardView = styled.div`
   width: 100vw;
@@ -66,6 +67,7 @@ const ActionBar = styled.div`
 export const MainView = ({
   edit: editMode = false,
   mediaLibraries,
+  mediaHandlers,
   itemMap,
   actionMap,
   ItemFormComponent,
@@ -94,7 +96,7 @@ export const MainView = ({
 
   return (
     <StyledBoardView>
-      <MediaLibraryProvider libraries={mediaLibraries}>
+      <MediaLibraryProvider libraries={mediaLibraries} {...mediaHandlers}>
         <BoardContainer>
           <ImageDropNPaste>
             <Board
@@ -114,6 +116,7 @@ export const MainView = ({
         </BoardContainer>
         <ActionBar>
           {!editMode && <MessageButton />}
+          {editMode && <EditInfoButton />}
           <div className="spacer" />
           <Touch
             onClick={() => setMoveFirst(false)}

src/components/mediaLibrary/MediaLibraryProvider.jsx

@@ -1,28 +1,37 @@
 import React, { useContext } from "react";
-import {
-  uploadResourceImage,
-  listResourceImage,
-  deleteResourceImage,
-} from "../../utils/api";
 
 export const MediaLibraryContext = React.createContext({});
 
-export const MediaLibraryProvider = ({ children, libraries = [] }) => {
-  const addMedia = React.useCallback(async ({ boxId, resourceId }, file) => {
-    const filePath = await uploadResourceImage(boxId, resourceId, file);
+const noop = () => {};
+
+export const MediaLibraryProvider = ({
+  children,
+  libraries = [],
+  uploadMedia = noop,
+  listMedia = noop,
+  deleteMedia = noop,
+}) => {
+  const addMedia = React.useCallback(
+    async ({ boxId, resourceId }, file) => {
+      const filePath = await uploadMedia(boxId, resourceId, file);
       return {
         type: "local",
         content: filePath,
       };
-  }, []);
+    },
+    [uploadMedia]
+  );
 
-  const removeMedia = React.useCallback(async (key) => {
-    return await deleteResourceImage(key);
-  }, []);
+  const removeMedia = React.useCallback(
+    async (key) => {
+      return await deleteMedia(key);
+    },
+    [deleteMedia]
+  );
 
   const getLibraryMedia = React.useCallback(
-    async ({ boxId, resourceId }) => listResourceImage(boxId, resourceId),
-    []
+    async ({ boxId, resourceId }) => listMedia(boxId, resourceId),
+    [listMedia]
   );
 
   return (

src/i18n/en.json

@@ -197,10 +197,9 @@
   "Go back to studio": "Go back to studio",
   "Create a new game": "Add a game",
   "New game": "New game",
-  "Edit game info": "Edit game information",
+  "Edit game info": "Configuration",
   "Want to continue later?": "Want to continue later?",
   "You can save the current session on your computer to load it later!": "You can save the current session on your computer to load it later!",
-  "Edit game information": "Edit game information",
   "Help & info": "Help & info",
   "Load previously exported work?": "Load previously exported work?",
   "Load session": "Load session",

src/i18n/fr.json

@@ -195,10 +195,9 @@
   "Go back to studio": "Retourner au studio",
   "Create a new game": "Ajouter un jeu",
   "New game": "Nouveau jeu",
-  "Edit game info": "Éditer les informations sur le jeu",
+  "Edit game info": "Paramétrage",
   "Want to continue later?": "Vous souhaitez continuer plus tard ?",
   "You can save the current session on your computer to load it later!": "Vous pouvez sauvegarder la partie en cours sur votre ordinateur pour la continuer plus tard.",
-  "Edit game information": "Modifier les informations du jeu",
   "Help & info": "Aide & Informations",
   "Load previously exported work?": "Charger une sauvegarde précédente ?",
   "Load session": "Charger une partie",

src/views/BoardView/BoardView.jsx

@@ -7,6 +7,18 @@ import useC2C from "../../components/hooks/useC2C";
 import WelcomeModal from "./WelcomeModal";
 import NavBar from "./NavBar";
 
+import {
+  uploadResourceImage,
+  listResourceImage,
+  deleteResourceImage,
+} from "../../utils/api";
+
+const mediaHandlers = {
+  uploadMedia: uploadResourceImage,
+  listMedia: listResourceImage,
+  deleteMedia: deleteResourceImage,
+};
+
 export const BoardView = (props) => {
   const { isMaster } = useC2C("board");
 
@@ -18,7 +30,7 @@ export const BoardView = (props) => {
     <>
       <NavBar editMode={props.edit} />
       <WelcomeModal show={showWelcomeModal} setShow={setShowWelcomeModal} />
-      <MainView {...props} />
+      <MainView {...props} mediaHandlers={mediaHandlers} />
     </>
   );
 };

src/views/BoardView/InfoEditModal.jsx

@@ -1,19 +0,0 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-
-import Modal from "../../components/ui/Modal";
-import BoardConfig from "../../components/BoardConfig";
-
-const InfoModal = ({ show, setShow }) => {
-  const { t } = useTranslation();
-
-  return (
-    <Modal title={t("Edit game information")} setShow={setShow} show={show}>
-      <section>
-        <BoardConfig />
-      </section>
-    </Modal>
-  );
-};
-
-export default InfoModal;

src/views/BoardView/NavBar.jsx

@@ -16,7 +16,6 @@ import useC2C from "../../components/hooks/useC2C";
 import useLocalStorage from "../../hooks/useLocalStorage";
 
 import InfoModal from "./InfoModal";
-import InfoEditModal from "./InfoEditModal";
 import LoadGameModal from "./LoadGameModal";
 import LoadSessionModal from "./LoadSessionModal";
 import ChangeGameModal from "./ChangeGameModal";
@@ -141,7 +140,6 @@ const NavBar = ({ editMode }) => {
 
   const [showLoadGameModal, setShowLoadGameModal] = React.useState(false);
   const [showSaveGameModal, setShowSaveGameModal] = React.useState(false);
-  const [showEditInfoModal, setShowEditInfoModal] = React.useState(false);
   const [showChangeGameModal, setShowChangeGameModal] = React.useState(false);
   const [showInfoModal, setShowInfoModal] = React.useState(false);
   const [showLink, setShowLink] = React.useState(false);
@@ -268,14 +266,6 @@ const NavBar = ({ editMode }) => {
             icon={editMode ? "save" : "download"}
           />
           <div className="spacer" />
-          {editMode && (
-            <Touch
-              onClick={() => setShowEditInfoModal((prev) => !prev)}
-              alt={t("Edit game info")}
-              title={t("Edit game info")}
-              icon={"new-message"}
-            />
-          )}
           <Touch
             onClick={() => setShowInfoModal((prev) => !prev)}
             alt={t("Help & info")}
@@ -289,12 +279,6 @@ const NavBar = ({ editMode }) => {
       {!editMode && (
         <WelcomeModal show={showLink} setShow={setShowLink} welcome={false} />
       )}
-      {editMode && (
-        <InfoEditModal
-          show={showEditInfoModal}
-          setShow={setShowEditInfoModal}
-        />
-      )}
       {!editMode && (
         <LoadSessionModal
           show={showLoadGameModal}