Add support for sorting the tags list

desktop/menus/view-menu.js

@@ -84,7 +84,18 @@ const buildViewMenu = settings => {
         ),
       },
       {
-        label: '&Theme',
+        label: '&Tags',
+        submenu: [
+          {
+            label: '&Sort Alphabetically',
+            type: 'checkbox',
+            checked: settings.sortTagsAlpha,
+            click: appCommandSender({ action: 'toggleSortTagsAlpha' }),
+          },
+        ],
+      },
+      {
+        label: 'T&heme',
         submenu: [
           {
             label: '&Light',

lib/app.jsx

@@ -58,14 +58,19 @@ const mapStateToProps = state => ({
   isAuthorized: selectors.auth.isAuthorized(state),
 });
 
-function mapDispatchToProps(dispatch, { noteBucket }) {
+function mapDispatchToProps(dispatch, { noteBucket, tagBucket }) {
   const actionCreators = Object.assign({}, appState.actionCreators);
 
   const thenReloadNotes = action => a => {
     dispatch(action(a));
     dispatch(actionCreators.loadNotes({ noteBucket }));
   };
 
+  const thenReloadTags = action => a => {
+    dispatch(action(a));
+    dispatch(actionCreators.loadTags({ tagBucket }));
+  };
+
   return {
     actions: bindActionCreators(actionCreators, dispatch),
     ...bindActionCreators(
@@ -85,6 +90,7 @@ function mapDispatchToProps(dispatch, { noteBucket }) {
     ),
     setSortType: thenReloadNotes(settingsActions.setSortType),
     toggleSortOrder: thenReloadNotes(settingsActions.toggleSortOrder),
+    toggleSortTagsAlpha: thenReloadTags(settingsActions.toggleSortTagsAlpha),
 
     openTagList: () => dispatch(actionCreators.toggleNavigation()),
     resetAuth: () => dispatch(reduxActions.auth.reset()),

lib/boot.js

@@ -69,12 +69,15 @@ const client = simperium({
     preferences: function(objectStore) {
       console.log('Configure preferences', objectStore); // eslint-disable-line no-console
     },
-    tag: function(objectStore) {
-      console.log('Configure tag', objectStore); // eslint-disable-line no-console
+    tag: {
+      configure: function(objectStore) {
+        // Create an index on the tag name
+        objectStore.createIndex('name', 'data.name');
+      },
     },
   },
   database: 'simplenote',
-  version: 41,
+  version: 42,
 });
 
 const l = msg => {

lib/dialogs/settings/index.jsx

@@ -140,6 +140,7 @@ export class SettingsDialog extends Component {
       setNoteDisplay,
       setSortType,
       toggleSortOrder,
+      toggleSortTagsAlpha,
     } = this.props;
 
     const {
@@ -149,6 +150,7 @@ export class SettingsDialog extends Component {
         noteDisplay,
         sortType,
         sortReversed: sortIsReversed,
+        sortTagsAlpha,
         accountName,
       },
     } = this.props;
@@ -250,6 +252,16 @@ export class SettingsDialog extends Component {
               <Item title="Reversed" slug="reversed" />
             </SettingsGroup>
 
+            <SettingsGroup
+              title="Tags"
+              slug="sortTagsAlpha"
+              activeSlug={sortTagsAlpha ? 'alpha' : ''}
+              onChange={toggleSortTagsAlpha}
+              renderer={ToggleGroup}
+            >
+              <Item title="Sort Alphabetically" slug="alpha" />
+            </SettingsGroup>
+
             <SettingsGroup
               title="Theme"
               slug="theme"

lib/editable-list/index.jsx

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import SmallCrossOutlineIcon from '../icons/cross-outline-small';
@@ -64,7 +65,7 @@ export class EditableList extends Component {
   };
 
   render() {
-    const { editing, onRemove, onReorder } = this.props;
+    const { editing, onRemove, onReorder, sortTagsAlpha } = this.props;
     const { reorderedItems, reorderingId } = this.state;
     const classes = classNames('editable-list', this.props.className, {
       'editable-list-editing': this.props.editing,
@@ -104,18 +105,19 @@ export class EditableList extends Component {
                 </span>
               </span>
 
-              {onReorder && (
-                <span
-                  className="editable-list-reorder"
-                  tabIndex={editing ? '0' : '-1'}
-                  onDragStart={e => e.preventDefault()}
-                  onMouseDown={this.onReorderStart.bind(this, itemId)}
-                  onTouchStart={this.onReorderStart.bind(this, itemId)}
-                  onKeyDown={this.onReorderKeyDown.bind(this, itemId)}
-                >
-                  <ReorderIcon />
-                </span>
-              )}
+              {onReorder &&
+                !sortTagsAlpha && (
+                  <span
+                    className="editable-list-reorder"
+                    tabIndex={editing ? '0' : '-1'}
+                    onDragStart={e => e.preventDefault()}
+                    onMouseDown={this.onReorderStart.bind(this, itemId)}
+                    onTouchStart={this.onReorderStart.bind(this, itemId)}
+                    onKeyDown={this.onReorderKeyDown.bind(this, itemId)}
+                  >
+                    <ReorderIcon />
+                  </span>
+                )}
             </li>
           );
         })}
@@ -301,4 +303,8 @@ export class EditableList extends Component {
   };
 }
 
-export default EditableList;
+const mapStateToProps = ({ settings: { sortTagsAlpha } }) => ({
+  sortTagsAlpha,
+});
+
+export default connect(mapStateToProps)(EditableList);

lib/flux/app-state.js

@@ -684,29 +684,34 @@ export const actionMap = new ActionMap({
 
     loadTags: {
       creator({ tagBucket }) {
-        return dispatch => {
+        return (dispatch, getState) => {
+          const sortTagsAlpha = getState().settings.sortTagsAlpha;
           tagBucket.query(db => {
             var tags = [];
             db
               .transaction('tag')
               .objectStore('tag')
-              .openCursor(null, 'prev').onsuccess = e => {
+              .index('name')
+              .openCursor().onsuccess = e => {
               var cursor = e.target.result;
               if (cursor) {
                 tags.push(cursor.value);
                 cursor.continue();
               } else {
-                dispatch(this.action('tagsLoaded', { tags: tags }));
+                dispatch(this.action('tagsLoaded', { tags, sortTagsAlpha }));
               }
             };
           });
         };
       },
     },
 
-    tagsLoaded(state, { tags }) {
+    tagsLoaded(state, { tags, sortTagsAlpha }) {
       tags = tags.slice();
-      tags.sort((a, b) => (a.data.index | 0) - (b.data.index | 0));
+      if (!sortTagsAlpha) {
+        // Sort the tags by their 'index' value
+        tags.sort((a, b) => (a.data.index | 0) - (b.data.index | 0));
+      }
 
       return update(state, {
         tags: { $set: tags },

lib/state/settings/actions.js

@@ -48,6 +48,17 @@ export const setSortType = sortType => ({
   sortType,
 });
 
+export const setSortTagsAlpha = sortTagsAlpha => ({
+  type: 'setSortTagsAlpha',
+  sortTagsAlpha,
+});
+
+export const toggleSortTagsAlpha = () => (dispatch, getState) => {
+  const { settings: { sortTagsAlpha } } = getState();
+
+  dispatch(setSortTagsAlpha(!sortTagsAlpha));
+};
+
 export const setMarkdown = markdownEnabled => ({
   type: 'setMarkdownEnabled',
   markdownEnabled,

lib/state/settings/reducer.js

@@ -17,6 +17,14 @@ const sortReversed = (state = false, action) => {
   return action.sortReversed;
 };
 
+const sortTagsAlpha = (state = false, action) => {
+  if ('setSortTagsAlpha' !== action.type) {
+    return state;
+  }
+
+  return action.sortTagsAlpha || false;
+};
+
 const theme = (state = 'light', action) => {
   if ('setTheme' !== action.type) {
     return state;
@@ -98,6 +106,7 @@ export default combineReducers({
   noteDisplay,
   sortType,
   sortReversed,
+  sortTagsAlpha,
   spellCheckEnabled,
   theme,
   wpToken,

lib/tag-list/index.jsx

@@ -81,8 +81,8 @@ export class TagList extends Component {
         </div>
         <EditableList
           className="tag-list-items"
-          items={this.props.tags}
-          editing={this.props.editingTags}
+          items={tags}
+          editing={editingTags}
           renderItem={this.renderItem}
           onRemove={this.props.onTrashTag}
           onReorder={this.props.onReorderTags}