From a9b64054284339929c7d37e4d08c5745fb748373 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Valdemar=20=C3=85storp=20Beere?= <valdemb@stud.ntnu.no>
Date: Fri, 26 Apr 2024 11:31:53 +0200
Subject: [PATCH] refactor(homepage):
Moved data form child to parent component
---
src/components/SavingsPath.vue | 38 ++++++++++++++++++++++------------
src/views/HomeView.vue | 2 +-
2 files changed, 26 insertions(+), 14 deletions(-)
diff --git a/src/components/SavingsPath.vue b/src/components/SavingsPath.vue
index 9f275e8..5109492 100644
--- a/src/components/SavingsPath.vue
+++ b/src/components/SavingsPath.vue
@@ -49,6 +49,7 @@
<p class="text-center" data-cy="challenge-title">{{challenge.title}}</p>
<img
@click="editChallenge(challenge)"
+ :data-cy="'challenge-icon-'+challenge.id"
:src="getChallengeIcon(challenge)"
class="max-w-20 max-h-20 cursor-pointer"
:alt="challenge.title"
@@ -68,6 +69,7 @@
>
<div
class="bg-green-600 h-2.5 rounded-full"
+ data-cy="challenge-progress"
:style="{
width:
(challenge.saved / challenge.target) *
@@ -83,6 +85,7 @@
<button
@click="incrementSaved(challenge)"
+ :data-cy="'increment-challenge'+challenge.id"
type="button"
class="inline-block mb-2 ml-2 h-7 w-8 rounded-full p-1 uppercase leading-normal transition duration-150 ease-in-out focus:bg-green-accent-300 focus:shadow-green-2 focus:outline-none focus:ring-0 active:bg-green-600 active:shadow-green-200 motion-reduce:transition-none dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
>
@@ -194,29 +197,38 @@ import anime from 'animejs'
import type { Challenge } from '@/types/challenge'
import type { Goal } from '@/types/goal'
import confetti from 'canvas-confetti'
-import { useGoalStore } from '@/stores/goalStore'
-import { useChallengeStore } from '@/stores/challengeStore'
import {useRouter} from "vue-router";
+import {useGoalStore} from "@/stores/goalStore";
+import {useChallengeStore} from "@/stores/challengeStore";
const router = useRouter()
const goalStore = useGoalStore()
const challengeStore = useChallengeStore()
-const challenges = ref<Challenge[]>([])
-const goals = ref<Goal[]>([])
+interface Props {
+ challenges: Challenge[]
+ goal: Goal | null | undefined
+}
+const props = defineProps<Props>()
-const goal = ref<Goal | null | undefined>(null)
-onMounted(async () => {
- await goalStore.getUserGoals()
- await challengeStore.getUserChallenges()
- challenges.value = challengeStore.challenges
- goals.value = goalStore.goals
- goal.value = goals.value[0]
- console.log('Goals:', goals.value)
-})
+const challenges = ref<Challenge[]>(props.challenges)
+const goal = ref<Goal | null | undefined>(props.goal)
+// Utilizing watch to specifically monitor for changes in the props
+watch(() => props.goal, (newGoal, oldGoal) => {
+ if (newGoal !== oldGoal) {
+ goal.value = newGoal;
+ console.log('Updated goal:', goal.value);
+ }
+}, { immediate: true });
+watch(() => props.challenges, (newChallenges, oldChallenges) => {
+ if (newChallenges !== oldChallenges) {
+ challenges.value = newChallenges;
+ console.log('Updated challenges:', challenges.value);
+ }
+}, { immediate: true });
// Reactive references for DOM elements
const iconRef = ref<HTMLElement | null>(null)
const containerRef = ref<HTMLElement | null>(null)
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 777d044..54fd64b 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -12,7 +12,7 @@
<ButtonAddGoalOrChallenge :buttonText="'Legg til spareutfordring'" :type="'challenge'" />
</div>
</div>
- <savings-path></savings-path>
+ <savings-path :challenges="challenges" :goal="goal"></savings-path>
</div>
</template>
--
GitLab