From 8d48ec476963acb2232fd203d951fac96b176b64 Mon Sep 17 00:00:00 2001
From: Dan McGrath <daniel.mcgrath9@gmail.com>
Date: Tue, 11 Feb 2025 22:00:26 -0500
Subject: [PATCH] refactor(mileage-builder): break down large component file

---
 src/components/mileage-builder/const.ts       | 35 ++++++++++
 .../mileage-builder/mileage-builder.tsx       | 66 +++----------------
 src/components/mileage-builder/types.ts       |  8 +++
 src/components/mileage-builder/utils.ts       |  9 +++
 4 files changed, 62 insertions(+), 56 deletions(-)
 create mode 100644 src/components/mileage-builder/const.ts
 create mode 100644 src/components/mileage-builder/types.ts
 create mode 100644 src/components/mileage-builder/utils.ts

diff --git a/src/components/mileage-builder/const.ts b/src/components/mileage-builder/const.ts
new file mode 100644
index 0000000..7c7646e
--- /dev/null
+++ 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
index e95b1f4..9ec4d7d 100644
--- 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
new file mode 100644
index 0000000..9b18716
--- /dev/null
+++ 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
new file mode 100644
index 0000000..90da6a1
--- /dev/null
+++ 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);
+};