fix profile selection not updating data

frontend/src/App.vue

@@ -89,7 +89,12 @@ fetchAppVersion();
         class="grid place-items-center p-8 text-center text-black dark:text-white"
         v-else-if="profileStore.hasProfileCreated() && !profileStore.profile"
       >
-        <ProfileSelector />
+        <ProfileSelector
+          :profile="profileStore.profile!"
+          @on-select="profileStore.setActiveProfile"
+          @on-profile-create="fetchData()"
+          @on-cancel="fetchData()"
+        />
       </div>
 
       <div v-else>

frontend/src/components/AddItemModal.vue

@@ -2,11 +2,8 @@
 import { Ref, onMounted, ref, toRefs } from "vue";
 import Dialog from "./ui/Dialog.vue";
 import Input from "./ui/Input.vue";
-import { Item } from "@/shared/types";
 import {
-  Create as createCategory,
   FindAll as findAllCategories,
-  FindByDescription,
 } from "../../wailsjs/go/category/service";
 import { types } from "wailsjs/go/models";
 import Select from "./ui/Select.vue";

frontend/src/components/CreateProfileModal.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, toRefs } from "vue";
-import { Create as createProfile } from "../../wailsjs/go/profile/service";
 import Input from "./ui/Input.vue";
 import Checkbox from "./ui/Checkbox.vue";
 import ConfirmButton from "./ui/ConfirmButton.vue";

frontend/src/components/EditItemModal.vue

@@ -3,10 +3,7 @@ import { Ref, onMounted, ref, toRefs, watch } from "vue";
 import Dialog from "./ui/Dialog.vue";
 import Input from "./ui/Input.vue";
 import Select from "./ui/Select.vue";
-import {
-  Create as createCategory,
-  FindAll as findAllCategories,
-} from "../../wailsjs/go/category/service";
+import { FindAll as findAllCategories } from "../../wailsjs/go/category/service";
 import { FindByID as findEarningById } from "../../wailsjs/go/earning/service";
 import { FindByID as findExpenseById } from "../../wailsjs/go/expense/service";
 import { types } from "wailsjs/go/models";

frontend/src/components/ProfileSelector.vue

@@ -1,27 +1,32 @@
 <script setup lang="ts">
-import { ref, defineEmits, computed } from "vue";
+import { ref, defineEmits, computed, toRefs } from "vue";
 import { useProfileStore } from "@/stores/ProfileStore";
 import { types } from "../../wailsjs/go/models";
 import CreateProfileModal from "./CreateProfileModal.vue";
 import ArrowIcon from "./ui/icons/ArrowIcon.vue";
 import { storeToRefs } from "pinia";
 import AddIcon from "./ui/icons/AddIcon.vue";
 
-const emit = defineEmits(["on-select", "on-profile-create", "on-cancel"]);
+const emit = defineEmits(["on-profile-create", "on-profile-change"]);
 
 const profileStore = useProfileStore();
 
-const { profile, profiles } = storeToRefs(profileStore);
+const { profiles } = storeToRefs(profileStore);
+
+const props = defineProps({
+  profile: Object as () => types.Profile,
+});
+
+const { profile } = toRefs(props);
 
-const selectedProfile = ref<types.Profile | null>(null);
 const isCreateProfileModalOpen = ref(false);
 const isDropdownOpen = ref(false);
 
 const selectProfile = (newProfile: types.Profile) => {
-  profileStore.setActiveProfile(newProfile);
-  selectedProfile.value = newProfile;
   isDropdownOpen.value = false;
-  emit("on-select", newProfile);
+  profileStore.setActiveProfile(newProfile);
+  profileStore.fetchProfiles();
+  emit("on-profile-change");
 };
 
 const openCreateProfileModal = () => {
@@ -30,12 +35,12 @@ const openCreateProfileModal = () => {
 
 const closeCreateProfileModal = () => {
   isCreateProfileModalOpen.value = false;
-  emit("on-cancel");
+  emit("on-profile-change");
 };
 
 const onProfileCreate = () => {
-  emit("on-profile-create", profile.value);
-  emit("on-cancel");
+  emit("on-profile-create", profile?.value);
+  emit("on-profile-change");
 };
 
 const toggleDropdown = () => {

frontend/src/components/Table.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref} from "vue";
+import { computed, onMounted, ref } from "vue";
 import EditIcon from "./ui/icons/EditIcon.vue";
 import DeleteIcon from "./ui/icons/DeleteIcon.vue";
 import IconButton from "./ui/IconButton.vue";
@@ -117,6 +117,11 @@ const closeAddModal = () => {
 };
 
 const addItem = (formData: types.EarningUpdate | types.ExpenseUpdate) => {
+  if (profile?.value === null) {
+    console.error("Profile is null");
+    return;
+  }
+
   if (selectedTabId.value === 1) {
     addEarning(formData);
   } else {
@@ -239,9 +244,9 @@ const balance = computed(() => {
     </button>
     <div class="grid place-items-center grid-flow-col absolute right-10">
       <ProfileSelector
-        @on-select="profileStore.setActiveProfile"
+        :profile="profile!"
         @on-profile-create="fetchData()"
-        @on-cancel="fetchData()"
+        @on-profile-change="fetchData()"
       />
       <button
         @click="openUpdateProfileModal"

frontend/src/components/ThemeSwitcher.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, toRefs, watch } from "vue";
+import { toRefs } from "vue";
 import LightModeIcon from "./ui/icons/LightModeIcon.vue";
 import DarkModeIcon from "./ui/icons/DarkModeIcon.vue";
 
@@ -14,9 +14,9 @@ const { isDarkMode } = toRefs(props);
 
 <template>
   <div
-    class="fixed top-8 right-8"
+    class="fixed duration-200 top-8 right-8"
     :class="{
-      'dark duration-200': isDarkMode,
+      dark: isDarkMode,
     }"
   >
     <button

frontend/src/stores/ProfileStore.ts

@@ -50,7 +50,7 @@ export const useProfileStore = defineStore(
       const response = await createProfile(profile)
         .then(async (data) => {
           setActiveProfile(data);
-          await fetchProfiles();
+          fetchProfiles();
         })
         .catch((e: any) => {
           console.error(e);
@@ -62,7 +62,7 @@ export const useProfileStore = defineStore(
       const response = await updateProfile(id, profile)
         .then(async (data) => {
           setActiveProfile(data);
-          await fetchProfiles();
+          fetchProfiles();
         })
         .catch((e: any) => {
           console.error(e);
@@ -73,8 +73,8 @@ export const useProfileStore = defineStore(
     const remove = async (id: number) => {
       const response = await deleteProfile(id)
         .then(async () => {
-          await fetchProfiles();
           setActiveProfile(null);
+          fetchProfiles();
         })
         .catch((e: any) => {
           console.error(e);