feat: Drop to import onto collection scene (#2005)

* Refactor to functional component

* feat: Basic drag and drop into collection

app/components/DropToImport.js

@@ -1,123 +0,0 @@
-// @flow
-import invariant from "invariant";
-import { observable } from "mobx";
-import { observer, inject } from "mobx-react";
-import * as React from "react";
-import Dropzone from "react-dropzone";
-import { withRouter, type RouterHistory, type Match } from "react-router-dom";
-import styled, { css } from "styled-components";
-import DocumentsStore from "stores/DocumentsStore";
-import UiStore from "stores/UiStore";
-import LoadingIndicator from "components/LoadingIndicator";
-
-const EMPTY_OBJECT = {};
-let importingLock = false;
-
-type Props = {
-  children: React.Node,
-  collectionId: string,
-  documentId?: string,
-  ui: UiStore,
-  documents: DocumentsStore,
-  disabled: boolean,
-  location: Object,
-  match: Match,
-  history: RouterHistory,
-  staticContext: Object,
-};
-
-@observer
-class DropToImport extends React.Component<Props> {
-  @observable isImporting: boolean = false;
-
-  onDropAccepted = async (files = []) => {
-    if (importingLock) return;
-
-    this.isImporting = true;
-    importingLock = true;
-
-    try {
-      let collectionId = this.props.collectionId;
-      const documentId = this.props.documentId;
-      const redirect = files.length === 1;
-
-      if (documentId && !collectionId) {
-        const document = await this.props.documents.fetch(documentId);
-        invariant(document, "Document not available");
-        collectionId = document.collectionId;
-      }
-
-      for (const file of files) {
-        const doc = await this.props.documents.import(
-          file,
-          documentId,
-          collectionId,
-          { publish: true }
-        );
-
-        if (redirect) {
-          this.props.history.push(doc.url);
-        }
-      }
-    } catch (err) {
-      this.props.ui.showToast(`Could not import file. ${err.message}`, {
-        type: "error",
-      });
-    } finally {
-      this.isImporting = false;
-      importingLock = false;
-    }
-  };
-
-  render() {
-    const { documents } = this.props;
-
-    if (this.props.disabled) return this.props.children;
-
-    return (
-      <Dropzone
-        accept={documents.importFileTypes.join(", ")}
-        onDropAccepted={this.onDropAccepted}
-        style={EMPTY_OBJECT}
-        noClick
-        multiple
-      >
-        {({
-          getRootProps,
-          getInputProps,
-          isDragActive,
-          isDragAccept,
-          isDragReject,
-        }) => (
-          <DropzoneContainer
-            {...getRootProps()}
-            {...{ isDragActive }}
-            tabIndex="-1"
-          >
-            <input {...getInputProps()} />
-            {this.isImporting && <LoadingIndicator />}
-            {this.props.children}
-          </DropzoneContainer>
-        )}
-      </Dropzone>
-    );
-  }
-}
-
-const DropzoneContainer = styled("div")`
-  border-radius: 4px;
-
-  ${({ isDragActive, theme }) =>
-    isDragActive &&
-    css`
-      background: ${theme.slateDark};
-      a {
-        color: ${theme.white} !important;
-      }
-      svg {
-        fill: ${theme.white};
-      }
-    `}
-`;
-
-export default inject("documents", "ui")(withRouter(DropToImport));

app/components/Mask.js

@@ -23,7 +23,7 @@ class Mask extends React.Component<Props> {
   }
 
   render() {
-    return <Redacted width={this.width} />;
+    return <Redacted width={this.width} height={this.props.height} />;
   }
 }
 

app/components/Scene.js

