table search algorithm added

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<React.SetStateAction<string>>];
+
+  // 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<HTMLInputElement>(null);
+
+  // Effect
+  useEffect(() => {
+    const items = Array.from(
+      document.querySelectorAll<HTMLElement>(".search-tr")
+    );
+    items.forEach((el, i) => {
+      el.style.order = `${priority[i]}`;
+    });
+  }, [priority]);
+
   return (
     <div className="search-table">
       <form className="search-field" onSubmit={(e) => e.preventDefault()}>
-        <input type="text" placeholder="Type name or player ID" />
-        <button type="button" className="search-button">
+        <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());
+              }
+            }
+          }}
+        >
           Search
         </button>
         <div className="loop">
@@ -78,7 +121,7 @@ const SearchTable = () => {
             </tr>
             {playersData.map((player, i) => {
               return (
-                <tr key={uuidv4()}>
+                <tr key={uuidv4()} className="search-tr" data-id={priority[i]}>
                   {/* N_o */}
                   <td>{i + 1}</td>
                   <td>{player.id}</td>

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;
+};

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;
+};

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;
     }