Geforce File Manager

NAME	SIZE	ACTIONS
📁 collections		[ DEL ]
📁 store		[ DEL ]
📁 upload		[ DEL ]
📁 video		[ DEL ]
📄 BackButton.js	623 B	[ EDIT ] \| [ DEL ]
📄 CollectionHeader.js	2,887 B	[ EDIT ] \| [ DEL ]
📄 Footer.js	1,248 B	[ EDIT ] \| [ DEL ]
📄 Header.js	1,605 B	[ EDIT ] \| [ DEL ]
📄 Loading.js	294 B	[ EDIT ] \| [ DEL ]
📄 Popup.js	3,799 B	[ EDIT ] \| [ DEL ]
📄 ProgressBar.js	353 B	[ EDIT ] \| [ DEL ]
📄 ProgressOverlay.js	787 B	[ EDIT ] \| [ DEL ]
📄 Sidebar.js	4,941 B	[ EDIT ] \| [ DEL ]
📄 ThumbTemplate.js	1,643 B	[ EDIT ] \| [ DEL ]
📄 utils.js	1,634 B	[ EDIT ] \| [ DEL ]

[ CLOSE ]

EDIT: CollectionHeader.js

/** @jsx jsx */

/**
 * WordPress dependencies
 */
const { __ } = wp.i18n;
const { useState } = wp.element;
const { dispatch, useSelect } = wp.data;
const { Button, Modal, BaseControl } = wp.components;

import { css, jsx } from "@emotion/core";
import BackButton from "./BackButton";

export default () => {
  const [modal, setModal] = useState(false);
  const [deleting, setDeleting] = useState(false);
  const [error, setError] = useState("");
  const collection = useSelect((select) =>
    select("presto-player/bunny-popup").currentCollection()
  );
  const type = useSelect((select) =>
    select("presto-player/bunny-popup").requestType()
  );

return (
    <div
      css={css`
        margin-bottom: 2em;
        display: flex;
        align-items: center;
        justify-content: space-between;
      `}
    >
      <div>
        <BackButton
          onClick={() => {
            dispatch("presto-player/bunny-popup").setCollectionRequest("");
            dispatch("presto-player/bunny-popup").setVideosFetched(false);
          }}
        >
          {__("Back To Main Folder", "presto-player")}
        </BackButton>
        <h2>{collection.name}</h2>
      </div>
      <Button isDestructive onClick={() => setModal(true)}>
        {__("Delete Collection", "presto-player")}
      </Button>
      {modal && (
        <Modal
          shouldCloseOnClickOutside={false}
          overlayClassName="presto-modal"
          title={"Delete Collection"}
          onRequestClose={() => setModal(false)}
        >
          <h2>
            {__(
              "Are you sure you want to delete the collection? ",
              "presto-player"
            )}
          </h2>
          <p>
            {__(
              "This will also delete all videos inside of the collection.",
              "presto-player"
            )}
          </p>
          <BaseControl>
            <Button
              isDestructive
              disabled={deleting}
              isBusy={deleting}
              onClick={deleteCollection}
            >
              {__("Delete", "presto-player")}
            </Button>{" "}
            <Button onClick={() => setModal(false)}>
              {__("Cancel", "presto-player")}
            </Button>
          </BaseControl>
        </Modal>
      )}
    </div>
  );
};