Refactoring reducer states showTrash and openedTag with showCollection

lib/app.tsx

@@ -37,7 +37,6 @@ type StateProps = {
   showEmailVerification: boolean;
   showNavigation: boolean;
   showNoteInfo: boolean;
-  showTrash: boolean;
   theme: 'light' | 'dark';
 };
 
@@ -220,7 +219,6 @@ const mapStateToProps: S.MapState<StateProps> = (state) => ({
   showEmailVerification: selectors.shouldShowEmailVerification(state),
   showNavigation: state.ui.showNavigation,
   showNoteInfo: state.ui.showNoteInfo,
-  showTrash: state.ui.showTrash,
   theme: selectors.getTheme(state),
 });
 

lib/menu-bar/index.tsx

@@ -25,9 +25,8 @@ type OwnProps = {
 };
 
 type StateProps = {
-  openedTag: T.Tag | null;
+  collection: T.Collection;
   searchQuery: string;
-  showTrash: boolean;
 };
 
 type DispatchProps = {
@@ -38,17 +37,23 @@ type DispatchProps = {
 type Props = OwnProps & StateProps & DispatchProps;
 
 export const MenuBar: FunctionComponent<Props> = ({
+  collection,
   onNewNote,
-  openedTag,
   searchQuery,
-  showTrash,
   toggleNavigation,
 }) => {
-  const placeholder = showTrash
-    ? 'Trash'
-    : openedTag
-    ? 'Notes With Selected Tag'
-    : 'All Notes';
+  let placeholder;
+  switch (collection.type) {
+    case 'tag':
+      placeholder = 'Notes With Selected Tag';
+      break;
+    case 'trash':
+      placeholder = 'Trash';
+      break;
+    default:
+      placeholder = 'All Notes';
+      break;
+  }
 
   const CmdOrCtrl = isMac ? 'Cmd' : 'Ctrl';
 
@@ -61,7 +66,7 @@ export const MenuBar: FunctionComponent<Props> = ({
       />
       <div className="notes-title">{placeholder}</div>
       <IconButton
-        disabled={showTrash}
+        disabled={collection.type === 'trash'}
         icon={<NewNoteIcon />}
         onClick={() => onNewNote(withoutTags(searchQuery))}
         title={`New Note • ${CmdOrCtrl}+Shift+I`}
@@ -71,12 +76,10 @@ export const MenuBar: FunctionComponent<Props> = ({
 };
 
 const mapStateToProps: S.MapState<StateProps> = ({
-  data,
-  ui: { openedTag, searchQuery, showTrash },
+  ui: { collection, searchQuery },
 }) => ({
-  openedTag: openedTag ? data.tags.get(openedTag) ?? null : null,
+  collection,
   searchQuery,
-  showTrash,
 });
 
 const mapDispatchToProps: S.MapDispatch<DispatchProps, OwnProps> = (

lib/navigation-bar/index.tsx

@@ -16,10 +16,9 @@ import * as T from '../types';
 
 type StateProps = {
   autoHideMenuBar: boolean;
+  collection: T.Collection;
   isDialogOpen: boolean;
-  openedTag: T.TagEntity | null;
   showNavigation: boolean;
-  showTrash: boolean;
 };
 
 type DispatchProps = {
@@ -56,11 +55,12 @@ export class NavigationBar extends Component<Props> {
   };
 
   // Determine if the selected class should be applied for the 'all notes' or 'trash' rows
-  isSelected = ({ isTrashRow }: { isTrashRow: boolean }) => {
-    const { showTrash, openedTag } = this.props;
-    const isItemSelected = isTrashRow === showTrash;
-
-    return isItemSelected && !openedTag;
+  isSelected = ({
+    selectedRow,
+  }: {
+    selectedRow: 'all' | 'trash' | 'untagged';
+  }) => {
+    return this.props.collection.type === selectedRow;
   };
 
   render() {
@@ -75,13 +75,13 @@ export class NavigationBar extends Component<Props> {
           />
           <NavigationBarItem
             icon={<TrashIcon />}
-            isSelected={this.isSelected({ isTrashRow: true })}
+            isSelected={this.isSelected({ selectedRow: 'trash' })}
             label="Trash"
             onClick={this.onSelectTrash}
           />
           <NavigationBarItem
             icon={<NotesIcon />}
-            isSelected={this.isSelected({ isTrashRow: false })}
+            isSelected={this.isSelected({ selectedRow: 'all' })}
             label="All Notes"
             onClick={onShowAllNotes}
           />
@@ -126,13 +126,12 @@ export class NavigationBar extends Component<Props> {
 
 const mapStateToProps: S.MapState<StateProps> = ({
   settings,
-  ui: { dialogs, openedTag, showNavigation, showTrash },
+  ui: { collection, dialogs, showNavigation },
 }) => ({
   autoHideMenuBar: settings.autoHideMenuBar,
+  collection,
   isDialogOpen: dialogs.length > 0,
-  openedTag,
   showNavigation,
-  showTrash,
 });
 
 const mapDispatchToProps: S.MapDispatch<DispatchProps> = {

lib/note-content-editor.tsx

@@ -243,11 +243,10 @@ class NoteContentEditor extends Component<Props> {
 
         const notes = searchNotes(
           {
-            searchTerms: getTerms(soFar),
+            collection: { type: 'all' },
             excludeIDs: selectedNoteId ? [selectedNoteId] : [],
-            openedTag: null,
-            showTrash: false,
             searchTags: tagsFromSearch(soFar),
+            searchTerms: getTerms(soFar),
             titleOnly: true,
           },
           5

lib/note-list/index.tsx

@@ -25,7 +25,6 @@ type StateProps = {
   keyboardShortcuts: boolean;
   noteDisplay: T.ListDisplayMode;
   openedNote: T.EntityId | null;
-  openedTag: T.EntityId | null;
   searchQuery: string;
   showNoteList: boolean;
   showTrash: boolean;
@@ -341,10 +340,9 @@ const mapStateToProps: S.MapState<StateProps> = (state) => {
     noteDisplay: state.settings.noteDisplay,
     filteredNotes: state.ui.filteredNotes,
     openedNote: state.ui.openedNote,
-    openedTag: state.ui.openedTag,
     searchQuery: state.ui.searchQuery,
     showNoteList: state.ui.showNoteList,
-    showTrash: state.ui.showTrash,
+    showTrash: selectors.showTrash(state),
     tagResultsFound: state.ui.tagSuggestions.length,
     windowWidth: state.browser.windowWidth,
   };

lib/note-list/no-notes.tsx

@@ -16,10 +16,9 @@ type EmptyNoteListPlaceholder = {
 };
 
 const NoNotes = () => {
+  const collection = useSelector((state: S.State) => state.ui.collection);
   const hasLoaded = useSelector((state: S.State) => state.ui.hasLoadedNotes);
   const searchQuery = useSelector((state: S.State) => state.ui.searchQuery);
-  const showTrash = useSelector((state: S.State) => state.ui.showTrash);
-  const openedTag = useSelector((state: S.State) => state.ui.openedTag);
   const dispatch = useDispatch();
 
   const getButton = () => {
@@ -39,41 +38,38 @@ const NoNotes = () => {
   };
 
   const placeholderInfo = ({
+    collection,
     searchQuery,
-    openedTag,
-    showTrash,
   }): EmptyNoteListPlaceholder => {
     if (searchQuery.length > 0) {
       return { message: 'No Results', icon: null, button: getButton() };
     }
 
-    if (openedTag !== null) {
-      return {
-        message: `No notes tagged "${openedTag}"`,
-        icon: <TagIcon />,
-        button: null,
-      };
+    switch (collection.type) {
+      case 'tag':
+        return {
+          message: `No notes tagged "${collection.tagName}"`,
+          icon: <TagIcon />,
+          button: null,
+        };
+      case 'trash':
+        return {
+          message: 'Your trash is empty',
+          icon: <TrashIcon />,
+          button: null,
+        };
+      default:
+        return {
+          message: '',
+          icon: <NotesIcon />,
+          button: getButton(),
+        };
     }
-
-    if (showTrash) {
-      return {
-        message: 'Your trash is empty',
-        icon: <TrashIcon />,
-        button: null,
-      };
-    }
-
-    return {
-      message: '',
-      icon: <NotesIcon />,
-      button: getButton(),
-    };
   };
 
   const { message, icon, button } = placeholderInfo({
+    collection,
     searchQuery,
-    openedTag,
-    showTrash,
   });
 
   return (

lib/search-field/index.tsx

@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import SmallCrossIcon from '../icons/cross-small';
 import SmallSearchIcon from '../icons/search-small';
 import { State } from '../state';
+import * as selectors from '../state/selectors';
 import { focusSearchField, search } from '../state/ui/actions';
 
 import { registerSearchField } from '../state/ui/search-field-middleware';
@@ -13,9 +14,8 @@ import type * as T from '../types';
 const KEY_ESC = 27;
 
 type StateProps = {
-  openedTag: T.Tag | null;
+  openedTag: T.TagName | null;
   searchQuery: string;
-  showTrash: boolean;
 };
 
 type DispatchProps = {
@@ -73,7 +73,7 @@ export class SearchField extends Component<Props> {
   render() {
     const { openedTag, searchQuery } = this.props;
     const hasQuery = searchQuery.length > 0;
-    const placeholder = openedTag?.name ?? 'Search notes and tags';
+    const placeholder = openedTag ?? 'Search notes and tags';
 
     const screenReaderLabel =
       'Search ' + (openedTag ? 'notes with tag ' : '') + placeholder;
@@ -106,13 +106,9 @@ export class SearchField extends Component<Props> {
   }
 }
 
-const mapStateToProps: S.MapState<StateProps> = ({
-  data,
-  ui: { openedTag, searchQuery, showTrash },
-}: State) => ({
-  openedTag: openedTag ? data.tags.get(openedTag) ?? null : null,
-  searchQuery,
-  showTrash,
+const mapStateToProps: S.MapState<StateProps> = (state: State) => ({
+  openedTag: selectors.openedTag(state),
+  searchQuery: state.ui.searchQuery,
 });
 
 const mapDispatchToProps: S.MapDispatch<DispatchProps> = (dispatch) => ({