feat(threads): in split mode select the first thread if none selected

Test Plan: edgehill --test

Reviewers: bengotow

Reviewed By: bengotow

Differential Revision: https://review.inboxapp.com/D1354

src/flux/stores/thread-store.coffee

@@ -1,6 +1,7 @@
 Reflux = require 'reflux'
 DatabaseStore = require './database-store'
 NamespaceStore = require './namespace-store'
+WorkspaceStore = require './workspace-store'
 AddRemoveTagsTask = require '../tasks/add-remove-tags'
 MarkThreadReadTask = require '../tasks/mark-thread-read'
 Actions = require '../actions'
@@ -18,6 +19,7 @@ ThreadStore = Reflux.createStore
     @listenTo Actions.archiveCurrentThread, @_onArchiveCurrentThread
     @listenTo Actions.archiveAndNext, @_onArchiveAndNext
     @listenTo Actions.searchQueryCommitted, @_onSearchCommitted
+    @listenTo Actions.selectLayoutMode, @_autoselectForLayoutMode
     @listenTo DatabaseStore, @_onDataChanged
     @listenTo NamespaceStore, -> @_onNamespaceChanged()
     @fetchFromCache()
@@ -79,6 +81,8 @@ ThreadStore = Reflux.createStore
             newSelectedId = null
           Actions.selectThreadId(newSelectedId)
 
+        @_autoselectForLayoutMode()
+
         console.log("Fetching data for thread list took #{Date.now() - start} msec")
 
         # If we've loaded threads, remove the loading indicator.
@@ -191,6 +195,10 @@ ThreadStore = Reflux.createStore
     @_onArchiveCurrentThread(silent: true)
     Actions.selectThreadId(newSelectedId)
 
+  _autoselectForLayoutMode: ->
+    if WorkspaceStore.selectedLayoutMode() is "split" and not @selectedThread()
+      _.defer => Actions.selectThreadId(@_items[0]?.id)
+
   # Accessing Data
 
   selectedTagId: ->

src/sheet-container.cjsx

@@ -142,20 +142,21 @@ Toolbar = React.createClass
       columns: []
 
     # Add items registered to Regions in the current sheet
-    for loc in @props.data.columns[state.mode]
-      entries = ComponentRegistry.findAllByLocationAndMode(loc.Toolbar, state.mode)
-      state.columns.push(entries)
+    if @props.data?.columns[state.mode]?
+      for loc in @props.data.columns[state.mode]
+        entries = ComponentRegistry.findAllByLocationAndMode(loc.Toolbar, state.mode)
+        state.columns.push(entries)
 
     # Add left items registered to the Sheet instead of to a Region
     for loc in [WorkspaceStore.Sheet.Global, @props.data]
       entries = ComponentRegistry.findAllByLocationAndMode(loc.Toolbar.Left, state.mode)
-      state.columns[0].push(entries...)
-    state.columns[0].push(view: ToolbarBack, name: 'ToolbarBack') if @props.depth > 0
+      state.columns[0]?.push(entries...)
+    state.columns[0]?.push(view: ToolbarBack, name: 'ToolbarBack') if @props.depth > 0
 
     # Add right items registered to the Sheet instead of to a Region
     for loc in [WorkspaceStore.Sheet.Global, @props.data]
       entries = ComponentRegistry.findAllByLocationAndMode(loc.Toolbar.Right, state.mode)
-      state.columns[state.columns.length - 1].push(entries...)
+      state.columns[state.columns.length - 1]?.push(entries...)
 
     state
 

src/sheet.cjsx

@@ -92,27 +92,29 @@ Sheet = React.createClass
     widest = -1
     widestWidth = -1
 
-    for location, idx in @props.data.columns[state.mode]
-      entries = ComponentRegistry.findAllByLocationAndMode(location, state.mode)
-      maxWidth = _.reduce entries, ((m,{view}) -> Math.min(view.maxWidth ? 10000, m)), 10000
-      minWidth = _.reduce entries, ((m,{view}) -> Math.max(view.minWidth ? 0, m)), 0
-      col = {entries, maxWidth, minWidth, id: location.id}
-      state.columns.push(col)
+    if @props.data?.columns[state.mode]?
+      for location, idx in @props.data.columns[state.mode]
+        entries = ComponentRegistry.findAllByLocationAndMode(location, state.mode)
+        maxWidth = _.reduce entries, ((m,{view}) -> Math.min(view.maxWidth ? 10000, m)), 10000
+        minWidth = _.reduce entries, ((m,{view}) -> Math.max(view.minWidth ? 0, m)), 0
+        col = {entries, maxWidth, minWidth, id: location.id}
+        state.columns.push(col)
 
-      if maxWidth > widestWidth
-        widestWidth = maxWidth
-        widest = idx
+        if maxWidth > widestWidth
+          widestWidth = maxWidth
+          widest = idx
 
-    # Once we've accumulated all the React components for the columns,
-    # ensure that at least one column has a huge max-width so that the columns
-    # expand to fill the window. This may make items in the column unhappy, but
-    # we pick the column with the highest max-width so the effect is minimal.
-    state.columns[widest].maxWidth = FLEX
+    if state.columns.length > 0
+      # Once we've accumulated all the React components for the columns,
+      # ensure that at least one column has a huge max-width so that the columns
+      # expand to fill the window. This may make items in the column unhappy, but
+      # we pick the column with the highest max-width so the effect is minimal.
+      state.columns[widest].maxWidth = FLEX
 
-    # Assign flexible edges based on whether items are to the left or right
-    # of the flexible column (which has no edges)
-    state.columns[i].handle = ResizableRegion.Handle.Right for i in [0..widest-1] by 1
-    state.columns[i].handle = ResizableRegion.Handle.Left  for i in [widest..state.columns.length-1] by 1
+      # Assign flexible edges based on whether items are to the left or right
+      # of the flexible column (which has no edges)
+      state.columns[i].handle = ResizableRegion.Handle.Right for i in [0..widest-1] by 1
+      state.columns[i].handle = ResizableRegion.Handle.Left  for i in [widest..state.columns.length-1] by 1
     state
 
   _pop: ->