From bdc92a3a141197a28f576ee8fa1dc1d5e77986fb Mon Sep 17 00:00:00 2001
From: theplantinthedesk <t19.thakur@outlook.com>
Date: Sun, 7 Jul 2024 21:29:40 +0530
Subject: [PATCH] Added Query Parameters

---
 .../TheRecommendationSelector.vue             | 39 +++++++++++++++++-
 .../components/Scripts/Menu/TheOsChanger.vue  | 41 ++++++++++++++++++-
 src/presentation/components/TheSearchBar.vue  | 33 +++++++++++++--
 3 files changed, 108 insertions(+), 5 deletions(-)

diff --git a/src/presentation/components/Scripts/Menu/Recommendation/TheRecommendationSelector.vue b/src/presentation/components/Scripts/Menu/Recommendation/TheRecommendationSelector.vue
index f3da4814..5c0f15c2 100644
--- a/src/presentation/components/Scripts/Menu/Recommendation/TheRecommendationSelector.vue
+++ b/src/presentation/components/Scripts/Menu/Recommendation/TheRecommendationSelector.vue
@@ -86,7 +86,7 @@
 
 <script lang="ts">
 import {
-  defineComponent, computed,
+  defineComponent, computed, onMounted, watch,
 } from 'vue';
 import { injectKey } from '@/presentation/injectionSymbols';
 import TooltipWrapper from '@/presentation/components/Shared/TooltipWrapper.vue';
@@ -132,8 +132,45 @@ export default defineComponent({
           collection: currentCollection.value,
         });
       });
+      updateQueryParam(type);
     }
 
+    function updateQueryParam(type: RecommendationStatusType) {
+      const url = new URL(window.location.href);
+      const presetValue = RecommendationStatusType[type].toLowerCase();
+      url.searchParams.set('preset', presetValue);
+      window.history.pushState({}, '', url);
+    }
+
+    function getRecommendationFromQueryParam(): RecommendationStatusType | undefined {
+      const url = new URL(window.location.href);
+      const preset = url.searchParams.get('preset');
+      if (preset) {
+        const typeKey = Object.keys(RecommendationStatusType)
+          .find((key) => key.toLowerCase() === preset.toLowerCase());
+        return typeKey ? RecommendationStatusType[typeKey as keyof typeof RecommendationStatusType] : undefined;
+      }
+      return undefined;
+    }
+
+    onMounted(() => {
+      const typeFromQuery = getRecommendationFromQueryParam();
+      if (typeFromQuery !== undefined && typeFromQuery !== currentRecommendationStatusType.value) {
+        selectRecommendationStatusType(typeFromQuery);
+      }
+    });
+
+    watch(currentRecommendationStatusType, (newType) => {
+      updateQueryParam(newType);
+    });
+
+    window.addEventListener('popstate', () => {
+      const typeFromQuery = getRecommendationFromQueryParam();
+      if (typeFromQuery !== undefined && typeFromQuery !== currentRecommendationStatusType.value) {
+        selectRecommendationStatusType(typeFromQuery);
+      }
+    });
+
     return {
       RecommendationStatusType,
       currentRecommendationStatusType,
diff --git a/src/presentation/components/Scripts/Menu/TheOsChanger.vue b/src/presentation/components/Scripts/Menu/TheOsChanger.vue
index e0cf643a..cb2d0337 100644
--- a/src/presentation/components/Scripts/Menu/TheOsChanger.vue
+++ b/src/presentation/components/Scripts/Menu/TheOsChanger.vue
@@ -11,7 +11,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from 'vue';
+import {
+  defineComponent, computed, onMounted, watch,
+} from 'vue';
 import { injectKey } from '@/presentation/injectionSymbols';
 import { OperatingSystem } from '@/domain/OperatingSystem';
 import { getOperatingSystemDisplayName } from '@/presentation/components/Shared/OperatingSystemNames';
@@ -49,8 +51,45 @@ export default defineComponent({
       modifyCurrentContext((context) => {
         context.changeContext(newOs);
       });
+      updateQueryParam(newOs);
     }
 
+    function updateQueryParam(os: OperatingSystem) {
+      const url = new URL(window.location.href);
+      url.searchParams.set('collection', OperatingSystem[os]);
+      window.history.pushState({}, '', url);
+    }
+
+    function getOsFromQueryParam(): OperatingSystem | undefined {
+      const url = new URL(window.location.href);
+      const collection = url.searchParams.get('collection');
+      if (collection) {
+        const osKey = Object.keys(OperatingSystem).find(
+          (key) => key.toLowerCase() === collection.toLowerCase(),
+        );
+        return osKey ? OperatingSystem[osKey as keyof typeof OperatingSystem] : undefined;
+      }
+      return undefined;
+    }
+
+    onMounted(() => {
+      const osFromQuery = getOsFromQueryParam();
+      if (osFromQuery !== undefined && osFromQuery !== currentOs.value) {
+        changeOs(osFromQuery);
+      }
+    });
+
+    watch(currentOs, (newOs) => {
+      updateQueryParam(newOs);
+    });
+
+    window.addEventListener('popstate', () => {
+      const osFromQuery = getOsFromQueryParam();
+      if (osFromQuery !== undefined && osFromQuery !== currentOs.value) {
+        changeOs(osFromQuery);
+      }
+    });
+
     return {
       allOses,
       currentOs,
diff --git a/src/presentation/components/TheSearchBar.vue b/src/presentation/components/TheSearchBar.vue
index e342541b..42d7d429 100644
--- a/src/presentation/components/TheSearchBar.vue
+++ b/src/presentation/components/TheSearchBar.vue
@@ -14,7 +14,7 @@
 
 <script lang="ts">
 import {
-  defineComponent, ref, watch, computed,
+  defineComponent, ref, watch, computed, onMounted,
 } from 'vue';
 import { injectKey } from '@/presentation/injectionSymbols';
 import { NonCollapsing } from '@/presentation/components/Scripts/View/Cards/NonCollapsingDirective';
@@ -41,7 +41,10 @@ export default defineComponent({
 
     const searchQuery = ref<string | undefined>();
 
-    watch(searchQuery, (newFilter) => updateFilter(newFilter));
+    watch(searchQuery, (newFilter) => {
+      updateFilter(newFilter);
+      updateQueryParam(newFilter);
+    });
 
     function updateFilter(newFilter: string | undefined) {
       modifyCurrentState((state) => {
@@ -53,7 +56,31 @@ export default defineComponent({
         }
       });
     }
-
+    function updateQueryParam(query: string | undefined) {
+      const url = new URL(window.location.href);
+      if (query) {
+        url.searchParams.set('q', query);
+      } else {
+        url.searchParams.delete('q');
+      }
+      window.history.pushState({}, '', url);
+    }
+    // Read the 'q' parameter from the URL when the component is mounted
+    onMounted(() => {
+      const url = new URL(window.location.href);
+      const queryParam = url.searchParams.get('q');
+      if (queryParam) {
+        searchQuery.value = queryParam;
+        updateFilter(queryParam);
+      }
+    });
+    // Handle browser back/forward navigation
+    window.addEventListener('popstate', () => {
+      const url = new URL(window.location.href);
+      const queryParam = url.searchParams.get('q');
+      searchQuery.value = queryParam || undefined;
+      updateFilter(searchQuery.value);
+    });
     onStateChange((newState) => {
       updateFromInitialFilter(newState.filter.currentFilter);
       events.unsubscribeAllAndRegister([