import React from "react"; import { useTranslation } from "react-i18next"; import { useQuery, useMutation, useQueryClient } from "react-query"; import styled from "styled-components"; import { API_BASE } from "../../utils/settings"; import backgroundGrid from "../../images/background-grid.png"; import { confirmAlert } from "react-confirm-alert"; import { toast } from "react-toastify"; import Modal from "../ui/Modal"; import { useMediaLibrary } from "."; import { useDropzone } from "react-dropzone"; const ImageGrid = styled.div` display: flex; flex-wrap: wrap; & > div { position: relative; } & img { height: 100px; margin: 0.5em; cursor: pointer; border: 1px solid transparent; background-image: url(${backgroundGrid}); &:hover { filter: brightness(1.2); border: 1px dotted var(--color-primary); } } & .remove { position: absolute; top: 15px; right: 5px; } `; const MediaLibraryModal = ({ show, setShow, onSelect }) => { const { t } = useTranslation(); const { getLibraryMedia, addMedia, removeMedia, libraries, } = useMediaLibrary(); const queryClient = useQueryClient(); const [tab, setTab] = React.useState(libraries[0].id); const currentLibrary = libraries.find(({ id }) => id === tab); const { isLoading, data = [] } = useQuery( `media__${tab}`, () => getLibraryMedia(currentLibrary), { enabled: show, } ); const handleSelect = React.useCallback( (media) => { onSelect(media); setShow(false); }, [onSelect, setShow] ); const uploadMediaMutation = useMutation( async (files) => { if (files.length === 1) { return [await addMedia(currentLibrary, files[0])]; } else { return Promise.all(files.map((file) => addMedia(currentLibrary, file))); } }, { onSuccess: (result) => { if (result.length === 1) { // If only one file is processed handleSelect(result[0].content); } queryClient.invalidateQueries(`media__${tab}`); }, } ); const onRemove = React.useCallback((key) => { confirmAlert({ title: t("Confirmation"), message: t("Do you really want to remove this media?"), buttons: [ { label: t("Yes"), onClick: async () => { try { await removeMedia(key); toast.success(t("Media deleted"), { autoClose: 1500 }); } catch (e) { if (e.message === "Forbidden") { toast.error(t("Action forbidden. Try logging in again.")); } else { console.log(e); toast.error( t("Error while deleting media. Try again later...") ); } } }, }, { label: t("No"), onClick: () => {}, }, ], }); }, []); const { getRootProps, getInputProps } = useDropzone({ onDrop: uploadMediaMutation.mutate, }); return (
{libraries.map(({ id, name }, index) => { if (tab === id) { return (
{index === 0 && ( <>

{t("Add file")}

{t("Click or drag'n'drop file here")}

)}

{name}

{!isLoading && ( {data.map((key) => (
handleSelect(key)} />
))}
)}
); } else { return null; } })}
); }; export default MediaLibraryModal;