From: Janicki Artur <artur.janicki@contractors.roche.com>
Date: Wed, 24 Oct 2018 18:29:19 +0000 (+0200)
Subject: code refactoring and improve views
X-Git-Tag: 1.3.0~48^2~3
X-Git-Url: https://git.arvados.org/arvados-workbench2.git/commitdiff_plain/a94211e27f3eebaea55ccba096869f70161e74ad

code refactoring and improve views

Feature #14276

Arvados-DCO-1.1-Signed-off-by: Janicki Artur <artur.janicki@contractors.roche.com>
---

diff --git a/src/views-components/search-bar/search-bar-advanced-view.tsx b/src/views-components/search-bar/search-bar-advanced-view.tsx
index c658c33b..10e535c5 100644
--- a/src/views-components/search-bar/search-bar-advanced-view.tsx
+++ b/src/views-components/search-bar/search-bar-advanced-view.tsx
@@ -60,19 +60,24 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     }
 });
 
-interface SearchBarAdvancedViewDataProps {
+interface SearchBarAdvancedViewFormDataProps {
     submitting: boolean;
     invalid: boolean;
     pristine: boolean;
 }
 
-interface SearchBarAdvancedViewActionProps {
-    setView: (currentView: string) => void;
-    saveQuery: (data: SearchBarAdvanceFormData) => void;
+export interface SearchBarAdvancedViewDataProps {
     tags: any;
 }
 
-type SearchBarAdvancedViewProps = SearchBarAdvancedViewActionProps & SearchBarAdvancedViewDataProps
+export interface SearchBarAdvancedViewActionProps {
+    onSetView: (currentView: string) => void;
+    saveQuery: (data: SearchBarAdvanceFormData) => void;
+}
+
+type SearchBarAdvancedViewProps = SearchBarAdvancedViewActionProps & SearchBarAdvancedViewDataProps;
+
+type SearchBarAdvancedViewFormProps = SearchBarAdvancedViewProps & SearchBarAdvancedViewFormDataProps
     & InjectedFormProps & WithStyles<CssRules>;
 
 const validate = (values: any) => {
@@ -88,7 +93,7 @@ const validate = (values: any) => {
 };
 
 export const SearchBarAdvancedView = compose(
-    reduxForm<SearchBarAdvanceFormData, SearchBarAdvancedViewActionProps>({
+    reduxForm<SearchBarAdvanceFormData, SearchBarAdvancedViewProps>({
         form: SEARCH_BAR_ADVANCE_FORM_NAME,
         validate,
         onSubmit: (data: SearchBarAdvanceFormData, dispatch: Dispatch) => {
@@ -97,7 +102,7 @@ export const SearchBarAdvancedView = compose(
         }
     }),
     withStyles(styles))(
-        ({ classes, setView, handleSubmit, submitting, invalid, pristine, tags }: SearchBarAdvancedViewProps) =>
+        ({ classes, onSetView, handleSubmit, submitting, invalid, pristine, tags }: SearchBarAdvancedViewFormProps) =>
             <Paper className={classes.searchView}>
                 <form onSubmit={handleSubmit}>
                     <Grid container direction="column" justify="flex-start" alignItems="flex-start">
@@ -126,7 +131,7 @@ export const SearchBarAdvancedView = compose(
                                     <SearchBarTrashField />
                                 </Grid>
                             </Grid>
-                            <IconButton onClick={() => setView(SearchView.BASIC)} className={classes.closeIcon}>
+                            <IconButton onClick={() => onSetView(SearchView.BASIC)} className={classes.closeIcon}>
                                 <CloseIcon />
                             </IconButton>
                         </Grid>
diff --git a/src/views-components/search-bar/search-bar-autocomplete-view.tsx b/src/views-components/search-bar/search-bar-autocomplete-view.tsx
index 48172424..dd21a0f6 100644
--- a/src/views-components/search-bar/search-bar-autocomplete-view.tsx
+++ b/src/views-components/search-bar/search-bar-autocomplete-view.tsx
@@ -3,8 +3,7 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { Paper, StyleRulesCallback, withStyles, WithStyles, List } from '@material-ui/core';
-import { RenderAutocompleteItems } from '~/views-components/search-bar/search-bar-view';
+import { Paper, StyleRulesCallback, withStyles, WithStyles, List, ListItem, ListItemText } from '@material-ui/core';
 import { GroupContentsResource } from '~/services/groups-service/groups-service';
 import Highlighter from "react-highlight-words";
 
@@ -24,18 +23,23 @@ const styles: StyleRulesCallback<CssRules> = theme => {
 export interface SearchBarAutocompleteViewDataProps {
     searchResults?: GroupContentsResource[];
     searchValue?: string;
+}
+
+export interface SearchBarAutocompleteViewActionProps {
     navigateTo: (uuid: string) => void;
 }
 
-type SearchBarAutocompleteViewProps = SearchBarAutocompleteViewDataProps & WithStyles<CssRules>;
+type SearchBarAutocompleteViewProps = SearchBarAutocompleteViewDataProps & SearchBarAutocompleteViewActionProps & WithStyles<CssRules>;
 
 export const SearchBarAutocompleteView = withStyles(styles)(
     ({ classes, searchResults, searchValue, navigateTo }: SearchBarAutocompleteViewProps) =>
         <Paper className={classes.searchView}>
             {searchResults && <List component="nav" className={classes.list}>
-                {searchResults.map((item: GroupContentsResource) => {
-                    return <RenderAutocompleteItems key={item.uuid} text={getFormattedText(item.name, searchValue)} navigateTo={navigateTo} uuid={item.uuid} />;
-                })}
+                {searchResults.map((item: GroupContentsResource) =>
+                    <ListItem button key={item.uuid}>
+                        <ListItemText secondary={getFormattedText(item.name, searchValue)} onClick={() => navigateTo(item.uuid)} />
+                    </ListItem>
+                )}
             </List>}
         </Paper>
 );
diff --git a/src/views-components/search-bar/search-bar-basic-view.tsx b/src/views-components/search-bar/search-bar-basic-view.tsx
index 8ad0f095..9d312a05 100644
--- a/src/views-components/search-bar/search-bar-basic-view.tsx
+++ b/src/views-components/search-bar/search-bar-basic-view.tsx
@@ -3,59 +3,65 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { Paper, StyleRulesCallback, withStyles, WithStyles, List } from '@material-ui/core';
+import { Paper, StyleRulesCallback, withStyles, WithStyles } from '@material-ui/core';
 import { SearchView } from '~/store/search-bar/search-bar-reducer';
-import { RenderRecentQueries, RenderSavedQueries } from '~/views-components/search-bar/search-bar-view';
-import { SearchBarAdvanceFormData } from '~/models/search-bar';
+import {
+    SearchBarRenderRecentQueries,
+    SearchBarRenderRecentQueriesActionProps 
+} from '~/views-components/search-bar/search-bar-render-recent-queries';
+import {
+    SearchBarRenderSavedQueries,
+    SearchBarRenderSavedQueriesDataProps,
+    SearchBarRenderSavedQueriesActionProps
+} from '~/views-components/search-bar/search-bar-render-save-queries';
 
-type CssRules = 'advanced' | 'searchQueryList' | 'list' | 'searchView';
+type CssRules = 'advanced' | 'label' | 'root';
 
 const styles: StyleRulesCallback<CssRules> = theme => {
     return {
+        root: {
+            color: theme.palette.common.black,
+            borderRadius: `0 0 ${theme.spacing.unit / 2}px ${theme.spacing.unit / 2}px`
+        },
         advanced: {
             display: 'flex',
             justifyContent: 'flex-end',
-            paddingRight: theme.spacing.unit * 2,
-            paddingBottom: theme.spacing.unit,
-            fontSize: '14px',
+            padding: theme.spacing.unit,
+            fontSize: '0.875rem',
             cursor: 'pointer',
             color: theme.palette.primary.main
         },
-        searchQueryList: {
+        label: {
+            fontSize: '0.875rem',
             padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit}px `,
-            background: '#f2f2f2',
-            fontSize: '14px'
-        },
-        list: {
-            padding: '0px'
-        },
-        searchView: {
-            color: theme.palette.common.black,
-            borderRadius: `0 0 ${theme.spacing.unit / 2}px ${theme.spacing.unit / 2}px`
+            color: theme.palette.grey["900"],
+            background: theme.palette.grey["200"]
         }
     };
 };
 
-interface SearchBarBasicViewProps {
-    setView: (currentView: string) => void;
-    recentQueries: () => string[];
-    deleteSavedQuery: (id: number) => void;
-    savedQueries: SearchBarAdvanceFormData[];
+export type SearchBarBasicViewDataProps = SearchBarRenderSavedQueriesDataProps;
+
+export type SearchBarBasicViewActionProps = {
+    onSetView: (currentView: string) => void;
     onSearch: (searchValue: string) => void;
-    editSavedQuery: (data: SearchBarAdvanceFormData, id: number) => void;
-}
+} & SearchBarRenderRecentQueriesActionProps & SearchBarRenderSavedQueriesActionProps;
+
+type SearchBarBasicViewProps = SearchBarBasicViewDataProps & SearchBarBasicViewActionProps & WithStyles<CssRules>;
 
 export const SearchBarBasicView = withStyles(styles)(
-    ({ classes, setView, recentQueries, deleteSavedQuery, savedQueries, onSearch, editSavedQuery }: SearchBarBasicViewProps & WithStyles<CssRules>) =>
-        <Paper className={classes.searchView}>
-            <div className={classes.searchQueryList}>Recent search queries</div>
-            <List component="nav" className={classes.list}>
-                {recentQueries().map((query, index) => <RenderRecentQueries key={index} text={query} onSearch={onSearch} />)}
-            </List>
-            <div className={classes.searchQueryList}>Saved search queries</div>
-            <List component="nav" className={classes.list}>
-                {savedQueries.map((query, index) => <RenderSavedQueries key={index} text={query.searchQuery} id={index} deleteSavedQuery={deleteSavedQuery} onSearch={onSearch} data={query} editSavedQuery={editSavedQuery}/>)}
-            </List>
-            <div className={classes.advanced} onClick={() => setView(SearchView.ADVANCED)}>Advanced search</div>
+    ({ classes, onSetView, loadRecentQueries, deleteSavedQuery, savedQueries, onSearch, editSavedQuery }: SearchBarBasicViewProps) =>
+        <Paper className={classes.root}>
+            <div className={classes.label}>Recent search queries</div>
+            <SearchBarRenderRecentQueries
+                onSearch={onSearch}
+                loadRecentQueries={loadRecentQueries} />
+            <div className={classes.label}>Saved search queries</div>
+            <SearchBarRenderSavedQueries
+                onSearch={onSearch}
+                savedQueries={savedQueries}
+                editSavedQuery={editSavedQuery}
+                deleteSavedQuery={deleteSavedQuery} />
+            <div className={classes.advanced} onClick={() => onSetView(SearchView.ADVANCED)}>Advanced search</div>
         </Paper>
 );
\ No newline at end of file
diff --git a/src/views-components/search-bar/search-bar-render-recent-queries.tsx b/src/views-components/search-bar/search-bar-render-recent-queries.tsx
new file mode 100644
index 00000000..b248d70e
--- /dev/null
+++ b/src/views-components/search-bar/search-bar-render-recent-queries.tsx
@@ -0,0 +1,43 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { withStyles, WithStyles, StyleRulesCallback, List, ListItem, ListItemText } from '@material-ui/core';
+import { ArvadosTheme } from '~/common/custom-theme';
+
+type CssRules = 'root' | 'listItem' | 'listItemText';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+    root: {
+        padding: '0px'
+    },
+    listItem: {
+        paddingLeft: theme.spacing.unit,
+        paddingRight: theme.spacing.unit * 2,
+    },
+    listItemText: {
+        fontSize: '0.8125rem',
+        color: theme.palette.grey["900"]
+    }
+});
+
+export interface SearchBarRenderRecentQueriesActionProps {
+    onSearch: (searchValue: string) => void;
+    loadRecentQueries: () => string[];
+}
+
+type SearchBarRenderRecentQueriesProps = SearchBarRenderRecentQueriesActionProps & WithStyles<CssRules>;
+
+export const SearchBarRenderRecentQueries = withStyles(styles)(
+    ({ classes, onSearch, loadRecentQueries }: SearchBarRenderRecentQueriesProps) =>
+        <List component="nav" className={classes.root}>
+            {loadRecentQueries().map((query, index) =>
+                <ListItem button key={index} className={classes.listItem}>
+                    <ListItemText disableTypography 
+                        secondary={query} 
+                        onClick={() => onSearch(query)} 
+                        className={classes.listItemText} />
+                </ListItem>
+            )}
+        </List>);
\ No newline at end of file
diff --git a/src/views-components/search-bar/search-bar-render-save-queries.tsx b/src/views-components/search-bar/search-bar-render-save-queries.tsx
new file mode 100644
index 00000000..5c525a7e
--- /dev/null
+++ b/src/views-components/search-bar/search-bar-render-save-queries.tsx
@@ -0,0 +1,68 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { withStyles, WithStyles, StyleRulesCallback, List, ListItem, ListItemText, ListItemSecondaryAction, Tooltip, IconButton, Button } from '@material-ui/core';
+import { ArvadosTheme } from '~/common/custom-theme';
+import { RemoveIcon, EditSavedQueryIcon } from '~/components/icon/icon';
+import { SearchBarAdvanceFormData } from '~/models/search-bar';
+
+type CssRules = 'root' | 'listItem' | 'listItemText' | 'button';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+    root: {
+        padding: '0px'
+    },
+    listItem: {
+        paddingLeft: theme.spacing.unit,
+        paddingRight: theme.spacing.unit * 2
+    },
+    listItemText: {
+        fontSize: '0.8125rem',
+        color: theme.palette.grey["900"]
+    },
+    button: {
+        padding: '6px',
+        marginRight: theme.spacing.unit
+    }
+});
+
+export interface SearchBarRenderSavedQueriesDataProps {
+    savedQueries: SearchBarAdvanceFormData[];
+}
+
+export interface SearchBarRenderSavedQueriesActionProps {
+    onSearch: (searchValue: string) => void;
+    deleteSavedQuery: (id: number) => void;
+    editSavedQuery: (data: SearchBarAdvanceFormData, id: number) => void;
+}
+
+type SearchBarRenderSavedQueriesProps = SearchBarRenderSavedQueriesDataProps 
+    & SearchBarRenderSavedQueriesActionProps 
+    & WithStyles<CssRules>;
+
+export const SearchBarRenderSavedQueries = withStyles(styles)(
+    ({ classes, savedQueries, onSearch, editSavedQuery, deleteSavedQuery }: SearchBarRenderSavedQueriesProps) =>
+        <List component="nav" className={classes.root}>
+            {savedQueries.map((query, index) => 
+                <ListItem button key={index} className={classes.listItem}>
+                    <ListItemText disableTypography 
+                        secondary={query.searchQuery} 
+                        onClick={() => onSearch(query.searchQuery)} 
+                        className={classes.listItemText} />
+                    <ListItemSecondaryAction>
+                        <Tooltip title="Edit">
+                            <IconButton aria-label="Edit" onClick={() => editSavedQuery(query, index)} className={classes.button}>
+                                <EditSavedQueryIcon />
+                            </IconButton>
+                        </Tooltip>
+                        <Tooltip title="Remove">
+                            <IconButton aria-label="Remove" onClick={() => deleteSavedQuery(index)} className={classes.button}>
+                                <RemoveIcon />
+                            </IconButton>
+                        </Tooltip>
+                    </ListItemSecondaryAction>
+                </ListItem>
+            )}
+    </List>);
\ No newline at end of file
diff --git a/src/views-components/search-bar/search-bar-view.tsx b/src/views-components/search-bar/search-bar-view.tsx
index 68418ba1..d5d885ea 100644
--- a/src/views-components/search-bar/search-bar-view.tsx
+++ b/src/views-components/search-bar/search-bar-view.tsx
@@ -11,17 +11,26 @@ import {
     WithStyles,
     Tooltip,
     InputAdornment, Input,
-    ListItem, ListItemText, ListItemSecondaryAction,
     ClickAwayListener
 } from '@material-ui/core';
 import SearchIcon from '@material-ui/icons/Search';
-import { RemoveIcon, EditSavedQueryIcon } from '~/components/icon/icon';
-import { SearchView } from '~/store/search-bar/search-bar-reducer';
-import { SearchBarBasicView } from '~/views-components/search-bar/search-bar-basic-view';
-import { SearchBarAdvancedView } from '~/views-components/search-bar/search-bar-advanced-view';
-import { SearchBarAutocompleteView, SearchBarAutocompleteViewDataProps } from '~/views-components/search-bar/search-bar-autocomplete-view';
 import { ArvadosTheme } from '~/common/custom-theme';
-import { SearchBarAdvanceFormData } from '~/models/search-bar';
+import { SearchView } from '~/store/search-bar/search-bar-reducer';
+import {
+    SearchBarBasicView,
+    SearchBarBasicViewDataProps,
+    SearchBarBasicViewActionProps
+} from '~/views-components/search-bar/search-bar-basic-view';
+import {
+    SearchBarAutocompleteView,
+    SearchBarAutocompleteViewDataProps,
+    SearchBarAutocompleteViewActionProps
+} from '~/views-components/search-bar/search-bar-autocomplete-view';
+import {
+    SearchBarAdvancedView,
+    SearchBarAdvancedViewDataProps,
+    SearchBarAdvancedViewActionProps
+} from '~/views-components/search-bar/search-bar-advanced-view';
 
 type CssRules = 'container' | 'containerSearchViewOpened' | 'input' | 'view';
 
@@ -49,89 +58,42 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => {
     };
 };
 
-type SearchBarDataProps = {
-    searchValue: string;
+export type SearchBarDataProps = SearchBarViewDataProps
+    & SearchBarAutocompleteViewDataProps
+    & SearchBarAdvancedViewDataProps
+    & SearchBarBasicViewDataProps;
+
+interface SearchBarViewDataProps {
     currentView: string;
     isPopoverOpen: boolean;
-    savedQueries: SearchBarAdvanceFormData[];
-    tags: any;
-} & SearchBarAutocompleteViewDataProps;
+    debounce?: number;
+}
+
+export type SearchBarActionProps = SearchBarViewActionProps
+    & SearchBarAutocompleteViewActionProps
+    & SearchBarAdvancedViewActionProps
+    & SearchBarBasicViewActionProps;
 
-interface SearchBarActionProps {
+interface SearchBarViewActionProps {
     onSearch: (value: string) => any;
     searchDataOnEnter: (value: string) => void;
-    debounce?: number;
     onSetView: (currentView: string) => void;
     closeView: () => void;
+    openSearchView: () => void;
     saveRecentQuery: (query: string) => void;
     loadRecentQueries: () => string[];
-    saveQuery: (data: SearchBarAdvanceFormData) => void;
-    deleteSavedQuery: (id: number) => void;
-    openSearchView: () => void;
-    navigateTo: (uuid: string) => void;
-    editSavedQuery: (data: SearchBarAdvanceFormData, id: number) => void;
 }
 
-type SearchBarProps = SearchBarDataProps & SearchBarActionProps & WithStyles<CssRules>;
+type SearchBarViewProps = SearchBarDataProps & SearchBarActionProps & WithStyles<CssRules>;
 
 interface SearchBarState {
     value: string;
 }
 
-interface RenderRecentQueriesProps {
-    text: string;
-    onSearch: (searchValue: string) => void;
-}
-
-export const RenderRecentQueries = (props: RenderRecentQueriesProps) => {
-    return <ListItem button>
-        <ListItemText secondary={props.text} onClick={() => props.onSearch(props.text)} />
-    </ListItem>;
-};
-
-interface RenderAutocompleteItemsProps {
-    text: string | JSX.Element;
-    navigateTo: (uuid: string) => void;
-    uuid: string;
-}
-
-export const RenderAutocompleteItems = (props: RenderAutocompleteItemsProps) => {
-    return <ListItem button>
-        <ListItemText secondary={props.text} onClick={() => props.navigateTo(props.uuid)} />
-    </ListItem>;
-};
-
-interface RenderSavedQueriesProps {
-    text: string;
-    id: number;
-    deleteSavedQuery: (id: number) => void;
-    onSearch: (searchValue: string) => void;
-    editSavedQuery: (data: SearchBarAdvanceFormData, id: number) => void;
-    data: SearchBarAdvanceFormData;
-}
-
-export const RenderSavedQueries = (props: RenderSavedQueriesProps) => {
-    return <ListItem button>
-        <ListItemText secondary={props.text} onClick={() => props.onSearch(props.text)} />
-        <ListItemSecondaryAction>
-            <Tooltip title="Edit">
-                <IconButton aria-label="Edit" onClick={() => props.editSavedQuery(props.data, props.id)}>
-                    <EditSavedQueryIcon />
-                </IconButton>
-            </Tooltip>
-            <Tooltip title="Remove">
-                <IconButton aria-label="Remove" onClick={() => props.deleteSavedQuery(props.id)}>
-                    <RemoveIcon />
-                </IconButton>
-            </Tooltip>
-        </ListItemSecondaryAction>
-    </ListItem>;
-};
-
 export const DEFAULT_SEARCH_DEBOUNCE = 1000;
 
 export const SearchBarView = withStyles(styles)(
-    class extends React.Component<SearchBarProps> {
+    class extends React.Component<SearchBarViewProps> {
         state: SearchBarState = {
             value: ""
         };
@@ -172,7 +134,7 @@ export const SearchBarView = withStyles(styles)(
             this.setState({ value: this.props.searchValue });
         }
 
-        componentWillReceiveProps(nextProps: SearchBarProps) {
+        componentWillReceiveProps(nextProps: SearchBarViewProps) {
             if (nextProps.searchValue !== this.props.searchValue) {
                 this.setState({ value: nextProps.searchValue });
             }
@@ -183,19 +145,27 @@ export const SearchBarView = withStyles(styles)(
         }
 
         getView = (currentView: string) => {
-            const { onSetView, loadRecentQueries, savedQueries, deleteSavedQuery, searchValue, searchResults, saveQuery, onSearch, navigateTo, editSavedQuery, tags } = this.props;
+            const { onSetView, loadRecentQueries, savedQueries, deleteSavedQuery, searchValue, 
+                searchResults, saveQuery, onSearch, navigateTo, editSavedQuery, tags } = this.props;
             switch (currentView) {
-                case SearchView.BASIC:
-                    return <SearchBarBasicView setView={onSetView} recentQueries={loadRecentQueries} savedQueries={savedQueries} deleteSavedQuery={deleteSavedQuery} onSearch={onSearch} editSavedQuery={editSavedQuery} />;
-                case SearchView.ADVANCED:
-                    return <SearchBarAdvancedView setView={onSetView} saveQuery={saveQuery} tags={tags} />;
                 case SearchView.AUTOCOMPLETE:
                     return <SearchBarAutocompleteView
                         navigateTo={navigateTo}
                         searchResults={searchResults}
                         searchValue={searchValue} />;
+                case SearchView.ADVANCED:
+                    return <SearchBarAdvancedView
+                        onSetView={onSetView}
+                        saveQuery={saveQuery}
+                        tags={tags} />;
                 default:
-                    return <SearchBarBasicView setView={onSetView} recentQueries={loadRecentQueries} savedQueries={savedQueries} deleteSavedQuery={deleteSavedQuery} onSearch={onSearch} editSavedQuery={editSavedQuery} />;
+                    return <SearchBarBasicView
+                        onSetView={onSetView}
+                        onSearch={onSearch}
+                        loadRecentQueries={loadRecentQueries}
+                        savedQueries={savedQueries}
+                        deleteSavedQuery={deleteSavedQuery}
+                        editSavedQuery={editSavedQuery} />;
             }
         }
 
@@ -207,6 +177,8 @@ export const SearchBarView = withStyles(styles)(
             this.props.loadRecentQueries();
         }
 
+        // ToDo: nie pokazywac autocomplete jezeli jestesmy w advance
+        // currentView ze state.searchBar.currentView
         handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
             clearTimeout(this.timeout);
             this.setState({ value: event.target.value });
diff --git a/src/views-components/search-bar/search-bar.tsx b/src/views-components/search-bar/search-bar.tsx
index 8f39caec..6ca588a7 100644
--- a/src/views-components/search-bar/search-bar.tsx
+++ b/src/views-components/search-bar/search-bar.tsx
@@ -18,10 +18,10 @@ import {
     editSavedQuery,
     searchDataOnEnter
 } from '~/store/search-bar/search-bar-actions';
-import { SearchBarView } from '~/views-components/search-bar/search-bar-view';
+import { SearchBarView, SearchBarActionProps, SearchBarDataProps } from '~/views-components/search-bar/search-bar-view';
 import { SearchBarAdvanceFormData } from '~/models/search-bar';
 
-const mapStateToProps = ({ searchBar, form }: RootState) => {
+const mapStateToProps = ({ searchBar, form }: RootState): SearchBarDataProps => {
     return {
         searchValue: searchBar.searchValue,
         currentView: searchBar.currentView,
@@ -32,7 +32,7 @@ const mapStateToProps = ({ searchBar, form }: RootState) => {
     };
 };
 
-const mapDispatchToProps = (dispatch: Dispatch) => ({
+const mapDispatchToProps = (dispatch: Dispatch): SearchBarActionProps => ({
     onSearch: (valueSearch: string) => dispatch<any>(searchData(valueSearch)),
     onSetView: (currentView: string) => dispatch(goToView(currentView)),
     closeView: () => dispatch<any>(closeSearchView()),