feat: Allow sorting collections in sidebar (#1870)

closes #1759 Co-authored-by: Tom Moor <tom.moor@gmail.com>
2021-03-19 05:57:33 +05:30
parent b93002ad93
commit 46bcc2e2ae
21 changed files with 677 additions and 120 deletions
--- a/app/components/Sidebar/components/CollectionLink.js
+++ b/app/components/Sidebar/components/CollectionLink.js
@@ -1,9 +1,9 @@
 // @flow
+import fractionalIndex from "fractional-index";
 import { observer } from "mobx-react";
 import * as React from "react";
-import { useDrop } from "react-dnd";
+import { useDrop, useDrag } from "react-dnd";
 import styled from "styled-components";
-import UiStore from "stores/UiStore";
 import Collection from "models/Collection";
 import Document from "models/Document";
 import CollectionIcon from "components/CollectionIcon";
@@ -18,10 +18,12 @@ import CollectionSortMenu from "menus/CollectionSortMenu";

 type Props = {|
  collection: Collection,
-  ui: UiStore,
  canUpdate: boolean,
  activeDocument: ?Document,
  prefetchDocument: (id: string) => Promise<void>,
+  belowCollection: Collection | void,
+  isDraggingAnyCollection: boolean,
+  onChangeDragging: (dragging: boolean) => void,
 |};

 function CollectionLink({
@@ -29,7 +31,9 @@ function CollectionLink({
  activeDocument,
  prefetchDocument,
  canUpdate,
-  ui,
+  belowCollection,
+  isDraggingAnyCollection,
+  onChangeDragging,
 }: Props) {
  const [menuOpen, setMenuOpen] = React.useState(false);

@@ -40,10 +44,23 @@ function CollectionLink({
    [collection]
  );

-  const { documents, policies } = useStores();
-  const expanded = collection.id === ui.activeCollectionId;
+  const { ui, documents, policies, collections } = useStores();
+
+  const [expanded, setExpanded] = React.useState(
+    collection.id === ui.activeCollectionId
+  );
+
+  React.useEffect(() => {
+    if (isDraggingAnyCollection) {
+      setExpanded(false);
+    } else {
+      setExpanded(collection.id === ui.activeCollectionId);
+    }
+  }, [isDraggingAnyCollection, collection.id, ui.activeCollectionId]);
+
  const manualSort = collection.sort.field === "index";
  const can = policies.abilities(collection.id);
+  const belowCollectionIndex = belowCollection ? belowCollection.index : null;

  // Drop to re-parent
  const [{ isOver, canDrop }, drop] = useDrop({
@@ -74,49 +91,101 @@ function CollectionLink({
    }),
  });

+  // Drop to reorder Collection
+  const [{ isCollectionDropping }, dropToReorderCollection] = useDrop({
+    accept: "collection",
+    drop: async (item, monitor) => {
+      collections.move(
+        item.id,
+        fractionalIndex(collection.index, belowCollectionIndex)
+      );
+    },
+    canDrop: (item, monitor) => {
+      return (
+        collection.id !== item.id &&
+        (!belowCollection || item.id !== belowCollection.id)
+      );
+    },
+    collect: (monitor) => ({
+      isCollectionDropping: monitor.isOver(),
+    }),
+  });
+
+  // Drag to reorder Collection
+  const [{ isCollectionDragging }, dragToReorderCollection] = useDrag({
+    type: "collection",
+    item: () => {
+      onChangeDragging(true);
+      return {
+        id: collection.id,
+      };
+    },
+    collect: (monitor) => ({
+      isCollectionDragging: monitor.isDragging(),
+    }),
+    canDrag: (monitor) => {
+      return can.move;
+    },
+    end: (monitor) => {
+      onChangeDragging(false);
+    },
+  });
+
  return (
    <>
      <div ref={drop} style={{ position: "relative" }}>
-        <DropToImport key={collection.id} collectionId={collection.id}>
-          <SidebarLinkWithPadding
-            key={collection.id}
-            to={collection.url}
-            icon={
-              <CollectionIcon collection={collection} expanded={expanded} />
-            }
-            iconColor={collection.color}
-            expanded={expanded}
-            showActions={menuOpen || expanded}
-            isActiveDrop={isOver && canDrop}
-            label={
-              <EditableTitle
-                title={collection.name}
-                onSubmit={handleTitleChange}
-                canUpdate={canUpdate}
-              />
-            }
-            exact={false}
-            menu={
-              <>
-                {can.update && (
-                  <CollectionSortMenuWithMargin
+        <Draggable
+          key={collection.id}
+          ref={dragToReorderCollection}
+          $isDragging={isCollectionDragging}
+          $isMoving={isCollectionDragging}
+        >
+          <DropToImport collectionId={collection.id}>
+            <SidebarLinkWithPadding
+              to={collection.url}
+              icon={
+                <CollectionIcon collection={collection} expanded={expanded} />
+              }
+              iconColor={collection.color}
+              expanded={expanded}
+              showActions={menuOpen || expanded}
+              isActiveDrop={isOver && canDrop}
+              label={
+                <EditableTitle
+                  title={collection.name}
+                  onSubmit={handleTitleChange}
+                  canUpdate={canUpdate}
+                />
+              }
+              exact={false}
+              menu={
+                <>
+                  {can.update && (
+                    <CollectionSortMenuWithMargin
+                      collection={collection}
+                      onOpen={() => setMenuOpen(true)}
+                      onClose={() => setMenuOpen(false)}
+                    />
+                  )}
+                  <CollectionMenu
                    collection={collection}
                    onOpen={() => setMenuOpen(true)}
                    onClose={() => setMenuOpen(false)}
                  />
-                )}
-                <CollectionMenu
-                  collection={collection}
-                  onOpen={() => setMenuOpen(true)}
-                  onClose={() => setMenuOpen(false)}
-                />
-              </>
-            }
-          />
-        </DropToImport>
+                </>
+              }
+            />
+          </DropToImport>
+        </Draggable>
        {expanded && manualSort && (
          <DropCursor isActiveDrop={isOverReorder} innerRef={dropToReorder} />
        )}
+        {isDraggingAnyCollection && (
+          <DropCursor
+            isActiveDrop={isCollectionDropping}
+            innerRef={dropToReorderCollection}
+          />
+        )}
      </div>

      {expanded &&
@@ -136,6 +205,11 @@ function CollectionLink({
  );
 }

+const Draggable = styled("div")`
+  opacity: ${(props) => (props.$isDragging || props.$isMoving ? 0.5 : 1)};
+  pointer-events: ${(props) => (props.$isMoving ? "none" : "auto")};
+`;
+
 const SidebarLinkWithPadding = styled(SidebarLink)`
  padding-right: 60px;
 `;
--- a/app/components/Sidebar/components/Collections.js
+++ b/app/components/Sidebar/components/Collections.js
@@ -1,98 +1,98 @@
 // @flow
-import { observer, inject } from "mobx-react";
+import fractionalIndex from "fractional-index";
+import { observer } from "mobx-react";
 import { PlusIcon } from "outline-icons";
 import * as React from "react";
-import { withTranslation, type TFunction } from "react-i18next";
-import keydown from "react-keydown";
-import { withRouter, type RouterHistory } from "react-router-dom";
-
-import CollectionsStore from "stores/CollectionsStore";
-import DocumentsStore from "stores/DocumentsStore";
-import PoliciesStore from "stores/PoliciesStore";
-import UiStore from "stores/UiStore";
+import { useDrop } from "react-dnd";
+import { useTranslation } from "react-i18next";
 import Fade from "components/Fade";
 import Flex from "components/Flex";
+import useStores from "../../../hooks/useStores";
 import CollectionLink from "./CollectionLink";
 import CollectionsLoading from "./CollectionsLoading";
+import DropCursor from "./DropCursor";
 import Header from "./Header";
 import SidebarLink from "./SidebarLink";
-import { newDocumentUrl } from "utils/routeHelpers";
-
 type Props = {
-  history: RouterHistory,
-  policies: PoliciesStore,
-  collections: CollectionsStore,
-  documents: DocumentsStore,
  onCreateCollection: () => void,
-  ui: UiStore,
-  t: TFunction,
 };

-@observer
-class Collections extends React.Component<Props> {
-  isPreloaded: boolean = !!this.props.collections.orderedData.length;
-
-  componentDidMount() {
-    const { collections } = this.props;
+function Collections({ onCreateCollection }: Props) {
+  const { ui, policies, documents, collections } = useStores();
+  const isPreloaded: boolean = !!collections.orderedData.length;
+  const { t } = useTranslation();
+  const orderedCollections = collections.orderedData;
+  const [isDraggingAnyCollection, setIsDraggingAnyCollection] = React.useState(
+    false
+  );

+  React.useEffect(() => {
    if (!collections.isLoaded) {
      collections.fetchPage({ limit: 100 });
    }
-  }
+  });

-  @keydown("n")
-  goToNewDocument() {
-    const { activeCollectionId } = this.props.ui;
-    if (!activeCollectionId) return;
+  const [{ isCollectionDropping }, dropToReorderCollection] = useDrop({
+    accept: "collection",
+    drop: async (item, monitor) => {
+      collections.move(
+        item.id,
+        fractionalIndex(null, orderedCollections[0].index)
+      );
+    },
+    canDrop: (item, monitor) => {
+      return item.id !== orderedCollections[0].id;
+    },
+    collect: (monitor) => ({
+      isCollectionDropping: monitor.isOver(),
+    }),
+  });

-    const can = this.props.policies.abilities(activeCollectionId);
-    if (!can.update) return;
-
-    this.props.history.push(newDocumentUrl(activeCollectionId));
-  }
-
-  render() {
-    const { collections, ui, policies, documents, t } = this.props;
-
-    const content = (
-      <>
-        {collections.orderedData.map((collection) => (
-          <CollectionLink
-            key={collection.id}
-            collection={collection}
-            activeDocument={documents.active}
-            prefetchDocument={documents.prefetchDocument}
-            canUpdate={policies.abilities(collection.id).update}
-            ui={ui}
-          />
-        ))}
-        <SidebarLink
-          to="/collections"
-          onClick={this.props.onCreateCollection}
-          icon={<PlusIcon color="currentColor" />}
-          label={`${t("New collection")}…`}
-          exact
+  const content = (
+    <>
+      <DropCursor
+        isActiveDrop={isCollectionDropping}
+        innerRef={dropToReorderCollection}
+        from="collections"
+      />
+      {orderedCollections.map((collection, index) => (
+        <CollectionLink
+          key={collection.id}
+          collection={collection}
+          activeDocument={documents.active}
+          prefetchDocument={documents.prefetchDocument}
+          canUpdate={policies.abilities(collection.id).update}
+          ui={ui}
+          isDraggingAnyCollection={isDraggingAnyCollection}
+          onChangeDragging={setIsDraggingAnyCollection}
+          belowCollection={orderedCollections[index + 1]}
        />
-      </>
-    );
+      ))}
+      <SidebarLink
+        to="/collections"
+        onClick={onCreateCollection}
+        icon={<PlusIcon color="currentColor" />}
+        label={`${t("New collection")}…`}
+        exact
+      />
+    </>
+  );

+  if (!collections.isLoaded) {
    return (
      <Flex column>
        <Header>{t("Collections")}</Header>
-        {collections.isLoaded ? (
-          this.isPreloaded ? (
-            content
-          ) : (
-            <Fade>{content}</Fade>
-          )
-        ) : (
-          <CollectionsLoading />
-        )}
+        <CollectionsLoading />
      </Flex>
    );
  }
+
+  return (
+    <Flex column>
+      <Header>{t("Collections")}</Header>
+      {isPreloaded ? content : <Fade>{content}</Fade>}
+    </Flex>
+  );
 }

-export default withTranslation()<Collections>(
-  inject("collections", "ui", "documents", "policies")(withRouter(Collections))
-);
+export default observer(Collections);
--- a/app/components/Sidebar/components/DropCursor.js
+++ b/app/components/Sidebar/components/DropCursor.js
@@ -7,12 +7,14 @@ function DropCursor({
  isActiveDrop,
  innerRef,
  theme,
+  from,
 }: {
  isActiveDrop: boolean,
  innerRef: React.Ref<any>,
  theme: Theme,
+  from: string,
 }) {
-  return <Cursor isOver={isActiveDrop} ref={innerRef} />;
+  return <Cursor isOver={isActiveDrop} ref={innerRef} from={from} />;
 }

 // transparent hover zone with a thin visible band vertically centered
@@ -25,7 +27,7 @@ const Cursor = styled("div")`

  width: 100%;
  height: 14px;
-  bottom: -7px;
+  ${(props) => (props.from === "collections" ? "top: 15px;" : "bottom: -7px;")}
  background: transparent;

  ::after {