From 77817885d5100ab2971a7d812c0d87b3caebb257 Mon Sep 17 00:00:00 2001
From: Marios Antonoudiou <mariosant@sent.com>
Date: Mon, 7 Apr 2025 14:13:24 +0300
Subject: [PATCH] Add save button

---
 app/pages/index.vue | 32 ++++++++++++++++++++++++++++----
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/app/pages/index.vue b/app/pages/index.vue
index e18696d..d844568 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,6 +1,10 @@
 <script setup lang="ts">
+import { isEqual } from "radash";
+
 const { user } = useUserSession();
 
+const toast = useToast();
+
 const stravaLink = computed(() => {
   return `https://www.strava.com/athletes/${toValue(user).id}`;
 });
@@ -15,22 +19,31 @@ const preferences = useState<FormData>("preferences", () => ({
   language: "English",
 }));
 
-const { status } = useLazyFetch("/api/preferences", {
+const { data: preferencesData, status } = useLazyFetch("/api/preferences", {
   onResponse({ error, response }) {
     if (error) {
       return;
     }
 
-    preferences.value = response._data;
+    preferences.value = { ...response._data };
   },
 });
 
-watchEffect(async () => {
+const onSavePreferences = async () => {
   await $fetch("/api/preferences", {
     method: "PUT",
     body: toValue(preferences),
   });
-});
+
+  toast.add({
+    title: "Saved",
+    description: "Preferences saved succesfully!",
+  });
+};
+
+const onResetPreferences = () => {
+  preferences.value = { ...preferencesData.value };
+};
 </script>
 
 <template>
@@ -79,6 +92,17 @@ watchEffect(async () => {
           </template>
         </CardField>
       </div>
+
+      <template #footer>
+        <div class="flex gap-4">
+          <UButton class="px-4" @click="onSavePreferences"
+            >Save preferences</UButton
+          >
+          <UButton variant="ghost" color="neutral" @click="onResetPreferences"
+            >Cancel</UButton
+          >
+        </div>
+      </template>
     </UCard>
   </UContainer>