diff --git a/frontend/webapp/components/overview/add-entity/index.tsx b/frontend/webapp/components/overview/add-entity/index.tsx index 1e175e778..7f85ff260 100644 --- a/frontend/webapp/components/overview/add-entity/index.tsx +++ b/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 = ({ options = DEFAULT_OPTIONS, placeholder = 'ADD...' }) => { + const { isPolling } = useBooleanStore(); const { setCurrentModal } = useModalStore(); + const [isDropdownOpen, setIsDropdownOpen] = useState(false); const dropdownRef = useRef(null); - const { isPolling } = useActualSources(); - useOnClickOutside(dropdownRef, () => setIsDropdownOpen(false)); const handleToggle = () => { diff --git a/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleCRUD.ts b/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleCRUD.ts index debdbccf7..aac125189 100644 --- a/frontend/webapp/hooks/instrumentation-rules/useInstrumentationRuleCRUD.ts +++ b/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 } }), }; }; diff --git a/frontend/webapp/hooks/sources/useActualSources.ts b/frontend/webapp/hooks/sources/useActualSources.ts index 1913fafee..ed3b59c09 100644 --- a/frontend/webapp/hooks/sources/useActualSources.ts +++ b/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(); diff --git a/frontend/webapp/store/useBooleanStore.ts b/frontend/webapp/store/useBooleanStore.ts new file mode 100644 index 000000000..0a83796f9 --- /dev/null +++ b/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((set) => ({ + isPolling: false, + togglePolling: (bool) => set(({ isPolling }) => ({ isPolling: bool ?? !isPolling })), +}));