chore(superadmin): use org selector

politics-rewired · Aug 6, 2023 · 0523e72 · 0523e72
1 parent 57f6eaf
commit 0523e72
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 42 deletions.
diff --git a/src/components/OrganizationSelector.tsx b/src/components/OrganizationSelector.tsx
@@ -6,8 +6,9 @@ import { useGetOrganizationsQuery } from "@spoke/spoke-codegen";
 import React, { useMemo, useState } from "react";
 
 export interface OrganizationSelectorProps {
-  orgId: string;
+  orgId?: string;
   onChange: (selectedOrgId: string) => Promise<void> | void;
+  style?: React.CSSProperties;
 }
 
 export const OrganizationSelector: React.FC<OrganizationSelectorProps> = (
@@ -43,14 +44,9 @@ export const OrganizationSelector: React.FC<OrganizationSelectorProps> = (
       onInputChange={(_event, newValue) => {
         setOrgInput(newValue);
       }}
-      renderInput={(params) => (
-        <TextField
-          {...params}
-          label="Organization"
-          helperText="Which organization?"
-        />
-      )}
+      renderInput={(params) => <TextField {...params} label="Organization" />}
       onChange={handleOrgSelected}
+      style={props.style ?? {}}
     />
   );
 };

diff --git a/src/containers/SuperAdminPeople.tsx b/src/containers/SuperAdminPeople.tsx
@@ -1,47 +1,22 @@
-import FormControl from "@material-ui/core/FormControl";
-import InputLabel from "@material-ui/core/InputLabel";
-import MenuItem from "@material-ui/core/MenuItem";
-import Select from "@material-ui/core/Select";
-import type { Organization } from "@spoke/spoke-codegen";
-import { useGetOrganizationsQuery } from "@spoke/spoke-codegen";
 import React, { useState } from "react";
 
+import OrganizationSelector from "../components/OrganizationSelector";
 import AdminPeople from "./AdminPeople";
 
 const SuperAdminPeople: React.FC = (_props) => {
   const [organizationId, setOrganizationId] = useState<string>();
-  const {
-    data: organizationsData,
-    loading: orgsLoading
-  } = useGetOrganizationsQuery();
-  if (orgsLoading) {
-    return <div>"Loading..."</div>;
-  }
-
-  const handleOrgChanged = (event: React.ChangeEvent<{ value: string }>) => {
-    setOrganizationId(event.target.value);
+  const handleOrgChanged = (selectedOrgId: string) => {
+    setOrganizationId(selectedOrgId);
   };
 
-  const organizations = organizationsData?.organizations ?? [];
   return (
-    <div>
-      <FormControl>
-        <InputLabel id="organization-label">Organization</InputLabel>
-        <Select
-          style={{ width: 300 }}
-          labelId="organization-label"
-          value={organizationId}
-          onChange={handleOrgChanged}
-        >
-          {organizations.map((org: Organization) => (
-            <MenuItem key={org.id} value={org.id}>
-              {org.name}
-            </MenuItem>
-          ))}
-        </Select>
-      </FormControl>
+    <>
+      <OrganizationSelector
+        onChange={handleOrgChanged}
+        style={{ width: 300 }}
+      />
       {organizationId && <AdminPeople organizationId={organizationId} />}
-    </div>
+    </>
   );
 };