@@ -12,6 +12,7 @@ type Props = {|
   children: React.Node,
   breadcrumb?: React.Node,
   actions?: React.Node,
+  centered?: boolean,
 |};
 
 function Scene({
@@ -21,6 +22,7 @@ function Scene({
   actions,
   breadcrumb,
   children,
+  centered,
 }: Props) {
   return (
     <FillWidth>
@@ -38,7 +40,11 @@ function Scene({
         actions={actions}
         breadcrumb={breadcrumb}
       />
-      <CenteredContent withStickyHeader>{children}</CenteredContent>
+      {centered !== false ? (
+        <CenteredContent withStickyHeader>{children}</CenteredContent>
+      ) : (
+        children
+      )}
     </FillWidth>
   );
 }

app/components/Sidebar/components/CollectionLink.js

@@ -7,9 +7,9 @@ import styled from "styled-components";
 import Collection from "models/Collection";
 import Document from "models/Document";
 import CollectionIcon from "components/CollectionIcon";
-import DropToImport from "components/DropToImport";
 import DocumentLink from "./DocumentLink";
 import DropCursor from "./DropCursor";
+import DropToImport from "./DropToImport";
 import EditableTitle from "./EditableTitle";
 import SidebarLink from "./SidebarLink";
 import useStores from "hooks/useStores";

app/components/Sidebar/components/Collections.js

@@ -18,6 +18,7 @@ type Props = {
 };
 
 function Collections({ onCreateCollection }: Props) {
+  const [isFetching, setFetching] = React.useState(false);
   const { ui, policies, documents, collections } = useStores();
   const isPreloaded: boolean = !!collections.orderedData.length;
   const { t } = useTranslation();
@@ -27,10 +28,18 @@ function Collections({ onCreateCollection }: Props) {
   );
 
   React.useEffect(() => {
-    if (!collections.isLoaded) {
-      collections.fetchPage({ limit: 100 });
+    async function load() {
+      if (!collections.isLoaded && !isFetching) {
+        try {
+          setFetching(true);
+          await collections.fetchPage({ limit: 100 });
+        } finally {
+          setFetching(false);
+        }
+      }
     }
-  });
+    load();
+  }, [collections, isFetching]);
 
   const [{ isCollectionDropping }, dropToReorderCollection] = useDrop({
     accept: "collection",

app/components/Sidebar/components/DocumentLink.js

@@ -7,9 +7,9 @@ import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import Collection from "models/Collection";
 import Document from "models/Document";
-import DropToImport from "components/DropToImport";
 import Fade from "components/Fade";
 import DropCursor from "./DropCursor";
+import DropToImport from "./DropToImport";
 import EditableTitle from "./EditableTitle";
 import SidebarLink from "./SidebarLink";
 import useStores from "hooks/useStores";

app/components/Sidebar/components/DropToImport.js

@@ -0,0 +1,83 @@
+// @flow
+import { observer } from "mobx-react";
+import * as React from "react";
+import Dropzone from "react-dropzone";
+import { useTranslation } from "react-i18next";
+import styled, { css } from "styled-components";
+import LoadingIndicator from "components/LoadingIndicator";
+import useImportDocument from "hooks/useImportDocument";
+import useStores from "hooks/useStores";
+
+type Props = {|
+  children: React.Node,
+  collectionId: string,
+  documentId?: string,
+  disabled: boolean,
+  staticContext: Object,
+|};
+
+function DropToImport({ disabled, children, collectionId, documentId }: Props) {
+  const { t } = useTranslation();
+  const { ui, documents } = useStores();
+  const { handleFiles, isImporting } = useImportDocument(
+    collectionId,
+    documentId
+  );
+
+  const handleRejection = React.useCallback(() => {
+    ui.showToast(
+      t("Document not supported – try Markdown, Plain text, HTML, or Word"),
+      { type: "error" }
+    );
+  }, [t, ui]);
+
+  if (disabled) {
+    return children;
+  }
+
+  return (
+    <Dropzone
+      accept={documents.importFileTypes.join(", ")}
+      onDropAccepted={handleFiles}
+      onDropRejected={handleRejection}
+      noClick
+      multiple
+    >
+      {({
+        getRootProps,
+        getInputProps,
+        isDragActive,
+        isDragAccept,
+        isDragReject,
+      }) => (
+        <DropzoneContainer
+          {...getRootProps()}
+          {...{ isDragActive }}
+          tabIndex="-1"
+        >
+          <input {...getInputProps()} />
+          {isImporting && <LoadingIndicator />}
+          {children}
+        </DropzoneContainer>
+      )}
+    </Dropzone>
+  );
+}
+
+const DropzoneContainer = styled.div`
+  border-radius: 4px;
+
+  ${({ isDragActive, theme }) =>
+    isDragActive &&
+    css`
+      background: ${theme.slateDark};
+      a {
+        color: ${theme.white} !important;
+      }
+      svg {
+        fill: ${theme.white};
+      }
+    `}
+`;
+
+export default observer(DropToImport);

app/hooks/useImportDocument.js

@@ -0,0 +1,69 @@
+// @flow
+import invariant from "invariant";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { useHistory } from "react-router-dom";
+import useStores from "hooks/useStores";
+
+let importingLock = false;
+
+export default function useImportDocument(
+  collectionId: string,
+  documentId?: string
+): {| handleFiles: (files: File[]) => Promise<void>, isImporting: boolean |} {
+  const { documents, ui } = useStores();
+  const [isImporting, setImporting] = React.useState(false);
+  const { t } = useTranslation();
+  const history = useHistory();
+
+  const handleFiles = React.useCallback(
+    async (files = []) => {
+      if (importingLock) {
+        return;
+      }
+
+      // Because this is the onChange handler it's possible for the change to be
+      // from previously selecting a file to not selecting a file – aka empty
+      if (!files.length) {
+        return;
+      }
+
+      setImporting(true);
+      importingLock = true;
+
+      try {
+        let cId = collectionId;
+        const redirect = files.length === 1;
+
+        if (documentId && !collectionId) {
+          const document = await documents.fetch(documentId);
+          invariant(document, "Document not available");
+          cId = document.collectionId;
+        }
+
+        for (const file of files) {
+          const doc = await documents.import(file, documentId, cId, {
+            publish: true,
+          });
+
+          if (redirect) {
+            history.push(doc.url);
+          }
+        }
+      } catch (err) {
+        ui.showToast(`${t("Could not import file")}. ${err.message}`, {
+          type: "error",
+        });
+      } finally {
+        setImporting(false);
+        importingLock = false;
+      }
+    },
+    [t, ui, documents, history, collectionId, documentId]
+  );
+
+  return {
+    handleFiles,
+    isImporting,
+  };
+}

app/scenes/Collection.js

@@ -1,17 +1,11 @@
 // @flow
-import { observable } from "mobx";
-import { observer, inject } from "mobx-react";
+import { observer } from "mobx-react";
 import { NewDocumentIcon, PlusIcon, PinIcon, MoreIcon } from "outline-icons";
 import * as React from "react";
-import { withTranslation, Trans, type TFunction } from "react-i18next";
-import { Redirect, Link, Switch, Route, type Match } from "react-router-dom";
-import styled from "styled-components";
-
-import CollectionsStore from "stores/CollectionsStore";
-import DocumentsStore from "stores/DocumentsStore";
-import PoliciesStore from "stores/PoliciesStore";
-import UiStore from "stores/UiStore";
-import Collection from "models/Collection";
+import Dropzone from "react-dropzone";
+import { useTranslation, Trans } from "react-i18next";
+import { useParams, Redirect, Link, Switch, Route } from "react-router-dom";
+import styled, { css } from "styled-components";
 import CollectionPermissions from "scenes/CollectionPermissions";
 import Search from "scenes/Search";
 import { Action, Separator } from "components/Actions";
@@ -25,6 +19,7 @@ import Flex from "components/Flex";
 import Heading from "components/Heading";
 import HelpText from "components/HelpText";
 import InputSearch from "components/InputSearch";
+import LoadingIndicator from "components/LoadingIndicator";
 import { ListPlaceholder } from "components/LoadingPlaceholder";
 import Mask from "components/Mask";
 import Modal from "components/Modal";
@@ -34,315 +29,371 @@ import Subheading from "components/Subheading";
 import Tab from "components/Tab";
 import Tabs from "components/Tabs";
 import Tooltip from "components/Tooltip";
+import useImportDocument from "hooks/useImportDocument";
+import useStores from "hooks/useStores";
+import useUnmount from "hooks/useUnmount";
 import CollectionMenu from "menus/CollectionMenu";
-import { AuthorizationError } from "utils/errors";
 import { newDocumentUrl, collectionUrl } from "utils/routeHelpers";
 
-type Props = {
-  ui: UiStore,
-  documents: DocumentsStore,
-  collections: CollectionsStore,
-  policies: PoliciesStore,
-  match: Match,
-  t: TFunction,
-};
+function CollectionScene() {
+  const params = useParams();
+  const { t } = useTranslation();
+  const { documents, policies, collections, ui } = useStores();
+  const [isFetching, setFetching] = React.useState();
+  const [error, setError] = React.useState();
+  const [permissionsModalOpen, setPermissionsModalOpen] = React.useState(false);
 
-@observer
-class CollectionScene extends React.Component<Props> {
-  @observable collection: ?Collection;
-  @observable isFetching: boolean = true;
-  @observable permissionsModalOpen: boolean = false;
+  const collectionId = params.id || "";
+  const collection = collections.get(collectionId);
+  const can = policies.abilities(collectionId || "");
+  const { handleFiles, isImporting } = useImportDocument(collectionId);
 
-  componentDidMount() {
-    const { id } = this.props.match.params;
-    if (id) {
-      this.loadContent(id);
+  React.useEffect(() => {
+    if (collection) {
+      ui.setActiveCollection(collection);
     }
-  }
+  }, [ui, collection]);
 
-  componentDidUpdate(prevProps: Props) {
-    const { id } = this.props.match.params;
+  React.useEffect(() => {
+    setError(null);
+    documents.fetchPinned({ collectionId });
+  }, [documents, collectionId]);
 
-    if (this.collection) {
-      const { collection } = this;
-      const policy = this.props.policies.get(collection.id);
-
-      if (!policy) {
-        this.loadContent(collection.id);
-      }
-    }
-
-    if (id && id !== prevProps.match.params.id) {
-      this.loadContent(id);
-    }
-  }
-
-  componentWillUnmount() {
-    this.props.ui.clearActiveCollection();
-  }
-
-  loadContent = async (id: string) => {
-    try {
-      const collection = await this.props.collections.fetch(id);
-
-      if (collection) {
-        this.props.ui.setActiveCollection(collection);
-        this.collection = collection;
-
-        await this.props.documents.fetchPinned({
-          collectionId: id,
-        });
-      }
-    } catch (error) {
-      if (error instanceof AuthorizationError) {
-        this.collection = null;
-      }
-    } finally {
-      this.isFetching = false;
-    }
-  };
-
-  onPermissions = (ev: SyntheticEvent<>) => {
-    ev.preventDefault();
-    this.permissionsModalOpen = true;
-  };
-
-  handlePermissionsModalClose = () => {
-    this.permissionsModalOpen = false;
-  };
-
-  renderActions() {
-    const { match, policies, t } = this.props;
-    const can = policies.abilities(match.params.id || "");
-
-    return (
-      <>
-        {can.update && (
-          <>
-            <Action>
-              <InputSearch
-                source="collection"
-                placeholder={`${t("Search in collection")}…`}
-                label={`${t("Search in collection")}…`}
-                labelHidden
-                collectionId={match.params.id}
-              />
-            </Action>
-            <Action>
-              <Tooltip
-                tooltip={t("New document")}
-                shortcut="n"
-                delay={500}
-                placement="bottom"
-              >
-                <Button
-                  as={Link}
-                  to={this.collection ? newDocumentUrl(this.collection.id) : ""}
-                  disabled={!this.collection}
-                  icon={<PlusIcon />}
-                >
-                  {t("New doc")}
-                </Button>
-              </Tooltip>
-            </Action>
-            <Separator />
-          </>
-        )}
-        <Action>
-          <CollectionMenu
-            collection={this.collection}
-            placement="bottom-end"
-            modal={false}
-            label={(props) => (
-              <Button
-                icon={<MoreIcon />}
-                {...props}
-                borderOnHover
-                neutral
-                small
-              />
-            )}
-          />
-        </Action>
-      </>
-    );
-  }
-
-  render() {
-    const { documents, t } = this.props;
-
-    if (!this.isFetching && !this.collection) return <Search notFound />;
-
-    const pinnedDocuments = this.collection
-      ? documents.pinnedInCollection(this.collection.id)
-      : [];
-    const collection = this.collection;
-    const collectionName = collection ? collection.name : "";
-    const hasPinnedDocuments = !!pinnedDocuments.length;
-
-    return collection ? (
-      <Scene
-        textTitle={collection.name}
-        title={
-          <>
-            <CollectionIcon collection={collection} expanded />
-            &nbsp;
-            {collection.name}
-          </>
+  React.useEffect(() => {
+    async function load() {
+      if ((!can || !collection) && !error && !isFetching) {
+        try {
+          setError(null);
+          setFetching(true);
+          await collections.fetch(collectionId);
+        } catch (err) {
+          setError(err);
+        } finally {
+          setFetching(false);
         }
-        actions={this.renderActions()}
-      >
-        {collection.isEmpty ? (
-          <Centered column>
-            <HelpText>
-              <Trans
-                defaults="<em>{{ collectionName }}</em> doesn’t contain any
-                    documents yet."
-                values={{ collectionName }}
-                components={{ em: <strong /> }}
-              />
-              <br />
-              <Trans>Get started by creating a new one!</Trans>
-            </HelpText>
-            <Empty>
-              <Link to={newDocumentUrl(collection.id)}>
-                <Button icon={<NewDocumentIcon color="currentColor" />}>
-                  {t("Create a document")}
-                </Button>
-              </Link>
-              &nbsp;&nbsp;
-              <Button onClick={this.onPermissions} neutral>
-                {t("Manage permissions")}…
-              </Button>
-            </Empty>
-            <Modal
-              title={t("Collection permissions")}
-              onRequestClose={this.handlePermissionsModalClose}
-              isOpen={this.permissionsModalOpen}
-            >
-              <CollectionPermissions collection={this.collection} />
-            </Modal>
-          </Centered>
-        ) : (
-          <>
-            <Heading>
-              <CollectionIcon collection={collection} size={40} expanded />{" "}
-              {collection.name}{" "}
-              {!collection.permission && (
+      }
+    }
+    load();
+  }, [collections, isFetching, collection, error, collectionId, can]);
+
+  useUnmount(ui.clearActiveCollection);
+
+  const handlePermissionsModalOpen = React.useCallback(() => {
+    setPermissionsModalOpen(true);
+  }, []);
+
+  const handlePermissionsModalClose = React.useCallback(() => {
+    setPermissionsModalOpen(false);
+  }, []);
+
+  const handleRejection = React.useCallback(() => {
+    ui.showToast(
+      t("Document not supported – try Markdown, Plain text, HTML, or Word"),
+      { type: "error" }
+    );
+  }, [t, ui]);
+
+  if (!collection && error) {
+    return <Search notFound />;
+  }
+
+  const pinnedDocuments = collection
+    ? documents.pinnedInCollection(collection.id)
+    : [];
+  const collectionName = collection ? collection.name : "";
+  const hasPinnedDocuments = !!pinnedDocuments.length;
+
+  return collection ? (
+    <Scene
+      centered={false}
+      textTitle={collection.name}
+      title={
+        <>
+          <CollectionIcon collection={collection} expanded />
+          &nbsp;
+          {collection.name}
+        </>
+      }
+      actions={
+        <>
+          {can.update && (
+            <>
+              <Action>
+                <InputSearch
+                  source="collection"
+                  placeholder={`${t("Search in collection")}…`}
+                  label={`${t("Search in collection")}…`}
+                  labelHidden
+                  collectionId={collectionId}
+                />
+              </Action>
+              <Action>
                 <Tooltip
-                  tooltip={t(
-                    "This collection is only visible to those given access"
-                  )}
+                  tooltip={t("New document")}
+                  shortcut="n"
+                  delay={500}
                   placement="bottom"
                 >
-                  <Badge>{t("Private")}</Badge>
+                  <Button
+                    as={Link}
+                    to={collection ? newDocumentUrl(collection.id) : ""}
+                    disabled={!collection}
+                    icon={<PlusIcon />}
+                  >
+                    {t("New doc")}
+                  </Button>
                 </Tooltip>
+              </Action>
+              <Separator />
+            </>
+          )}
+          <Action>
+            <CollectionMenu
+              collection={collection}
+              placement="bottom-end"
+              modal={false}
+              label={(props) => (
+                <Button
+                  icon={<MoreIcon />}
+                  {...props}
+                  borderOnHover
+                  neutral
+                  small
+                />
               )}
-            </Heading>
-            <CollectionDescription collection={collection} />
+            />
+          </Action>
+        </>
+      }
+    >
+      <Dropzone
+        accept={documents.importFileTypes.join(", ")}
+        onDropAccepted={handleFiles}
+        onDropRejected={handleRejection}
+        noClick
+        multiple
+      >
+        {({
+          getRootProps,
+          getInputProps,
+          isDragActive,
+          isDragAccept,
+          isDragReject,
+        }) => (
+          <DropzoneContainer
+            {...getRootProps()}
+            isDragActive={isDragActive}
+            tabIndex="-1"
+          >
+            <input {...getInputProps()} />
+            {isImporting && <LoadingIndicator />}
 
-            {hasPinnedDocuments && (
-              <>
-                <Subheading sticky>
-                  <TinyPinIcon size={18} /> {t("Pinned")}
-                </Subheading>
-                <DocumentList documents={pinnedDocuments} showPin />
-              </>
-            )}
+            <CenteredContent withStickyHeader>
+              {collection.isEmpty ? (
+                <Centered column>
+                  <HelpText>
+                    <Trans
+                      defaults="<em>{{ collectionName }}</em> doesn’t contain any
+                    documents yet."
+                      values={{ collectionName }}
+                      components={{ em: <strong /> }}
+                    />
+                    <br />
+                    <Trans>Get started by creating a new one!</Trans>
+                  </HelpText>
+                  <Empty>
+                    <Link to={newDocumentUrl(collection.id)}>
+                      <Button icon={<NewDocumentIcon color="currentColor" />}>
+                        {t("Create a document")}
+                      </Button>
+                    </Link>
+                    &nbsp;&nbsp;
+                    <Button onClick={handlePermissionsModalOpen} neutral>
+                      {t("Manage permissions")}…
+                    </Button>
+                  </Empty>
+                  <Modal
+                    title={t("Collection permissions")}
+                    onRequestClose={handlePermissionsModalClose}
+                    isOpen={permissionsModalOpen}
+                  >
+                    <CollectionPermissions collection={collection} />
+                  </Modal>
+                </Centered>
+              ) : (
+                <>
+                  <Heading>
+                    <CollectionIcon
+                      collection={collection}
+                      size={40}
+                      expanded
+                    />{" "}
+                    {collection.name}{" "}
+                    {!collection.permission && (
+                      <Tooltip
+                        tooltip={t(
+                          "This collection is only visible to those given access"
+                        )}
+                        placement="bottom"
+                      >
+                        <Badge>{t("Private")}</Badge>
+                      </Tooltip>
+                    )}
+                  </Heading>
+                  <CollectionDescription collection={collection} />
 
-            <Tabs>
-              <Tab to={collectionUrl(collection.id)} exact>
-                {t("Documents")}
-              </Tab>
-              <Tab to={collectionUrl(collection.id, "updated")} exact>
-                {t("Recently updated")}
-              </Tab>
-              <Tab to={collectionUrl(collection.id, "published")} exact>
-                {t("Recently published")}
-              </Tab>
-              <Tab to={collectionUrl(collection.id, "old")} exact>
-                {t("Least recently updated")}
-              </Tab>
-              <Tab to={collectionUrl(collection.id, "alphabetical")} exact>
-                {t("A–Z")}
-              </Tab>
-            </Tabs>
-            <Switch>
-              <Route path={collectionUrl(collection.id, "alphabetical")}>
-                <PaginatedDocumentList
-                  key="alphabetical"
-                  documents={documents.alphabeticalInCollection(collection.id)}
-                  fetch={documents.fetchAlphabetical}
-                  options={{ collectionId: collection.id }}
-                  showPin
-                />
-              </Route>
-              <Route path={collectionUrl(collection.id, "old")}>
-                <PaginatedDocumentList
-                  key="old"
-                  documents={documents.leastRecentlyUpdatedInCollection(
-                    collection.id
+                  {hasPinnedDocuments && (
+                    <>
+                      <Subheading sticky>
+                        <TinyPinIcon size={18} color="currentColor" />{" "}
+                        {t("Pinned")}
+                      </Subheading>
+                      <DocumentList documents={pinnedDocuments} showPin />
+                    </>
                   )}
-                  fetch={documents.fetchLeastRecentlyUpdated}
-                  options={{ collectionId: collection.id }}
-                  showPin
-                />
-              </Route>
-              <Route path={collectionUrl(collection.id, "recent")}>
-                <Redirect to={collectionUrl(collection.id, "published")} />
-              </Route>
-              <Route path={collectionUrl(collection.id, "published")}>
-                <PaginatedDocumentList
-                  key="published"
-                  documents={documents.recentlyPublishedInCollection(
-                    collection.id
-                  )}
-                  fetch={documents.fetchRecentlyPublished}
-                  options={{ collectionId: collection.id }}
-                  showPublished
-                  showPin
-                />
-              </Route>
-              <Route path={collectionUrl(collection.id, "updated")}>
-                <PaginatedDocumentList
-                  key="updated"
-                  documents={documents.recentlyUpdatedInCollection(
-                    collection.id
-                  )}
-                  fetch={documents.fetchRecentlyUpdated}
-                  options={{ collectionId: collection.id }}
-                  showPin
-                />
-              </Route>
-              <Route path={collectionUrl(collection.id)} exact>
-                <PaginatedDocumentList
-                  documents={documents.rootInCollection(collection.id)}
-                  fetch={documents.fetchPage}
-                  options={{
-                    collectionId: collection.id,
-                    parentDocumentId: null,
-                    sort: collection.sort.field,
-                    direction: "ASC",
-                  }}
-                  showNestedDocuments
-                  showPin
-                />
-              </Route>
-            </Switch>
-          </>
+
+                  <Tabs>
+                    <Tab to={collectionUrl(collection.id)} exact>
+                      {t("Documents")}
+                    </Tab>
+                    <Tab to={collectionUrl(collection.id, "updated")} exact>
+                      {t("Recently updated")}
+                    </Tab>
+                    <Tab to={collectionUrl(collection.id, "published")} exact>
+                      {t("Recently published")}
+                    </Tab>
+                    <Tab to={collectionUrl(collection.id, "old")} exact>
+                      {t("Least recently updated")}
+                    </Tab>
+                    <Tab
+                      to={collectionUrl(collection.id, "alphabetical")}
+                      exact
+                    >
+                      {t("A–Z")}
+                    </Tab>
+                  </Tabs>
+                  <Switch>
+                    <Route path={collectionUrl(collection.id, "alphabetical")}>
+                      <PaginatedDocumentList
+                        key="alphabetical"
+                        documents={documents.alphabeticalInCollection(
+                          collection.id
+                        )}
+                        fetch={documents.fetchAlphabetical}
+                        options={{ collectionId: collection.id }}
+                        showPin
+                      />
+                    </Route>
+                    <Route path={collectionUrl(collection.id, "old")}>
+                      <PaginatedDocumentList
+                        key="old"
+                        documents={documents.leastRecentlyUpdatedInCollection(
+                          collection.id
+                        )}
+                        fetch={documents.fetchLeastRecentlyUpdated}
+                        options={{ collectionId: collection.id }}
+                        showPin
+                      />
+                    </Route>
+                    <Route path={collectionUrl(collection.id, "recent")}>
+                      <Redirect
+                        to={collectionUrl(collection.id, "published")}
+                      />
+                    </Route>
+                    <Route path={collectionUrl(collection.id, "published")}>
+                      <PaginatedDocumentList
+                        key="published"
+                        documents={documents.recentlyPublishedInCollection(
+                          collection.id
+                        )}
+                        fetch={documents.fetchRecentlyPublished}
+                        options={{ collectionId: collection.id }}
+                        showPublished
+                        showPin
+                      />
+                    </Route>
+                    <Route path={collectionUrl(collection.id, "updated")}>
+                      <PaginatedDocumentList
+                        key="updated"
+                        documents={documents.recentlyUpdatedInCollection(
+                          collection.id
+                        )}
+                        fetch={documents.fetchRecentlyUpdated}
+                        options={{ collectionId: collection.id }}
+                        showPin
+                      />
+                    </Route>
+                    <Route path={collectionUrl(collection.id)} exact>
+                      <PaginatedDocumentList
+                        documents={documents.rootInCollection(collection.id)}
+                        fetch={documents.fetchPage}
+                        options={{
+                          collectionId: collection.id,
+                          parentDocumentId: null,
+                          sort: collection.sort.field,
+                          direction: "ASC",
+                        }}
+                        showNestedDocuments
+                        showPin
+                      />
+                    </Route>
+                  </Switch>
+                </>
+              )}
+              <DropMessage>{t("Drop documents to import")}</DropMessage>
+            </CenteredContent>
+          </DropzoneContainer>
         )}
-      </Scene>
-    ) : (
-      <CenteredContent>
-        <Heading>
-          <Mask height={35} />
-        </Heading>
-        <ListPlaceholder count={5} />
-      </CenteredContent>
-    );
-  }
+      </Dropzone>
+    </Scene>
+  ) : (
+    <CenteredContent>
+      <Heading>
+        <Mask height={35} />
+      </Heading>
+      <ListPlaceholder count={5} />
+    </CenteredContent>
+  );
 }
 
+const DropMessage = styled(HelpText)`
+  opacity: 0;
+  pointer-events: none;
+`;
+
+const DropzoneContainer = styled.div`
+  min-height: calc(100% - 56px);
+  position: relative;
+
+  ${({ isDragActive, theme }) =>
+    isDragActive &&
+    css`
+      &:after {
+        display: block;
+        content: "";
+        position: absolute;
+        top: 24px;
+        right: 24px;
+        bottom: 24px;
+        left: 24px;
+        background: ${theme.background};
+        border-radius: 8px;
+        border: 1px dashed ${theme.divider};
+        z-index: 1;
+      }
+
+      ${DropMessage} {
+        opacity: 1;
+        z-index: 2;
+        position: absolute;
+        text-align: center;
+        top: 50%;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    `}
+`;
+
 const Centered = styled(Flex)`
   text-align: center;
   margin: 40vh auto 0;
@@ -361,6 +412,4 @@ const Empty = styled(Flex)`
   margin: 10px 0;
 `;
 
-export default withTranslation()<CollectionScene>(
-  inject("collections", "policies", "documents", "ui")(CollectionScene)
-);
+export default observer(CollectionScene);

shared/i18n/locales/en_US/translation.json

@@ -98,6 +98,7 @@
   "New collection": "New collection",
   "Collections": "Collections",
   "Untitled": "Untitled",
+  "Document not supported – try Markdown, Plain text, HTML, or Word": "Document not supported – try Markdown, Plain text, HTML, or Word",
   "Home": "Home",
   "Starred": "Starred",
   "Settings": "Settings",
@@ -120,6 +121,7 @@
   "Installation": "Installation",
   "Unstar": "Unstar",
   "Star": "Star",
+  "Could not import file": "Could not import file",
   "Appearance": "Appearance",
   "System": "System",
   "Light": "Light",
@@ -212,6 +214,7 @@
   "Recently published": "Recently published",
   "Least recently updated": "Least recently updated",
   "A–Z": "A–Z",
+  "Drop documents to import": "Drop documents to import",
   "The collection was updated": "The collection was updated",
   "You can edit the name and other details at any time, however doing so often might confuse your team mates.": "You can edit the name and other details at any time, however doing so often might confuse your team mates.",
   "Name": "Name",