fix : #MAG-473 fix multiple windows and imagepicker behaviours (#356)

Co-authored-by: FlorentMr <florent.mariotti@cgi.com>
OPEN-ENT-NG · Dec 5, 2024 · d749f41 · d749f41
1 parent b2f26d5
commit d749f41
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 22 deletions.
diff --git a/frontend/src/components/create-board/CreateBoard.tsx b/frontend/src/components/create-board/CreateBoard.tsx
@@ -21,13 +21,13 @@ import { useTranslation } from "react-i18next";
 
 import { styles } from "./style";
 import { CreateBoardProps } from "./types";
+import { MediaProps } from "../board-view/types";
 import { UniqueImagePicker } from "../unique-image-picker/UniqueImagePicker";
 import { LAYOUT_TYPE } from "~/core/enums/layout-type.enum";
 import { MEDIA_LIBRARY_TYPE } from "~/core/enums/media-library-type.enum";
 import { useImageHandler } from "~/hooks/useImageHandler";
 import useWindowDimensions from "~/hooks/useWindowDimensions";
 import { BoardForm } from "~/models/board.model";
-import { useMediaLibrary } from "~/providers/MediaLibraryProvider";
 import {
   useCreateBoardMutation,
   useUpdateBoardMutation,
@@ -43,6 +43,7 @@ export const CreateBoard: FC<CreateBoardProps> = ({
   const { t } = useTranslation("magneto");
   const { appCode } = useOdeClient();
 
+  const [media, setMedia] = useState<MediaProps | null>(null);
   const [activePickerId, setActivePickerId] = useState<string>("");
   const [isCommentChecked, setIsCommentChecked] = useState(false);
   const [isFavoriteChecked, setIsFavoriteChecked] = useState(false);
@@ -53,7 +54,6 @@ export const CreateBoard: FC<CreateBoardProps> = ({
   const [tags, setTags] = useState([""]);
   const [createBoard] = useCreateBoardMutation();
   const [updateBoard] = useUpdateBoardMutation();
-  const { setMedia, setIsCreateMagnetOpen } = useMediaLibrary();
   const { width } = useWindowDimensions();
   const {
     thumbnail,
@@ -65,10 +65,13 @@ export const CreateBoard: FC<CreateBoardProps> = ({
     mediaLibraryHandlers,
     setThumbnail,
     setBackground,
+    libraryMedia,
   } = useImageHandler(
     boardToUpdate?.imageUrl ?? "",
     boardToUpdate?.backgroundUrl ?? "",
     activePickerId,
+    media,
+    setMedia,
   );
 
   const setBoardFromForm = async (board: BoardForm) => {
@@ -100,8 +103,6 @@ export const CreateBoard: FC<CreateBoardProps> = ({
     }
     handleDeleteThumbnail();
     handleDeleteBackground();
-    //spraradrap, faire passer isCreateMagnetOpen autre part que dans le medialibrary provider
-    setIsCreateMagnetOpen(false);
     toggle();
   };
 
@@ -217,14 +218,16 @@ export const CreateBoard: FC<CreateBoardProps> = ({
                   deleteButtonLabel="Delete image"
                   id="thumbnail"
                   onUploadImage={(id: string) => {
+                    setMedia(null);
                     setActivePickerId(id);
                     handleUploadImage();
                   }}
                   onDeleteImage={() => {
                     handleDeleteThumbnail();
                   }}
                   src={thumbnail?.url}
-                  onImageChange={() => {}}
+                  libraryMedia={libraryMedia}
+                  mediaLibraryRef={mediaLibraryRef}
                 />
                 {thumbnail === null && (
                   <div style={styles.errorText}>
@@ -354,14 +357,16 @@ export const CreateBoard: FC<CreateBoardProps> = ({
                       addButtonLabel="Add image"
                       deleteButtonLabel="Delete image"
                       onUploadImage={(id: string) => {
+                        setMedia(null);
                         setActivePickerId(id);
                         handleUploadImage();
                       }}
                       onDeleteImage={() => {
                         handleDeleteBackground();
                       }}
                       src={background?.url}
-                      onImageChange={() => {}}
+                      libraryMedia={libraryMedia}
+                      mediaLibraryRef={mediaLibraryRef}
                     />
                     <i style={styles.infoText}>
                       {t("magneto.board.background.warning")}

diff --git a/frontend/src/components/unique-image-picker/UniqueImagePicker.tsx b/frontend/src/components/unique-image-picker/UniqueImagePicker.tsx
@@ -11,12 +11,13 @@ interface UniqueImagePickerProps extends ComponentPropsWithRef<"input"> {
   addButtonLabel: string;
   deleteButtonLabel: string;
   src?: string;
+  libraryMedia: any;
+  mediaLibraryRef: any;
   app?: IWebApp | undefined;
   appCode?: string;
   className?: string;
   id: string;
   onUploadImage: (id: string) => void;
-  onImageChange: (file: File | null) => void;
   onDeleteImage: () => void;
 }
 
@@ -28,7 +29,6 @@ export const UniqueImagePicker: FC<UniqueImagePickerProps> = ({
   app,
   id,
   onUploadImage,
-  onImageChange,
   onDeleteImage,
 }) => {
   const [preview, setPreview] = useState<string>(src || "");
@@ -40,14 +40,9 @@ export const UniqueImagePicker: FC<UniqueImagePickerProps> = ({
     }
   }, [src]);
 
-  const handleClick = () => {
-    onUploadImage(id);
-  };
-
   const handleClean = () => {
     setPreview("");
     onDeleteImage();
-    onImageChange(null);
   };
 
   const classes = clsx("image-input", className);
@@ -59,7 +54,7 @@ export const UniqueImagePicker: FC<UniqueImagePickerProps> = ({
           aria-label={addButtonLabel}
           color="tertiary"
           icon={<Edit />}
-          onClick={handleClick}
+          onClick={() => onUploadImage(id)}
           type="button"
           variant="ghost"
         />

diff --git a/frontend/src/hooks/useImageHandler.ts b/frontend/src/hooks/useImageHandler.ts
@@ -1,13 +1,17 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, SetStateAction, Dispatch } from "react";
 
+import { WorkspaceElement } from "edifice-ts-client";
+
+import { useMediaLibrary } from "./useMediaLibrary";
 import { MediaProps } from "~/components/board-view/types";
 import { MEDIA_LIBRARY_TYPE } from "~/core/enums/media-library-type.enum";
-import { useMediaLibrary } from "~/providers/MediaLibraryProvider";
 
 export const useImageHandler = (
   defaultThumbnail: string,
   defaultBackground: string,
   pickerId: string,
+  media: MediaProps | null,
+  setMedia: Dispatch<SetStateAction<MediaProps | null>>,
 ) => {
   const [thumbnail, setThumbnail] = useState<MediaProps | null>(null);
   const [background, setBackground] = useState<MediaProps | null>(null);
@@ -34,13 +38,28 @@ export const useImageHandler = (
   }, [defaultThumbnail, defaultBackground]);
 
   const {
-    mediaLibraryRef,
-    mediaLibraryHandlers,
-    media,
-    handleClickMedia,
-    setMedia,
+    ref: mediaLibraryRef,
+    libraryMedia,
+    setLibraryMedia,
+    ...mediaLibraryHandlers
   } = useMediaLibrary();
 
+  useEffect(() => {
+    if (libraryMedia) {
+      const medialIb = libraryMedia as WorkspaceElement;
+      setMedia({
+        type: "image",
+        id: medialIb?._id || "",
+        name: medialIb?.name || "",
+        application: "",
+        url: medialIb?._id
+          ? `/workspace/document/${medialIb?._id}`
+          : (libraryMedia as string),
+      });
+    }
+    setLibraryMedia(null);
+  }, [libraryMedia]);
+
   useEffect(() => {
     if (media && pickerId) {
       if (pickerId === "thumbnail") {
@@ -49,11 +68,12 @@ export const useImageHandler = (
       if (pickerId === "background") {
         return setBackground(media);
       }
+      setMedia(null);
     }
   }, [media, pickerId]);
 
   const handleUploadImage = () => {
-    handleClickMedia(MEDIA_LIBRARY_TYPE.IMAGE);
+    mediaLibraryRef.current?.show(MEDIA_LIBRARY_TYPE.IMAGE);
   };
 
   const handleDeleteThumbnail = () => {
@@ -75,5 +95,6 @@ export const useImageHandler = (
     mediaLibraryHandlers,
     setBackground,
     setThumbnail,
+    libraryMedia,
   };
 };
diff --git a/frontend/src/providers/MediaLibraryProvider/index.tsx b/frontend/src/providers/MediaLibraryProvider/index.tsx
@@ -69,6 +69,7 @@ export const MediaLibraryProvider: FC<MediaLibraryProviderProps> = ({
     setMedia(null);
     setMagnetType(null);
     setIsCreateMagnetOpen(false);
+    setLibraryMedia(null);
     setWorkspaceElement(null);
   };