search bar in progress

src/client/src/FrontPage.js

@@ -7,7 +7,7 @@ import TournamentHistory from "./TournamentHistory";
 import TournamentTeams from "./TournamentTeams";
 import LoginPage from "./LoginPage";
 import AppBar from './components/AsuraBar';
-import { Button, Container, Typography, Box, Stack, Card, CardContent, CardMedia, Paper, Grid, Icon } from "@mui/material";
+import { Button, Container, Typography, Box, Stack, Card, CardContent, CardMedia, Paper, Grid, Icon, TextField } from "@mui/material";
 import AddCircleIcon from '@mui/icons-material/AddCircle';
 import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
 import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp';
@@ -156,13 +156,47 @@ function TournamentList() {
       .catch((err) => console.log(err.message));
   }, []);
 
+  const originalTournamentList = tournamentList
+
+  function search() {
+    let searchBase = []
+    let searchResult = []
+    tournamentList.map((tournament) => searchBase.push(tournament.name))
+    let input = document.getElementById("searchInput")
+    let inputUpperCase = input.value.toUpperCase()
+    for (let i = 0; i < searchBase.length; i++) {
+      let tournamentName = searchBase[i].toUpperCase()
+      if(tournamentName.indexOf(inputUpperCase) >= 0) {
+        searchResult.push(tournamentName)
+      }
+    }
+
+    let searchedList = []
+    for (let i = 0; i < tournamentList.length; i++) {
+      let name = tournamentList[i].name
+      for (let j = 0; j < searchResult.length; j++) {
+        if (name.toUpperCase() == searchResult[j]) {
+          searchedList.push(tournamentList[i])
+        }
+      }
+    }
+
+    if (input.value == "") {
+      console.log(originalTournamentList)
+      setTournamentList(originalTournamentList)
+    } else {
+      setTournamentList(searchedList)
+    }
+  }
+
   return <>
+  <TextField type="text" id="searchInput" label="Search" placeholder="Tournament Name" InputLabelProps={{shrink: true}} onChange={search}/>
   <Stack spacing={3} sx={{margin: "10px auto"}}>
     {tournamentList && tournamentList.map((tournamentObject) => <TournamentListItem key={tournamentObject.id.toString()} tournament={tournamentObject} />)}
   </Stack>
-    
   </>;
 }
+
 function Home() {
   return (
     <>