chore: Move to Typescript (#2783)

This PR moves the entire project to Typescript. Due to the ~1000 ignores this will lead to a messy codebase for a while, but the churn is worth it – all of those ignore comments are places that were never type-safe previously. closes #1282
2021-11-29 06:40:55 -08:00
parent 25ccfb5d04
commit 15b1069bcc
1017 changed files with 17410 additions and 54942 deletions
--- a/app/scenes/CollectionPermissions/components/CollectionGroupMemberListItem.tsx
+++ b/app/scenes/CollectionPermissions/components/CollectionGroupMemberListItem.tsx
@@ -0,0 +1,82 @@
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import CollectionGroupMembership from "~/models/CollectionGroupMembership";
+import Group from "~/models/Group";
+import GroupListItem from "~/components/GroupListItem";
+import InputSelect, { Props as SelectProps } from "~/components/InputSelect";
+import CollectionGroupMemberMenu from "~/menus/CollectionGroupMemberMenu";
+
+type Props = {
+  group: Group;
+  collectionGroupMembership: CollectionGroupMembership | null | undefined;
+  onUpdate: (permission: string) => void;
+  onRemove: () => void;
+};
+
+const CollectionGroupMemberListItem = ({
+  group,
+  collectionGroupMembership,
+  onUpdate,
+  onRemove,
+}: Props) => {
+  const { t } = useTranslation();
+  const PERMISSIONS = React.useMemo(
+    () => [
+      {
+        label: t("View only"),
+        value: "read",
+      },
+      {
+        label: t("View and edit"),
+        value: "read_write",
+      },
+    ],
+    [t]
+  );
+
+  return (
+    <GroupListItem
+      group={group}
+      showAvatar
+      renderActions={({ openMembersModal }) => (
+        <>
+          <Select
+            label={t("Permissions")}
+            options={PERMISSIONS}
+            value={
+              collectionGroupMembership
+                ? collectionGroupMembership.permission
+                : undefined
+            }
+            onChange={onUpdate}
+            ariaLabel={t("Permissions")}
+            labelHidden
+            nude
+          />
+          <Spacer />
+          <CollectionGroupMemberMenu
+            onMembers={openMembersModal}
+            onRemove={onRemove}
+          />
+        </>
+      )}
+    />
+  );
+};
+
+const Spacer = styled.div`
+  width: 8px;
+`;
+
+const Select = styled(InputSelect)`
+  margin: 0;
+  font-size: 14px;
+  border-color: transparent;
+
+  select {
+    margin: 0;
+  }
+` as React.ComponentType<SelectProps>;
+
+export default CollectionGroupMemberListItem;