round 4

web/vue-app/src/components/child/ParentView.vue

@@ -11,10 +11,14 @@ import type {
   Child,
   Event,
   Reward,
-  TaskUpdateEventPayload,
-  RewardUpdateEventPayload,
-  ChildUpdateEventPayload,
-  ChildDeleteEventPayload,
+  ChildTaskTriggeredEventPayload,
+  ChildRewardTriggeredEventPayload,
+  ChildRewardRequestEventPayload,
+  ChildTasksSetEventPayload,
+  ChildRewardsSetEventPayload,
+  ChildModifiedEventPayload,
+  TaskModifiedEventPayload,
+  RewardModifiedEventPayload,
 } from '@/common/models'
 
 const route = useRoute()
@@ -22,36 +26,140 @@ const router = useRouter()
 
 const child = ref<Child | null>(null)
 const tasks = ref<string[]>([])
+const rewards = ref<string[]>([])
 const loading = ref(true)
 const error = ref<string | null>(null)
-const rewardListRef = ref()
 const showConfirm = ref(false)
 const selectedTask = ref<Task | null>(null)
 const showRewardConfirm = ref(false)
 const selectedReward = ref<Reward | null>(null)
+const childRewardListRef = ref()
+const childChoreListRef = ref()
+const childHabitListRef = ref()
 
