✨ Add title to Plan

EditPlan.tsx

@@ -14,10 +14,12 @@ import { PlanPageParams } from "./plan-page-params";
 import StackHeader from "./StackHeader";
 import Switch from "./Switch";
 import { DAYS } from "./time";
+import AppInput from "./AppInput";
 
 export default function EditPlan() {
   const { params } = useRoute<RouteProp<PlanPageParams, "EditPlan">>();
   const { plan } = params;
+  const [title, setTitle] = useState<string>(plan?.title);
   const [days, setDays] = useState<string[]>(
     plan.days ? plan.days.split(",") : []
   );
@@ -45,8 +47,13 @@ export default function EditPlan() {
     if (!days || !workouts) return;
     const newWorkouts = workouts.filter((workout) => workout).join(",");
     const newDays = days.filter((day) => day).join(",");
-    await planRepo.save({ days: newDays, workouts: newWorkouts, id: plan.id });
-  }, [days, workouts, plan]);
+    await planRepo.save({
+      title: title,
+      days: newDays,
+      workouts: newWorkouts,
+      id: plan.id,
+    });
+  }, [title, days, workouts, plan]);
 
   const toggleWorkout = useCallback(
     (on: boolean, name: string) => {
@@ -96,6 +103,11 @@ export default function EditPlan() {
       </StackHeader>
       <View style={{ padding: PADDING, flex: 1 }}>
         <ScrollView style={{ flex: 1 }}>
+          <AppInput
+            label="Title"
+            value={title}
+            onChangeText={(value) => setTitle(value)}
+          />
           <Text style={styles.title}>Days</Text>
           {DAYS.map((day) => (
             <Switch

PlanItem.tsx

@@ -56,28 +56,37 @@ export default function PlanItem({
     setIds([item.id]);
   }, [ids.length, item.id, setIds]);
 
+  const currentDays = days.map((day, index) => (
+    <Text key={day}>
+      {day === today ? (
+        <Text
+          style={{
+            fontWeight: "bold",
+            textDecorationLine: "underline",
+          }}
+        >
+          {day}
+        </Text>
+      ) : (
+        day
+      )}
+      {index === days.length - 1 ? "" : ", "}
+    </Text>
+  ));
+
   const title = useMemo(
     () =>
-      days.map((day, index) => (
-        <Text key={day}>
-          {day === today ? (
-            <Text
-              style={{ fontWeight: "bold", textDecorationLine: "underline" }}
-            >
-              {day}
-            </Text>
-          ) : (
-            day
-          )}
-          {index === days.length - 1 ? "" : ", "}
-        </Text>
-      )),
-    [days, today]
+      item.title ? (
+        <Text style={{ fontWeight: "bold" }}>{item.title}</Text>
+      ) : (
+        currentDays
+      ),
+    [item.title, currentDays]
   );
 
   const description = useMemo(
-    () => item.workouts.replace(/,/g, ", "),
-    [item.workouts]
+    () => (item.title ? currentDays : item.workouts.replace(/,/g, ", ")),
+    [item.title, currentDays, item.workouts]
   );
 
   const backgroundColor = useMemo(() => {

PlanList.tsx

@@ -25,6 +25,7 @@ export default function PlanList() {
     planRepo
       .find({
         where: [
+          { title: Like(`%${value.trim()}%`) },
           { days: Like(`%${value.trim()}%`) },
           { workouts: Like(`%${value.trim()}%`) },
         ],
@@ -54,7 +55,9 @@ export default function PlanList() {
   );
 
   const onAdd = () =>
-    navigation.navigate("EditPlan", { plan: { days: "", workouts: "" } });
+    navigation.navigate("EditPlan", {
+      plan: { title: "", days: "", workouts: "" },
+    });
 
   const edit = useCallback(async () => {
     const plan = await planRepo.findOne({ where: { id: ids.pop() } });

migrations/1667186124792-plans.ts

@@ -5,10 +5,11 @@ export class plans1667186124792 implements MigrationInterface {
     await queryRunner.query(`
     CREATE TABLE IF NOT EXISTS plans (
       id INTEGER PRIMARY KEY AUTOINCREMENT,
+      title TEXT NOT NULL,
       days TEXT NOT NULL,
       workouts TEXT NOT NULL
     )
-`)
+`);
   }
 
   public async down(queryRunner: QueryRunner): Promise<void> {

plan.ts

@@ -5,6 +5,9 @@ export class Plan {
   @PrimaryGeneratedColumn()
   id?: number;
 
+  @Column("text")
+  title?: string;
+
   @Column("text")
   days: string;