move each li into its own function

frontend/src/components/common/ContextMenu.js

@@ -76,50 +76,67 @@ class ContextMenu extends Component {
     }
   }
 
-  render () {
+  hide = () => {
-    const { contextNode, contextPos, contextOnMetacodeSelect, metacodeSets,
+    const { contextHide } = this.props
-            contextDelete, contextHide, contextRemove, contextCenterOn,
+    return <li className="rc-hide" onClick={contextHide}>
-            contextPopoutTopic, contextSiblingsData, contextFetchSiblings,
-            currentUser, contextPopulateSiblings, contextFetchingSiblingsData,
-            topicId, map, mapId, contextUpdatePermissions } = this.props
-
-    const canEditMap = map && map.authorizeToEdit(currentUser)
-    const positionData = this.getPositionData()
-    const style = Object.assign({}, {position: 'absolute'}, positionData.pos)
-    const populateSiblings = () => {
-      if (!this.state.populateSiblingsSent) {
-        contextPopulateSiblings(contextNode.id)
-        this.setState({populateSiblingsSent: true})
-      }
-    }
-
-    return <div style={style}
-      className={"rightclickmenu " + positionData.extraClasses.join(' ')}>
-      <ul>
-        <li className="rc-hide" onClick={contextHide}>
       <div className="rc-icon" />Hide until refresh
         <div className="rc-keyboard">Ctrl+H</div>
     </li>
-        {canEditMap && <li className="rc-remove" onClick={contextRemove}>
+  }
+
+  remove = () => {
+    const { contextRemove, map, currentUser } = this.props
+    const canEditMap = map && map.authorizeToEdit(currentUser)
+    if (!canEditMap) {
+      return null
+    }
+    return <li className="rc-remove" onClick={contextRemove}>
       <div className="rc-icon" />Remove from map
         <div className="rc-keyboard">Ctrl+M</div>
-        </li>}
+    </li>
-        {canEditMap && <li className="rc-delete" onClick={contextDelete}>
+  }
+
+  delete = () => {
+    const { contextDelete, map, currentUser } = this.props
+    const canEditMap = map && map.authorizeToEdit(currentUser)
+    if (!canEditMap) {
+      return null
+    }
+    return <li className="rc-delete" onClick={contextDelete}>
       <div className="rc-icon" />Delete
       <div className="rc-keyboard">Ctrl+D</div>
-        </li>}
+    </li>
-        {contextNode && topicId && <li className="rc-center"
+  }
+
+  center = () => {
+    const { contextCenterOn, contextNode, topicId } = this.props
+    if (!(contextNode && topicId)) {
+      return null
+    }
+    return <li className="rc-center"
       onClick={() => contextCenterOn(contextNode.id)}>
       <div className="rc-icon" />Center this topic
       <div className="rc-keyboard">Alt+E</div>
-        </li>}
+    </li>
-        {contextNode && <li className="rc-popout"
+  }
+
+  popout = () => {
+    const { contextPopoutTopic, contextNode } = this.props
+    if (!contextNode) {
+      return null
+    }
+    return <li className="rc-popout"
       onClick={() => contextPopoutTopic(contextNode.id)}>
       <div className="rc-icon" />Open in new tab
-        </li>}
+    </li>
-        {(currentUser || (contextNode && topicId)) && <li className="rc-spacer">
+  }
-        </li>}
+
-        {currentUser && <li className="rc-permission">
+  permission = () => {
+    const { currentUser, contextUpdatePermissions } = this.props
+    if (!currentUser) {
+      return null
+    }
+    return <li className="rc-permission">
       <div className="rc-icon" />Change permissions
       <ul>
         <li className="changeP toCommons"
@@ -136,8 +153,16 @@ class ContextMenu extends Component {
         </li>
       </ul>
       <div className="expandLi" />
-        </li>}
+    </li>
-        {currentUser && <li className="rc-metacode">
+  }
+
+  metacode = () => {
+    const { metacodeSets, contextOnMetacodeSelect,
+            currentUser, contextNode } = this.props
+    if (!currentUser) {
+      return null
+    }
+    return <li className="rc-metacode">
       <div className="rc-icon" />Change metacode
       <div id="metacodeOptionsWrapper">
         <MetacodeSelect
@@ -147,8 +172,23 @@ class ContextMenu extends Component {
           metacodeSets={metacodeSets} />
       </div>
       <div className="expandLi" />
-        </li>}
+    </li>
-        {contextNode && topicId && <li className="rc-siblings"
+  }
+
+  siblings = () => {
+    const { contextPopulateSiblings, contextFetchSiblings,
+            contextSiblingsData, contextFetchingSiblingsData,
+            topicId, contextNode } = this.props
+    const populateSiblings = () => {
+      if (!this.state.populateSiblingsSent) {
+        contextPopulateSiblings(contextNode.id)
+        this.setState({populateSiblingsSent: true})
+      }
+    }
+    if (!(contextNode && topicId)) {
+      return null
+    }
+    return <li className="rc-siblings"
         onMouseOver={populateSiblings}>
       <div className="rc-icon" />Reveal siblings
       <ul id="fetchSiblingList">
@@ -165,7 +205,27 @@ class ContextMenu extends Component {
         {contextFetchingSiblingsData && <li id="loadingSiblings">loading...</li>}
       </ul>
       <div className="expandLi" />
-        </li>}
+    </li>
+  }
+
+  render () {
+    const { contextNode, currentUser, topicId } = this.props
+    const positionData = this.getPositionData()
+    const style = Object.assign({}, {position: 'absolute'}, positionData.pos)
+    const showSpacer = currentUser || (contextNode && topicId)
+
+    return <div style={style}
+      className={"rightclickmenu " + positionData.extraClasses.join(' ')}>
+      <ul>
+        {this.hide()}
+        {this.remove()}
+        {this.delete()}
+        {this.center()}
+        {this.popout()}
+        {showSpacer && <li className="rc-spacer" />}
+        {this.permission()}
+        {this.metacode()}
+        {this.siblings()}
       </ul>
     </div>
   }