Pull out ParaSelectionStep from BenchmarkAssignmentModal

We refactored BenchmarkAssignmentModal to separate out the para selection step. This will allow for more modular frontend unit testing.
sfbrigade · Dec 19, 2024 · 526bc66 · 526bc66
1 parent bebb8c3
commit 526bc66
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 50 deletions.
diff --git a/src/client/lib/trpc.ts b/src/client/lib/trpc.ts
@@ -1,4 +1,12 @@
-import { createTRPCReact } from "@trpc/react-query";
+import {
+  createTRPCReact,
+  type inferReactQueryProcedureOptions,
+} from "@trpc/react-query";
+import type { inferRouterInputs, inferRouterOutputs } from "@trpc/server";
 import { AppRouter } from "@/backend/routers/_app";
 
+export type ReactQueryOptions = inferReactQueryProcedureOptions<AppRouter>;
+export type RouterInputs = inferRouterInputs<AppRouter>;
+export type RouterOutputs = inferRouterOutputs<AppRouter>;
+
 export const trpc = createTRPCReact<AppRouter>();
diff --git a/src/components/benchmarks/BenchmarkAssignmentModal.tsx b/src/components/benchmarks/BenchmarkAssignmentModal.tsx
@@ -4,39 +4,25 @@ import {
   Dialog,
   DialogTitle,
   Button,
-  List,
-  ListItem,
   DialogContent,
   DialogActions,
 } from "@mui/material";
 import { useState, useRef } from "react";
-import $benchmark from "./BenchmarkAssignmentModal.module.css";
-import $button from "@/components/design_system/button/Button.module.css";
 
 import {
   AssignmentDuration,
   DurationSelectionStep,
 } from "./Duration-Selection-Step";
-import DS_Checkbox from "../design_system/checkbox/Checkbox";
+import $button from "@/components/design_system/button/Button.module.css";
+import $benchmark from "./BenchmarkAssignmentModal.module.css";
+import { ParaSelectionStep } from "@/components/benchmarks/ParaSelectionStep";
 
 interface BenchmarkAssignmentModalProps {
   isOpen: boolean;
   onClose: () => void;
   benchmark_id: string;
 }
 
-interface ParaProps {
-  role: string;
-  first_name: string;
-  last_name: string;
-  email: string;
-  para_id: string;
-  case_manager_id: string;
-  user_id: string;
-  email_verified_at: Date | null;
-  image_url: string | null;
-}
-
 const STEPS = ["PARA_SELECTION", "DURATION_SELECTION"];
 type Step = (typeof STEPS)[number];
 
@@ -143,38 +129,11 @@ export const BenchmarkAssignmentModal = (
           ))}
         </Box>
         {currentModalSelection === "PARA_SELECTION" && (
-          <Box>
-            <p>Select one or more paras:</p>
-            <Box
-              sx={{
-                my: 2,
-                maxHeight: "10rem",
-                overflow: "auto",
-                border: "1px solid var(--grey-70)",
-                borderRadius: 1,
-              }}
-            >
-              <List sx={{ p: 0 }} className={$benchmark.staffListItemText}>
-                {myParas
-                  ?.filter((para): para is ParaProps => para !== undefined)
-                  .map((para) => (
-                    <ListItem
-                      key={para.user_id}
-                      sx={{
-                        px: 0,
-                        py: 0,
-                      }}
-                    >
-                      <DS_Checkbox
-                        onClickAction={handleParaToggle(para.user_id)}
-                        text={`${para.first_name} ${para.last_name}`}
-                        checked={selectedParaIds.includes(para.user_id)}
-                      />
-                    </ListItem>
-                  ))}
-              </List>
-            </Box>
-          </Box>
+          <ParaSelectionStep
+            myParas={myParas}
+            selectedParaIds={selectedParaIds}
+            handleParaToggle={handleParaToggle}
+          />
         )}
         {currentModalSelection === "DURATION_SELECTION" && (
           <Box>

diff --git a/src/components/benchmarks/ParaSelectionStep.tsx b/src/components/benchmarks/ParaSelectionStep.tsx
@@ -0,0 +1,51 @@
+import { Box, List, ListItem } from "@mui/material";
+import $benchmark from "./BenchmarkAssignmentModal.module.css";
+import { RouterOutputs } from "@/client/lib/trpc";
+import DS_Checkbox from "@/components/design_system/checkbox/Checkbox";
+
+interface ParaSelectionStepProps {
+  myParas: RouterOutputs["case_manager"]["getMyParas"] | undefined;
+  selectedParaIds: string[];
+  handleParaToggle: (paraId: string) => () => void;
+}
+
+export const ParaSelectionStep = ({
+  myParas,
+  selectedParaIds,
+  handleParaToggle,
+}: ParaSelectionStepProps) => {
+  return (
+    <Box>
+      <p>Select one or more paras:</p>
+      <Box
+        sx={{
+          my: 2,
+          maxHeight: "10rem",
+          overflow: "auto",
+          border: "1px solid var(--grey-70)",
+          borderRadius: 1,
+        }}
+      >
+        <List sx={{ p: 0 }} className={$benchmark.staffListItemText}>
+          {myParas
+            ?.filter((para) => para !== undefined)
+            .map((para) => (
+              <ListItem
+                key={para.user_id}
+                sx={{
+                  px: 0,
+                  py: 0,
+                }}
+              >
+                <DS_Checkbox
+                  onClickAction={handleParaToggle(para.user_id)}
+                  text={`${para.first_name} ${para.last_name}`}
+                  checked={selectedParaIds.includes(para.user_id)}
+                />
+              </ListItem>
+            ))}
+        </List>
+      </Box>
+    </Box>
+  );
+};