Skip to content
This repository was archived by the owner on Jul 9, 2025. It is now read-only.

fix: misused 'useEffect' hook in Visual Editor (#1496) #1601

Merged
cwhitten merged 5 commits into from
Nov 19, 2019
Merged

fix: misused 'useEffect' hook in Visual Editor (#1496) #1601

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
722f3ff
update samples to fix demo data
yeze322 Nov 19, 2019
e8200e4
fix demo
yeze322 Nov 19, 2019
315e9ea
remove the misusing of useEffect hook
yeze322 Nov 19, 2019
380ac76
remove outdated comments
yeze322 Nov 19, 2019
d277950
Merge branch 'master' into redraw
cwhitten Nov 19, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion Composer/packages/extensions/visual-designer/demo/src/samples/todo/AddToDo.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
},
"autoEndDialog": true,
"$schema": "../../app.schema",
"events": [
"triggers": [
{
"$type": "Microsoft.OnBeginDialog",
"$designer": {
Expand Down
2 changes: 1 addition & 1 deletion Composer/packages/extensions/visual-designer/demo/src/samples/todo/ClearToDos.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
},
"autoEndDialog": true,
"$schema": "../../app.schema",
"events": [
"triggers": [
{
"$type": "Microsoft.OnBeginDialog",
"$designer": {
Expand Down
2 changes: 1 addition & 1 deletion Composer/packages/extensions/visual-designer/demo/src/samples/todo/DeleteToDo.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
},
"autoEndDialog": true,
"$schema": "../../app.schema",
"events": [
"triggers": [
{
"$type": "Microsoft.OnBeginDialog",
"$designer": {
Expand Down
2 changes: 1 addition & 1 deletion Composer/packages/extensions/visual-designer/demo/src/samples/todo/ShowToDos.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
},
"autoEndDialog": true,
"$schema": "../../app.schema",
"events": [
"triggers": [
{
"$type": "Microsoft.OnBeginDialog",
"$designer": {
Expand Down
2 changes: 1 addition & 1 deletion Composer/packages/extensions/visual-designer/demo/src/samples/todo/ToDoBot.main.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
]
},
"generator": "common.lg",
"events": [
"triggers": [
{
"$type": "Microsoft.OnConversationUpdateActivity",
"$designer": {
Expand Down
2 changes: 1 addition & 1 deletion Composer/packages/extensions/visual-designer/demo/src/stories/VisualEditorDemo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ export class VisualEditorDemo extends Component {
getLgTemplates: () => {
return Promise.resolve([{ Name: 'lg', Body: 'LgTemplate Placeholder.' }]);
},
removeLgTemplate: () => {
removeLgTemplates: () => {
return Promise.resolve(true);
},
}}
Expand Down
19 changes: 4 additions & 15 deletions Composer/packages/extensions/visual-designer/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
/** @jsx jsx */
import { jsx, CacheProvider } from '@emotion/core';
import createCache from '@emotion/cache';
import React, { useRef, useState, useEffect } from 'react';
import React, { useRef } from 'react';
import isEqual from 'lodash/isEqual';
import formatMessage from 'format-message';

Expand Down Expand Up @@ -62,8 +62,7 @@ const VisualDesigner: React.FC<VisualDesignerProps> = ({

const focusedId = Array.isArray(focusedActions) && focusedActions[0] ? focusedActions[0] : '';

// NOTE: avoid re-render. https://reactjs.org/docs/context.html#caveats
const [context, setContext] = useState({

@yeze322 yeze322 Nov 19, 2019 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Notes here: the usage of useState here was still correct before we hoisting the focusedId to Shell but not necessary any more after our hoisting PRs. Every time we change focused Id will trigger the Shell Api onFocus for updating our URL.

const nodeContext = {
focusedId,
focusedEvent,
focusedTab,
Expand All @@ -73,21 +72,11 @@ const VisualDesigner: React.FC<VisualDesignerProps> = ({
copyLgTemplate,
removeLgTemplate,
removeLgTemplates,
});

useEffect(() => {
setContext({
...context,
focusedId,
focusedEvent,
focusedTab,
clipboardActions,
});
}, [focusedEvent, focusedActions, focusedTab, clipboardActions]);
};

return (
<CacheProvider value={emotionCache}>
<NodeRendererContext.Provider value={context}>
<NodeRendererContext.Provider value={nodeContext}>
<SelfHostContext.Provider value={hosted}>
<div data-testid="visualdesigner-container" css={{ width: '100%', height: '100%', overflow: 'scroll' }}>
<ObiEditor
Expand Down