saving-in-store-for-dynamic-deleting

Feature #14308

Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk@contractors.roche.com>

diff --git a/src/services/search-service/search-service.ts b/src/services/search-service/search-service.ts
index 6a0043a33866e49e4a59f9bf92b750fa93a1f2c7..c394da5e11a1857cc8960b3a592f81760cbbbbd3 100644 (file)
--- a/src/services/search-service/search-service.ts
+++ b/src/services/search-service/search-service.ts
@@ -32,6 +32,5 @@ export class SearchQueriesService {
     deleteSavedQuery(id: number) {
         this.savedQueries.splice(id, 1);
         localStorage.setItem('savedQueries', JSON.stringify(this.savedQueries));
-
     }
 }
\ No newline at end of file

diff --git a/src/store/search-bar/search-bar-actions.ts b/src/store/search-bar/search-bar-actions.ts
index 55acff82ebb089fe1c12afdab23c5e0ff3b775ef..e158134c5e8b0be6efc4c2589845bd572032a3eb 100644 (file)
--- a/src/store/search-bar/search-bar-actions.ts
+++ b/src/store/search-bar/search-bar-actions.ts
@@ -16,7 +16,8 @@ export const searchBarActions = unionize({
     OPEN_SEARCH_VIEW: ofType<{}>(),
     CLOSE_SEARCH_VIEW: ofType<{}>(),
     SET_SEARCH_RESULTS: ofType<GroupContentsResource[]>(),
-    SET_SEARCH_VALUE: ofType<string>()
+    SET_SEARCH_VALUE: ofType<string>(),
+    SET_SAVED_QUERIES: ofType<string[]>()
 });
 
 export type SearchBarActions = UnionOf<typeof searchBarActions>;
@@ -37,18 +38,14 @@ export const loadRecentQueries = () =>
 export const saveQuery = (query: string) =>
     (dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
         services.searchQueriesService.saveQuery(query);
-    };
-
-export const loadSavedQueries = () =>
-    (dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
-        const savedSearchQueries = services.searchQueriesService.getSavedQueries();
-        return savedSearchQueries || [];
+        dispatch(searchBarActions.SET_SAVED_QUERIES(services.searchQueriesService.getSavedQueries()));
     };
 
 export const deleteSavedQuery = (id: number) =>
     (dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
         services.searchQueriesService.deleteSavedQuery(id);
         const savedSearchQueries = services.searchQueriesService.getSavedQueries();
+        dispatch(searchBarActions.SET_SAVED_QUERIES(services.searchQueriesService.getSavedQueries()));
         return savedSearchQueries || [];
     };
 

diff --git a/src/store/search-bar/search-bar-reducer.ts b/src/store/search-bar/search-bar-reducer.ts
index 048cfea1fce22e55a58136cfa15926e90d204d31..26ebb9ec2e1074b99638fdcb2817dc9e1c053dcc 100644 (file)
--- a/src/store/search-bar/search-bar-reducer.ts
+++ b/src/store/search-bar/search-bar-reducer.ts
@@ -10,6 +10,7 @@ interface SearchBar {
     open: boolean;
     searchResults: GroupContentsResource[];
     searchValue: string;
+    savedQueries: string[];
 }
 
 export enum SearchView {
@@ -22,7 +23,8 @@ const initialState: SearchBar = {
     currentView: SearchView.BASIC,
     open: false,
     searchResults: [],
-    searchValue: ''
+    searchValue: '',
+    savedQueries: JSON.parse(localStorage.getItem('savedQueries') || '[]') as string[]
 };
 
 export const searchBarReducer = (state = initialState, action: SearchBarActions): SearchBar =>
@@ -32,5 +34,6 @@ export const searchBarReducer = (state = initialState, action: SearchBarActions)
         CLOSE_SEARCH_VIEW: () => ({ ...state, open: false }),
         SET_SEARCH_RESULTS: (searchResults) => ({ ...state, searchResults }),
         SET_SEARCH_VALUE: (searchValue) => ({ ...state, searchValue }),
+        SET_SAVED_QUERIES: savedQueries => ({ ...state, savedQueries }),
         default: () => state
     });
