Fix selecting the first item

Feature #13364

Arvados-DCO-1.1-Signed-off-by: Daniel Kos <daniel.kos@contractors.roche.com>

diff --git a/src/services/search-service/search-service.ts b/src/services/search-service/search-service.ts
index bcc42bdc72990c52cfdd519a2a1f6a5d1ef69141..a8e91c39633b6007ad89cb2aa354a9fbe58fc1f4 100644 (file)
--- a/src/services/search-service/search-service.ts
+++ b/src/services/search-service/search-service.ts
@@ -5,7 +5,7 @@
 import { SearchBarAdvanceFormData } from '~/models/search-bar';
 
 export class SearchService {
-    private recentQueries: string[] = this.getRecentQueries();
+    private recentQueries = this.getRecentQueries();
     private savedQueries: SearchBarAdvanceFormData[] = this.getSavedQueries();
 
     saveRecentQuery(query: string) {
@@ -16,8 +16,8 @@ export class SearchService {
         localStorage.setItem('recentQueries', JSON.stringify(this.recentQueries));
     }
 
-    getRecentQueries() {
-        return JSON.parse(localStorage.getItem('recentQueries') || '[]') as string[];
+    getRecentQueries(): string[] {
+        return JSON.parse(localStorage.getItem('recentQueries') || '[]');
     }
 
     saveQuery(data: SearchBarAdvanceFormData) {

diff --git a/src/store/search-bar/search-bar-actions.ts b/src/store/search-bar/search-bar-actions.ts
index 9f86e4600ff163a319affaea8deddee64f1efa2b..088c92575f65d6942f91b108663c4137e07daaf4 100644 (file)
--- a/src/store/search-bar/search-bar-actions.ts
+++ b/src/store/search-bar/search-bar-actions.ts
@@ -30,7 +30,8 @@ export const searchBarActions = unionize({
     UPDATE_SAVED_QUERY: ofType<SearchBarAdvanceFormData[]>(),
     SET_SELECTED_ITEM: ofType<string>(),
     MOVE_UP: ofType<{}>(),
-    MOVE_DOWN: ofType<{}>()
+    MOVE_DOWN: ofType<{}>(),
+    SELECT_FIRST_ITEM: ofType<{}>()
 });
 
 export type SearchBarActions = UnionOf<typeof searchBarActions>;
@@ -50,7 +51,7 @@ export const saveRecentQuery = (query: string) =>
 
 export const loadRecentQueries = () =>
     (dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
-        const recentQueries = services.searchService.getRecentQueries() || [];
+        const recentQueries = services.searchService.getRecentQueries();
         dispatch(searchBarActions.SET_RECENT_QUERIES(recentQueries));
         return recentQueries;
     };
@@ -59,7 +60,6 @@ export const searchData = (searchValue: string) =>
     async (dispatch: Dispatch, getState: () => RootState) => {
         const currentView = getState().searchBar.currentView;
         dispatch(searchBarActions.SET_SEARCH_VALUE(searchValue));
-        // dispatch(searchBarActions.SET_SEARCH_RESULTS([]));
         if (searchValue.length > 0) {
             dispatch<any>(searchGroups(searchValue));
             if (currentView === SearchView.BASIC) {
@@ -111,18 +111,17 @@ export const editSavedQuery = (data: SearchBarAdvanceFormData) =>
 
 export const openSearchView = () =>
     (dispatch: Dispatch<any>, getState: () => RootState, services: ServiceRepository) => {
-        dispatch(searchBarActions.OPEN_SEARCH_VIEW());
         const savedSearchQueries = services.searchService.getSavedQueries();
         dispatch(searchBarActions.SET_SAVED_QUERIES(savedSearchQueries));
+        dispatch(loadRecentQueries());
+        dispatch(searchBarActions.OPEN_SEARCH_VIEW());
+        dispatch(searchBarActions.SELECT_FIRST_ITEM());
     };
 
 export const closeSearchView = () =>
-    (dispatch: Dispatch<any>, getState: () => RootState) => {
-        const isOpen = getState().searchBar.open;
-        if (isOpen) {
-            dispatch(searchBarActions.CLOSE_SEARCH_VIEW());
-            dispatch(searchBarActions.SET_CURRENT_VIEW(SearchView.BASIC));
-        }
+    (dispatch: Dispatch<any>) => {
+        dispatch(searchBarActions.SET_SELECTED_ITEM(''));
+        dispatch(searchBarActions.CLOSE_SEARCH_VIEW());
     };
 
 export const closeAdvanceView = () =>
@@ -133,6 +132,7 @@ export const closeAdvanceView = () =>
 
 export const navigateToItem = (uuid: string) =>
     (dispatch: Dispatch<any>) => {
+        dispatch(searchBarActions.SET_SELECTED_ITEM(''));
         dispatch(searchBarActions.CLOSE_SEARCH_VIEW());
         dispatch(navigateTo(uuid));
     };
@@ -146,12 +146,13 @@ export const changeData = (searchValue: string) =>
         if (currentView === SearchView.ADVANCED) {
 
         } else if (searchValuePresent) {
-            dispatch<any>(goToView(SearchView.AUTOCOMPLETE));
+            dispatch(searchBarActions.SET_CURRENT_VIEW(SearchView.AUTOCOMPLETE));
+            dispatch(searchBarActions.SET_SELECTED_ITEM(searchValue));
             debounceStartSearch(dispatch);
         } else {
-            dispatch<any>(goToView(SearchView.BASIC));
-            dispatch(searchBarActions.SET_SEARCH_VALUE(searchValue));
+            dispatch(searchBarActions.SET_CURRENT_VIEW(SearchView.BASIC));
             dispatch(searchBarActions.SET_SEARCH_RESULTS([]));
+            dispatch(searchBarActions.SELECT_FIRST_ITEM());
         }
     };
 

diff --git a/src/store/search-bar/search-bar-reducer.ts b/src/store/search-bar/search-bar-reducer.ts
index 1c16d99905a9deb02b13d1d23d50c619de5a68e3..32b01f726a538d2acf7a30c78f2f7a54db78b662 100644 (file)
--- a/src/store/search-bar/search-bar-reducer.ts
+++ b/src/store/search-bar/search-bar-reducer.ts
@@ -70,10 +70,7 @@ export const searchBarReducer = (state = initialState, action: SearchBarActions)
         }),
         SET_SEARCH_VALUE: searchValue => ({
             ...state,
-            searchValue,
-            selectedItem: makeSelectedItem(state.searchValue === state.selectedItem.id
-                ? searchValue
-                : state.selectedItem.id)
+            searchValue
         }),
         SET_SAVED_QUERIES: savedQueries => ({ ...state, savedQueries }),
         SET_RECENT_QUERIES: recentQueries => ({ ...state, recentQueries }),
@@ -127,5 +124,22 @@ export const searchBarReducer = (state = initialState, action: SearchBarActions)
                 selectedItem
             };
         },
+        SELECT_FIRST_ITEM: () => {
+            let selectedItem = state.selectedItem;
+            if (state.currentView === SearchView.AUTOCOMPLETE) {
+                if (state.searchResults.length > 0) {
+                    selectedItem = makeSelectedItem(state.searchResults[0].uuid);
+                }
+            } else if (state.currentView === SearchView.BASIC) {
+                const items = makeQueryList(state.recentQueries, state.savedQueries);
+                if (items.length > 0) {
+                    selectedItem = items[0];
+                }
+            }
+            return {
+                ...state,
+                selectedItem
+            };
+        },
         default: () => state
     });

diff --git a/src/views-components/search-bar/search-bar-view.tsx b/src/views-components/search-bar/search-bar-view.tsx
index 54a3f8f79717a7ab24f777e9f7fe901399272656..1a19b47d67dccbac6cc643f7caeb13006c9ee3a2 100644 (file)
--- a/src/views-components/search-bar/search-bar-view.tsx
+++ b/src/views-components/search-bar/search-bar-view.tsx
@@ -101,6 +101,7 @@ const handleKeyDown = (e: React.KeyboardEvent, props: SearchBarViewProps) => {
         e.preventDefault();
         props.moveUp();
     } else if (e.keyCode === KEY_CODE_ESC) {
+        e.preventDefault();
         props.closeView();
     } else if (e.keyCode === KEY_ENTER) {
         if (props.currentView === SearchView.BASIC) {