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
-class GroupListItem extends React.Component<Props> {
-  @observable
-  membersModalOpen = false;
+function GroupListItem({ group, showFacepile, renderActions }: Props) {
+  const { groupMemberships } = useStores();
+  const { t } = useTranslation();
+  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 = () => {
-    this.membersModalOpen = true;
-  };
-
-  handleMembersModalClose = () => {
-    this.membersModalOpen = false;
-  };
-
-  render() {
-    const { group, groupMemberships, showFacepile, renderActions } = this.props;
-    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;
-
-    return (
-      <>
-        <ListItem
-          image={
-            <Image>
-              <GroupIcon size={24} />
-            </Image>
-          }
-          title={
-            <Title onClick={this.handleMembersModalOpen}>{group.name}</Title>
-          }
-          subtitle={
-            <>
-              {memberCount} member{memberCount === 1 ? "" : "s"}
-            </>
-          }
-          actions={
-            <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>
-      </>
-    );
-  }
+  return (
+    <>
+      <ListItem
+        image={
+          <Image>
+            <GroupIcon size={24} />
+          </Image>
+        }
+        title={<Title onClick={setMembersModalOpen}>{group.name}</Title>}
+        subtitle={t("{{ count }} members", { count: memberCount })}
+        actions={
+          <Flex align="center" gap={8}>
+            {showFacepile && (
+              <NudeButton
+                width="auto"
+                height="auto"
+                onClick={setMembersModalOpen}
+              >
+                <Facepile users={users} overflow={overflow} />
+              </NudeButton>
+            )}
+            {renderActions({
+              openMembersModal: setMembersModalOpen,
+            })}
+          </Flex>
+        }
+      />
+      <Modal
+        title={t("Group members")}
+        onRequestClose={setMembersModalClosed}
+        isOpen={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);