save changes on expanded view when closing with esc key

web/src/components/ExpandedViewMode/EVMiddleColumn/TabContent/EvDetails/EvDetails.component.tsx

@@ -34,6 +34,15 @@ import Icon from '../../../../Icon/Icon'
 export type EvDetailsOwnProps = {
   projectId: CellIdString
   outcome: ComputedOutcome
+  content: string
+  githubInputLinkText: string
+  description: string
+  setContent: React.Dispatch<React.SetStateAction<string>>
+  setGithubInputLinkText: React.Dispatch<React.SetStateAction<string>>
+  setDescription: React.Dispatch<React.SetStateAction<string>>
+  updateOutcome: (outcome: Outcome, actionHash: ActionHashB64) => Promise<void>
+  updateOutcomeWithLatest: () => Promise<void>
+  cleanOutcome: () => Outcome
 }
 
 export type EvDetailsConnectorStateProps = {
@@ -64,7 +73,6 @@ export type EvDetailsConnectorDispatchProps = {
     text: string,
     backgroundColor: string
   ) => Promise<void>
-  updateOutcome: (outcome: Outcome, actionHash: ActionHashB64) => Promise<void>
   createOutcomeMember: (
     outcomeActionHash: ActionHashB64,
     memberAgentPubKey: AgentPubKeyB64,
@@ -85,6 +93,14 @@ const EvDetails: React.FC<EvDetailsProps> = ({
   // own props
   projectId,
   outcome,
+  content,
+  githubInputLinkText,
+  description,
+  setContent,
+  setGithubInputLinkText,
+  setDescription,
+  updateOutcomeWithLatest,
+  cleanOutcome,
   // state props
   activeAgentPubKey,
   projectTags,
@@ -113,31 +129,17 @@ const EvDetails: React.FC<EvDetailsProps> = ({
     }
   }, [outcomeActionHash])
 
-  const cleanOutcome = (): Outcome => {
-    return {
-      ...outcome,
-      editorAgentPubKey: activeAgentPubKey,
-      timestampUpdated: moment().unix(),
-      content,
-      description,
-      githubLink: githubInputLinkText,
-    }
-  }
-  const updateOutcomeWithLatest = async () => {
-    await updateOutcome(cleanOutcome(), outcomeActionHash)
-  }
-
   /*
     Title
   */
-  // the live editor state
-  const [content, setContent] = useState('')
+
   // handle change (or update) of outcome
   const outcomeContent = outcome ? outcome.content : ''
   useEffect(() => {
     setContent(outcomeContent)
   }, [outcomeContent])
   const onTitleBlur = () => {
+    console.log('onTitleBlur triggered')
     updateOutcomeWithLatest()
     endTitleEdit(outcomeActionHash)
   }
@@ -159,8 +161,7 @@ const EvDetails: React.FC<EvDetailsProps> = ({
   /*
     Github Link
   */
-  // the live github link editor state
-  const [githubInputLinkText, setGithubInputLinkText] = useState('')
+
   const [isEditingGithubLink, setIsEditingGithubLink] = useState(false)
   const outcomeGithubLink = outcome ? outcome.githubLink : ''
   useEffect(() => {
@@ -256,8 +257,7 @@ const EvDetails: React.FC<EvDetailsProps> = ({
   /* 
     Description
   */
-  // the live editor state
-  const [description, setDescription] = useState('')
+
   // the latest persisted state
   const outcomeDescription = outcome ? outcome.description : ''
   // sync the live editor state with the

web/src/components/ExpandedViewMode/EVMiddleColumn/TabContent/EvDetails/EvDetails.connector.tsx

@@ -145,15 +145,6 @@ function mapDispatchToProps(
       })
       return dispatch(updateTag(cellIdString, updatedExistingTag))
     },
-    updateOutcome: async (outcome: Outcome, actionHash: ActionHashB64) => {
-      const appWebsocket = await getAppWs()
-      const projectsZomeApi = new ProjectsZomeApi(appWebsocket)
-      const updatedOutcome = await projectsZomeApi.outcome.update(cellId, {
-        actionHash,
-        entry: outcome,
-      })
-      return dispatch(updateOutcome(cellIdString, updatedOutcome))
-    },
     createOutcomeMember: async (
       outcomeActionHash: ActionHashB64,
       memberAgentPubKey: AgentPubKeyB64,

web/src/components/ExpandedViewMode/ExpandedViewMode.component.tsx

@@ -3,13 +3,14 @@ import { CSSTransition } from 'react-transition-group'
 import EVMiddleColumn from './EVMiddleColumn/EVMiddleColumn'
 import EVLeftColumn from './EVLeftColumn/EVLeftColumn'
 import { ExpandedViewTab } from './NavEnum'
-import { CellIdString, ActionHashB64 } from '../../types/shared'
-import { ComputedOutcome, ComputedScope } from '../../types'
+import { CellIdString, ActionHashB64, AgentPubKeyB64 } from '../../types/shared'
+import { ComputedOutcome, ComputedScope, Outcome } from '../../types'
 import './ExpandedViewMode.scss'
 import ButtonClose from '../ButtonClose/ButtonClose'
 import Breadcrumbs from '../Breadcrumbs/Breadcrumbs'
 import hashCodeId from '../../api/clientSideIdHash'
 import OnClickOutside from '../OnClickOutside/OnClickOutside'
+import moment from 'moment'
 
 // props passed to the component by the parent
 export type ExpandedViewModeOwnProps = {
@@ -23,12 +24,14 @@ export type ExpandedViewModeOwnProps = {
   childrenList: React.ReactElement
   taskList: React.ReactElement
   rightColumn: React.ReactElement
+  updateOutcome: (outcome: Outcome, actionHash: ActionHashB64) => Promise<void>
 }
 
 // redux props
 export type ExpandedViewModeConnectorProps = {
   outcomeActionHash: ActionHashB64
   commentCount: number
+  activeAgentPubKey: AgentPubKeyB64
 }
 
 export type ExpandedViewModeProps = ExpandedViewModeOwnProps &

web/src/components/ExpandedViewMode/ExpandedViewMode.connector.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { connect } from 'react-redux'
 import { RootState } from '../../redux/reducer'
 import ConnectedEVRightColumn from './EVRightColumn/EVRightColumn.connector'
@@ -42,6 +42,7 @@ function mapStateToProps(
   return {
     outcomeActionHash,
     commentCount: comments.length,
+    activeAgentPubKey: state.agentAddress,
   }
 }
 
@@ -75,6 +76,46 @@ const ConnectedExpandedViewMode: React.FC<ConnectedExpandedViewModeProps> = ({
   updateOutcome,
   createOutcomeWithConnection,
 }) => {
+  // the live editor state
+  const [content, setContent] = useState('')
+  // the live github link editor state
+  const [githubInputLinkText, setGithubInputLinkText] = useState('')
+  // the live editor state
+  const [description, setDescription] = useState('')
+
+  // close Expanded view after hitting Esc key:
+  useEffect(() => {
+    const onKeyDown = async (event) => {
+      // if we are on Map View
+      // we should let Map View handle the Escape key
+      if (event.key === 'Escape') {
+        const updateTo = localCleanOutcome()
+        await updateOutcome(updateTo, outcome.actionHash)
+
+        onClose()
+      }
+    }
+    document.body.addEventListener('keyup', onKeyDown)
+    // for teardown, unbind event listeners
+    return () => {
+      document.body.removeEventListener('keyup', onKeyDown)
+    }
+  }, [outcome, content, description, githubInputLinkText, activeAgentPubKey])
+
+  const localCleanOutcome = (): Outcome => {
+    return {
+      ...outcome,
+      editorAgentPubKey: activeAgentPubKey,
+      timestampUpdated: moment().unix(),
+      content,
+      description,
+      githubLink: githubInputLinkText,
+    }
+  }
+  const updateOutcomeWithLatest = async () => {
+    await updateOutcome(localCleanOutcome(), outcome.actionHash)
+  }
+
   const updateOutcomeTaskList = (taskList: Array<SmallTask>) => {
     const cleanedOutcome = cleanOutcome(outcome)
     return updateOutcome(
@@ -163,7 +204,23 @@ const ConnectedExpandedViewMode: React.FC<ConnectedExpandedViewModeProps> = ({
   }
 
   // redux connected expanded view components
-  const details = <ConnectedEvDetails projectId={projectId} outcome={outcome} />
+  const details = (
+    <ConnectedEvDetails
+      projectId={projectId}
+      outcome={outcome}
+      {...{
+        cleanOutcome: localCleanOutcome,
+        updateOutcomeWithLatest,
+        updateOutcome,
+        content,
+        setContent,
+        description,
+        setDescription,
+        githubInputLinkText,
+        setGithubInputLinkText,
+      }}
+    />
+  )
   const comments = (
     <ConnectedEvComments
       projectId={projectId}
@@ -190,6 +247,7 @@ const ConnectedExpandedViewMode: React.FC<ConnectedExpandedViewModeProps> = ({
       onClose={onClose}
       outcome={outcome}
       outcomeAndAncestors={outcomeAndAncestors}
+      updateOutcome={updateOutcome}
     />
   )
 }

web/src/event-listeners/index.ts

@@ -307,7 +307,6 @@ export default function setupEventListeners(
         if (!state.ui.expandedView.isOpen && !state.ui.navigationModal.open) {
           store.dispatch(unselectAll())
         }
-        store.dispatch(closeExpandedView())
         store.dispatch(closeOutcomeForm())
         store.dispatch(resetOutcomeConnector())
         break

web/src/routes/ProjectView/ProjectView.component.tsx

@@ -171,22 +171,6 @@ const ProjectViewInner: React.FC<ProjectViewInnerProps> = ({
     setActiveEntryPoints(entryPointActionHashes)
   }, [JSON.stringify(entryPointActionHashes)])
 
-  // close Expanded view after hitting Esc key:
-  useEffect(() => {
-    const onKeyDown = (event) => {
-      // if we are on Map View
-      // we should let Map View handle the Escape key
-      if (!location.pathname.includes('map') && event.key === 'Escape') {
-        closeExpandedView()
-      }
-    }
-    document.body.addEventListener('keydown', onKeyDown)
-    // for teardown, unbind event listeners
-    return () => {
-      document.body.removeEventListener('keydown', onKeyDown)
-    }
-  }, [location])
-
   return (
     <>
       <ComputedOutcomeContext.Provider value={computedOutcomes}>