diff --git a/src/components/global/SearchTable.tsx b/src/components/global/SearchTable.tsx index 833bd0a..fafcc84 100644 --- a/src/components/global/SearchTable.tsx +++ b/src/components/global/SearchTable.tsx @@ -1,5 +1,6 @@ // Modules import { v4 as uuidv4 } from "uuid"; +import { useMemo, useState, useRef, useEffect } from "react"; // Icons import search from "../../icons/search.svg"; @@ -7,6 +8,9 @@ import search from "../../icons/search.svg"; // Types import { PlayersData } from "../../types/playersData"; +// Helpers +import { searchFull, assembleData } from "../../helpers/searchTable"; + const playersData: PlayersData[] = [ { id: "204308", @@ -51,11 +55,50 @@ const playersData: PlayersData[] = [ ]; const SearchTable = () => { + // Inner Types + type searchItemType = [string, React.Dispatch>]; + + // State + const [searchItem, setSearchItem]: searchItemType = useState("$#@"); + + // Memo + const data: string[][] = useMemo(() => assembleData(playersData), []); + + const priority: number[] = useMemo( + () => searchFull(data, searchItem), + [searchItem, data] + ); + + // Ref + const input = useRef(null); + + // Effect + useEffect(() => { + const items = Array.from( + document.querySelectorAll(".search-tr") + ); + items.forEach((el, i) => { + el.style.order = `${priority[i]}`; + }); + }, [priority]); + return (
e.preventDefault()}> - -
@@ -78,7 +121,7 @@ const SearchTable = () => { {playersData.map((player, i) => { return ( - + {/* N_o */} {i + 1} {player.id} diff --git a/src/helpers/counter.ts b/src/helpers/counter.ts new file mode 100644 index 0000000..309f154 --- /dev/null +++ b/src/helpers/counter.ts @@ -0,0 +1,9 @@ +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; +}; diff --git a/src/helpers/searchTable.ts b/src/helpers/searchTable.ts new file mode 100644 index 0000000..5109fd0 --- /dev/null +++ b/src/helpers/searchTable.ts @@ -0,0 +1,55 @@ +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; +}; diff --git a/src/styles/_search-table.scss b/src/styles/_search-table.scss index 759aacd..da43f24 100644 --- a/src/styles/_search-table.scss +++ b/src/styles/_search-table.scss @@ -2,6 +2,15 @@ display: flex; flex-direction: column; gap: 2.4rem; + + tbody { + display: flex; + flex-direction: column; + + tr { + order: 100000000000; + } + } } .search-field { @@ -51,6 +60,7 @@ } &.table-header { + order: -9999999999; background: $base-green; color: #fff; }