Merge pull request #499 from anmolarora1/484

Optimize Thought and Toolbar components
cybersemics · Apr 3, 2020 · 8b4e903 · 8b4e903
2 parents d85d336 + b8579d0
commit 8b4e903
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 56 deletions.
diff --git a/src/components/Thought.js b/src/components/Thought.js
@@ -64,16 +64,25 @@ import {
  * Redux
  **********************************************************************/
 
-const mapStateToProps = ({
-  codeView,
-  contexts,
-  cursor,
-  cursorOffset,
-  cursorBeforeEdit,
-  expanded,
-  expandedContextThought,
-  showHiddenThoughts,
-}, props) => {
+const mapStateToProps = (state, props) => {
+
+  const {
+    codeView,
+    cursor,
+    cursorOffset,
+    cursorBeforeEdit,
+    expanded,
+    expandedContextThought,
+    showHiddenThoughts,
+  } = state
+
+  const {
+    contextChain,
+    thoughtsRanked,
+    showContexts,
+    depth,
+    childrenForced
+  } = props
 
   // resolve thoughts that are part of a context chain (i.e. some parts of thoughts expanded in context view) to match against cursor subset
   const thoughtsResolved = props.contextChain && props.contextChain.length > 0
@@ -84,11 +93,45 @@ const mapStateToProps = ({
   // check if the cursor is editing an thought directly
   const isEditing = equalPath(cursorBeforeEdit, thoughtsResolved)
   const thoughtsRankedLive = isEditing
-    ? contextOf(props.thoughtsRanked).concat(head(props.showContexts ? contextOf(cursor) : cursor))
-    : props.thoughtsRanked
+    ? contextOf(thoughtsRanked).concat(head(showContexts ? contextOf(cursor) : cursor))
+    : thoughtsRanked
+
+  const distance = cursor ? Math.max(0,
+    Math.min(MAX_DISTANCE_FROM_CURSOR, cursor.length - depth)
+  ) : 0
+
+  const isCursorParent = distance === 2
+    // grandparent
+    ? equalPath(rootedContextOf(contextOf(cursor || [])), chain(contextChain, thoughtsRanked)) && getThoughtsRanked(cursor).length === 0
+    // parent
+    : equalPath(contextOf(cursor || []), chain(contextChain, thoughtsRanked))
+
+  let contextBinding // eslint-disable-line fp/no-let
+  try {
+    contextBinding = JSON.parse(attribute(thoughtsRankedLive, '=bindContext'))
+  }
+  catch (err) {
+  }
+
+  const isCursorGrandparent =
+    equalPath(rootedContextOf(contextOf(cursor || [])), chain(contextChain, thoughtsRanked))
+  const children = childrenForced || getThoughtsRanked(contextBinding || thoughtsRankedLive)
+
+  const value = headValue(thoughtsRankedLive)
+
+  // link URL
+  const url = isURL(value) ? value :
+  // if the only subthought is a url and the thought is not expanded, link the thought
+    !expanded && children.length === 1 && children[0].value && isURL(children[0].value) && (!cursor || !equalPath(thoughtsRankedLive, contextOf(cursor))) ? children[0].value :
+    null
+
+  const thought = getThought(value)
 
   return {
-    cursor,
+    distance,
+    isCursorParent,
+    isCursorGrandparent,
+    url,
     cursorOffset,
     expanded: expanded[hashContext(thoughtsResolved)],
     expandedContextThought,
@@ -99,6 +142,8 @@ const mapStateToProps = ({
     showHiddenThoughts,
     thoughtsRankedLive,
     view: attribute(thoughtsRankedLive, '=view'),
+    thought,
+    contextBinding
   }
 }
 
@@ -297,6 +342,12 @@ const ThoughtContainer = ({
   thoughtsRanked,
   thoughtsRankedLive,
   view,
+  distance,
+  url,
+  isCursorParent,
+  isCursorGrandparent,
+  thought,
+  contextBinding
 }) => {
 
   // resolve thoughts that are part of a context chain (i.e. some parts of thoughts expanded in context view) to match against cursor subset
@@ -306,41 +357,14 @@ const ThoughtContainer = ({
 
   const value = headValue(thoughtsRankedLive)
 
-  let contextBinding // eslint-disable-line fp/no-let
-  try {
-    contextBinding = JSON.parse(attribute(thoughtsRankedLive, '=bindContext'))
-  }
-  catch (err) {
-  }
-
-  const children = childrenForced || getThoughtsRanked(contextBinding || thoughtsRankedLive)
-
-  // link URL
-  const url = isURL(value) ? value :
-    // if the only subthought is a url and the thought is not expanded, link the thought
-    !expanded && children.length === 1 && children[0].value && isURL(children[0].value) && (!cursor || !equalPath(thoughtsRankedLive, contextOf(cursor))) ? children[0].value :
-    null
-
   // if rendering as a context and the thought is the root, render home icon instead of Editable
   const homeContext = showContexts && isRoot([head(contextOf(thoughtsRanked))])
 
-  const distance = cursor ? Math.max(0,
-    Math.min(MAX_DISTANCE_FROM_CURSOR, cursor.length - depth)
-  ) : 0
-
   // prevent fading out cursor parent
   // there is a special case here for the cursor grandparent when the cursor is a leaf
   // See: <Subthoughts> render
-  const isCursorParent = distance === 2
-    // grandparent
-    ? equalPath(rootedContextOf(contextOf(cursor || [])), chain(contextChain, thoughtsRanked)) && getThoughtsRanked(cursor).length === 0
-    // parent
-    : equalPath(contextOf(cursor || []), chain(contextChain, thoughtsRanked))
-
-  const isCursorGrandparent =
-    equalPath(rootedContextOf(contextOf(cursor || [])), chain(contextChain, thoughtsRanked))
 
-  const thought = getThought(value)
+  const children = childrenForced || getThoughtsRanked(contextBinding || thoughtsRankedLive)
 
   // in the Context View, perform a data integrity check to confirm that the thought is in thoughtIndex
   const contextThought = showContexts && getThought(headValue(contextOf(thoughtsRanked)))

diff --git a/src/components/Toolbar.js b/src/components/Toolbar.js
@@ -47,19 +47,24 @@ import TriangleRight from './TriangleRight.js'
 const ARROW_SCROLL_BUFFER = 20
 const fontSizeLocal = +(localStorage['Settings/Font Size'] || DEFAULT_FONT_SIZE)
 
-const mapStateToProps = () => ({ cursor, isLoading, toolbarOverlay, scrollPrioritized, showHiddenThoughts, showSplitView }) => ({
-  cursor,
-  dark: !meta([EM_TOKEN, 'Settings', 'Theme']).Light,
-  isLoading,
-  scale: (isLoading ? fontSizeLocal : getSetting('Font Size') || DEFAULT_FONT_SIZE) / BASE_FONT_SIZE,
-  scrollPrioritized,
-  showHiddenThoughts,
-  showSplitView,
-  toolbarOverlay,
-})
-
-const Toolbar = ({ cursor, dark, scale, toolbarOverlay, scrollPrioritized, showHiddenThoughts, showSplitView }) => {
+const mapStateToProps = state => {
+  const { cursor, isLoading, toolbarOverlay, scrollPrioritized, showHiddenThoughts, showSplitView } = state
+
+  return {
+    cursorOnTableView: cursor && attribute(cursor, '=view') === 'Table',
+    cursorOnAlphabeticalSort: cursor && attribute(cursor, '=sort') === 'Alphabetical',
+    cursorOnPinView: cursor && attribute(cursor, '=pin') === 'true',
+    dark: !meta([EM_TOKEN, 'Settings', 'Theme']).Light,
+    isLoading,
+    scale: (isLoading ? fontSizeLocal : getSetting('Font Size') || DEFAULT_FONT_SIZE) / BASE_FONT_SIZE,
+    scrollPrioritized,
+    showHiddenThoughts,
+    showSplitView,
+    toolbarOverlay,
+  }
+}
 
+const Toolbar = ({ cursorOnTableView, cursorOnAlphabeticalSort, cursorOnPinView, dark, scale, toolbarOverlay, scrollPrioritized, showHiddenThoughts, showSplitView }) => {
   const [holdTimer, setHoldTimer] = useState()
   const [holdTimer2, setHoldTimer2] = useState()
   const [lastScrollLeft, setLastScrollLeft] = useState()
@@ -206,13 +211,13 @@ const Toolbar = ({ cursor, dark, scale, toolbarOverlay, scrollPrioritized, showH
               >
                 <Icon id={id}
                   style={{
-                    fill: id === 'toggleTableView' && cursor && attribute(cursor, '=view') === 'Table' ? 'gray'
+                    fill: id === 'toggleTableView' && cursorOnTableView ? 'gray'
                     : id === 'toggleSplitView' && !showSplitView ? 'gray'
                     : id === 'undo' ? 'gray'
                     : id === 'redo' ? 'gray'
                     : id === 'toggleHiddenThoughts' && !showHiddenThoughts ? 'gray'
-                    : id === 'toggleSort' && cursor && attribute(cursor, '=sort') === 'Alphabetical' ? 'gray'
-                    : id === 'pinOpen' && cursor && attribute(cursor, '=pin') === 'true' ? 'gray'
+                    : id === 'toggleSort' && cursorOnAlphabeticalSort ? 'gray'
+                    : id === 'pinOpen' && cursorOnPinView ? 'gray'
                     : fg
                   }} />
               </div>