From 1a43f41170d5ffaed1f45f61c9e9154c4339b75e Mon Sep 17 00:00:00 2001
From: Brandon Presley <brandon@presley.nz>
Date: Thu, 13 Oct 2022 11:25:23 +1300
Subject: [PATCH] Refresh current day for Plans on focus

Closes #85
---
 PlanItem.tsx | 53 ++++++++++++++++++++++++++++++++++++----------------
 1 file changed, 37 insertions(+), 16 deletions(-)

diff --git a/PlanItem.tsx b/PlanItem.tsx
index eda3b3d..c86025b 100644
--- a/PlanItem.tsx
+++ b/PlanItem.tsx
@@ -1,4 +1,8 @@
-import {NavigationProp, useNavigation} from '@react-navigation/native';
+import {
+  NavigationProp,
+  useFocusEffect,
+  useNavigation,
+} from '@react-navigation/native';
 import React, {useCallback, useMemo, useState} from 'react';
 import {GestureResponderEvent, Text} from 'react-native';
 import {Divider, List, Menu} from 'react-native-paper';
@@ -17,9 +21,16 @@ export default function PlanItem({
 }) {
   const [show, setShow] = useState(false);
   const [anchor, setAnchor] = useState({x: 0, y: 0});
+  const [today, setToday] = useState<string>();
   const days = useMemo(() => item.days.split(','), [item.days]);
   const navigation = useNavigation<NavigationProp<PlanPageParams>>();
-  const today = useMemo(() => DAYS[new Date().getDay()], []);
+
+  useFocusEffect(
+    useCallback(() => {
+      const newToday = DAYS[new Date().getDay()];
+      setToday(newToday);
+    }, []),
+  );
 
   const remove = useCallback(async () => {
     if (typeof item.id === 'number') await deletePlan(item.id);
@@ -48,24 +59,34 @@ export default function PlanItem({
     navigation.navigate('EditPlan', {plan: item});
   }, [navigation, item]);
 
+  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],
+  );
+
+  const description = useMemo(
+    () => item.workouts.replace(/,/g, ', '),
+    [item.workouts],
+  );
+
   return (
     <>
       <List.Item
         onPress={start}
-        title={days.map((day, index) => (
-          <Text key={day}>
-            {day === today ? (
-              <Text
-                style={{fontWeight: 'bold', textDecorationLine: 'underline'}}>
-                {day}
-              </Text>
-            ) : (
-              day
-            )}
-            {index === days.length - 1 ? '' : ', '}
-          </Text>
-        ))}
-        description={item.days ? item.workouts.replace(/,/g, ', ') : null}
+        title={title}
+        description={description}
         onLongPress={longPress}
         right={() => (
           <Menu anchor={anchor} visible={show} onDismiss={() => setShow(false)}>