diff --git a/frontend/src/components/create-board/CreateBoard.tsx b/frontend/src/components/create-board/CreateBoard.tsx index cdd3837d4..ad138651c 100644 --- 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 = ({ const { t } = useTranslation("magneto"); const { appCode } = useOdeClient(); + const [media, setMedia] = useState(null); const [activePickerId, setActivePickerId] = useState(""); const [isCommentChecked, setIsCommentChecked] = useState(false); const [isFavoriteChecked, setIsFavoriteChecked] = useState(false); @@ -53,7 +54,6 @@ export const CreateBoard: FC = ({ 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 = ({ 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 = ({ } handleDeleteThumbnail(); handleDeleteBackground(); - //spraradrap, faire passer isCreateMagnetOpen autre part que dans le medialibrary provider - setIsCreateMagnetOpen(false); toggle(); }; @@ -217,6 +218,7 @@ export const CreateBoard: FC = ({ deleteButtonLabel="Delete image" id="thumbnail" onUploadImage={(id: string) => { + setMedia(null); setActivePickerId(id); handleUploadImage(); }} @@ -224,7 +226,8 @@ export const CreateBoard: FC = ({ handleDeleteThumbnail(); }} src={thumbnail?.url} - onImageChange={() => {}} + libraryMedia={libraryMedia} + mediaLibraryRef={mediaLibraryRef} /> {thumbnail === null && (
@@ -354,6 +357,7 @@ export const CreateBoard: FC = ({ addButtonLabel="Add image" deleteButtonLabel="Delete image" onUploadImage={(id: string) => { + setMedia(null); setActivePickerId(id); handleUploadImage(); }} @@ -361,7 +365,8 @@ export const CreateBoard: FC = ({ handleDeleteBackground(); }} src={background?.url} - onImageChange={() => {}} + libraryMedia={libraryMedia} + mediaLibraryRef={mediaLibraryRef} /> {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 index 6ebee93bf..9d177b793 100644 --- 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 = ({ app, id, onUploadImage, - onImageChange, onDeleteImage, }) => { const [preview, setPreview] = useState(src || ""); @@ -40,14 +40,9 @@ export const UniqueImagePicker: FC = ({ } }, [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 = ({ aria-label={addButtonLabel} color="tertiary" icon={} - onClick={handleClick} + onClick={() => onUploadImage(id)} type="button" variant="ghost" /> diff --git a/frontend/src/hooks/useImageHandler.ts b/frontend/src/hooks/useImageHandler.ts index 3cb0bb106..46a631a6f 100644 --- 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>, ) => { const [thumbnail, setThumbnail] = useState(null); const [background, setBackground] = useState(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 index f427d9ccf..c3cf5e172 100644 --- a/frontend/src/providers/MediaLibraryProvider/index.tsx +++ b/frontend/src/providers/MediaLibraryProvider/index.tsx @@ -69,6 +69,7 @@ export const MediaLibraryProvider: FC = ({ setMedia(null); setMagnetType(null); setIsCreateMagnetOpen(false); + setLibraryMedia(null); setWorkspaceElement(null); };