#53: GlobalSearchBox has new actions

- "Clear keywords"
- "Clear search text"

client/src/common/IAction.ts

@@ -0,0 +1,4 @@
+export interface IAction {
+  url?: string;
+  onClick?: () => void;
+}

client/src/pages/search/GlobalSearchBox.tsx

@@ -5,12 +5,13 @@ import { Redirect } from "react-router";
 import { Subscription } from "rxjs";
 import styled, { css } from "styled-components";
 import { ErrorBoundary } from "../../common/ErrorBoundary";
-import { IRedirection } from "../../common/IRedirection";
+import { IAction } from "../../common/IAction";
 import { IDropDownItem } from "../../common/searchBox/dropDown/IDropDownItem";
 import { IDropDownItemGroup } from "../../common/searchBox/dropDown/IDropDownItemGroup";
 import { SearchBox } from "../../common/searchBox/SearchBox";
 import { ItemStore } from "../../items/ItemStore";
 import { StyleConstants } from "../../styling/StyleConstants";
+import { Item } from "./results/Item";
 
 interface IWrapperDivStyle {
   showDropDown: boolean;
@@ -36,7 +37,7 @@ interface IGlobalSearchBoxState {
   keywordSearchValue: string;
   showDropDown: boolean;
   keywordDropDownItems: Array<IDropDownItem<IKeyword>>;
-  actionDropDownItems: Array<IDropDownItem<IRedirection>>;
+  actionDropDownItems: Array<IDropDownItem<IAction>>;
   selectedKeywords: IKeyword[];
   redirectToUrl: string;
 }
@@ -113,10 +114,14 @@ export class GlobalSearchBox extends React.PureComponent<{}, IGlobalSearchBoxSta
       dropDownGroups.push({
         title: "Actions",
         items: this.state.actionDropDownItems,
-        onSelectItem: (item: IDropDownItem<IRedirection>) => {
-          this.setState({
-            redirectToUrl: item.item.url
-          });
+        onSelectItem: (item: IDropDownItem<IAction>) => {
+          if (item.item.url) {
+            this.setState({
+              redirectToUrl: item.item.url
+            });
+          } else if (item.item.onClick) {
+            item.item.onClick();
+          }
         }
       });
     }
@@ -185,7 +190,7 @@ export class GlobalSearchBox extends React.PureComponent<{}, IGlobalSearchBoxSta
   };
 
   private setActionDropDownItems = (searchText: string): void => {
-    const actions: Array<IDropDownItem<IRedirection>> = [];
+    const actions: Array<IDropDownItem<IAction>> = [];
 
     if (!ItemStore.isInvalidSearchText(searchText)) {
       if (searchText.startsWith("http://") || searchText.startsWith("https://")) {
@@ -206,6 +211,31 @@ export class GlobalSearchBox extends React.PureComponent<{}, IGlobalSearchBoxSta
           key: url,
           label: `Create note titled "${searchText}"`
         });
+        actions.push({
+          item: {
+            onClick: () => {
+              ItemStore.instance.searchText = "";
+              ItemStore.instance.loadItems();
+              this.setState({ searchValue: "" }, () => this.setActionDropDownItems(""));
+            }
+          },
+          key: "clear_search_text",
+          label: `Clear search text`
+        });
+      }
+
+      if (this.state.selectedKeywords.length > 0) {
+        actions.push({
+          item: {
+            onClick: () => {
+              ItemStore.instance.keywords$.next([]);
+              ItemStore.instance.loadItems();
+              this.setActionDropDownItems("");
+            }
+          },
+          key: "clear_keywords",
+          label: `Clear keywords`
+        });
       }
     }
 

client/src/pages/search/Sorting.tsx

@@ -56,7 +56,7 @@ const sortTogglerValues: ITogglerValue[] = [
 ];
 
 const Root = styled.div`
-  margin-top: ${StyleConstants.defaultSpacing};
+  margin: 1.5rem 0;
   font-size: ${StyleConstants.font.size.small};
   text-align: right;
 

client/src/pages/search/results/ItemsList.tsx

@@ -70,7 +70,7 @@ const List = styled.ul`
 const ListItem = styled.li``;
 
 const NoItemsFound = styled.div`
-  margin-top: 80px;
+  margin-top: 100px;
   text-align: center;
   font-size: ${StyleConstants.font.size.large};
   color: ${StyleConstants.colors.discreet};