Refactor

Author: nygrenh

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

@@ -14,6 +14,7 @@ import withErrorBoundary from "@/shared-module/common/utils/withErrorBoundary"
 import { QueryResult } from "@/shared-module/components"
 import { optionalGeneratedQueryOptions } from "@/utils/optionalGeneratedQueryOptions"
 
+/** Redirects to schedule wizard or workspace based on plan status. */
 function CoursePlanHubRedirect() {
   const params = useParams<{ id: string }>()
   const router = useRouter()

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/ScheduleWizardPage.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/NameStep.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>