From 1b013544a89b2403aaf9555c79c3e52045e76c0a Mon Sep 17 00:00:00 2001
From: iamsivin <iamsivin@gmail.com>
Date: Sat, 9 Nov 2024 13:39:22 +0530
Subject: [PATCH] chore: Fix sidebar filter issue and sort reactivity issue

---
 .../Contacts/ContactHeader/ContactSortMenu.vue    | 15 ++++++++++-----
 .../contact/pages/ContactsPageRouteView.vue       |  4 +---
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/app/javascript/dashboard/components-next/Contacts/ContactHeader/ContactSortMenu.vue b/app/javascript/dashboard/components-next/Contacts/ContactHeader/ContactSortMenu.vue
index aa3e82332..84c91d68a 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactHeader/ContactSortMenu.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactHeader/ContactSortMenu.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, toRef } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Button from 'dashboard/components-next/button/Button.vue';
 import SelectMenu from 'dashboard/components-next/selectmenu/SelectMenu.vue';
@@ -65,17 +65,22 @@ const orderingMenus = [
   },
 ];
 
+// Converted the props to refs for better reactivity
+const activeSort = toRef(props, 'activeSort');
+const activeOrdering = toRef(props, 'activeOrdering');
+
 const activeSortLabel = computed(() => {
+  const selectedMenu = sortMenus.find(menu => menu.value === activeSort.value);
   return (
-    sortMenus.find(menu => menu.value === props.activeSort)?.label || 'Sort by'
+    selectedMenu?.label || t('CONTACTS_LAYOUT.HEADER.ACTIONS.SORT_BY.LABEL')
   );
 });
 
 const activeOrderingLabel = computed(() => {
-  return (
-    orderingMenus.find(menu => menu.value === props.activeOrdering)?.label ||
-    'Order'
+  const selectedMenu = orderingMenus.find(
+    menu => menu.value === activeOrdering.value
   );
+  return selectedMenu?.label || t('CONTACTS_LAYOUT.HEADER.ACTIONS.ORDER.LABEL');
 });
 
 const handleSortChange = value => {
diff --git a/app/javascript/dashboard/routes/dashboard/contact/pages/ContactsPageRouteView.vue b/app/javascript/dashboard/routes/dashboard/contact/pages/ContactsPageRouteView.vue
index 3abb35fc1..585a29b05 100644
--- a/app/javascript/dashboard/routes/dashboard/contact/pages/ContactsPageRouteView.vue
+++ b/app/javascript/dashboard/routes/dashboard/contact/pages/ContactsPageRouteView.vue
@@ -142,9 +142,7 @@ watch(activeSegment, () => {
 });
 
 onMounted(async () => {
-  if (activeSegmentId.value) {
-    await fetchSavedFilteredContact(activeSegment.value.query);
-  } else {
+  if (!activeSegmentId.value) {
     await fetchContacts();
   }
 });