From 6fb414a488941d227293edff85f8a2b53af48030 Mon Sep 17 00:00:00 2001
From: Bilal Meddah <bilal.meddah@epfl.ch>
Date: Tue, 28 May 2024 12:21:59 +0200
Subject: [PATCH] update: refactor useFullTextSearch hook

---
 .../components/FullTextSearch/index.tsx       | 53 ++-----------------
 .../FullTextSearch/useFullTextSearch.ts       | 44 +++++++++++++++
 2 files changed, 49 insertions(+), 48 deletions(-)
 create mode 100644 src/shared/components/FullTextSearch/useFullTextSearch.ts

diff --git a/src/shared/components/FullTextSearch/index.tsx b/src/shared/components/FullTextSearch/index.tsx
index bdc3d24bc..8cb7dd143 100644
--- a/src/shared/components/FullTextSearch/index.tsx
+++ b/src/shared/components/FullTextSearch/index.tsx
@@ -1,19 +1,14 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { Link } from 'react-router-dom';
-import { useQuery } from 'react-query';
 import CommandPalette from 'react-cmdk';
-import { useNexusContext } from '@bbp/react-nexus';
 import { Spin, Tag, Empty } from 'antd';
-import { groupBy } from 'lodash';
+import { LoadingOutlined } from '@ant-design/icons';
+
+import { getNormalizedTypes, getResourceLabel } from 'shared/utils';
+import { useFullTextSearch } from './useFullTextSearch';
 
-import {
-  getNormalizedTypes,
-  getOrgAndProjectFromProjectId,
-  getResourceLabel,
-} from 'shared/utils';
 import 'react-cmdk/dist/cmdk.css';
 import './styles.scss';
-import { LoadingOutlined } from '@ant-design/icons';
 
 type Props = {
   openCmdk: boolean;
@@ -34,44 +29,6 @@ const TagRenderer = ({ type }: { type?: string | string[] }) => {
   );
 };
 
-export function useFullTextSearch() {
-  const [search, setSearch] = useState('');
-  const nexus = useNexusContext();
-
-  const onSearch = (value: string) => setSearch(value);
-  const resetSearch = () => setSearch('');
-
-  const { isLoading, data } = useQuery({
-    enabled: !!search,
-    queryKey: ['cmdk-search', { search }],
-    queryFn: () =>
-      nexus.Resource.list(undefined, undefined, {
-        q: search,
-        deprecated: false,
-      }),
-    select: data => data._results,
-    staleTime: 2,
-  });
-  const resources = groupBy(data, '_project');
-
-  const searchResults = Object.entries(resources).map(([key, value]) => {
-    const orgProject = getOrgAndProjectFromProjectId(key);
-    return {
-      id: key,
-      title: orgProject,
-      items: value,
-    };
-  });
-
-  return {
-    search,
-    onSearch,
-    resetSearch,
-    isLoading,
-    searchResults,
-  };
-}
-
 const FullTextSearch = ({ openCmdk, onOpenCmdk }: Props) => {
   const {
     search,
diff --git a/src/shared/components/FullTextSearch/useFullTextSearch.ts b/src/shared/components/FullTextSearch/useFullTextSearch.ts
new file mode 100644
index 000000000..a9eace3ce
--- /dev/null
+++ b/src/shared/components/FullTextSearch/useFullTextSearch.ts
@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import { useNexusContext } from '@bbp/react-nexus';
+import { useQuery } from 'react-query';
+import { getOrgAndProjectFromProjectId } from 'shared/utils';
+import { groupBy } from 'lodash';
+
+export function useFullTextSearch() {
+  const [search, setSearch] = useState('');
+  const nexus = useNexusContext();
+
+  const onSearch = (value: string) => setSearch(value);
+  const resetSearch = () => setSearch('');
+
+  const { isLoading, data } = useQuery({
+    enabled: !!search,
+    queryKey: ['cmdk-search', { search }],
+    queryFn: () =>
+      nexus.Resource.list(undefined, undefined, {
+        q: search,
+        deprecated: false,
+      }),
+    select: data => data._results,
+    staleTime: 2,
+  });
+
+  const resources = groupBy(data, '_project');
+
+  const searchResults = Object.entries(resources).map(([key, value]) => {
+    const orgProject = getOrgAndProjectFromProjectId(key);
+    return {
+      id: key,
+      title: orgProject,
+      items: value,
+    };
+  });
+
+  return {
+    search,
+    onSearch,
+    resetSearch,
+    isLoading,
+    searchResults,
+  };
+}