refactor according to code review

y-scope · Dec 2, 2024 · 698dd28 · 698dd28
1 parent ed2d79a
commit 698dd28
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 18 deletions.
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
@@ -1,6 +1,5 @@
 import React, {
     useContext,
-    useRef,
     useState,
 } from "react";
 
@@ -22,7 +21,10 @@ import {
     TAB_DISPLAY_NAMES,
     TAB_NAME,
 } from "../../../../../typings/tab";
-import {QUERY_PROGRESS_DONE} from "../../../../../typings/worker";
+import {
+    QUERY_PROGRESS_DONE,
+    QueryArgs,
+} from "../../../../../typings/worker";
 import {isDisabled} from "../../../../../utils/states";
 import CustomTabPanel from "../CustomTabPanel";
 import PanelTitleButton from "../PanelTitleButton";
@@ -36,6 +38,24 @@ enum QUERY_OPTION {
     IS_REGEX = "isRegex"
 }
 
+/**
+ * Determines if the query is case-sensitive based on the provided query options.
+ *
+ * @param queryOptions
+ * @return True if the query is case-sensitive.
+ */
+const getIsCaseSensitive =
+    (queryOptions: QUERY_OPTION[]) => queryOptions.includes(QUERY_OPTION.IS_CASE_SENSITIVE);
+
+/**
+ * Determines if the query is a regular expression based on the provided query options.
+ *
+ * @param queryOptions
+ * @return True if the query is a regular expression.
+ */
+const getIsRegex =
+    (queryOptions: QUERY_OPTION[]) => queryOptions.includes(QUERY_OPTION.IS_REGEX);
+
 /**
  * Displays a panel for submitting queries and viewing query results.
  *
@@ -45,24 +65,31 @@ const SearchTabPanel = () => {
     const {queryProgress, queryResults, startQuery, uiState} = useContext(StateContext);
     const [isAllExpanded, setIsAllExpanded] = useState<boolean>(true);
     const [queryOptions, setQueryOptions] = useState<QUERY_OPTION[]>([]);
-    const queryStringRef = useRef<string>("");
+    const [queryString, setQueryString] = useState<string>("");
+
+    const handleQuerySubmit = (newArgs: Partial<QueryArgs>) => {
+        startQuery({
+            isCaseSensitive: getIsCaseSensitive(queryOptions),
+            isRegex: getIsRegex(queryOptions),
+            queryString: queryString,
+            ...newArgs,
+        });
+    };
 
     const handleQueryInputChange = (ev: React.ChangeEvent<HTMLTextAreaElement>) => {
-        queryStringRef.current = ev.target.value;
-        const isCaseSensitive = queryOptions.includes(QUERY_OPTION.IS_CASE_SENSITIVE);
-        const isRegex = queryOptions.includes(QUERY_OPTION.IS_REGEX);
-        startQuery(ev.target.value, isRegex, isCaseSensitive);
+        setQueryString(ev.target.value);
+        handleQuerySubmit({queryString: ev.target.value});
     };
+
     const handleQueryOptionsChange = (
         _: React.MouseEvent<HTMLElement>,
         newOptions: QUERY_OPTION[]
     ) => {
         setQueryOptions(newOptions);
-        if ("" !== queryStringRef.current) {
-            const isCaseSensitive = newOptions.includes(QUERY_OPTION.IS_CASE_SENSITIVE);
-            const isRegex = newOptions.includes(QUERY_OPTION.IS_REGEX);
-            startQuery(queryStringRef.current, isRegex, isCaseSensitive);
-        }
+        handleQuerySubmit({
+            isCaseSensitive: getIsCaseSensitive(newOptions),
+            isRegex: getIsRegex(newOptions),
+        });
     };
 
     return (

diff --git a/src/contexts/StateContextProvider.tsx b/src/contexts/StateContextProvider.tsx
@@ -26,6 +26,7 @@ import {
     FileSrcType,
     MainWorkerRespMessage,
     QUERY_PROGRESS_INIT,
+    QueryArgs,
     QueryResults,
     WORKER_REQ_CODE,
     WORKER_RESP_CODE,
@@ -71,7 +72,7 @@ interface StateContextType {
     loadFile: (fileSrc: FileSrcType, cursor: CursorType) => void,
     loadPageByAction: (navAction: NavigationAction) => void,
     setLogLevelFilter: (newLogLevelFilter: LogLevelFilter) => void,
-    startQuery: (queryString: string, isRegex: boolean, isCaseSensitive: boolean) => void,
+    startQuery: (queryArgs: QueryArgs) => void,
 }
 const StateContext = createContext<StateContextType>({} as StateContextType);
 
@@ -333,11 +334,8 @@ const StateContextProvider = ({children}: StateContextProviderProps) => {
         }
     }, [postPopUp]);
 
-    const startQuery = useCallback((
-        queryString: string,
-        isRegex: boolean,
-        isCaseSensitive: boolean
-    ) => {
+    const startQuery = useCallback((queryArgs: QueryArgs) => {
+        const {queryString, isRegex, isCaseSensitive} = queryArgs;
         setQueryResults(STATE_DEFAULT.queryResults);
         if (null === mainWorkerRef.current) {
             console.error("Unexpected null mainWorkerRef.current");

diff --git a/src/typings/worker.ts b/src/typings/worker.ts
@@ -105,6 +105,12 @@ type WorkerReqMap = {
     },
 };
 
+interface QueryArgs {
+    queryString: string;
+    isCaseSensitive: boolean;
+    isRegex: boolean;
+}
+
 type TextRange = [number, number];
 
 interface QueryResultsType {
@@ -190,6 +196,7 @@ export type {
     FileSrcType,
     MainWorkerReqMessage,
     MainWorkerRespMessage,
+    QueryArgs,
     QueryResults,
     QueryResultsType,
     WorkerReq,