Chore: add query params

frontend/package.json

@@ -17,7 +17,8 @@
     "http-status-codes": "^2.3.0",
     "prism-react-renderer": "^2.1.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.18.0"
   },
   "devDependencies": {
     "@types/node": "^20.8.0",

frontend/pnpm-lock.yaml

@@ -29,6 +29,9 @@ dependencies:
   react-dom:
     specifier: ^18.2.0
     version: 18.2.0(react@18.2.0)
+  react-router-dom:
+    specifier: ^6.18.0
+    version: 6.18.0(react-dom@18.2.0)(react@18.2.0)
 
 devDependencies:
   '@types/node':
@@ -693,6 +696,11 @@ packages:
       fastq: 1.15.0
     dev: true
 
+  /@remix-run/router@1.11.0:
+    resolution: {integrity: sha512-BHdhcWgeiudl91HvVa2wxqZjSHbheSgIiDvxrF1VjFzBzpTtuDPkOdOi3Iqvc08kXtFkLjhbS+ML9aM8mJS+wQ==}
+    engines: {node: '>=14.0.0'}
+    dev: false
+
   /@swc/core-darwin-arm64@1.3.90:
     resolution: {integrity: sha512-he0w74HvcoufE6CZrB/U/VGVbc7021IQvYrn1geMACnq/OqMBqjdczNtdNfJAy87LZ4AOUjHDKEIjsZZu7o8nQ==}
     engines: {node: '>=10'}
@@ -2044,6 +2052,29 @@ packages:
       use-sidecar: 1.1.2(@types/react@18.2.21)(react@18.2.0)
     dev: false
 
+  /react-router-dom@6.18.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-Ubrue4+Ercc/BoDkFQfc6og5zRQ4A8YxSO3Knsne+eRbZ+IepAsK249XBH/XaFuOYOYr3L3r13CXTLvYt5JDjw==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
+    dependencies:
+      '@remix-run/router': 1.11.0
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-router: 6.18.0(react@18.2.0)
+    dev: false
+
+  /react-router@6.18.0(react@18.2.0):
+    resolution: {integrity: sha512-vk2y7Dsy8wI02eRRaRmOs9g2o+aE72YCx5q9VasT1N9v+lrdB79tIqrjMfByHiY5+6aYkH2rUa5X839nwWGPDg==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      react: '>=16.8'
+    dependencies:
+      '@remix-run/router': 1.11.0
+      react: 18.2.0
+    dev: false
+
   /react-style-singleton@2.2.1(@types/react@18.2.21)(react@18.2.0):
     resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
     engines: {node: '>=10'}

frontend/src/components/MainSection/index.tsx

@@ -11,31 +11,58 @@ import {
 import { IconSearch } from "@tabler/icons-react";
 import useMountedState from "@/hooks/useMountedState";
 import { useGetSearchResult } from "@/hooks/useGetSearchResult";
-import { getHotkeyHandler } from "@mantine/hooks";
+import { getHotkeyHandler, useHotkeys } from "@mantine/hooks";
 import { FileTree } from "../FIleTree";
 import { CodeContainer } from "../CodeContainer";
 import classes from "./Main.module.css";
 import DemoSearch from "../DemoSearch";
+import { useSearchParams } from "react-router-dom";
+import { useEffect } from "react";
 
 export default function Main() {
   const [query, setQuery] = useMountedState("");
   const { data, getSearch, loading, error, resetData } = useGetSearchResult();
+  const [searchParams, setSearchParams] = useSearchParams();
 
+  useHotkeys([
+    [
+      "/",
+      () => {
+        const input = document.querySelector("input");
+        input?.focus();
+      },
+    ],
+  ]);
   const handleSubmit = () => {
     resetData();
     if (query) {
       getSearch(query);
+      setSearchParams({ query });
     }
   };
 
   const handleDemoSearch = (query: string) => {
     resetData();
     if (query) {
+      setSearchParams({ query: query });
       setQuery(query);
       getSearch(query);
     }
   };
 
+  useEffect(() => {
+    if (searchParams.get("query")&&searchParams.get("query")!==query) {
+      handleDemoSearch(searchParams.get("query") ?? "");
+    }
+  }, [searchParams.get("query")]);
+
+  useEffect(() => {
+    if (query === "") {
+      resetData();
+      window.history.replaceState({}, "", "/");
+    }
+  }, [query]);
+
   return (
     <Container size="lg">
       <TextInput
@@ -57,7 +84,7 @@ export default function Main() {
         }
         rightSectionWidth={"6rem"}
         value={query}
-        pt={ data ? "1rem" : "5rem" }
+        pt={data || loading ? "1rem" : "5rem"}
         required
         onChange={(event: any) => setQuery(event.currentTarget.value)}
         onKeyDown={getHotkeyHandler([["Enter", handleSubmit]])}
@@ -68,6 +95,7 @@ export default function Main() {
           zIndex: 100,
           backgroundColor: "#fff",
         }}
+        ref={(input) => input && input.focus()}
       />
       {data && (
         <Box

frontend/src/main.tsx

@@ -1,9 +1,12 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import { BrowserRouter } from "react-router-dom";
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
+ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);