chore: Convert GroupListItem, AddGroupsToCollection, AddPeopleToCollection, Drafts to functional components

app/components/GroupListItem.tsx

@@ -1,10 +1,9 @@
-import { observable } from "mobx";
 import { observer } from "mobx-react";
 import { GroupIcon } from "outline-icons";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { MAX_AVATAR_DISPLAY } from "@shared/constants";
-import RootStore from "~/stores/RootStore";
 import CollectionGroupMembership from "~/models/CollectionGroupMembership";
 import Group from "~/models/Group";
 import GroupMembers from "~/scenes/GroupMembers";
@@ -12,10 +11,11 @@ import Facepile from "~/components/Facepile";
 import Flex from "~/components/Flex";
 import ListItem from "~/components/List/Item";
 import Modal from "~/components/Modal";
-import withStores from "~/components/withStores";
+import useBoolean from "~/hooks/useBoolean";
+import useStores from "~/hooks/useStores";
 import NudeButton from "./NudeButton";
 
-type Props = RootStore & {
+type Props = {
   group: Group;
   membership?: CollectionGroupMembership;
   showFacepile?: boolean;
@@ -23,71 +23,57 @@ type Props = RootStore & {
   renderActions: (params: { openMembersModal: () => void }) => React.ReactNode;
 };
 
-@observer
+function GroupListItem({ group, showFacepile, renderActions }: Props) {
-class GroupListItem extends React.Component<Props> {
+  const { groupMemberships } = useStores();
-  @observable
+  const { t } = useTranslation();
-  membersModalOpen = false;
+  const [
+    membersModalOpen,
+    setMembersModalOpen,
+    setMembersModalClosed,
+  ] = useBoolean();
+  const memberCount = group.memberCount;
+  const membershipsInGroup = groupMemberships.inGroup(group.id);
+  const users = membershipsInGroup
+    .slice(0, MAX_AVATAR_DISPLAY)
+    .map((gm) => gm.user);
+  const overflow = memberCount - users.length;
 
-  handleMembersModalOpen = () => {
+  return (
-    this.membersModalOpen = true;
+    <>
-  };
+      <ListItem
-
+        image={
-  handleMembersModalClose = () => {
+          <Image>
-    this.membersModalOpen = false;
+            <GroupIcon size={24} />
-  };
+          </Image>
-
+        }
-  render() {
+        title={<Title onClick={setMembersModalOpen}>{group.name}</Title>}
-    const { group, groupMemberships, showFacepile, renderActions } = this.props;
+        subtitle={t("{{ count }} members", { count: memberCount })}
-    const memberCount = group.memberCount;
+        actions={
-    const membershipsInGroup = groupMemberships.inGroup(group.id);
+          <Flex align="center" gap={8}>
-    const users = membershipsInGroup
+            {showFacepile && (
-      .slice(0, MAX_AVATAR_DISPLAY)
+              <NudeButton
-      .map((gm) => gm.user);
+                width="auto"
-    const overflow = memberCount - users.length;
+                height="auto"
-
+                onClick={setMembersModalOpen}
-    return (
+              >
-      <>
+                <Facepile users={users} overflow={overflow} />
-        <ListItem
+              </NudeButton>
-          image={
+            )}
-            <Image>
+            {renderActions({
-              <GroupIcon size={24} />
+              openMembersModal: setMembersModalOpen,
-            </Image>
+            })}
-          }
+          </Flex>
-          title={
+        }
-            <Title onClick={this.handleMembersModalOpen}>{group.name}</Title>
+      />
-          }
+      <Modal
-          subtitle={
+        title={t("Group members")}
-            <>
+        onRequestClose={setMembersModalClosed}
-              {memberCount} member{memberCount === 1 ? "" : "s"}
+        isOpen={membersModalOpen}
-            </>
+      >
-          }
+        <GroupMembers group={group} />
-          actions={
+      </Modal>
-            <Flex align="center" gap={8}>
+    </>
-              {showFacepile && (
+  );
-                <NudeButton
-                  width="auto"
-                  height="auto"
-                  onClick={this.handleMembersModalOpen}
-                >
-                  <Facepile users={users} overflow={overflow} />
-                </NudeButton>
-              )}
-              {renderActions({
-                openMembersModal: this.handleMembersModalOpen,
-              })}
-            </Flex>
-          }
-        />
-        <Modal
-          title="Group members"
-          onRequestClose={this.handleMembersModalClose}
-          isOpen={this.membersModalOpen}
-        >
-          <GroupMembers group={group} />
-        </Modal>
-      </>
-    );
-  }
 }
 
 const Image = styled(Flex)`
@@ -106,4 +92,4 @@ const Title = styled.span`
   }
 `;
 
-export default withStores(GroupListItem);
+export default observer(GroupListItem);

app/scenes/CollectionPermissions/AddGroupsToCollection.tsx

@@ -20,7 +20,6 @@ import useStores from "~/hooks/useStores";
 
 type Props = {
   collection: Collection;
-  onSubmit: () => void;
 };
 
 function AddGroupsToCollection(props: Props) {

app/scenes/CollectionPermissions/AddPeopleToCollection.tsx

@@ -1,9 +1,6 @@
-import { debounce } from "lodash";
-import { observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
-import { WithTranslation, withTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
-import RootStore from "~/stores/RootStore";
 import Collection from "~/models/Collection";
 import User from "~/models/User";
 import Invite from "~/scenes/Invite";
@@ -14,51 +11,51 @@ import Input from "~/components/Input";
 import Modal from "~/components/Modal";
 import PaginatedList from "~/components/PaginatedList";
 import Text from "~/components/Text";
-import withStores from "~/components/withStores";
+import useBoolean from "~/hooks/useBoolean";
+import useCurrentTeam from "~/hooks/useCurrentTeam";
+import useCurrentUser from "~/hooks/useCurrentUser";
+import useDebouncedCallback from "~/hooks/useDebouncedCallback";
+import useStores from "~/hooks/useStores";
+import useToasts from "~/hooks/useToasts";
 import MemberListItem from "./components/MemberListItem";
 
-type Props = WithTranslation &
+type Props = {
-  RootStore & {
+  collection: Collection;
-    collection: Collection;
+};
-    onSubmit: () => void;
+
+function AddPeopleToCollection({ collection }: Props) {
+  const { memberships, users } = useStores();
+  const { showToast } = useToasts();
+  const user = useCurrentUser();
+  const team = useCurrentTeam();
+  const { t } = useTranslation();
+  const [
+    inviteModalOpen,
+    setInviteModalOpen,
+    setInviteModalClosed,
+  ] = useBoolean();
+  const [query, setQuery] = React.useState("");
+
+  const handleFilter = (ev: React.ChangeEvent<HTMLInputElement>) => {
+    setQuery(ev.target.value);
+    debouncedFetch(ev.target.value);
   };
 
-@observer
+  const debouncedFetch = useDebouncedCallback(
-class AddPeopleToCollection extends React.Component<Props> {
+    (query) =>
-  @observable
+      users.fetchPage({
-  inviteModalOpen = false;
+        query,
-
+      }),
-  @observable
+    250
-  query = "";
+  );
-
-  handleInviteModalOpen = () => {
-    this.inviteModalOpen = true;
-  };
-
-  handleInviteModalClose = () => {
-    this.inviteModalOpen = false;
-  };
-
-  handleFilter = (ev: React.ChangeEvent<HTMLInputElement>) => {
-    this.query = ev.target.value;
-    this.debouncedFetch();
-  };
-
-  debouncedFetch = debounce(() => {
-    this.props.users.fetchPage({
-      query: this.query,
-    });
-  }, 250);
-
-  handleAddUser = (user: User) => {
-    const { t } = this.props;
 
+  const handleAddUser = (user: User) => {
     try {
-      this.props.memberships.create({
+      memberships.create({
-        collectionId: this.props.collection.id,
+        collectionId: collection.id,
         userId: user.id,
       });
-      this.props.toasts.showToast(
+      showToast(
         t("{{ userName }} was added to the collection", {
           userName: user.name,
         }),
@@ -67,71 +64,63 @@ class AddPeopleToCollection extends React.Component<Props> {
         }
       );
     } catch (err) {
-      this.props.toasts.showToast(t("Could not add user"), {
+      showToast(t("Could not add user"), {
         type: "error",
       });
     }
   };
 
-  render() {
+  return (
-    const { users, collection, auth, t } = this.props;
+    <Flex column>
-    const { user, team } = auth;
+      <Text type="secondary">
-    if (!user || !team) {
+        {t("Need to add someone who’s not yet on the team yet?")}{" "}
-      return null;
+        <ButtonLink onClick={setInviteModalOpen}>
-    }
+          {t("Invite people to {{ teamName }}", {
-
+            teamName: team.name,
-    return (
+          })}
-      <Flex column>
+        </ButtonLink>
-        <Text type="secondary">
+        .
-          {t("Need to add someone who’s not yet on the team yet?")}{" "}
+      </Text>
-          <ButtonLink onClick={this.handleInviteModalOpen}>
+      <Input
-            {t("Invite people to {{ teamName }}", {
+        type="search"
-              teamName: team.name,
+        placeholder={`${t("Search by name")}…`}
-            })}
+        value={query}
-          </ButtonLink>
+        onChange={handleFilter}
-          .
+        label={t("Search people")}
-        </Text>
+        autoFocus
-        <Input
+        labelHidden
-          type="search"
+        flex
-          placeholder={`${t("Search by name")}…`}
+      />
-          value={this.query}
+      <PaginatedList
-          onChange={this.handleFilter}
+        empty={
-          label={t("Search people")}
+          query ? (
-          autoFocus
+            <Empty>{t("No people matching your search")}</Empty>
-          labelHidden
+          ) : (
-          flex
+            <Empty>{t("No people left to add")}</Empty>
-        />
+          )
-        <PaginatedList
+        }
-          empty={
+        items={users
-            this.query ? (
+          .notInCollection(collection.id, query)
-              <Empty>{t("No people matching your search")}</Empty>
+          .filter((member) => member.id !== user.id)}
-            ) : (
+        fetch={query ? undefined : users.fetchPage}
-              <Empty>{t("No people left to add")}</Empty>
+        renderItem={(item: User) => (
-            )
+          <MemberListItem
-          }
+            key={item.id}
-          items={users
+            user={item}
-            .notInCollection(collection.id, this.query)
+            onAdd={() => handleAddUser(item)}
-            .filter((member) => member.id !== user.id)}
+            canEdit
-          fetch={this.query ? undefined : users.fetchPage}
+          />
-          renderItem={(item: User) => (
+        )}
-            <MemberListItem
+      />
-              key={item.id}
+      <Modal
-              user={item}
+        title={t("Invite people")}
-              onAdd={() => this.handleAddUser(item)}
+        onRequestClose={setInviteModalClosed}
-              canEdit
+        isOpen={inviteModalOpen}
-            />
+      >
-          )}
+        <Invite onSubmit={setInviteModalClosed} />
-        />
+      </Modal>
-        <Modal
+    </Flex>
-          title={t("Invite people")}
+  );
-          onRequestClose={this.handleInviteModalClose}
-          isOpen={this.inviteModalOpen}
-        >
-          <Invite onSubmit={this.handleInviteModalClose} />
-        </Modal>
-      </Flex>
-    );
-  }
 }
 
-export default withTranslation()(withStores(AddPeopleToCollection));
+export default observer(AddPeopleToCollection);

app/scenes/CollectionPermissions/index.tsx

@@ -331,10 +331,7 @@ function CollectionPermissions({ collectionId }: Props) {
         onRequestClose={handleAddGroupModalClose}
         isOpen={addGroupModalOpen}
       >
-        <AddGroupsToCollection
+        <AddGroupsToCollection collection={collection} />
-          collection={collection}
-          onSubmit={handleAddGroupModalClose}
-        />
       </Modal>
       <Modal
         title={t(`Add people to {{ collectionName }}`, {
@@ -343,10 +340,7 @@ function CollectionPermissions({ collectionId }: Props) {
         onRequestClose={handleAddMemberModalClose}
         isOpen={addMemberModalOpen}
       >
-        <AddPeopleToCollection
+        <AddPeopleToCollection collection={collection} />
-          collection={collection}
-          onSubmit={handleAddMemberModalClose}
-        />
       </Modal>
     </Flex>
   );

app/scenes/Drafts.tsx

@@ -1,14 +1,12 @@
-import { observable } from "mobx";
 import { observer } from "mobx-react";
 import { EditIcon } from "outline-icons";
 import queryString from "query-string";
 import * as React from "react";
-import { WithTranslation, withTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
-import { RouteComponentProps } from "react-router-dom";
+import { useHistory, useLocation } from "react-router-dom";
 import styled from "styled-components";
-import RootStore from "~/stores/RootStore";
+import { DateFilter as TDateFilter } from "@shared/types";
 import CollectionFilter from "~/scenes/Search/components/CollectionFilter";
-import DateFilter from "~/scenes/Search/components/DateFilter";
 import { Action } from "~/components/Actions";
 import Empty from "~/components/Empty";
 import Flex from "~/components/Flex";
@@ -17,34 +15,27 @@ import InputSearchPage from "~/components/InputSearchPage";
 import PaginatedDocumentList from "~/components/PaginatedDocumentList";
 import Scene from "~/components/Scene";
 import Subheading from "~/components/Subheading";
-import withStores from "~/components/withStores";
+import useStores from "~/hooks/useStores";
 import NewDocumentMenu from "~/menus/NewDocumentMenu";
+import DateFilter from "./Search/components/DateFilter";
 
-type Props = WithTranslation & RouteComponentProps & RootStore;
+function Drafts() {
+  const { t } = useTranslation();
+  const { documents } = useStores();
+  const history = useHistory();
+  const location = useLocation();
+  const params = new URLSearchParams(location.search);
+  const collectionId = params.get("collectionId") || undefined;
+  const dateFilter = (params.get("dateFilter") || undefined) as TDateFilter;
 
-@observer
+  const handleFilterChange = (search: {
-class Drafts extends React.Component<Props> {
-  @observable
-  params: URLSearchParams = new URLSearchParams(this.props.location.search);
-
-  componentDidUpdate(prevProps: Props) {
-    if (prevProps.location.search !== this.props.location.search) {
-      this.handleQueryChange();
-    }
-  }
-
-  handleQueryChange = () => {
-    this.params = new URLSearchParams(this.props.location.search);
-  };
-
-  handleFilterChange = (search: {
     dateFilter?: string | null | undefined;
     collectionId?: string | null | undefined;
   }) => {
-    this.props.history.replace({
+    history.replace({
-      pathname: this.props.location.pathname,
+      pathname: location.pathname,
       search: queryString.stringify(
-        { ...queryString.parse(this.props.location.search), ...search },
+        { ...queryString.parse(location.search), ...search },
         {
           skipEmptyString: true,
         }
@@ -52,84 +43,66 @@ class Drafts extends React.Component<Props> {
     });
   };
 
-  get collectionId() {
+  const isFiltered = collectionId || dateFilter;
-    const id = this.params.get("collectionId");
+  const options = {
-    return id ? id : undefined;
+    dateFilter,
-  }
+    collectionId,
+  };
 
-  get dateFilter() {
+  return (
-    const id = this.params.get("dateFilter");
+    <Scene
-    return (id ? id : undefined) as
+      icon={<EditIcon color="currentColor" />}
-      | "day"
+      title={t("Drafts")}
-      | "week"
+      actions={
-      | "month"
+        <>
-      | "year"
+          <Action>
-      | undefined;
+            <InputSearchPage source="drafts" label={t("Search documents")} />
-  }
+          </Action>
+          <Action>
+            <NewDocumentMenu />
+          </Action>
+        </>
+      }
+    >
+      <Heading>{t("Drafts")}</Heading>
+      <Subheading sticky>
+        {t("Documents")}
+        <Filters>
+          <CollectionFilter
+            collectionId={collectionId}
+            onSelect={(collectionId) =>
+              handleFilterChange({
+                collectionId,
+              })
+            }
+          />
+          <DateFilter
+            dateFilter={dateFilter}
+            onSelect={(dateFilter) =>
+              handleFilterChange({
+                dateFilter,
+              })
+            }
+          />
+        </Filters>
+      </Subheading>
 
-  render() {
+      <PaginatedDocumentList
-    const { t } = this.props;
+        empty={
-    const isFiltered = this.collectionId || this.dateFilter;
+          <Empty>
-    const options = {
+            {isFiltered
-      dateFilter: this.dateFilter,
+              ? t("No documents found for your filters.")
-      collectionId: this.collectionId,
+              : t("You’ve not got any drafts at the moment.")}
-    };
+          </Empty>
-
-    return (
-      <Scene
-        icon={<EditIcon color="currentColor" />}
-        title={t("Drafts")}
-        actions={
-          <>
-            <Action>
-              <InputSearchPage source="drafts" label={t("Search documents")} />
-            </Action>
-            <Action>
-              <NewDocumentMenu />
-            </Action>
-          </>
         }
-      >
+        fetch={documents.fetchDrafts}
-        <Heading>{t("Drafts")}</Heading>
+        documents={documents.drafts(options)}
-        <Subheading sticky>
+        options={options}
-          {t("Documents")}
+        showParentDocuments
-          <Filters>
+        showCollection
-            <CollectionFilter
+      />
-              collectionId={this.collectionId}
+    </Scene>
-              onSelect={(collectionId) =>
+  );
-                this.handleFilterChange({
-                  collectionId,
-                })
-              }
-            />
-            <DateFilter
-              dateFilter={this.dateFilter}
-              onSelect={(dateFilter) =>
-                this.handleFilterChange({
-                  dateFilter,
-                })
-              }
-            />
-          </Filters>
-        </Subheading>
-
-        <PaginatedDocumentList
-          empty={
-            <Empty>
-              {isFiltered
-                ? t("No documents found for your filters.")
-                : t("You’ve not got any drafts at the moment.")}
-            </Empty>
-          }
-          fetch={this.props.documents.fetchDrafts}
-          documents={this.props.documents.drafts(options)}
-          options={options}
-          showParentDocuments
-          showCollection
-        />
-      </Scene>
-    );
-  }
 }
 
 const Filters = styled(Flex)`
@@ -145,4 +118,4 @@ const Filters = styled(Flex)`
   }
 `;
 
-export default withTranslation()(withStores(Drafts));
+export default observer(Drafts);

shared/i18n/locales/en_US/translation.json

@@ -168,6 +168,9 @@
   "You will receive an email when it's complete.": "You will receive an email when it's complete.",
   "A ZIP file containing the images, and documents in the Markdown format.": "A ZIP file containing the images, and documents in the Markdown format.",
   "A ZIP file containing the images, and documents as HTML files.": "A ZIP file containing the images, and documents as HTML files.",
+  "{{ count }} members": "{{ count }} members",
+  "{{ count }} members_plural": "{{ count }} members",
+  "Group members": "Group members",
   "Icon": "Icon",
   "Show menu": "Show menu",
   "Choose icon": "Choose icon",
@@ -537,7 +540,6 @@
   "Groups are for organizing your team. They work best when centered around a function or a responsibility — Support or Engineering for example.": "Groups are for organizing your team. They work best when centered around a function or a responsibility — Support or Engineering for example.",
   "You’ll be able to add people to the group next.": "You’ll be able to add people to the group next.",
   "Continue": "Continue",
-  "Group members": "Group members",
   "Recently viewed": "Recently viewed",
   "Created by me": "Created by me",
   "Weird, this shouldn’t ever be empty": "Weird, this shouldn’t ever be empty",