import * as React from 'react';
import { Paper, StyleRulesCallback, withStyles, WithStyles, List } 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 { RecentQueriesItem, RenderSavedQueries } from '~/views-components/search-bar/search-bar-view';
type CssRules = 'advanced' | 'searchQueryList' | 'list' | 'searchView';
paddingRight: theme.spacing.unit * 2,
paddingBottom: theme.spacing.unit,
fontSize: '14px',
- cursor: 'pointer'
+ cursor: 'pointer',
+ color: theme.palette.primary.main
},
searchQueryList: {
padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit}px `,
interface SearchBarBasicViewProps {
setView: (currentView: string) => void;
recentQueries: () => string[];
+ deleteSavedQuery: (id: number) => void;
+ savedQueries: string[];
}
export const SearchBarBasicView = withStyles(styles)(
- ({ classes, setView, recentQueries }: SearchBarBasicViewProps & WithStyles<CssRules>) =>
+ ({ classes, setView, recentQueries, deleteSavedQuery, savedQueries }: SearchBarBasicViewProps & WithStyles<CssRules>) =>
<Paper className={classes.searchView}>
<div className={classes.searchQueryList}>Saved search queries</div>
<List component="nav" className={classes.list}>
- <RenderSavedQueries text="Test" />
- <RenderSavedQueries text="Demo" />
+ {savedQueries.map((query, index) => <RenderSavedQueries key={index} text={query} id={index} deleteSavedQuery={deleteSavedQuery}/>)}
</List>
<div className={classes.searchQueryList}>Recent search queries</div>
<List component="nav" className={classes.list}>
- {recentQueries().map((query, index) => <RenderRecentQueries key={query + index} text={query} />)}
+ {recentQueries().map((query, index) => <RecentQueriesItem key={index} text={query} />)}
</List>
<div className={classes.advanced} onClick={() => setView(SearchView.ADVANCED)}>Advanced search</div>
</Paper>