-function handlePointsUpdate(event: Event) {
-  const payload = event.payload as TaskUpdateEventPayload | RewardUpdateEventPayload
+function handleTaskTriggered(event: Event) {
+  const payload = event.payload as ChildTaskTriggeredEventPayload
   if (child.value && payload.child_id == child.value.id) {
     child.value.points = payload.points
   }
 }
 
-function handleServerChange(event: Event) {
-  const payload = event.payload as
-    | TaskUpdateEventPayload
-    | RewardUpdateEventPayload
-    | ChildUpdateEventPayload
+function handleRewardTriggered(event: Event) {
+  const payload = event.payload as ChildRewardTriggeredEventPayload
   if (child.value && payload.child_id == child.value.id) {
-    fetchChildData(child.value.id)
+    child.value.points = payload.points
+    childRewardListRef.value?.refresh()
   }
 }
 
-function handleChildDeletion(event: Event) {
-  const payload = event.payload as ChildDeleteEventPayload
+function handleChildTaskSet(event: Event) {
+  console.log('handleChildTaskSet called')
+  const payload = event.payload as ChildTasksSetEventPayload
   if (child.value && payload.child_id == child.value.id) {
-    // Navigate away back to children list
-    router.push({ name: 'ChildrenListView' })
+    tasks.value = payload.task_ids
+  }
+}
+
+function handleChildRewardSet(event: Event) {
+  const payload = event.payload as ChildRewardsSetEventPayload
+  if (child.value && payload.child_id == child.value.id) {
+    rewards.value = payload.reward_ids
+    childRewardListRef.value?.refresh()
+  }
+}
+
+function handleRewardRequest(event: Event) {
+  const payload = event.payload as ChildRewardRequestEventPayload
+  const childId = payload.child_id
+  const rewardId = payload.reward_id
+  if (child.value && childId == child.value.id) {
+    if (rewards.value.find((r) => r === rewardId)) {
+      childRewardListRef.value?.refresh()
+    }
+  }
+}
+
+function handleTaskModified(event: Event) {
+  const payload = event.payload as TaskModifiedEventPayload
+  if (child.value) {
+    const task_id = payload.task_id
+    if (tasks.value.includes(task_id)) {
+      try {
+        switch (payload.operation) {
+          case 'DELETE':
+            // Remove the task from the list
+            tasks.value = tasks.value.filter((t) => t !== task_id)
+            return // No need to refetch
+
+          case 'ADD':
+            // A new task was added, this shouldn't affect the current task list
+            console.log('ADD operation received for task_modified, no action taken.')
+            return // No need to refetch
+
+          case 'EDIT':
+            try {
+              const dataPromise = fetchChildData(child.value.id)
+              dataPromise.then((data) => {
+                if (data) {
+                  tasks.value = data.tasks || []
+                }
+              })
+            } catch (err) {
+              console.warn('Failed to fetch child after EDIT operation:', err)
+            }
+            break
+
+          default:
+            console.warn(`Unknown operation: ${payload.operation}`)
+            return // No need to refetch
+        }
+      } catch (err) {
+        console.warn('Failed to fetch child after task modification:', err)
+      }
+    }
+  }
+}
+
+function handleRewardModified(event: Event) {
+  const payload = event.payload as RewardModifiedEventPayload
+  if (child.value) {
+    const reward_id = payload.reward_id
+    if (rewards.value.includes(reward_id)) {
+      childRewardListRef.value?.refresh()
+    }
+  }
+}
+
+function handleChildModified(event: Event) {
+  const payload = event.payload as ChildModifiedEventPayload
+  if (child.value && payload.child_id == child.value.id) {
+    switch (payload.operation) {
+      case 'DELETE':
+        // Navigate away back to children list
+        router.push({ name: 'ChildrenListView' })
+        break
+
+      case 'ADD':
+        // A new child was added, this shouldn't affect the current child view
+        console.log('ADD operation received for child_modified, no action taken.')
+        break
+
+      case 'EDIT':
+        //our child was edited, refetch its data
+        try {
+          const dataPromise = fetchChildData(payload.child_id)
+          dataPromise.then((data) => {
+            if (data) {
+              child.value = data
+            }
+          })
+        } catch (err) {
+          console.warn('Failed to fetch child after EDIT operation:', err)
+        }
+        break
+      default:
+        console.warn(`Unknown operation: ${payload.operation}`)
+    }
   }
 }
 
@@ -61,12 +169,12 @@ async function fetchChildData(id: string | number) {
     const resp = await fetch(`/api/child/${id}`)
     if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
     const data = await resp.json()
-    child.value = data.children ? data.children : data
-    tasks.value = data.tasks || []
     error.value = null
+    return data
   } catch (err) {
     error.value = err instanceof Error ? err.message : 'Failed to fetch child'
     console.error(err)
+    return null
   } finally {
     loading.value = false
   }
@@ -74,17 +182,26 @@ async function fetchChildData(id: string | number) {
 
 onMounted(async () => {
   try {
-    eventBus.on('task_update', handlePointsUpdate)
-    eventBus.on('reward_update', handlePointsUpdate)
-    eventBus.on('task_set', handleServerChange)
-    eventBus.on('reward_set', handleServerChange)
-    eventBus.on('child_update', handleServerChange)
-    eventBus.on('child_delete', handleChildDeletion)
+    eventBus.on('child_task_triggered', handleTaskTriggered)
+    eventBus.on('child_reward_triggered', handleRewardTriggered)
+    eventBus.on('child_tasks_set', handleChildTaskSet)
+    eventBus.on('child_rewards_set', handleChildRewardSet)
+    eventBus.on('task_modified', handleTaskModified)
+    eventBus.on('reward_modified', handleRewardModified)
+    eventBus.on('child_modified', handleChildModified)
+    eventBus.on('child_reward_request', handleRewardRequest)
 
     if (route.params.id) {
       const idParam = Array.isArray(route.params.id) ? route.params.id[0] : route.params.id
       if (idParam !== undefined) {
-        fetchChildData(idParam)
+        const promise = fetchChildData(idParam)
+        promise.then((data) => {
+          if (data) {
+            child.value = data
+            tasks.value = data.tasks || []
+            rewards.value = data.rewards || []
+          }
+        })
       }
     }
   } catch (err) {
@@ -93,19 +210,17 @@ onMounted(async () => {
 })
 
 onUnmounted(() => {
-  eventBus.off('task_update', handlePointsUpdate)
-  eventBus.off('reward_update', handlePointsUpdate)
-  eventBus.off('task_set', handleServerChange)
-  eventBus.off('reward_set', handleServerChange)
-  eventBus.off('child_update', handleServerChange)
-  eventBus.off('child_delete', handleChildDeletion)
+  eventBus.off('child_task_triggered', handleTaskTriggered)
+  eventBus.off('child_reward_triggered', handleRewardTriggered)
+  eventBus.off('child_tasks_set', handleChildTaskSet)
+  eventBus.off('child_rewards_set', handleChildRewardSet)
+  eventBus.off('child_modified', handleChildModified)
+  eventBus.off('child_reward_request', handleRewardRequest)
+  eventBus.off('task_modified', handleTaskModified)
+  eventBus.off('reward_modified', handleRewardModified)
 })
 
-const refreshRewards = () => {
-  rewardListRef.value?.refresh()
-}
-
-const handleTriggerTask = (task: Task) => {
+const triggerTask = (task: Task) => {
   selectedTask.value = task
   showConfirm.value = true
 }
@@ -130,7 +245,7 @@ const confirmTriggerTask = async () => {
   }
 }
 
-const handleTriggerReward = (reward: Reward, redeemable: boolean) => {
+const triggerReward = (reward: Reward, redeemable: boolean) => {
   console.log('Handle trigger reward:', reward, redeemable)
   if (!redeemable) return
   selectedReward.value = reward
@@ -174,14 +289,6 @@ function goToAssignRewards() {
   }
 }
 
-const handleTaskPointsUpdated = ({ id, points }: { id: string | number; points: number }) => {
-  if (child.value && child.value.id === id) child.value.points = points
-  refreshRewards()
-}
-const handleRewardPointsUpdated = ({ id, points }: { id: string | number; points: number }) => {
-  if (child.value && child.value.id === id) child.value.points = points
-}
-
 const childId = computed(() => child.value?.id ?? null)
 </script>
 
@@ -195,29 +302,28 @@ const childId = computed(() => child.value?.id ?? null)
         <ChildDetailCard :child="child" />
         <ChildTaskList
           title="Chores"
+          ref="childChoreListRef"
           :task-ids="tasks"
           :child-id="childId"
           :is-parent-authenticated="isParentAuthenticated"
           :filter-type="1"
-          @points-updated="handleTaskPointsUpdated"
-          @trigger-task="handleTriggerTask"
+          @trigger-task="triggerTask"
         />
         <ChildTaskList
           title="Bad Habits"
+          ref="childHabitListRef"
           :task-ids="tasks"
           :child-id="childId"
           :is-parent-authenticated="isParentAuthenticated"
           :filter-type="2"
-          @points-updated="handleTaskPointsUpdated"
-          @trigger-task="handleTriggerTask"
+          @trigger-task="triggerTask"
         />
         <ChildRewardList
-          ref="rewardListRef"
+          ref="childRewardListRef"
           :child-id="childId"
           :child-points="child?.points ?? 0"
           :is-parent-authenticated="false"
-          @points-updated="handleRewardPointsUpdated"
-          @trigger-reward="handleTriggerReward"
+          @trigger-reward="triggerReward"
         />
       </div>
     </div>