From e41117c8785e414f543501dd4c50c96d5485d694 Mon Sep 17 00:00:00 2001 From: Ricardo de Arruda Date: Wed, 1 Jul 2020 00:30:23 +0300 Subject: 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. --- ui/assets/css/main.css | 8 ++++++++ ui/src/components/navbar.tsx | 49 ++++++++++++++++++++++++++++++++++++-------- ui/src/index.tsx | 2 +- 3 files changed, 50 insertions(+), 9 deletions(-) diff --git a/ui/assets/css/main.css b/ui/assets/css/main.css index c1f004d7..4d9a099f 100644 --- a/ui/assets/css/main.css +++ b/ui/assets/css/main.css @@ -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; +} \ No newline at end of file diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx index 4cb74391..175f590d 100644 --- a/ui/src/components/navbar.tsx +++ b/ui/src/components/navbar.tsx @@ -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; + searchParam: string; } -export class Navbar extends Component { +class Navbar extends Component { private wsSub: Subscription; private userSub: Subscription; emptyState: NavbarState = { @@ -56,6 +59,7 @@ export class Navbar extends Component { expanded: false, siteName: undefined, admins: [], + searchParam: '', }; constructor(props: any, context: any) { @@ -87,6 +91,25 @@ export class Navbar extends Component { } 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 { {i18n.t('communities')} - -