Load all line changed to load 10 lines

frontend/src/components/CodeContainer/index.tsx

@@ -34,17 +34,38 @@ type CodeContainerProps = {
 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 - 11 > 0 ? codeLineFrom - 11 : 0, codeLineFrom)
+      .join("\n");
+    setCodeLineFrom((number) => {
+      return number - 10 > 0 ? number - 10 : 1;
+    });
+    setCode(`${upperCode}${code}`);
   };
 
   const loadLowerCode = () => {
-    setCodeLineTo(Infinity);
-    setCode(`${code}${context.lower_lines}`);
+    const lowerCodeArray = context.lower_lines.split("\n");
+    if (lowerCodeArray.length > codeLineTo + 10) {
+      const lowerCode = lowerCodeArray
+        .slice(codeLineTo, codeLineTo + 11)
+        .join("\n");
+      setCodeLineTo((number) => {
+        return number + 10;
+      });
+      setCode(`${code}${lowerCode}`);
+    }
+    else{
+      const lowerCode = lowerCodeArray
+        .slice(codeLineTo, lowerCodeArray.length)
+        .join("\n");
+      setCodeLineTo(lowerCodeArray.length);
+      setCode(`${code}${lowerCode}`);
+    }
   };
 
   return (
@@ -100,14 +121,14 @@ export function CodeContainer(props: CodeContainerProps) {
                     }
               }
             >
-              <Tooltip label={`Expand all`} withArrow>
+              <Tooltip label={`Load ${codeLineFrom-10} 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 +166,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 +182,7 @@ export function CodeContainer(props: CodeContainerProps) {
                     }
               }
             >
-              <Tooltip label={`Expand all`} withArrow>
+              <Tooltip label={`Load ${line_to + codeLineTo+2} to ${line_to + codeLineTo+11}`} withArrow>
                 <span
                   className={classes.codeLoad}
                   style={{
@@ -171,7 +195,8 @@ 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>