Fix #369: Fixed Javascript console warnings on Create Benchmark page (#…

…385)

Fixed warnings related to handling null for textarea values, custom Stepper icons.

src/pages/students/[student_id]/goals/[goal_id]/create.tsx

@@ -7,6 +7,7 @@ import {
   Box,
   Stack,
   Step,
+  StepIconProps,
   StepLabel,
   Stepper,
   TextField,
@@ -27,6 +28,16 @@ interface BenchmarkFormEntry {
   [key: string]: string | number | "";
 }
 
+const BenchmarkStepperIcon = (stepIconProps: StepIconProps) => {
+  const { completed = false } = stepIconProps;
+
+  if (completed) {
+    return <CheckCircle />;
+  } else {
+    return <TripOriginRounded />;
+  }
+};
+
 const CreateBenchmarkPage = () => {
   const router = useRouter();
   const { data: goal } = trpc.iep.getGoal.useQuery(
@@ -176,11 +187,7 @@ const CreateBenchmarkPage = () => {
           multiline
           rows={4}
           name={field.name}
-          value={
-            benchmarkFormState[field.name] !== ""
-              ? benchmarkFormState[field.name]
-              : null
-          }
+          value={benchmarkFormState[field.name] || ""}
           onChange={(e: ChangeEvent) =>
             setBenchmarkFormState({
               ...benchmarkFormState,
@@ -218,17 +225,11 @@ const CreateBenchmarkPage = () => {
           Create Benchmark
         </Typography>
         <Stepper activeStep={viewState} alternativeLabel connector={null}>
-          {steps.map((label, index) => (
+          {steps.map((label) => (
             <Step key={label}>
-              {index !== steps.length && (
-                <StepLabel
-                  StepIconComponent={
-                    index < viewState ? CheckCircle : TripOriginRounded
-                  }
-                >
-                  {label}
-                </StepLabel>
-              )}
+              <StepLabel StepIconComponent={BenchmarkStepperIcon}>
+                {label}
+              </StepLabel>
             </Step>
           ))}
         </Stepper>
@@ -263,11 +264,7 @@ const CreateBenchmarkPage = () => {
                       required
                       type="number"
                       name="baseline_level"
-                      value={
-                        benchmarkFormState["baseline_level"] !== ""
-                          ? benchmarkFormState["baseline_level"]
-                          : ""
-                      }
+                      value={benchmarkFormState["baseline_level"] || ""}
                       onChange={(e: ChangeEvent) =>
                         setBenchmarkFormState({
                           ...benchmarkFormState,
@@ -283,11 +280,7 @@ const CreateBenchmarkPage = () => {
                       required
                       type="number"
                       name="target_level"
-                      value={
-                        benchmarkFormState["target_level"] !== ""
-                          ? benchmarkFormState["target_level"]
-                          : ""
-                      }
+                      value={benchmarkFormState["target_level"] || ""}
                       onChange={(e: ChangeEvent) =>
                         setBenchmarkFormState({
                           ...benchmarkFormState,
@@ -302,11 +295,7 @@ const CreateBenchmarkPage = () => {
                     type="number"
                     name="attempts_per_trial"
                     required
-                    value={
-                      benchmarkFormState["attempts_per_trial"] !== ""
-                        ? benchmarkFormState["attempts_per_trial"]
-                        : ""
-                    }
+                    value={benchmarkFormState["attempts_per_trial"] || ""}
                     onChange={(e: ChangeEvent) =>
                       setBenchmarkFormState({
                         ...benchmarkFormState,
@@ -319,11 +308,7 @@ const CreateBenchmarkPage = () => {
                     type="number"
                     name="number_of_trials"
                     required
-                    value={
-                      benchmarkFormState["number_of_trials"] !== ""
-                        ? benchmarkFormState["number_of_trials"]
-                        : ""
-                    }
+                    value={benchmarkFormState["number_of_trials"] || ""}
                     onChange={(e: ChangeEvent) =>
                       setBenchmarkFormState({
                         ...benchmarkFormState,