From 93e2c912b50e5a8a5dc4048568cafdfed606e93e Mon Sep 17 00:00:00 2001
From: Nidboj132 <28981031+Nidboj132@users.noreply.github.com>
Date: Fri, 22 Sep 2023 22:56:11 +0200
Subject: feat: map search (#78)

Former-commit-id: 660e8bfcde4b850abb3820e209af3def2353fd51
---
 frontend/src/components/sidebar.js | 34 +++++++++++++++++++++++++++++++---
 1 file changed, 31 insertions(+), 3 deletions(-)

(limited to 'frontend/src/components/sidebar.js')

diff --git a/frontend/src/components/sidebar.js b/frontend/src/components/sidebar.js
index 77800bd..d9b8012 100644
--- a/frontend/src/components/sidebar.js
+++ b/frontend/src/components/sidebar.js
@@ -91,9 +91,17 @@ React.useEffect(()=>{
     if(location.pathname.includes("rules")){SidebarClick(9)}
     if(location.pathname.includes("about")){SidebarClick(10)}
 
-    // console.log(location.pathname)
     // eslint-disable-next-line react-hooks/exhaustive-deps
-},  [location])
+},  [location.pathname])
+
+const [search,setSearch] = React.useState(null)
+const [searchData,setSearchData] = React.useState(null)
+React.useEffect(()=>{
+    fetch(`https://lp.ardapektezol.com/api/v1/search?q=${search}`)
+        .then(r=>r.json())
+        .then(d=>setSearchData(d.data))
+
+}, [search])
 
 
 return (
@@ -151,7 +159,27 @@ return (
             </div>
         </div>
         <div> 
-            <input type="text" id='searchbar' placeholder='Search for map or a player...'/>
+            <input type="text" id='searchbar' placeholder='Search for map or a player...' onChange={()=>setSearch(document.querySelector("#searchbar").value)}/>
+
+            <div id='search-data'>
+
+            {searchData!==null?searchData.maps.map((q,index)=>(
+                <Link to={`/maps/${q.id}`} className='search-map' key={index}>
+                    <span>{q.game}</span>
+                    <span>{q.chapter}</span>
+                    <span>{q.map}</span>
+                </Link>
+            )):""}
+            {searchData!==null?searchData.players.map((q,index)=>
+                (
+                <Link className='search-player' key={index}>
+                    <img src={q.avatar_link} alt='pfp'></img>
+                    <span style={{fontSize:`${36 - q.user_name.length * 0.8}px`}}>{q.user_name}</span>
+                </Link>
+                
+            )):""}
+
+            </div>            
         </div>
     </div>
         )
-- 
cgit v1.2.3