fedi/lemmy-ui
1
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-21 22:27:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add search field to communities page. Fixes #118

Browse source
This commit is contained in:
Dessalines 2021-01-23 18:07:02 -05:00
parent c5bc46d350
commit 94e36ad757
1 changed files with 44 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
src/shared/components/communities.tsx
View file

@ -35,6 +35,7 @@ interface CommunitiesState {
page: number;
loading: boolean;
site_view: SiteView;
searchText: string;
}
interface CommunitiesProps {
@ -49,6 +50,7 @@ export class Communities extends Component<any, CommunitiesState> {
loading: true,
page: getPageFromProps(this.props),
site_view: this.isoData.site_res.site_view,
searchText: '',
};
constructor(props: any, context: any) {
@ -108,7 +110,15 @@ export class Communities extends Component<any, CommunitiesState> {
</h5>
) : (
<div>
<h5>{i18n.t('list_of_communities')}</h5>
<div class="row">
<div class="col-md-6">
<h4>{i18n.t('list_of_communities')}</h4>
</div>
<div class="col-md-6">
<div class="float-md-right">{this.searchForm()}</div>
</div>
</div>
<div class="table-responsive">
<table id="community_table" class="table table-sm table-hover">
<thead class="pointer">
@ -174,6 +184,28 @@ export class Communities extends Component<any, CommunitiesState> {
);
}
searchForm() {
return (
<form
class="form-inline"
onSubmit={linkEvent(this, this.handleSearchSubmit)}
>
<input
type="text"
class="form-control mr-2 mb-2"
value={this.state.searchText}
placeholder={`${i18n.t('search')}...`}
onInput={linkEvent(this, this.handleSearchChange)}
required
minLength={3}
/>
<button type="submit" class="btn btn-secondary mr-2 mb-2">
<span>{i18n.t('search')}</span>
</button>
</form>
);
}
paginator() {
return (
<div class="mt-2">
@ -229,6 +261,17 @@ export class Communities extends Component<any, CommunitiesState> {
WebSocketService.Instance.send(wsClient.followCommunity(form));
}
handleSearchChange(i: Communities, event: any) {
i.setState({ searchText: event.target.value });
}
handleSearchSubmit(i: Communities) {
const searchParamEncoded = encodeURIComponent(i.state.searchText);
i.context.router.history.push(
`/search/q/${searchParamEncoded}/type/Communities/sort/TopAll/page/1`
);
}
refetch() {
let listCommunitiesForm: ListCommunities = {
sort: SortType.TopAll,