refactor(mileage-builder): break down large component file

djm158 · Feb 12, 2025 · 8d48ec4 · 8d48ec4
1 parent 09d58b4
commit 8d48ec4
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 56 deletions.
diff --git a/src/components/mileage-builder/const.ts b/src/components/mileage-builder/const.ts
@@ -0,0 +1,35 @@
+export const DAY_ITEMS: { label: string; value: Day }[] = [
+  {
+    label: "Monday",
+    value: "Monday",
+  },
+  {
+    label: "Tuesday",
+    value: "Tuesday",
+  },
+  {
+    label: "Wednesday",
+    value: "Wednesday",
+  },
+  {
+    label: "Thursday",
+    value: "Thursday",
+  },
+  {
+    label: "Friday",
+    value: "Friday",
+  },
+  {
+    label: "Saturday",
+    value: "Saturday",
+  },
+  {
+    label: "Sunday",
+    value: "Sunday",
+  },
+];
+
+export const DEFAULT_INCREASE_PERCENTAGE = "10";
+export const DEFAULT_RECOVERY_WEEK_PERCENTAGE = "80";
+export const DEFAULT_RECOVERY_WEEK_FREQUENCY = "3";
+export const DEFAULT_LONG_RUN_PERCENTAGE = "30";
diff --git a/src/components/mileage-builder/mileage-builder.tsx b/src/components/mileage-builder/mileage-builder.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import {
@@ -20,62 +21,15 @@ import {
   TableRow,
 } from "@/components/ui/table";
 
-import { Checkbox } from "../ui/checkbox";
-
-const DAY_ITEMS: { label: string; value: Day }[] = [
-  {
-    label: "Monday",
-    value: "Monday",
-  },
-  {
-    label: "Tuesday",
-    value: "Tuesday",
-  },
-  {
-    label: "Wednesday",
-    value: "Wednesday",
-  },
-  {
-    label: "Thursday",
-    value: "Thursday",
-  },
-  {
-    label: "Friday",
-    value: "Friday",
-  },
-  {
-    label: "Saturday",
-    value: "Saturday",
-  },
-  {
-    label: "Sunday",
-    value: "Sunday",
-  },
-];
-
-type Day =
-  | "Monday"
-  | "Tuesday"
-  | "Wednesday"
-  | "Thursday"
-  | "Friday"
-  | "Saturday"
-  | "Sunday";
-
-const formatMileage = (mileage: number, roundDecimals: boolean) => {
-  if (mileage === 0) {
-    return "Rest";
-  }
-  if (roundDecimals) {
-    return Math.round(mileage);
-  }
-  return mileage.toFixed(2);
-};
-
-const DEFAULT_INCREASE_PERCENTAGE = "10";
-const DEFAULT_RECOVERY_WEEK_PERCENTAGE = "80";
-const DEFAULT_RECOVERY_WEEK_FREQUENCY = "3";
-const DEFAULT_LONG_RUN_PERCENTAGE = "30";
+import {
+  DEFAULT_INCREASE_PERCENTAGE,
+  DEFAULT_LONG_RUN_PERCENTAGE,
+  DEFAULT_RECOVERY_WEEK_FREQUENCY,
+  DEFAULT_RECOVERY_WEEK_PERCENTAGE,
+  DAY_ITEMS,
+} from "./const";
+import { Day } from "./types";
+import { formatMileage } from "./utils";
 
 export const MileageBuilder = () => {
   const [baseMileage, setBaseMileage] = useState("");

diff --git a/src/components/mileage-builder/types.ts b/src/components/mileage-builder/types.ts
@@ -0,0 +1,8 @@
+export type Day =
+  | "Monday"
+  | "Tuesday"
+  | "Wednesday"
+  | "Thursday"
+  | "Friday"
+  | "Saturday"
+  | "Sunday";
diff --git a/src/components/mileage-builder/utils.ts b/src/components/mileage-builder/utils.ts
@@ -0,0 +1,9 @@
+export const formatMileage = (mileage: number, roundDecimals: boolean) => {
+  if (mileage === 0) {
+    return "Rest";
+  }
+  if (roundDecimals) {
+    return Math.round(mileage);
+  }
+  return mileage.toFixed(2);
+};