\ No newline at end of file

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 90fdaa79351d8e82cfda912efbb280eb1faf6cbc..aca1422813402ef13b3b28b4badfebdf78879b10 100644 (file)
--- a/src/views-components/search-bar/search-bar-basic-view.tsx
+++ b/src/views-components/search-bar/search-bar-basic-view.tsx
@@ -38,16 +38,16 @@ const styles: StyleRulesCallback<CssRules> = theme => {
 interface SearchBarBasicViewProps {
     setView: (currentView: string) => void;
     recentQueries: () => string[];
-    savedQueries: () => string[];
     deleteSavedQuery: (id: number) => void;
+    savedQueries: string[];
 }
 
 export const SearchBarBasicView = withStyles(styles)(
-    ({ classes, setView, recentQueries, savedQueries, deleteSavedQuery }: 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}>
-                {savedQueries().map((query, index) => <RenderSavedQueries key={index} text={query} id={index} deleteSavedQuery={deleteSavedQuery}/>)}
+                {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}>

diff --git a/src/views-components/search-bar/search-bar-view.tsx b/src/views-components/search-bar/search-bar-view.tsx
index cfab6c71d20a9a8bad149d8941d76baf22936774..7680516aba786a676309d5ec4a69acf394efc84a 100644 (file)
--- a/src/views-components/search-bar/search-bar-view.tsx
+++ b/src/views-components/search-bar/search-bar-view.tsx
@@ -55,6 +55,7 @@ type SearchBarDataProps = {
     searchValue: string;
     currentView: string;
     isPopoverOpen: boolean;
+    savedQueries: string[];
 } & SearchBarAutocompleteViewDataProps;
 
 interface SearchBarActionProps {
@@ -66,7 +67,6 @@ interface SearchBarActionProps {
     saveRecentQuery: (query: string) => void;
     loadRecentQueries: () => string[];
     saveQuery: (query: string) => void;
-    loadSavedQueries: () => string[];
     deleteSavedQuery: (id: number) => void;
 }
 
@@ -161,17 +161,18 @@ export const SearchBarView = withStyles(styles)(
         }
 
         getView = (currentView: string) => {
+            const { onSetView, loadRecentQueries, savedQueries, deleteSavedQuery, searchValue, searchResults } = this.props;
             switch (currentView) {
                 case SearchView.BASIC:
-                    return <SearchBarBasicView setView={this.props.onSetView} recentQueries={this.props.loadRecentQueries} savedQueries={this.props.loadSavedQueries} deleteSavedQuery={this.props.deleteSavedQuery}/>;
+                    return <SearchBarBasicView setView={onSetView} recentQueries={loadRecentQueries} savedQueries={savedQueries} deleteSavedQuery={deleteSavedQuery} />;
                 case SearchView.ADVANCED:
-                    return <SearchBarAdvancedView setView={this.props.onSetView} />;
+                    return <SearchBarAdvancedView setView={onSetView} />;
                 case SearchView.AUTOCOMPLETE:
                     return <SearchBarAutocompleteView
-                        searchResults={this.props.searchResults}
-                        searchValue={this.props.searchValue} />;
+                        searchResults={searchResults}
+                        searchValue={searchValue} />;
                 default:
-                    return <SearchBarBasicView setView={this.props.onSetView} recentQueries={this.props.loadRecentQueries} savedQueries={this.props.loadSavedQueries} deleteSavedQuery={this.props.deleteSavedQuery}/>;
+                    return <SearchBarBasicView setView={onSetView} recentQueries={loadRecentQueries} savedQueries={savedQueries} deleteSavedQuery={deleteSavedQuery} />;
             }
         }
 
@@ -182,7 +183,6 @@ export const SearchBarView = withStyles(styles)(
             this.props.saveQuery(this.state.value);
             this.props.onSearch(this.state.value);
             this.props.loadRecentQueries();
-            this.props.loadSavedQueries();
         }
 
         handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {

diff --git a/src/views-components/search-bar/search-bar.tsx b/src/views-components/search-bar/search-bar.tsx
index eddc7f0e60d8686a9ae0b9432db58f3592c80db7..eaca7fab0bd5caab24206d1e2d3e0e0f3588eb96 100644 (file)
--- a/src/views-components/search-bar/search-bar.tsx
+++ b/src/views-components/search-bar/search-bar.tsx
@@ -12,8 +12,7 @@ import {
     deleteSavedQuery,
     saveRecentQuery,
     loadRecentQueries,
-    saveQuery,
-    loadSavedQueries
+    saveQuery
 } from '~/store/search-bar/search-bar-actions';
 import { SearchBarView } from '~/views-components/search-bar/search-bar-view';
 
@@ -22,7 +21,8 @@ const mapStateToProps = ({ searchBar }: RootState) => {
         searchValue: searchBar.searchValue,
         currentView: searchBar.currentView,
         isPopoverOpen: searchBar.open,
-        searchResults: searchBar.searchResults
+        searchResults: searchBar.searchResults,
+        savedQueries: searchBar.savedQueries
     };
 };
 
@@ -34,7 +34,6 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
     saveRecentQuery: (query: string) => dispatch<any>(saveRecentQuery(query)),
     loadRecentQueries: () => dispatch<any>(loadRecentQueries()),
     saveQuery: (query: string) => dispatch<any>(saveQuery(query)),
-    loadSavedQueries: () => dispatch<any>(loadSavedQueries()),
     deleteSavedQuery: (id: number) => dispatch<any>(deleteSavedQuery(id))
 });