Load all line changed to load 10 lines (#3)

* Load all line changed to load 10 lines

* Tooltip text fix

* Chore: Remove magic number anti-pattern

* Chore: try search flex on mobile view

* Chore: add query params

* Chore: Api route fix and vercel.json removed

* chore: fix missing spots loadcount

Author: kartik-gupta-ij

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

@@ -30,21 +30,45 @@ type CodeContainerProps = {
     overlap_to: number;
   }[];
 };
+const loadCount = 10;
 
 export function CodeContainer(props: CodeContainerProps) {
   const { context, line_from, sub_matches, line_to } = props;
   const [codeLineFrom, setCodeLineFrom] = useMountedState(line_from);
-  const [codeLineTo, setCodeLineTo] = useMountedState(line_to);
+  const [codeLineTo, setCodeLineTo] = useMountedState(0);
   const [code, setCode] = useMountedState(props.context.snippet);
 
   const loadUpperCode = () => {
-    setCodeLineFrom(1);
-    setCode(`${context.upper_lines}${code}`);
+    const upperCodeArray = context.upper_lines.split("\n");
+    const upperCode = upperCodeArray
+      .slice(
+        codeLineFrom - loadCount + 1 > 0 ? codeLineFrom - loadCount + 1 : 0,
+        codeLineFrom
+      )
+      .join("\n");
+    setCodeLineFrom((number) => {
+      return number - loadCount > 0 ? number - loadCount : 1;
+    });
+    setCode(`${upperCode}${code}`);
   };
 
   const loadLowerCode = () => {
-    setCodeLineTo(Infinity);
-    setCode(`${code}${context.lower_lines}`);
+    const lowerCodeArray = context.lower_lines.split("\n");
+    if (lowerCodeArray.length > codeLineTo + loadCount) {
+      const lowerCode = lowerCodeArray
+        .slice(codeLineTo, codeLineTo + loadCount + 1)
+        .join("\n");
+      setCodeLineTo((number) => {
+        return number + loadCount;
+      });
+      setCode(`${code}${lowerCode}`);
+    } else {
+      const lowerCode = lowerCodeArray
+        .slice(codeLineTo, lowerCodeArray.length)
+        .join("\n");
+      setCodeLineTo(lowerCodeArray.length);
+      setCode(`${code}${lowerCode}`);
+    }
   };
 
   return (
@@ -100,14 +124,19 @@ export function CodeContainer(props: CodeContainerProps) {
                     }
               }
             >
-              <Tooltip label={`Expand all`} withArrow>
+              <Tooltip
+                label={`Load ${
+                  codeLineFrom - loadCount > 0 ? codeLineFrom - loadCount : 1
+                } to ${codeLineFrom - 1} `}
+                withArrow
+              >
                 <span className={classes.codeLoad} onClick={loadUpperCode}>
                   <IconFoldUp />
                 </span>
               </Tooltip>
               <div className={classes.codeLine}>
                 <span className={classes.codeNumber}>
-                  @@ {1} - {line_from} of {context.file_name}
+                  @@ {1} - {codeLineFrom - 1} of {context.file_name}
                 </span>
               </div>
             </div>
@@ -145,7 +174,10 @@ export function CodeContainer(props: CodeContainerProps) {
             ))}
             <div
               style={
-                codeLineTo === Infinity
+                codeLineTo === context.lower_lines.split("\n").length ||
+                context.lower_lines === undefined ||
+                context.lower_lines === null ||
+                context.lower_lines === ""
                   ? { display: "none" }
                   : {
                       display: "flex",
@@ -158,7 +190,15 @@ export function CodeContainer(props: CodeContainerProps) {
                     }
               }
             >
-              <Tooltip label={`Expand all`} withArrow>
+              <Tooltip
+                label={`Load ${line_to + codeLineTo + 2} to ${
+                  line_to + codeLineTo + loadCount+1 <
+                  context.lower_lines.split("\n").length + line_to
+                    ? line_to + codeLineTo + loadCount+1
+                    : context.lower_lines.split("\n").length + line_to
+                }`}
+                withArrow
+              >
                 <span
                   className={classes.codeLoad}
                   style={{
@@ -171,7 +211,9 @@ export function CodeContainer(props: CodeContainerProps) {
               </Tooltip>
               <div className={classes.codeLine}>
                 <span className={classes.codeNumber}>
-                  @@ {line_to} - {"end of file"} of {context.file_name}
+                  @@ {line_to + codeLineTo + 2} -{" "}
+                  {context.lower_lines.split("\n").length + line_to} of{" "}
+                  {context.file_name}
                 </span>
               </div>
             </div>

frontend/src/components/CodeContainer/index.tsx

@@ -6,6 +6,9 @@
   margin: 0 auto;
   padding: var(--mantine-spacing-md);
   gap: var(--mantine-spacing-sm);
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
 }
 
 .demoBtn{

frontend/src/components/DemoSearch/DemoSearch.module.css

@@ -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/components/MainSection/index.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>
+);