Rebasing on develop before merging

lib/app-layout/index.tsx

@@ -144,7 +144,7 @@ export class AppLayout extends Component<Props> {
 const mapStateToProps: S.MapState<StateProps> = (state) => ({
   hasRevisions:
     state.ui.showRevisions && state.data.noteRevisions.has(state.ui.openedNote),
-  keyboardShortcutsAreOpen: state.ui.dialogs.includes('KEYBINDINGS'),
+  keyboardShortcutsAreOpen: selectors.isDialogOpen(state, 'KEYBINDINGS'),
   keyboardShortcuts: state.settings.keyboardShortcuts,
   isFocusMode: state.settings.focusModeEnabled,
   isNavigationOpen: state.ui.showNavigation,

lib/dialog-renderer/index.tsx

@@ -10,6 +10,7 @@ import KeybindingsDialog from '../dialogs/keybindings';
 import LogoutConfirmation from '../dialogs/logout-confirmation';
 import SettingsDialog from '../dialogs/settings';
 import ShareDialog from '../dialogs/share';
+import TrashTagConfirmation from '../dialogs/trash-tag-confirmation';
 import { closeDialog } from '../state/ui/actions';
 
 import * as S from '../state';
@@ -35,36 +36,40 @@ export class DialogRenderer extends Component<Props> {
   static displayName = 'DialogRenderer';
 
   render() {
-    const { theme, closeDialog } = this.props;
-
+    const { theme, closeDialog, dialogs } = this.props;
     return (
       <Fragment>
-        {this.props.dialogs.map((dialog) => (
+        {dialogs.map((dialog) => (
           <Modal
-            key={dialog}
+            key={dialog.type}
             className="dialog-renderer__content"
-            contentLabel={dialog}
+            contentLabel={dialog.type}
             isOpen
             onRequestClose={closeDialog}
             overlayClassName="dialog-renderer__overlay"
             portalClassName={`dialog-renderer__portal theme-${theme}`}
           >
-            {'ABOUT' === dialog ? (
+            {'ABOUT' === dialog.type ? (
               <AboutDialog key="about" closeDialog={closeDialog} />
-            ) : 'BETA-WARNING' === dialog ? (
+            ) : 'BETA-WARNING' === dialog.type ? (
               <BetaWarning key="beta-warning" />
-            ) : 'CLOSE-WINDOW-CONFIRMATION' === dialog ? (
+            ) : 'CLOSE-WINDOW-CONFIRMATION' === dialog.type ? (
               <CloseWindowConfirmation key="close-window-confirmation" />
-            ) : 'IMPORT' === dialog ? (
+            ) : 'IMPORT' === dialog.type ? (
               <ImportDialog key="import" />
-            ) : 'KEYBINDINGS' === dialog ? (
+            ) : 'KEYBINDINGS' === dialog.type ? (
               <KeybindingsDialog key="keybindings" />
-            ) : 'LOGOUT-CONFIRMATION' === dialog ? (
+            ) : 'LOGOUT-CONFIRMATION' === dialog.type ? (
               <LogoutConfirmation key="logout-confirmation" />
-            ) : 'SETTINGS' === dialog ? (
+            ) : 'SETTINGS' === dialog.type ? (
               <SettingsDialog key="settings" />
-            ) : 'SHARE' === dialog ? (
+            ) : 'SHARE' === dialog.type ? (
               <ShareDialog key="share" />
+            ) : 'TRASH-TAG-CONFIRMATION' === dialog.type ? (
+              <TrashTagConfirmation
+                key="trash-tag-confirmation"
+                tagName={dialog.tagName}
+              />
             ) : null}
           </Modal>
         ))}

lib/dialog/style.scss

@@ -4,7 +4,6 @@
   width: calc(100vw - 2rem);
   background: white;
   border-radius: 8px;
-  border: 0;
 }
 
 .dialog-title-bar {

lib/dialogs/trash-tag-confirmation/index.tsx

@@ -0,0 +1,54 @@
+import React, { FunctionComponent } from 'react';
+import { connect } from 'react-redux';
+
+import actions from '../../state/actions';
+import Dialog from '../../dialog';
+
+import type * as S from '../../state';
+import type * as T from '../../types';
+
+type OwnProps = {
+  tagName: T.TagName;
+};
+
+type DispatchProps = {
+  closeDialog: () => any;
+  trashTag: (tagName: T.TagName) => any;
+};
+
+type Props = OwnProps & DispatchProps;
+
+const TrashTagConfirmation: FunctionComponent<Props> = ({
+  closeDialog,
+  tagName,
+  trashTag,
+}) => (
+  <Dialog
+    className="trash-tag-confirmation"
+    onDone={closeDialog}
+    title="Delete Tag"
+  >
+    <div className="dialog-inner-content">
+      Are you sure you want to delete &quot;
+      <span className="tag-name">{tagName}</span>&quot;?
+    </div>
+    <div className="dialog-buttons">
+      <button
+        className="button-primary delete-tag"
+        onClick={() => trashTag(tagName)}
+      >
+        Delete Tag
+      </button>
+    </div>
+  </Dialog>
+);
+
+const mapDispatchToProps: S.MapDispatch<DispatchProps> = {
+  trashTag: (tagName) => ({
+    type: 'TRASH_TAG',
+    tagName,
+  }),
+  closeDialog: actions.ui.closeDialog,
+};
+
+export default connect(null, mapDispatchToProps)(TrashTagConfirmation);

lib/dialogs/trash-tag-confirmation/style.scss

@@ -0,0 +1,51 @@
+.trash-tag-confirmation {
+  width: 360px;
+
+  .dialog-title-text {
+    text-align: left;
+    padding-left: 16px;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 56px;
+    margin: 0;
+  }
+
+  .dialog-title-side:first-child {
+    display: none;
+  }
+
+  .dialog-content {
+    padding: 0 16px;
+
+    .dialog-inner-content {
+      margin: 10px 0;
+
+      span.tag-name {
+        word-break: break-all;
+      }
+    }
+  }
+
+  .icon-cross {
+    width: 16px;
+    height: 16px;
+  }
+
+  .dialog-title-bar,
+  .dialog-buttons,
+  .dialog-title-text,
+  .dialog-title-side {
+    height: 56px;
+  }
+
+  .dialog-buttons {
+    text-align: right;
+  }
+
+  button.delete-tag {
+    border-radius: 4px;
+    padding: 6px 14px;
+    margin-top: 14px;
+    line-height: 16px;
+  }
+}

lib/state/action-types.ts

@@ -101,7 +101,13 @@ export type SetUnsyncedNoteIds = Action<
   { noteIds: T.EntityId[] }
 >;
 export type ShowAllNotes = Action<'SHOW_ALL_NOTES'>;
-export type ShowDialog = Action<'SHOW_DIALOG', { dialog: T.DialogType }>;
+export type ShowDialog = Action<
+  'SHOW_DIALOG',
+  {
+    name: T.DialogType['type'];
+    data?: object;
+  }
+>;
 export type StoreEditorSelection = Action<
   'STORE_EDITOR_SELECTION',
   { noteId: T.EntityId; start: number; end: number; direction: 'RTL' | 'LTR' }

lib/state/analytics/middleware.ts

@@ -135,7 +135,7 @@ export const middleware: S.Middleware = (store) => {
         record('user_signed_in');
         break;
       case 'SHOW_DIALOG':
-        if (action.dialog === 'SHARE') {
+        if (action.name === 'SHARE') {
           record('editor_share_dialog_viewed');
         }
         break;

lib/state/selectors.ts

@@ -52,3 +52,5 @@ export const openedTag: S.Selector<T.TagName | null> = ({
 
 export const showTrash: S.Selector<boolean> = ({ ui: { collection } }) =>
   collection.type === 'trash';
+export const isDialogOpen = (state: S.State, name: T.DialogType['type']) =>
+  state.ui.dialogs.find(({ type }) => type === name) !== undefined;

lib/state/simperium/middleware.ts

@@ -436,7 +436,7 @@ export const initSimperium = (
         if (changes.notes.length > 0) {
           store.dispatch({
             type: 'SHOW_DIALOG',
-            dialog: 'CLOSE-WINDOW-CONFIRMATION',
+            name: 'CLOSE-WINDOW-CONFIRMATION',
           });
           return result;
         }
@@ -454,7 +454,7 @@ export const initSimperium = (
         if (changes.notes.length > 0) {
           store.dispatch({
             type: 'SHOW_DIALOG',
-            dialog: 'LOGOUT-CONFIRMATION',
+            name: 'LOGOUT-CONFIRMATION',
           });
           return result;
         }

lib/state/ui/actions.ts

@@ -84,11 +84,15 @@ export const showAllNotes: A.ActionCreator<A.ShowAllNotes> = () => ({
   type: 'SHOW_ALL_NOTES',
 });
 
-export const showDialog: A.ActionCreator<A.ShowDialog> = (
-  dialog: T.DialogType
-) => ({
+export const showDialog: A.ActionCreator<A.ShowDialog> = <
+  D extends T.DialogType
+>(
+  name: D['type'],
+  data: object = {}
+): A.ShowDialog => ({
   type: 'SHOW_DIALOG',
-  dialog,
+  name,
+  ...data,
 });
 
 export const storeRevisions: A.ActionCreator<A.StoreRevisions> = (

lib/state/ui/reducer.ts

@@ -108,9 +108,23 @@ const dialogs: A.Reducer<T.DialogType[]> = (state = [], action) => {
   switch (action.type) {
     case 'CLOSE_DIALOG':
       return state.slice(0, -1);
-
-    case 'SHOW_DIALOG':
-      return state.includes(action.dialog) ? state : [...state, action.dialog];
+    case 'TRASH_TAG':
+      return state.filter((dialog) => dialog.type !== 'TRASH-TAG-CONFIRMATION');
+    case 'REMOTE_TAG_DELETE':
+      return state.filter(
+        (dialog) =>
+          !(
+            dialog.type === 'TRASH-TAG-CONFIRMATION' &&
+            tagHashOf(dialog.tagName) === action.tagHash
+          )
+      );
+    case 'SHOW_DIALOG': {
+      const { type, name, ...data } = action;
+      // This ensures we only show one dialog of each type at a time.
+      return state.find((dialog) => dialog.type === name)
+        ? state
+        : [...state, { type: name, ...data }];
+    }
 
     default:
       return state;
@@ -278,7 +292,7 @@ const showNavigation: A.Reducer<boolean> = (state = false, action) => {
     case 'SHOW_ALL_NOTES':
       return false;
     case 'SHOW_DIALOG':
-      if (action.dialog === 'SETTINGS') {
+      if (action.name === 'SETTINGS') {
         return false;
       }
       return state;

lib/tag-list/index.tsx

@@ -11,7 +11,7 @@ import isEmailTag from '../utils/is-email-tag';
 import ReorderIcon from '../icons/reorder';
 import TagListInput from './input';
 import TrashIcon from '../icons/trash';
-import { openTag, toggleTagEditing } from '../state/ui/actions';
+import { openTag, showDialog, toggleTagEditing } from '../state/ui/actions';
 import { tagHashOf } from '../utils/tag-hash';
 
 import * as selectors from './../state/selectors';
@@ -216,10 +216,10 @@ const mapDispatchToProps: S.MapDispatch<DispatchProps> = {
     tagName,
     newIndex,
   }),
-  trashTag: (tagName) => ({
-    type: 'TRASH_TAG',
-    tagName,
-  }),
+  trashTag: (tagName) =>
+    showDialog('TRASH-TAG-CONFIRMATION', {
+      tagName,
+    }),
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(TagList);

lib/types.ts

@@ -65,14 +65,18 @@ export type ConnectionState = 'green' | 'red' | 'offline';
 // Application Types
 ///////////////////////////////////////
 export type DialogType =
-  | 'ABOUT'
-  | 'BETA-WARNING'
-  | 'CLOSE-WINDOW-CONFIRMATION'
-  | 'IMPORT'
-  | 'KEYBINDINGS'
-  | 'LOGOUT-CONFIRMATION'
-  | 'SETTINGS'
-  | 'SHARE';
+  | { type: 'ABOUT' }
+  | { type: 'BETA-WARNING' }
+  | { type: 'CLOSE-WINDOW-CONFIRMATION' }
+  | { type: 'IMPORT' }
+  | { type: 'KEYBINDINGS' }
+  | { type: 'LOGOUT-CONFIRMATION' }
+  | { type: 'SETTINGS' }
+  | { type: 'SHARE' }
+  | {
+      type: 'TRASH-TAG-CONFIRMATION';
+      tagName: TagName;
+    };
 export type LineLength = 'full' | 'narrow';
 export type ListDisplayMode = 'expanded' | 'comfy' | 'condensed';
 export type SortType = 'alphabetical' | 'creationDate' | 'modificationDate';

scss/_components.scss

@@ -22,6 +22,7 @@
 @import 'dialogs/unsynchronized/style';
 @import 'dialogs/settings/style';
 @import 'dialogs/share/style';
+@import 'dialogs/trash-tag-confirmation/style';
 @import 'dialogs/button-group/style';
 @import 'email-verification/style';
 @import 'icon-button/style';