Refactor

Author: nygrenh

services/main-frontend/src/app/manage/course-plans/[id]/components/CoursePlanHubRedirect.tsx

@@ -0,0 +1,49 @@
+"use client"
+
+import { useQuery } from "@tanstack/react-query"
+import { useParams, useRouter } from "next/navigation"
+import { useEffect } from "react"
+
+import { getCourseDesignerPlanOptions } from "@/generated/api/@tanstack/react-query.generated"
+import {
+  manageCoursePlanScheduleRoute,
+  manageCoursePlanWorkspaceRoute,
+} from "@/shared-module/common/utils/routes"
+import { QueryResult } from "@/shared-module/components"
+import { optionalGeneratedQueryOptions } from "@/utils/optionalGeneratedQueryOptions"
+
+/** Redirects to schedule wizard or workspace based on plan status. */
+export default function CoursePlanHubRedirect() {
+  const params = useParams<{ id: string }>()
+  const router = useRouter()
+  const planId = params.id
+
+  const planQuery = useQuery(
+    optionalGeneratedQueryOptions({
+      value: planId,
+      isReady: (value): value is string => Boolean(value),
+      build: (value) =>
+        getCourseDesignerPlanOptions({
+          path: {
+            plan_id: value,
+          },
+        }),
+    }),
+  )
+
+  useEffect(() => {
+    if (!planQuery.data) {
+      return
+    }
+    const { plan } = planQuery.data
+    if (plan.status === "Draft" || plan.status === "Scheduling") {
+      router.replace(manageCoursePlanScheduleRoute(planId))
+      return
+    }
+    if (plan.status === "InProgress" || plan.status === "Completed") {
+      router.replace(manageCoursePlanWorkspaceRoute(planId))
+    }
+  }, [planQuery.data, planId, router])
+
+  return <QueryResult query={planQuery}>{() => null}</QueryResult>
+}

services/main-frontend/src/app/manage/course-plans/[id]/page.tsx

@@ -1,52 +1,8 @@
 "use client"
 
-import { useQuery } from "@tanstack/react-query"
-import { useParams, useRouter } from "next/navigation"
-import { useEffect } from "react"
+import CoursePlanHubRedirect from "./components/CoursePlanHubRedirect"
 
-import { getCourseDesignerPlanOptions } from "@/generated/api/@tanstack/react-query.generated"
 import { withSignedIn } from "@/shared-module/common/contexts/LoginStateContext"
-import {
-  manageCoursePlanScheduleRoute,
-  manageCoursePlanWorkspaceRoute,
-} from "@/shared-module/common/utils/routes"
 import withErrorBoundary from "@/shared-module/common/utils/withErrorBoundary"
-import { QueryResult } from "@/shared-module/components"
-import { optionalGeneratedQueryOptions } from "@/utils/optionalGeneratedQueryOptions"
-
-function CoursePlanHubRedirect() {
-  const params = useParams<{ id: string }>()
-  const router = useRouter()
-  const planId = params.id
-
-  const planQuery = useQuery(
-    optionalGeneratedQueryOptions({
-      value: planId,
-      isReady: (value): value is string => Boolean(value),
-      build: (value) =>
-        getCourseDesignerPlanOptions({
-          path: {
-            plan_id: value,
-          },
-        }),
-    }),
-  )
-
-  useEffect(() => {
-    if (!planQuery.data) {
-      return
-    }
-    const { plan } = planQuery.data
-    if (plan.status === "Draft" || plan.status === "Scheduling") {
-      router.replace(manageCoursePlanScheduleRoute(planId))
-      return
-    }
-    if (plan.status === "InProgress" || plan.status === "Completed") {
-      router.replace(manageCoursePlanWorkspaceRoute(planId))
-    }
-  }, [planQuery.data, planId, router])
-
-  return <QueryResult query={planQuery}>{() => null}</QueryResult>
-}
 
 export default withErrorBoundary(withSignedIn(CoursePlanHubRedirect))

services/main-frontend/src/app/manage/course-plans/[id]/schedule/components/MonthBlock.tsx

