Aydogdy
/
react-typescript-chess-federation
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Table search implemented

This commit is contained in:
VividTruthKeeper 2022-08-29 23:11:26 +05:00
parent 8ef8cfc8f0
commit 9bf6809f99
3 changed files with 69 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

166
src/components/global/SearchTable.tsx
View File

@ -1,6 +1,6 @@
// Modules
import { v4 as uuidv4 } from "uuid";
import { useMemo, useState, useRef, useEffect } from "react";
import React, { useState, useEffect } from "react";
// Icons
import search from "../../icons/search.svg";
@ -9,98 +9,52 @@ import search from "../../icons/search.svg";
import { PlayersData } from "../../types/players";
// Helpers
import { searchFull, assembleData } from "../../helpers/searchTable";
const playersData: PlayersData[] = [
{
id: "204308",
title: "Гроссмейстер",
surname: "Аманов",
name: "Аман",
birth: "1990",
classical: "2847",
rapid: "2846",
blitz: "2847",
},
{
id: "204308",
title: "Мастер",
surname: "Какаджанов",
name: "Керим",
birth: "2000",
classical: "2847",
rapid: "2846",
blitz: "2847",
},
{
id: "204308",
title: "Гроссмейстер",
surname: "Аманов",
name: "Аман",
birth: "1990",
classical: "2847",
rapid: "2846",
blitz: "2847",
},
{
id: "204308",
title: "Мастер",
surname: "Какаджанов",
name: "Керим",
birth: "2000",
classical: "2847",
rapid: "2846",
blitz: "2847",
},
];
import { getTeam } from "../../helpers/apiRequests";
const SearchTable = () => {
// Inner Types
type searchItemType = [string, React.Dispatch<React.SetStateAction<string>>];
// State
const [searchItem, setSearchItem]: searchItemType = useState("$#@");
const [playerData, setPlayerData]: [
PlayersData[],
React.Dispatch<PlayersData[]>
] = useState([
{
id: -1,
title: "",
national: 0,
img: "",
name: "",
birthday: -1,
classic: -1,
rapid: -1,
blitz: -1,
},
]);
// Memo
const data: string[][] = useMemo(() => assembleData(playersData), []);
const priority: number[] = useMemo(
() => searchFull(data, searchItem),
[searchItem, data]
);
// Ref
const input = useRef<HTMLInputElement>(null);
// Effect
useEffect(() => {
const items = Array.from(
document.querySelectorAll<HTMLElement>(".search-tr")
);
items.forEach((el, i) => {
el.style.order = `${priority[i]}`;
});
}, [priority]);
getTeam(setPlayerData);
}, []);
const [searchItem, setSearchItem]: searchItemType = useState("$#@");
return (
<div className="search-table">
<form className="search-field" onSubmit={(e) => e.preventDefault()}>
<input ref={input} type="text" placeholder="Type name or player ID" />
<button
type="button"
className="search-button"
onClick={() => {
if (input.current) {
if (input.current.value === "") {
setSearchItem("$#@");
} else {
setSearchItem(input.current.value.toLocaleLowerCase());
}
<input
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.value.length === 0) {
setSearchItem("$#@");
} else {
setSearchItem(e.target.value);
}
}}
>
Search
</button>
type="text"
placeholder="Введите имя ID игрока"
/>
{/* <button type="button" className="search-button">
Поиск
</button> */}
<div className="loop">
<img src={search} alt="" />
</div>
@ -112,29 +66,47 @@ const SearchTable = () => {
<th>№</th>
<th>ID</th>
<th>Титул игрока</th>
<th>Фамилия</th>
<th>Имя</th>
<th>Год рождения</th>
<th>Классика</th>
<th>Рапид</th>
<th>Блиц</th>
</tr>
{playersData.map((player, i) => {
return (
<tr key={uuidv4()} className="search-tr" data-id={priority[i]}>
{/* N_o */}
<td>{i + 1}</td>
<td>{player.id}</td>
<td>{player.title}</td>
<td>{player.surname}</td>
<td>{player.name}</td>
<td>{player.birth}</td>
<td>{player.classical}</td>
<td>{player.rapid}</td>
<td>{player.blitz}</td>
</tr>
);
})}
{playerData
? playerData.map((player, i) => {
if (searchItem === "$#@") {
return (
<tr key={uuidv4()} className="search-tr">
{/* N_o */}
<td>{i + 1}</td>
<td>{player.id}</td>
<td>{player.title}</td>
<td>{player.name}</td>
<td>{player.birthday}</td>
<td>{player.classic}</td>
<td>{player.rapid}</td>
<td>{player.blitz}</td>
</tr>
);
} else {
if (Object.values(player).toString().includes(searchItem)) {
return (
<tr key={uuidv4()} className="search-tr">
{/* N_o */}
<td>{i + 1}</td>
<td>{player.id}</td>
<td>{player.title}</td>
<td>{player.name}</td>
<td>{player.birthday}</td>
<td>{player.classic}</td>
<td>{player.rapid}</td>
<td>{player.blitz}</td>
</tr>
);
}
}
})
: ""}
</tbody>
</table>
</div>

9
src/helpers/counter.ts
View File

@ -1,9 +0,0 @@
export const counter = (array: string[], searchItem: string): number => {
return array.filter(
(el) => el.toLocaleLowerCase() === searchItem.toLocaleLowerCase()
).length;
};
export const countChar = (str: string, searchItem: string): number => {
return str.split(searchItem).length - 1;
};

55
src/helpers/searchTable.ts
View File

@ -1,55 +0,0 @@
import { counter, countChar } from "./counter";
export const assembleData = (array: Object[]): string[][] => {
const out: string[][] = [];
array.forEach((el) => {
const pushed = Object.keys(el).map((method) => {
return (el as any)[method];
});
out.push(pushed);
});
return out;
};
export const exactSearch = (
assembled: string[][],
searchItem: string
): number[] => {
const priority: number[] = [];
assembled.forEach((arr) => {
let count = 0;
const result = counter(arr, searchItem);
count = count - result;
priority.push(count);
});
return priority;
};
export const charSearch = (assembled: string[][], searchItem: string) => {
const priority: number[] = [];
assembled.forEach((arr) => {
let count = 0;
const conCat: string = arr.join("").toLocaleLowerCase();
const result = countChar(conCat, searchItem);
count = count - result;
priority.push(count);
});
return priority;
};
export const searchFull = (assembled: string[][], searchItem: string) => {
const exact = exactSearch(assembled, searchItem);
const char = charSearch(assembled, searchItem);
const temp: number[] = [];
exact.forEach((el, i) => {
temp.push(el + char[i]);
});
return temp;
};