Update useInfiniteScroll files

components/other/VersionComponent.vue

@@ -67,13 +67,7 @@
 
 <script>
 import { mapActions, mapState } from "pinia";
-
+import { useResearchStore } from "~/stores/researchStore";
-import { useAuthStore } from "@stores/authStore";
-import { useCommonStore } from "@stores/commonStore";
-import { useEntityStore } from "@entity/entityStore";
-import { useSearchStore } from "@search/stores/searchStore";
-import { useResearchStore } from "@research/stores/researchStore";
-
 
 export default {
   mounted() {
@@ -108,18 +102,13 @@ export default {
   },
 
   methods: {
-    ...mapActions(useCommonStore, [
+    ...mapActions("common", ["systemsSetter", "activeSystemSetter"]),
-      "systemsSetter",
-      "activeSystemSetter",
-      "searchActiveTabSetter",
-    ]),
-
     ...mapActions("aiTools", [
       "aiToolsActiveActionSetter",
       "aiToolsSchemaSetter",
       "aiToolsActiveDomainSetter",
     ]),
-    ...mapActions(useEntityStore, [
+    ...mapActions("entity", [
       "activeTabSetter",
       "entityViewSchemaSetter",
       "activeEntityViewSchemaSetter",
@@ -130,9 +119,10 @@ export default {
       "domainActiveSetter",
       "selectionFilterItemsSetter",
     ]),
-    ...mapActions(useSearchStore, [
+    ...mapActions("search", [
       "domainActiveSetter", //3
       "activeTabSetter", //2
+      "searchActiveTabSetter",
       "searchSchemaSetter",
       "helpSchemaSetter",
       "helpActiveSchemaSetter",
@@ -144,7 +134,7 @@ export default {
     ]),
 
     reloadPage() {
-      let appVersion = useStorage("app-version", "0.0.0");
+      let appVersion = useStorage("app-version", '0.0.0');
       appVersion.vlaue =  this.envVersion;
 
       this.clearStorage();

composables/useInfiniteScroll.ts

@@ -1,18 +1,58 @@
 // composables/useInfiniteScroll.ts
+import { ref, onMounted, onBeforeUnmount } from "vue";
+
 export default function useInfiniteScroll(
-  callback: () => void,
+  callback: () => Promise<void>,
-  elementId: string
+  elementId?: string
 ) {
+  const route = useRoute();
   const isFetching = ref(false);
-  const infiniteScroll = ref<HTMLElement | null>(null);
+  const infiniteScroll = ref<HTMLElement | Window | null>(null);
 
-  const handleScroll = () => {
+  // Throttle function to limit scroll event frequency
-    if (isFetching.value) return;
+  const throttle = (func: (...args: any[]) => void, limit: number) => {
-    const scrollPosition =
+    let lastFunc: ReturnType<typeof setTimeout>;
-      infiniteScroll.value.scrollTop + infiniteScroll.value.clientHeight;
+    let lastRan: number;
-    const threshold = infiniteScroll.value.scrollHeight - 100;
+    return function (this: any, ...args: any[]) {
+      const context = this;
+      if (!lastRan) {
+        func.apply(context, args);
+        lastRan = Date.now();
+      } else {
+        clearTimeout(lastFunc);
+        lastFunc = setTimeout(() => {
+          if (Date.now() - lastRan >= limit) {
+            func.apply(context, args);
+            lastRan = Date.now();
+          }
+        }, limit - (Date.now() - lastRan));
+      }
+    };
+  };
 
-    if (scrollPosition >= threshold) {
+  const checkScrollPosition = () => {
+    if (isFetching.value || !infiniteScroll.value) return;
+
+    let scrollPosition: number;
+    let threshold: number;
+    let clientHeight: number;
+    let scrollHeight: number;
+
+    if (infiniteScroll.value === window) {
+      scrollPosition = window.scrollY || window.pageYOffset;
+      clientHeight = document.documentElement.clientHeight;
+      scrollHeight = document.documentElement.scrollHeight;
+    } else {
+      const el = infiniteScroll.value as HTMLElement;
+      scrollPosition = el.scrollTop;
+      clientHeight = el.clientHeight;
+      scrollHeight = el.scrollHeight;
+    }
+
+    threshold = scrollHeight - 100;
+    const currentPosition = scrollPosition + clientHeight;
+
+    if (currentPosition >= threshold) {
       isFetching.value = true;
       callback().finally(() => {
         isFetching.value = false;
@@ -20,28 +60,57 @@ export default function useInfiniteScroll(
     }
   };
 
+  // Throttled version of scroll handler
+  const throttledScrollHandler = throttle(checkScrollPosition, 200);
+
   const handleTouchEnd = () => {
-    // Add a slight delay to ensure scroll position is updated
+    setTimeout(throttledScrollHandler, 100);
-    setTimeout(handleScroll, 100);
   };
 
   onMounted(() => {
-    const targetElement = document.getElementById(elementId);
+    console.info(route.name)
+    
+    if (route.name == "hadithaSearch" || route.name == "hadithaLibrary") {
+      const targetElement = elementId
+        ? document.getElementById(elementId)
+        : window;
+
+      if (!targetElement) {
+        console.warn(
+          `Element ${elementId || "window"} not found for infinite scroll`
+        );
+        return;
+      }
+
       infiniteScroll.value = targetElement;
 
-    if (targetElement) {
+      if (targetElement === window) {
-      targetElement.addEventListener("scroll", handleScroll);
+        window.addEventListener("scroll", throttledScrollHandler);
+        window.addEventListener("touchend", handleTouchEnd);
+      } else {
+        targetElement.addEventListener("scroll", throttledScrollHandler);
         targetElement.addEventListener("touchend", handleTouchEnd);
       }
+    }
   });
 
   onBeforeUnmount(() => {
-    const targetElement = document.getElementById(elementId);
+    if (route.name == "hadithaSearch" || route.name == "hadithaLibrary") {
-    infiniteScroll.value = targetElement;
+      if (!infiniteScroll.value) return;
 
-    if (targetElement) {
+      if (infiniteScroll.value === window) {
-      targetElement.removeEventListener("scroll", handleScroll);
+        window.removeEventListener("scroll", throttledScrollHandler);
-      targetElement.removeEventListener("touchend", handleTouchEnd);
+        window.removeEventListener("touchend", handleTouchEnd);
+      } else {
+        (infiniteScroll.value as HTMLElement).removeEventListener(
+          "scroll",
+          throttledScrollHandler
+        );
+        (infiniteScroll.value as HTMLElement).removeEventListener(
+          "touchend",
+          handleTouchEnd
+        );
+      }
     }
   });
 

pages/help/pages/HelpShow.vue

@@ -131,7 +131,7 @@ export default {
     };
   },
   computed: {
-    ...mapState(useCommonStore, ["searchSchemaGetter"]),
+    ...mapState(useSearchStore, ["searchSchemaGetter"]),
   },
   methods: {
     ...mapActions(["checkPermissions"]),

stores/commonStore.ts

@@ -20,15 +20,9 @@ import type {
   Pagination,
 } from "~/types/commonTypes";
 
-import type { researchTerms, searchActiveTab } from "~/types/researchTypes";
+import type { researchTerms } from "~/types/researchTypes";
 import type { ActiveEntityViewSchema, ActiveTab } from "~/types/entityType";
-import type {
+import type { Domain, helpActiveSchema, helpSchema } from "~/types/searchTypes";
-  Domain,
-  helpActiveSchema,
-  helpSchema,
-  searchSchema,
-  searchSynonymTitle,
-} from "~/types/searchTypes";
 
 export const useCommonStore = defineStore("commonStore", {
   persist: {
@@ -91,11 +85,6 @@ export const useCommonStore = defineStore("commonStore", {
     appVersion: "" as string,
     isShowHilight: true as boolean,
     sidebarMenu: {},
-
-    // search
-    searchSynonymTitle: undefined as searchSynonymTitle | undefined,
-    searchActiveTab: undefined as searchActiveTab | undefined,
-    searchSchema: undefined as searchSchema | undefined,
   }),
   getters: {
     // admin
@@ -106,18 +95,10 @@ export const useCommonStore = defineStore("commonStore", {
       return state.helpActiveSchema;
     },
     // from search
-    searchSynonymTitleGetter(state) {
-      return state.searchSynonymTitle;
-    },
-    searchActiveTabGetter(state) {
-      return state.searchActiveTab;
-    },
-    searchSchemaGetter(state) {
-      return state.searchSchema;
-    },
     domainActiveGetter(state) {
       return state.domainActive;
     },
+
     diffTypeGetter(diffType) {
       return diffType;
     },
@@ -127,6 +108,7 @@ export const useCommonStore = defineStore("commonStore", {
     activeEntityViewSchemaGetter(state) {
       return state.activeEntityViewSchema;
     },
+
     researchTermsGetter(state) {
       return state.researchTerms;
     },
@@ -177,17 +159,6 @@ export const useCommonStore = defineStore("commonStore", {
       this.helpActiveSchema = helpActiveSchema;
     },
     // from search
-    searchSynonymTitleSetter(searchSynonymTitle = undefined) {
-      this.searchSynonymTitle = searchSynonymTitle;
-    },
-
-    searchActiveTabSetter(searchActiveTab: searchActiveTab) {
-      this.searchActiveTab = searchActiveTab;
-    },
-    searchSchemaSetter(searchSchema = undefined) {
-      this.searchSchema = searchSchema;
-    },
-
     domainActiveSetter(domain = undefined) {
       this.domainActive = domain;
     },
@@ -214,6 +185,7 @@ export const useCommonStore = defineStore("commonStore", {
       this.collapsed = isCollapsed;
     },
 
+  
     SET_SECTIONS(jahatSection: JahatSection) {
       this.jahatSection = jahatSection;
     },
@@ -283,6 +255,7 @@ export const useCommonStore = defineStore("commonStore", {
       this.$reset();
     },
     
+
     async getState() {
       const settingsApi = (await import("~/apis/adminApi")).default;
       const url = settingsApi.user.get;