feat: map search (#78)

Former-commit-id: 660e8bfcde4b850abb3820e209af3def2353fd51

3 files changed, 103 insertions, 6 deletions

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>

         )