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/pages/summary.js |  3 +-
 frontend/src/components/sidebar.css      | 72 +++++++++++++++++++++++++++++++-
 frontend/src/components/sidebar.js       | 34 +++++++++++++--
 3 files changed, 103 insertions(+), 6 deletions(-)

(limited to 'frontend/src/components')

diff --git a/frontend/src/components/pages/summary.js b/frontend/src/components/pages/summary.js
index 4758c8e..c03d7b9 100644
--- a/frontend/src/components/pages/summary.js
+++ b/frontend/src/components/pages/summary.js
@@ -28,7 +28,7 @@ const fakedata={} //for debug
             if(d.data.summary.routes.length===0){d.data.summary.routes[0]={"category": "","history": {"score_count": 0,},"rating": 0,"description": "","showcase": ""}} 
         })
         // eslint-disable-next-line
-    }, []);
+    }, [location.pathname]);
 
     const [pageNumber, setPageNumber] = React.useState(1);
     const [lbData, setLbData] = React.useState(null);
@@ -438,7 +438,6 @@ return (
                             <button onClick={()=>window.location.href=`https://lp.ardapektezol.com/api/v1/demos?uuid=${r.demo_id}`}><img src={img12} alt="download" /></button>
                         </span>
                             )}
-                    {console.log(lbData)}
                     </span>
                     ))}
             </div>
diff --git a/frontend/src/components/sidebar.css b/frontend/src/components/sidebar.css
index 8011a6e..29978db 100644
--- a/frontend/src/components/sidebar.css
+++ b/frontend/src/components/sidebar.css
@@ -118,4 +118,74 @@ input#searchbar[type=text]{
 }
 input[type=text]::placeholder{color:#2b2e46}
 input[type=text]:focus{outline: inherit;}
-a{text-decoration: none;height: 40px;}
\ No newline at end of file
+a{text-decoration: none;height: 40px;}
+
+
+#search-data{
+    margin: 8px 0 8px 0;
+    overflow-y: auto;
+    max-height: calc(100vh - 172px);
+}
+#search-data::-webkit-scrollbar{display: none;}
+.search-map{
+    margin: 10px 6px 0 6px;
+    height: 80px; 
+
+    border-radius: 20px;
+    text-align: center;
+    
+    display: grid;
+
+    border: 0;
+    transition: background-color .1s;
+    background-color: #2b2e46;
+    grid-template-rows: 20% 20% 60%;
+}
+.search-map>span{
+    color: #888;
+    font-size: 16px;
+    font-family: BarlowSemiCondensed-Regular;
+}
+.search-map>span:nth-child(3){
+    font-size: 30px;
+    color: #CDCFDF;
+}
+
+.search-player{
+    overflow: hidden;
+    margin: 10px 6px 0 6px;
+    height: 80px; 
+
+    border-radius: 20px;
+    text-align: center;
+    color: #CDCFDF;
+    font-family: BarlowSemiCondensed-Regular;
+    
+    display: grid;
+    place-items: center;
+    grid-template-columns: 20% 80%;
+    padding: 0 16px 0 16px;
+
+    border: 0;
+    transition: background-color .1s;
+    background-color: #2b2e46;
+}
+.search-player>img{
+    height: 60px; 
+    border-radius: 20px;
+}
+.search-player>span{
+    width:154px;
+    font-size: 26px;
+}
+
+
+
+
+
+
+
+
+
+
+
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