show queryResults in search tab panel

Author: Henry8192

src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx

@@ -1,4 +1,8 @@
-import {useState} from "react";
+import {
+    useContext,
+    useRef,
+    useState,
+} from "react";
 
 import {
     AccordionGroup,
@@ -10,11 +14,11 @@ import {
 import UnfoldLessIcon from "@mui/icons-material/UnfoldLess";
 import UnfoldMoreIcon from "@mui/icons-material/UnfoldMore";
 
+import {StateContext} from "../../../../../contexts/StateContextProvider";
 import {
     TAB_DISPLAY_NAMES,
     TAB_NAME,
 } from "../../../../../typings/tab";
-import {QueryResults} from "../../../../../typings/worker";
 import CustomTabPanel from "../CustomTabPanel";
 import TitleButton from "../TitleButton";
 import ResultsGroup from "./ResultsGroup";
@@ -25,37 +29,6 @@ enum SEARCH_OPTION {
     IS_REGEX = "isRegex"
 }
 
-/**
- *
- */
-const SAMPLE_RESULTS: QueryResults = new Map([
-    [1,
-        [
-            {logEventNum: 1,
-                message: "hi how are you",
-                matchRange: [0,
-                    2] as [number, number]},
-        ]],
-    [2,
-        [
-            {logEventNum: 202,
-                message: "i'm a super long message that supposedly overflows in the panel width.",
-                matchRange: [4,
-                    6] as [number, number]},
-        ]],
-    [8,
-        [
-            {logEventNum: 808,
-                message: "hi how are you",
-                matchRange: [4,
-                    6] as [number, number]},
-            {logEventNum: 809,
-                message: "hi how are you",
-                matchRange: [4,
-                    6] as [number, number]},
-        ]],
-]);
-
 /**
  * Displays a panel for submitting search queries and viewing query results.
  *
@@ -64,24 +37,34 @@ const SAMPLE_RESULTS: QueryResults = new Map([
 const SearchTabPanel = () => {
     const [isAllExpanded, setIsAllExpanded] = useState<boolean>(true);
     const [searchOptions, setSearchOptions] = useState<SEARCH_OPTION[]>([]);
+    const searchTextRef = useRef<HTMLTextAreaElement>(null);
+    const {queryResults, startQuery} = useContext(StateContext);
+    const handleSearch = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        if ("Enter" === event.key && searchTextRef.current) {
+            event.preventDefault();
+            const isCaseSensitive = searchOptions.includes(SEARCH_OPTION.IS_CASE_SENSITIVE);
+            const isRegex = searchOptions.includes(SEARCH_OPTION.IS_REGEX);
+            startQuery(searchTextRef.current.value, isRegex, isCaseSensitive);
+        }
+    };
 
     return (
         <CustomTabPanel
             tabName={TAB_NAME.SEARCH}
             title={TAB_DISPLAY_NAMES[TAB_NAME.SEARCH]}
-            titleButtons={<>
+            titleButtons={
                 <TitleButton onClick={() => { setIsAllExpanded((v) => !v); }}>
                     {isAllExpanded ?
                         <UnfoldLessIcon/> :
                         <UnfoldMoreIcon/>}
                 </TitleButton>
-            </>}
+            }
         >
             <Textarea
                 maxRows={7}
                 placeholder={"Search"}
                 size={"sm"}
-                slotProps={{endDecorator: {sx: {marginBlockStart: 0, display: "block"}}}}
+                slotProps={{textarea: {ref: searchTextRef}, endDecorator: {sx: {marginBlockStart: 0, display: "block"}}}}
                 sx={{flexDirection: "row"}}
                 endDecorator={
                     <>
@@ -109,14 +92,15 @@ const SearchTabPanel = () => {
                             </IconButton>
                         </ToggleButtonGroup>
                     </>
-                }/>
+                }
+                onKeyDown={handleSearch}/>
             <AccordionGroup
                 disableDivider={true}
                 size={"sm"}
             >
                 <ResultsGroup
                     isAllExpanded={isAllExpanded}
-                    queryResults={SAMPLE_RESULTS}/>
+                    queryResults={queryResults}/>
             </AccordionGroup>
         </CustomTabPanel>
     );