@@ -1,40 +1,13 @@
 "use client"
 
 import { css } from "@emotion/css"
-import {
-  Berries,
-  Cabin,
-  Campfire,
-  CandleLight,
-  Leaf,
-  MapleLeaf,
-  MistyCloud,
-  PineTree,
-  Sleigh,
-  Sunrise,
-  WaterLiquid,
-  WinterSnowflake,
-} from "@vectopus/atlas-icons-react"
 import { format } from "date-fns"
 import { motion } from "motion/react"
 import { forwardRef } from "react"
 
 import { StageMonth } from "../scheduleMappers"
 
-const MONTH_ICONS = [
-  WinterSnowflake,
-  Sleigh,
-  Sunrise,
-  WaterLiquid,
-  Leaf,
-  Campfire,
-  Cabin,
-  Berries,
-  MapleLeaf,
-  MistyCloud,
-  CandleLight,
-  PineTree,
-] as const
+import { COURSE_PLAN_MONTH_ICONS } from "@/app/manage/course-plans/monthIcons"
 
 const stageMonthBlockStyles = css`
   min-width: 84px;
@@ -81,7 +54,7 @@ const MonthBlock = forwardRef<HTMLDivElement, MonthBlockProps>(function MonthBlo
   { month, reduceMotion, layoutId },
   ref,
 ) {
-  const MonthIcon = MONTH_ICONS[month.date.getMonth()]
+  const MonthIcon = COURSE_PLAN_MONTH_ICONS[month.date.getMonth()]
 
   return (
     <motion.div

services/main-frontend/src/app/manage/course-plans/[id]/schedule/components/steps/NameStep.tsx

@@ -1,10 +1,10 @@
 "use client"
 
 import { css } from "@emotion/css"
-import { useEffect } from "react"
-import { useForm } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 
+import { useWizardTextField } from "../../hooks/useWizardStepFields"
+
 import { baseTheme } from "@/shared-module/common/styles"
 import { Button, TextField } from "@/shared-module/components"
 
@@ -35,23 +35,8 @@ interface NameStepProps {
 
 export default function NameStep({ planName, onPlanNameChange, onContinue }: NameStepProps) {
   const { t } = useTranslation()
-  const { control, setValue, watch } = useForm<{ planName: string }>({
-    defaultValues: { planName },
-  })
-
-  useEffect(() => {
-    setValue("planName", planName)
-  }, [planName, setValue])
-
-  useEffect(() => {
-    const subscription = watch((values, meta) => {
-      if (meta.name === "planName") {
-        onPlanNameChange(values.planName ?? "")
-      }
-    })
-
-    return () => subscription.unsubscribe()
-  }, [onPlanNameChange, watch])
+  // eslint-disable-next-line i18next/no-literal-string
+  const { control, fieldName } = useWizardTextField("planName", planName, onPlanNameChange)
 
   return (
     <>
@@ -60,8 +45,7 @@ export default function NameStep({ planName, onPlanNameChange, onContinue }: Nam
       <div className={fieldStyles}>
         <TextField
           id="course-plan-name"
-          // eslint-disable-next-line i18next/no-literal-string
-          name="planName"
+          name={fieldName}
           control={control}
           label={t("course-plans-plan-name-label")}
           placeholder={t("course-plans-untitled-plan")}

services/main-frontend/src/app/manage/course-plans/[id]/schedule/components/steps/SetupStep.tsx

@@ -1,10 +1,11 @@
 "use client"
 
 import { css } from "@emotion/css"
-import { useEffect, useMemo } from "react"
-import { useForm } from "react-hook-form"
+import { useMemo } from "react"
 import { useTranslation } from "react-i18next"
 
+import { useSetupStepFields } from "../../hooks/useWizardStepFields"
+
 import { CourseDesignerCourseSize } from "@/generated/api/types.generated"
 import { Button, Select, YearMonthField } from "@/shared-module/components"
 
@@ -50,14 +51,12 @@ export default function SetupStep({
   onContinue,
 }: SetupStepProps) {
   const { t } = useTranslation()
-  const { control, setValue, watch } = useForm<{
-    courseSize: CourseDesignerCourseSize
-    startsOnMonth: string
-  }>({
-    defaultValues: {
-      courseSize,
-      startsOnMonth,
-    },
+
+  const { control } = useSetupStepFields({
+    courseSize,
+    startsOnMonth,
+    onCourseSizeChange,
+    onStartsOnMonthChange,
   })
 
   const courseSizeOptions = useMemo(
@@ -72,27 +71,6 @@ export default function SetupStep({
     [t],
   )
 
-  useEffect(() => {
-    setValue("courseSize", courseSize)
-  }, [courseSize, setValue])
-
-  useEffect(() => {
-    setValue("startsOnMonth", startsOnMonth)
-  }, [startsOnMonth, setValue])
-
-  useEffect(() => {
-    const subscription = watch((values, meta) => {
-      if (meta.name === "courseSize" && values.courseSize) {
-        onCourseSizeChange(values.courseSize)
-      }
-      if (meta.name === "startsOnMonth") {
-        onStartsOnMonthChange(values.startsOnMonth ?? "")
-      }
-    })
-
-    return () => subscription.unsubscribe()
-  }, [onCourseSizeChange, onStartsOnMonthChange, watch])
-
   return (
     <>
       <h2>{t("course-plans-wizard-step-size-and-date")}</h2>

services/main-frontend/src/app/manage/course-plans/[id]/schedule/hooks/useWizardStepFields.ts

@@ -0,0 +1,70 @@
+import { useEffect } from "react"
+import { useForm } from "react-hook-form"
+
+/** Keeps a single RHF text field in sync with external wizard controller state. */
+export function useWizardTextField(
+  fieldName: string,
+  externalValue: string,
+  onExternalChange: (value: string) => void,
+) {
+  const { control, setValue, watch } = useForm<Record<string, string>>({
+    defaultValues: { [fieldName]: externalValue },
+  })
+
+  useEffect(() => {
+    setValue(fieldName, externalValue)
+  }, [externalValue, fieldName, setValue])
+
+  useEffect(() => {
+    const subscription = watch((values, meta) => {
+      if (meta.name === fieldName) {
+        onExternalChange(values[fieldName] ?? "")
+      }
+    })
+    return () => subscription.unsubscribe()
+  }, [fieldName, onExternalChange, watch])
+
+  return { control, fieldName }
+}
+
+import type { CourseDesignerCourseSize } from "@/generated/api/types.generated"
+
+type SetupStepFormValues = {
+  courseSize: CourseDesignerCourseSize
+  startsOnMonth: string
+}
+
+/** Keeps setup-step RHF fields in sync with the wizard controller. */
+export function useSetupStepFields(options: {
+  courseSize: CourseDesignerCourseSize
+  startsOnMonth: string
+  onCourseSizeChange: (value: CourseDesignerCourseSize) => void
+  onStartsOnMonthChange: (value: string) => void
+}) {
+  const { courseSize, startsOnMonth, onCourseSizeChange, onStartsOnMonthChange } = options
+  const { control, setValue, watch } = useForm<SetupStepFormValues>({
+    defaultValues: { courseSize, startsOnMonth },
+  })
+
+  useEffect(() => {
+    setValue("courseSize", courseSize)
+  }, [courseSize, setValue])
+
+  useEffect(() => {
+    setValue("startsOnMonth", startsOnMonth)
+  }, [setValue, startsOnMonth])
+
+  useEffect(() => {
+    const subscription = watch((formValues, meta) => {
+      if (meta.name === "courseSize" && formValues.courseSize) {
+        onCourseSizeChange(formValues.courseSize)
+      }
+      if (meta.name === "startsOnMonth") {
+        onStartsOnMonthChange(formValues.startsOnMonth ?? "")
+      }
+    })
+    return () => subscription.unsubscribe()
+  }, [onCourseSizeChange, onStartsOnMonthChange, watch])
+
+  return { control }
+}