felixalb
/
asura-tmdb
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

finished search bar

This commit is contained in:
Kristoffer Longva Eriksen 2022-04-21 15:27:27 +02:00
parent f13129350f
commit a025aaee06
2 changed files with 34 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/client/src/FrontPage.js
View File

@ -156,41 +156,7 @@ 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>

35
src/client/src/TournamentHistory.js
View File

@ -1,6 +1,6 @@
import * as React from "react";
import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
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';
@ -73,6 +73,7 @@ function shorten(description, maxLength) {
function TournamentList() {
let [tournamentList, setTournamentList] = React.useState([]);
let [originalList, setOriginalList] = React.useState([])
React.useEffect(() => {
fetch(process.env.REACT_APP_API_URL + `/tournament/getTournaments`)
@ -95,11 +96,43 @@ function shorten(description, maxLength) {
}
setTournamentList(tournamenthistory);
setOriginalList(tournamenthistory)
})
.catch((err) => console.log(err.message));
}, []);
function search() {
let searchBase = []
let searchResult = []
originalList.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 < originalList.length; i++) {
let name = originalList[i].name
for (let j = 0; j < searchResult.length; j++) {
if (name.toUpperCase() == searchResult[j]) {
searchedList.push(originalList[i])
}
}
}
if (input.value == "") {
setTournamentList(originalList)
} 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>