fix: Archive and trash a document by dropping in the sidebar (#2318)

app/components/Sidebar/Main.js

@@ -1,15 +1,13 @@
 // @flow
 import { observer } from "mobx-react";
 import {
-  ArchiveIcon,
-  HomeIcon,
   EditIcon,
-  SearchIcon,
-  StarredIcon,
-  ShapesIcon,
-  TrashIcon,
+  HomeIcon,
   PlusIcon,
+  SearchIcon,
   SettingsIcon,
+  ShapesIcon,
+  StarredIcon,
 } from "outline-icons";
 import * as React from "react";
 import { DndProvider } from "react-dnd";
@@ -23,16 +21,22 @@ import Flex from "components/Flex";
 import Modal from "components/Modal";
 import Scrollable from "components/Scrollable";
 import Sidebar from "./Sidebar";
+import ArchiveLink from "./components/ArchiveLink";
 import Collections from "./components/Collections";
 import Section from "./components/Section";
 import SidebarLink from "./components/SidebarLink";
 import TeamButton from "./components/TeamButton";
+import TrashLink from "./components/TrashLink";
+import useCurrentTeam from "hooks/useCurrentTeam";
+import useCurrentUser from "hooks/useCurrentUser";
 import useStores from "hooks/useStores";
 import AccountMenu from "menus/AccountMenu";
 
 function MainSidebar() {
   const { t } = useTranslation();
-  const { policies, auth, documents } = useStores();
+  const { policies, documents } = useStores();
+  const team = useCurrentTeam();
+  const user = useCurrentUser();
   const [inviteModalOpen, setInviteModalOpen] = React.useState(false);
   const [
     createCollectionModalOpen,
@@ -71,9 +75,6 @@ function MainSidebar() {
     dndArea,
   ]);
 
-  const { user, team } = auth;
-  if (!user || !team) return null;
-
   const can = policies.abilities(team.id);
 
   return (
@@ -151,27 +152,8 @@ function MainSidebar() {
                       documents.active ? documents.active.template : undefined
                     }
                   />
-                  <SidebarLink
-                    to="/archive"
-                    icon={<ArchiveIcon color="currentColor" />}
-                    exact={false}
-                    label={t("Archive")}
-                    active={
-                      documents.active
-                        ? documents.active.isArchived &&
-                          !documents.active.isDeleted
-                        : undefined
-                    }
-                  />
-                  <SidebarLink
-                    to="/trash"
-                    icon={<TrashIcon color="currentColor" />}
-                    exact={false}
-                    label={t("Trash")}
-                    active={
-                      documents.active ? documents.active.isDeleted : undefined
-                    }
-                  />
+                  <ArchiveLink documents={documents} />
+                  <TrashLink documents={documents} />
                 </>
               )}
               <SidebarLink