From 4de598b55cf36e510d142c29a6848b4feb83cdf6 Mon Sep 17 00:00:00 2001
From: michaelmumenthaler <michi.mumi@gmail.com>
Date: Thu, 16 Dec 2021 17:52:37 +0100
Subject: [PATCH] implement search, fix performance

Signed-off-by: michaelmumenthaler <michi.mumi@gmail.com>
---
 src/components/Body.tsx      | 33 ++++++++++++++++++-----
 src/components/DataTable.tsx | 51 ++++++++++++++++++++----------------
 src/components/Head.tsx      | 34 +++++++++++-------------
 src/components/Search.tsx    |  8 ++++--
 4 files changed, 77 insertions(+), 49 deletions(-)

diff --git a/src/components/Body.tsx b/src/components/Body.tsx
index c829553..241b7f7 100644
--- a/src/components/Body.tsx
+++ b/src/components/Body.tsx
@@ -5,15 +5,34 @@ import { Stack } from "@fluentui/react";
 
 function Body() {
   const [dataList, setDataList]: any[] = useState([]);
+  const [originalList, setoriginalList]: any[] = useState([]);
   const apiAddress: string = process.env.REACT_APP_API_ADDRESS as string;
 
   useEffect(() => {
-    (async () => {
-      const res = await fetch("http://" + apiAddress + "/api/v1/reports");
-      const json = await res.json();
-      setDataList(json);
-    })();
-  });
+    fetch("http://" + apiAddress + "/api/v1/reports")
+      .then((res) => {
+        res.json().then((data) => {
+          setoriginalList(data);
+          setDataList(data);
+        });
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  }, []);
+
+  const onSearch = (value: string | undefined) => {
+    if (!value) {
+      setDataList([...originalList]);
+    } else {
+      setDataList(
+        originalList.filter((dataItem: any) => {
+          const itemName = dataItem.serverName.toLowerCase();
+          return itemName.includes(value);
+        })
+      );
+    }
+  };
 
   return (
     <Stack
@@ -22,7 +41,7 @@ function Body() {
       tokens={{ childrenGap: "l1", padding: "l2" }}
     >
       <Stack.Item>
-        <Search />
+        <Search onSearch={onSearch} />
       </Stack.Item>
       <Stack.Item>
         <DataTable vulnData={dataList} />
diff --git a/src/components/DataTable.tsx b/src/components/DataTable.tsx
index cae871e..16deb27 100644
--- a/src/components/DataTable.tsx
+++ b/src/components/DataTable.tsx
@@ -1,34 +1,41 @@
 import { DetailsList, IGroup, SelectionMode, Stack } from "@fluentui/react";
+import { useEffect, useState } from "react";
 
 interface Props {
   vulnData: any[];
 }
 
 export const DataTable: React.FC<Props> = (props) => {
-  const itemsForRender = new Array<any>();
+  const [groupState, setGroupState] = useState(new Array<IGroup>());
+  const [itemToRenderState, setItemToRenderState] = useState(Array<any>());
 
-  const groups = new Array<IGroup>();
-  props.vulnData.forEach((server) => {
-    let index: number = 0;
+  useEffect(() => {
+    const itemsForRender = new Array<any>();
+    const groups = new Array<IGroup>();
+    props.vulnData.forEach((server) => {
+      let index: number = 0;
 
-    if (itemsForRender.length > 0) {
-      index = itemsForRender.length - 1;
-    } else {
-      index = itemsForRender.length;
-    }
-
-    server.vulnerableFiles.forEach((file: any) => {
-      itemsForRender.push({ vulnerableFiles: file.fileName });
+      if (itemsForRender.length > 0) {
+        index = itemsForRender.length;
+      } else {
+        index = itemsForRender.length;
+      }
+      server.vulnerableFiles.forEach((file: any) => {
+        itemsForRender.push({ vulnerableFiles: file.fileName });
+      });
+      groups.push({
+        key: server.serverName,
+        name: server.serverName,
+        level: 0,
+        count: server.vulnerableFiles.length,
+        startIndex: index,
+        isCollapsed: true,
+      });
     });
 
-    groups.push({
-      key: server.serverName,
-      name: server.serverName,
-      level: 0,
-      count: server.vulnerableFiles.length,
-      startIndex: index,
-    });
-  });
+    setGroupState(groups);
+    setItemToRenderState(itemsForRender);
+  }, [props.vulnData]);
 
   return (
     <Stack
@@ -36,8 +43,8 @@ export const DataTable: React.FC<Props> = (props) => {
       style={{ minWidth: "100%", backgroundColor: "white" }}
     >
       <DetailsList
-        items={itemsForRender}
-        groups={groups}
+        items={itemToRenderState}
+        groups={groupState}
         groupProps={{ isAllGroupsCollapsed: true }}
         columns={[
           {
diff --git a/src/components/Head.tsx b/src/components/Head.tsx
index 3764dda..786120c 100644
--- a/src/components/Head.tsx
+++ b/src/components/Head.tsx
@@ -3,25 +3,23 @@ import Logo from "./Logo";
 
 export default function Head() {
   return (
-    <div>
-      <Stack
-        horizontal
-        horizontalAlign="space-around"
-        verticalAlign="center"
-        tokens={{ childrenGap: "m", padding: "m" }}
-      >
-        <Stack.Item align="start">
-          <></>
-        </Stack.Item>
+    <Stack
+      horizontal
+      horizontalAlign="space-around"
+      verticalAlign="center"
+      tokens={{ childrenGap: "m", padding: "m" }}
+    >
+      <Stack.Item align="start">
+        <></>
+      </Stack.Item>
 
-        <Stack.Item align="center">
-          <Logo />
-        </Stack.Item>
+      <Stack.Item align="center">
+        <Logo />
+      </Stack.Item>
 
-        <Stack.Item align="end">
-          <></>
-        </Stack.Item>
-      </Stack>
-    </div>
+      <Stack.Item align="end">
+        <></>
+      </Stack.Item>
+    </Stack>
   );
 }
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
index 9074725..288972b 100644
--- a/src/components/Search.tsx
+++ b/src/components/Search.tsx
@@ -1,11 +1,15 @@
 import { SearchBox } from "@fluentui/react/lib/SearchBox";
 
-const Search = () => {
+interface ISearchProps {
+  onSearch: (value: string | undefined) => void;
+}
+
+const Search = (props: ISearchProps) => {
   return (
     <SearchBox
       style={{ minWidth: 800 }}
       placeholder="Search"
-      onSearch={(newValue) => console.log("value is " + newValue)}
+      onChange={(elem, newValue) => props.onSearch(newValue)}
     />
   );
 };