From 362321f14802881dd894e83569dfc7ea71a2b537 Mon Sep 17 00:00:00 2001 From: Pegah Date: Tue, 31 Oct 2023 15:14:12 -0700 Subject: [PATCH] save changes on expanded view when closing with esc key --- .../EvDetails/EvDetails.component.tsx | 42 ++++++------- .../EvDetails/EvDetails.connector.tsx | 9 --- .../ExpandedViewMode.component.tsx | 7 ++- .../ExpandedViewMode.connector.tsx | 62 ++++++++++++++++++- web/src/event-listeners/index.ts | 1 - .../ProjectView/ProjectView.component.tsx | 16 ----- 6 files changed, 86 insertions(+), 51 deletions(-) diff --git a/web/src/components/ExpandedViewMode/EVMiddleColumn/TabContent/EvDetails/EvDetails.component.tsx b/web/src/components/ExpandedViewMode/EVMiddleColumn/TabContent/EvDetails/EvDetails.component.tsx index e0c34b8d..40ca13a1 100644 --- a/web/src/components/ExpandedViewMode/EVMiddleColumn/TabContent/EvDetails/EvDetails.component.tsx +++ b/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> + setGithubInputLinkText: React.Dispatch> + setDescription: React.Dispatch> + updateOutcome: (outcome: Outcome, actionHash: ActionHashB64) => Promise + updateOutcomeWithLatest: () => Promise + cleanOutcome: () => Outcome } export type EvDetailsConnectorStateProps = { @@ -64,7 +73,6 @@ export type EvDetailsConnectorDispatchProps = { text: string, backgroundColor: string ) => Promise - updateOutcome: (outcome: Outcome, actionHash: ActionHashB64) => Promise createOutcomeMember: ( outcomeActionHash: ActionHashB64, memberAgentPubKey: AgentPubKeyB64, @@ -85,6 +93,14 @@ const EvDetails: React.FC = ({ // own props projectId, outcome, + content, + githubInputLinkText, + description, + setContent, + setGithubInputLinkText, + setDescription, + updateOutcomeWithLatest, + cleanOutcome, // state props activeAgentPubKey, projectTags, @@ -113,31 +129,17 @@ const EvDetails: React.FC = ({ } }, [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 = ({ /* 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 = ({ /* 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 diff --git a/web/src/components/ExpandedViewMode/EVMiddleColumn/TabContent/EvDetails/EvDetails.connector.tsx b/web/src/components/ExpandedViewMode/EVMiddleColumn/TabContent/EvDetails/EvDetails.connector.tsx index 79137e8f..05cf7974 100644 --- a/web/src/components/ExpandedViewMode/EVMiddleColumn/TabContent/EvDetails/EvDetails.connector.tsx +++ b/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, diff --git a/web/src/components/ExpandedViewMode/ExpandedViewMode.component.tsx b/web/src/components/ExpandedViewMode/ExpandedViewMode.component.tsx index 108527fe..aa8e5596 100644 --- a/web/src/components/ExpandedViewMode/ExpandedViewMode.component.tsx +++ b/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 } // redux props export type ExpandedViewModeConnectorProps = { outcomeActionHash: ActionHashB64 commentCount: number + activeAgentPubKey: AgentPubKeyB64 } export type ExpandedViewModeProps = ExpandedViewModeOwnProps & diff --git a/web/src/components/ExpandedViewMode/ExpandedViewMode.connector.tsx b/web/src/components/ExpandedViewMode/ExpandedViewMode.connector.tsx index a19568fe..95eee700 100644 --- a/web/src/components/ExpandedViewMode/ExpandedViewMode.connector.tsx +++ b/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 = ({ 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) => { const cleanedOutcome = cleanOutcome(outcome) return updateOutcome( @@ -163,7 +204,23 @@ const ConnectedExpandedViewMode: React.FC = ({ } // redux connected expanded view components - const details = + const details = ( + + ) const comments = ( = ({ onClose={onClose} outcome={outcome} outcomeAndAncestors={outcomeAndAncestors} + updateOutcome={updateOutcome} /> ) } diff --git a/web/src/event-listeners/index.ts b/web/src/event-listeners/index.ts index b4593b9e..2b1409aa 100644 --- a/web/src/event-listeners/index.ts +++ b/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 diff --git a/web/src/routes/ProjectView/ProjectView.component.tsx b/web/src/routes/ProjectView/ProjectView.component.tsx index 8aed0d96..4b36a0ab 100644 --- a/web/src/routes/ProjectView/ProjectView.component.tsx +++ b/web/src/routes/ProjectView/ProjectView.component.tsx @@ -171,22 +171,6 @@ const ProjectViewInner: React.FC = ({ 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 ( <>