Replace search button to input field at navbar.

* Search input not rendered at /search path.

* Navbar wrapped with withRouter for accessing history props.

* Flex-grow/shrink control the width of the input element dynamically.
pull/872/head
Ricardo de Arruda 2020-07-01 00:30:23 +03:00
parent 80bca8610e
commit e41117c878
3 changed files with 50 additions and 9 deletions

View File

@ -249,3 +249,11 @@ pre {
white-space: pre-wrap;
word-break: keep-all;
}
.search-bar {
flex-basis: 10%;
flex-shrink: 3;
flex-grow: 0.3;
max-width: 33%;
min-width: 11em;
}

View File

@ -1,5 +1,5 @@
import { Component, linkEvent } from 'inferno';
import { Link } from 'inferno-router';
import { Link, withRouter } from 'inferno-router';
import { Subscription } from 'rxjs';
import { retryWhen, delay, take } from 'rxjs/operators';
import { WebSocketService, UserService } from '../services';
@ -12,6 +12,7 @@ import {
GetPrivateMessagesForm,
PrivateMessagesResponse,
SortType,
SearchType,
GetSiteResponse,
Comment,
CommentResponse,
@ -19,6 +20,7 @@ import {
UserView,
PrivateMessageResponse,
WebSocketJsonResponse,
SearchForm,
} from '../interfaces';
import {
wsJsonToRes,
@ -42,9 +44,10 @@ interface NavbarState {
unreadCount: number;
siteName: string;
admins: Array<UserView>;
searchParam: string;
}
export class Navbar extends Component<any, NavbarState> {
class Navbar extends Component<any, NavbarState> {
private wsSub: Subscription;
private userSub: Subscription;
emptyState: NavbarState = {
@ -56,6 +59,7 @@ export class Navbar extends Component<any, NavbarState> {
expanded: false,
siteName: undefined,
admins: [],
searchParam: '',
};
constructor(props: any, context: any) {
@ -87,6 +91,25 @@ export class Navbar extends Component<any, NavbarState> {
}
WebSocketService.Instance.getSite();
this.handleSearchParam = this.handleSearchParam.bind(this);
}
handleSearchParam(i: Navbar, event: any) {
i.state.searchParam = event.target.value;
i.setState(i.state);
}
updateUrl() {
this.props.history.push(
`/search/q/${this.state.searchParam}/type/all/sort/topall/page/1`
);
this.setState({ searchParam: '' });
}
handleSearchSubmit(i: Navbar, event: any) {
event.preventDefault();
i.updateUrl();
}
render() {
@ -143,11 +166,6 @@ export class Navbar extends Component<any, NavbarState> {
{i18n.t('communities')}
</Link>
</li>
<li class="nav-item">
<Link class="nav-link" to="/search" title={i18n.t('search')}>
{i18n.t('search')}
</Link>
</li>
<li class="nav-item">
<Link
class="nav-link"
@ -181,7 +199,20 @@ export class Navbar extends Component<any, NavbarState> {
</Link>
</li>
</ul>
<ul class="navbar-nav ml-auto">
{!this.props.history.location.pathname.match(/^\/search/) && (
<div class="nav-item search-bar">
<form onSubmit={linkEvent(this, this.handleSearchSubmit)}>
<input
class="form-control mr-sm-2"
onInput={linkEvent(this, this.handleSearchParam)}
value={this.state.searchParam}
type="search"
placeholder={i18n.t('search')}
></input>
</form>
</div>
)}
<ul class="navbar-nav ml-2">
{this.canAdmin && (
<li className="nav-item mt-1">
<Link
@ -426,3 +457,5 @@ export class Navbar extends Component<any, NavbarState> {
}
}
}
export default withRouter(Navbar);

2
ui/src/index.tsx vendored
View File

@ -2,7 +2,7 @@ import { render, Component } from 'inferno';
import { BrowserRouter, Route, Switch } from 'inferno-router';
import { Provider } from 'inferno-i18next';
import { Main } from './components/main';
import { Navbar } from './components/navbar';
import Navbar from './components/navbar';
import { Footer } from './components/footer';
import { Login } from './components/login';
import { CreatePost } from './components/create-post';