From c8b1e3c29e0bbfb19eba262d6ddad54e24d3a233 Mon Sep 17 00:00:00 2001
From: Miquel de Domingo <miquelddg@gmail.com>
Date: Fri, 3 Nov 2023 18:40:10 +0100
Subject: [PATCH] fix: query only when container view is active

---
 .../job-dialog/content/container/use-docker-hub.ts        | 4 +++-
 src/apps/editor/hooks/index.ts                            | 1 +
 src/apps/editor/hooks/use-job-view.ts                     | 8 ++++++++
 3 files changed, 12 insertions(+), 1 deletion(-)
 create mode 100644 src/apps/editor/hooks/use-job-view.ts

diff --git a/src/apps/editor/components/job-dialog/content/container/use-docker-hub.ts b/src/apps/editor/components/job-dialog/content/container/use-docker-hub.ts
index 7ca6d34..acd8ae1 100644
--- a/src/apps/editor/components/job-dialog/content/container/use-docker-hub.ts
+++ b/src/apps/editor/components/job-dialog/content/container/use-docker-hub.ts
@@ -2,6 +2,7 @@ import { useQuery } from '@tanstack/react-query';
 import { useDebounce } from 'use-debounce';
 
 import type { DockerResponse } from '@/editor/domain/docker';
+import { useJobView } from '@/editor/hooks';
 
 const fetchDockerHub = async (searchTerm: string): Promise<DockerResponse> => {
   const response = await fetch(`/api/docker?page_size=25&q=${searchTerm}`, {
@@ -17,11 +18,12 @@ const fetchDockerHub = async (searchTerm: string): Promise<DockerResponse> => {
 
 export const useDockerHub = (term: string) => {
   const [debouncedTerm] = useDebounce(term, 350);
+  const isContainerViewActive = useJobView('con');
 
   const { data, isLoading, isPending, error } = useQuery({
     queryKey: ['docker-images', debouncedTerm],
     queryFn: () => fetchDockerHub(debouncedTerm),
-    enabled: !!debouncedTerm,
+    enabled: !!debouncedTerm && isContainerViewActive,
   });
 
   return { data, isLoading: (isLoading || isPending) && term !== '', error };
diff --git a/src/apps/editor/hooks/index.ts b/src/apps/editor/hooks/index.ts
index c10de0a..d60bfdc 100644
--- a/src/apps/editor/hooks/index.ts
+++ b/src/apps/editor/hooks/index.ts
@@ -4,6 +4,7 @@ export { useChangesStack } from './use-changes-stack';
 export { useDraggable } from './use-draggable';
 export { useExpandable } from './use-expandable';
 export { useSelectedJobId } from './use-selected-job-id';
+export { useJobView } from './use-job-view';
 export { useSizeObserver } from './use-size-observer';
 export { useToggler } from './use-toggler';
 export { useViewport } from './use-viewport';
diff --git a/src/apps/editor/hooks/use-job-view.ts b/src/apps/editor/hooks/use-job-view.ts
new file mode 100644
index 0000000..f3f7be0
--- /dev/null
+++ b/src/apps/editor/hooks/use-job-view.ts
@@ -0,0 +1,8 @@
+import { useSearchParam } from '@/chain';
+
+import type { Views } from '../components/job-dialog/types';
+
+export const useJobView = (view: Views) => {
+  const { getParam } = useSearchParam();
+  return getParam('view') === view;
+};