From 4c901e0e13970df489663f2b413beed1e030c773 Mon Sep 17 00:00:00 2001
From: SrGooglo <srgooglo@ragestudio.net>
Date: Thu, 24 Nov 2022 14:25:56 +0000
Subject: [PATCH] improve searcher

---
 .../pages/home/components/explore/index.jsx   | 32 ++++++++++++++++---
 .../pages/home/components/explore/index.less  |  1 +
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/packages/app/src/pages/home/components/explore/index.jsx b/packages/app/src/pages/home/components/explore/index.jsx
index 7ab5b11d..b4c0ecb7 100644
--- a/packages/app/src/pages/home/components/explore/index.jsx
+++ b/packages/app/src/pages/home/components/explore/index.jsx
@@ -2,7 +2,7 @@ import React from "react"
 import { Skeleton } from "antd"
 import { Icons } from "components/Icons"
 
-import { PostsList } from "components"
+import { PostsList, Searcher } from "components"
 import Post from "models/post"
 
 import "./index.less"
@@ -13,6 +13,8 @@ export default class ExplorePosts extends React.Component {
         initialLoading: true,
         hasMorePosts: true,
         posts: [],
+        focusedSearcher: false,
+        filledSearcher: false,
     }
 
     wsEvents = {
@@ -70,6 +72,22 @@ export default class ExplorePosts extends React.Component {
         }
     }
 
+    toggleFocusSearcher = (to) => {
+        to = to ?? !this.state.focusedSearcher
+
+        this.setState({
+            focusedSearcher: to
+        })
+    }
+
+    toggleState = (key, to) => {
+        to = to ?? !this.state[key]
+
+        this.setState({
+            [key]: to
+        })
+    }
+
     componentDidMount = async () => {
         await this.loadPosts()
 
@@ -87,12 +105,16 @@ export default class ExplorePosts extends React.Component {
     render() {
         return <div className="postsExplore">
             <div className="postsExplore_header">
-                <h1>
-                    <Icons.Search /> Explore
-                </h1>
+                <Searcher
+                    autoFocus={false}
+                    onFocus={() => this.toggleState("focusedSearcher", true)}
+                    onUnfocus={() => this.toggleState("focusedSearcher", false)}
+                    onFilled={() => this.toggleState("filledSearcher", true)}
+                    onEmpty={() => this.toggleState("filledSearcher", false)}
+                />
             </div>
             {
-                this.state.initialLoading ? <Skeleton active /> : <PostsList
+                this.state.focusedSearcher || this.state.filledSearcher ? null : this.state.initialLoading ? <Skeleton active /> : <PostsList
                     loading={this.state.loading}
                     hasMorePosts={this.state.hasMorePosts}
                     onLoadMore={this.loadPosts}
diff --git a/packages/app/src/pages/home/components/explore/index.less b/packages/app/src/pages/home/components/explore/index.less
index d59fe5f3..07d5974d 100644
--- a/packages/app/src/pages/home/components/explore/index.less
+++ b/packages/app/src/pages/home/components/explore/index.less
@@ -3,5 +3,6 @@
 
     .postsExplore_header {
         font-size: 1.3rem;
+        margin-bottom: 20px;
     }
 }
\ No newline at end of file