RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-11 19:44:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve searcher

Browse Source
This commit is contained in:
SrGooglo 2022-11-24 14:25:56 +00:00
parent 749dd4fc48
commit 4c901e0e13
2 changed files with 28 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
packages/app/src/pages/home/components/explore/index.jsx
View File

@ -2,7 +2,7 @@ import React from "react"
import { Skeleton } from "antd" import { Skeleton } from "antd"
import { Icons } from "components/Icons" import { Icons } from "components/Icons"
import { PostsList } from "components" import { PostsList, Searcher } from "components"
import Post from "models/post" import Post from "models/post"
import "./index.less" import "./index.less"
@ -13,6 +13,8 @@ export default class ExplorePosts extends React.Component {
initialLoading: true, initialLoading: true,
hasMorePosts: true, hasMorePosts: true,
posts: [], posts: [],
focusedSearcher: false,
filledSearcher: false,
} }
wsEvents = { 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 () => { componentDidMount = async () => {
await this.loadPosts() await this.loadPosts()
@ -87,12 +105,16 @@ export default class ExplorePosts extends React.Component {
render() { render() {
return <div className="postsExplore"> return <div className="postsExplore">
<div className="postsExplore_header"> <div className="postsExplore_header">
<h1> <Searcher
<Icons.Search /> Explore autoFocus={false}
</h1> onFocus={() => this.toggleState("focusedSearcher", true)}
onUnfocus={() => this.toggleState("focusedSearcher", false)}
onFilled={() => this.toggleState("filledSearcher", true)}
onEmpty={() => this.toggleState("filledSearcher", false)}
/>
</div> </div>
{ {
this.state.initialLoading ? <Skeleton active /> : <PostsList this.state.focusedSearcher || this.state.filledSearcher ? null : this.state.initialLoading ? <Skeleton active /> : <PostsList
loading={this.state.loading} loading={this.state.loading}
hasMorePosts={this.state.hasMorePosts} hasMorePosts={this.state.hasMorePosts}
onLoadMore={this.loadPosts} onLoadMore={this.loadPosts}

1
packages/app/src/pages/home/components/explore/index.less
View File

@ -3,5 +3,6 @@
.postsExplore_header { .postsExplore_header {
font-size: 1.3rem; font-size: 1.3rem;
margin-bottom: 20px;
} }
} }