[GEN-1629]: boolean store (isPolling) (#1706)

frontend/webapp/components/overview/add-entity/index.tsx

@@ -1,9 +1,10 @@
 import Image from 'next/image';
 import theme from '@/styles/theme';
 import { useModalStore } from '@/store';
+import { useOnClickOutside } from '@/hooks';
 import React, { useState, useRef } from 'react';
 import styled, { css } from 'styled-components';
-import { useActualSources, useOnClickOutside } from '@/hooks';
+import { useBooleanStore } from '@/store/useBooleanStore';
 import { DropdownOption, OVERVIEW_ENTITY_TYPES } from '@/types';
 import { Button, FadeLoader, Text } from '@/reuseable-components';
 
@@ -71,12 +72,12 @@ interface AddEntityButtonDropdownProps {
 }
 
 const AddEntity: React.FC<AddEntityButtonDropdownProps> = ({ options = DEFAULT_OPTIONS, placeholder = 'ADD...' }) => {
+  const { isPolling } = useBooleanStore();
   const { setCurrentModal } = useModalStore();
+
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
-  const { isPolling } = useActualSources();
-
   useOnClickOutside(dropdownRef, () => setIsDropdownOpen(false));
 
   const handleToggle = () => {

frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleCRUD.ts

@@ -65,8 +65,7 @@ export const useInstrumentationRuleCRUD = (params?: Params) => {
   return {
     loading: cState.loading || uState.loading || dState.loading,
     createInstrumentationRule: (instrumentationRule: InstrumentationRuleInput) => createInstrumentationRule({ variables: { instrumentationRule } }),
-    updateInstrumentationRule: (ruleId: string, instrumentationRule: InstrumentationRuleInput) =>
-      updateInstrumentationRule({ variables: { ruleId, instrumentationRule } }),
+    updateInstrumentationRule: (ruleId: string, instrumentationRule: InstrumentationRuleInput) => updateInstrumentationRule({ variables: { ruleId, instrumentationRule } }),
     deleteInstrumentationRule: (ruleId: string) => deleteInstrumentationRule({ variables: { ruleId } }),
   };
 };

frontend/webapp/hooks/sources/useActualSources.ts

@@ -1,24 +1,21 @@
-import { useState, useCallback } from 'react';
+import { useCallback } from 'react';
 import { usePersistSource } from '../sources';
 import { useNamespace } from '../compute-platform';
 import { useUpdateSource } from './useUpdateSource';
 import { useComputePlatform } from '../compute-platform';
-import {
-  PatchSourceRequestInput,
-  PersistSourcesArray,
-  WorkloadId,
-} from '@/types';
+import { useBooleanStore } from '@/store/useBooleanStore';
+import { PatchSourceRequestInput, PersistSourcesArray, WorkloadId } from '@/types';
 
 export function useActualSources() {
   const { data, refetch } = useComputePlatform();
+  const { isPolling, togglePolling } = useBooleanStore();
   const { persistSource, error: sourceError } = usePersistSource();
   const { updateSource, error: updateError } = useUpdateSource();
 
   const { persistNamespace } = useNamespace(undefined);
-  const [isPolling, setIsPolling] = useState(false);
 
   const startPolling = useCallback(async () => {
-    setIsPolling(true);
+    togglePolling(true);
     const maxRetries = 5;
     const retryInterval = 1000; // Poll every second
     let retries = 0;
@@ -29,13 +26,10 @@ export function useActualSources() {
       retries++;
     }
 
-    setIsPolling(false);
-  }, [refetch]);
+    togglePolling(false);
+  }, [refetch, togglePolling]);
 
-  const createSourcesForNamespace = async (
-    namespaceName: string,
-    sources: PersistSourcesArray[]
-  ) => {
+  const createSourcesForNamespace = async (namespaceName: string, sources: PersistSourcesArray[]) => {
     await persistSource(namespaceName, sources);
 
     startPolling();
@@ -44,10 +38,7 @@ export function useActualSources() {
     }
   };
 
-  const deleteSourcesForNamespace = async (
-    namespaceName: string,
-    sources: PersistSourcesArray[]
-  ) => {
+  const deleteSourcesForNamespace = async (namespaceName: string, sources: PersistSourcesArray[]) => {
     await persistSource(namespaceName, sources);
 
     startPolling();
@@ -56,10 +47,7 @@ export function useActualSources() {
     }
   };
 
-  const updateActualSource = async (
-    sourceId: WorkloadId,
-    patchRequest: PatchSourceRequestInput
-  ) => {
+  const updateActualSource = async (sourceId: WorkloadId, patchRequest: PatchSourceRequestInput) => {
     try {
       await updateSource(sourceId, patchRequest);
       refetch();

frontend/webapp/store/useBooleanStore.ts

@@ -0,0 +1,11 @@
+import { create } from 'zustand';
+
+interface StoreState {
+  isPolling: boolean;
+  togglePolling: (bool?: boolean) => void;
+}
+
+export const useBooleanStore = create<StoreState>((set) => ({
+  isPolling: false,
+  togglePolling: (bool) => set(({ isPolling }) => ({ isPolling: bool ?? !isPolling })),
+}));