From 2398bb6499c516d495e7619fa7aad80c64c6965a Mon Sep 17 00:00:00 2001 From: julicious100 Date: Wed, 22 May 2019 23:03:38 -0700 Subject: [PATCH 1/2] action is completed --- src/App.js | 9 ++- .../LeftPanel/TestFile/TestCase.jsx | 3 +- .../LeftPanel/TestFile/TestCase/Action.jsx | 81 ++++++++++++++++--- .../LeftPanel/TestFile/TestCase/Assertion.jsx | 1 + .../LeftPanel/TestFile/TestCase/TestMenu.jsx | 10 +-- .../TestFile/TestCase/testCaseActions.js | 14 +++- .../TestFile/TestCase/testCaseReducer.js | 46 ++++++++--- src/containers/LeftPanel.jsx | 16 ++-- 8 files changed, 132 insertions(+), 48 deletions(-) diff --git a/src/App.js b/src/App.js index 2ea59ec1..c68f79cd 100644 --- a/src/App.js +++ b/src/App.js @@ -3,9 +3,14 @@ import NavBar from "./containers/NavBar"; import LeftPanel from "./containers/LeftPanel"; import { library } from "@fortawesome/fontawesome-svg-core"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faPlus, faMinus, faTimes } from "@fortawesome/free-solid-svg-icons"; +import { + faPlus, + faMinus, + faTimes, + faQuestionCircle +} from "@fortawesome/free-solid-svg-icons"; -library.add(faPlus, faMinus, faTimes); +library.add(faPlus, faMinus, faTimes, faQuestionCircle); const styles = { fontFamily: "sans=", diff --git a/src/components/LeftPanel/TestFile/TestCase.jsx b/src/components/LeftPanel/TestFile/TestCase.jsx index af27e1a1..ea3be318 100644 --- a/src/components/LeftPanel/TestFile/TestCase.jsx +++ b/src/components/LeftPanel/TestFile/TestCase.jsx @@ -85,10 +85,9 @@ const TestCase = () => { } }); - console.log(statementsJSX); return (
- +
{ - // const handleClickDelete = e => { - // e.stopPropagation(); - // dispatch(deleteAction()); - // }; +const Action = ({ id, dispatchTestCase }) => { + const [eventType, setEventType] = useState(""); + const [queryVariant, setQueryVariant] = useState(""); + const [querySelector, setQuerySelector] = useState(""); + const [queryValue, setQueryValue] = useState(""); + + const handleClickDelete = e => { + dispatchTestCase(deleteAction(id)); + }; + + const handleChangeEventType = e => { + setEventType(e.target.value); + dispatchTestCase( + updateAction(id, e.target.value, queryVariant, querySelector, queryValue) + ); + }; + const handleChangeQueryVariant = e => { + setQueryVariant(e.target.value); + dispatchTestCase( + updateAction(id, eventType, e.target.value, querySelector, queryValue) + ); + }; + const handleChangeQuerySelector = e => { + setQuerySelector(e.target.value); + dispatchTestCase( + updateAction(id, eventType, queryVariant, e.target.value, queryValue) + ); + }; + const handleChangeQueryValue = e => { + setQueryValue(e.target.value); + dispatchTestCase( + updateAction(id, eventType, queryVariant, querySelector, e.target.value) + ); + }; return ( - <> +

Action

- + - - + + + + + + + + +
); }; diff --git a/src/components/LeftPanel/TestFile/TestCase/Assertion.jsx b/src/components/LeftPanel/TestFile/TestCase/Assertion.jsx index e69de29b..19dac569 100644 --- a/src/components/LeftPanel/TestFile/TestCase/Assertion.jsx +++ b/src/components/LeftPanel/TestFile/TestCase/Assertion.jsx @@ -0,0 +1 @@ +import React, { useState } from "react"; diff --git a/src/components/LeftPanel/TestFile/TestCase/TestMenu.jsx b/src/components/LeftPanel/TestFile/TestCase/TestMenu.jsx index c695b4a8..c0511fc1 100644 --- a/src/components/LeftPanel/TestFile/TestCase/TestMenu.jsx +++ b/src/components/LeftPanel/TestFile/TestCase/TestMenu.jsx @@ -2,17 +2,11 @@ import React, { useReducer } from "react"; import { testCaseReducer, testCaseState } from "./testCaseReducer"; import { addAction } from "./testCaseActions"; -const TestMenu = () => { - const [testCase, dispatchTestCase] = useReducer( - testCaseReducer, - testCaseState - ); - - const handleAddAction = () => { +const TestMenu = ({ dispatchTestCase }) => { + const handleAddAction = e => { dispatchTestCase(addAction()); }; - // const handleDeleteAction = () => {}; return (
diff --git a/src/components/LeftPanel/TestFile/TestCase/testCaseActions.js b/src/components/LeftPanel/TestFile/TestCase/testCaseActions.js index c12823ae..ae0a7356 100644 --- a/src/components/LeftPanel/TestFile/TestCase/testCaseActions.js +++ b/src/components/LeftPanel/TestFile/TestCase/testCaseActions.js @@ -3,6 +3,7 @@ export const actionTypes = { ADD_ACTION: "ADD_ACTION", DELETE_ACTION: "DELETE_ACTION", + UPDATE_ACTION: "UPDATE_ACTION", ADD_ASSERTION: "ADD_ASSERTION", ADD_RENDER: "ADD_RENDER" @@ -17,18 +18,23 @@ export const addAction = () => ({ type: actionTypes.ADD_ACTION }); -export const deleteAction = ( +export const deleteAction = id => ({ + type: actionTypes.DELETE_ACTION, + id +}); + +export const updateAction = ( id, eventType, queryVariant, - queryOption, + querySelector, queryValue ) => ({ - type: actionTypes.DELETE_ACTION, + type: actionTypes.UPDATE_ACTION, id, eventType, queryVariant, - queryOption, + querySelector, queryValue }); diff --git a/src/components/LeftPanel/TestFile/TestCase/testCaseReducer.js b/src/components/LeftPanel/TestFile/TestCase/testCaseReducer.js index 139fa157..4546a705 100644 --- a/src/components/LeftPanel/TestFile/TestCase/testCaseReducer.js +++ b/src/components/LeftPanel/TestFile/TestCase/testCaseReducer.js @@ -5,24 +5,24 @@ export const testCaseState = { statements: [] }; +const createAction = () => ({ + id: statementId++, + type: "action", + event: { + type: "", + value: null + }, + queryVariant: "", + querySelector: "", + queryValue: "" +}); + let statementId = 0; export const testCaseReducer = (state, action) => { Object.freeze(state); let statements = state.statements; - const createAction = () => ({ - id: statementId++, - type: "action", - event: { - type: "", - value: null - }, - queryVariant: "", - queryOption: "", - queryValue: "" - }); - switch (action.type) { case actionTypes.UPDATE_TEST_STATEMENT: let testStatement = action.testStatement; @@ -32,7 +32,27 @@ export const testCaseReducer = (state, action) => { }; case actionTypes.ADD_ACTION: statements.push(createAction()); - console.log(statements); + return { + ...state, + statements + }; + case actionTypes.DELETE_ACTION: + statements = statements.filter(statement => statement.id !== action.id); + return { + ...state, + statements + }; + case actionTypes.UPDATE_ACTION: + statements = statements.map(statement => { + if (statement.id === action.id) { + statement.event.type = action.eventType; + // statement.event.value = action.eve + statement.queryVariant = action.queryVariant; + statement.querySelector = action.querySelector; + statement.queryValue = action.queryValue; + } + return statement; + }); return { ...state, statements diff --git a/src/containers/LeftPanel.jsx b/src/containers/LeftPanel.jsx index ea1a3886..79bb86cc 100644 --- a/src/containers/LeftPanel.jsx +++ b/src/containers/LeftPanel.jsx @@ -1,16 +1,16 @@ -import React, { useState } from 'react'; -import LeftTabs from '../components/LeftPanel/LeftTabs'; -import TestFile from '../components/LeftPanel/TestFile'; +import React, { useState } from "react"; +import LeftTabs from "../components/LeftPanel/LeftTabs"; +import TestFile from "../components/LeftPanel/TestFile"; const LeftPanel = () => { - const [newFileName, setNewFileName] = useState('untitled.test.js'); + const [newFileName, setNewFileName] = useState("untitled.test.js"); return ( - <> + <> - ) -} + ); +}; -export default LeftPanel; \ No newline at end of file +export default LeftPanel; From 84559f78e786e2b16e12d52beaa6ea47c839a9fe Mon Sep 17 00:00:00 2001 From: julicious100 Date: Thu, 23 May 2019 15:17:56 -0700 Subject: [PATCH 2/2] assertion is done, half way of render --- .../LeftPanel/TestFile/TestCase.jsx | 25 ++-- .../LeftPanel/TestFile/TestCase/Action.jsx | 82 ++++++++++- .../LeftPanel/TestFile/TestCase/Assertion.jsx | 89 ++++++++++++ .../TestCase/MockData/mockDataReducer.js | 26 ++-- .../LeftPanel/TestFile/TestCase/Render.jsx | 65 +++++++++ .../TestFile/TestCase/Render/Prop.jsx | 13 ++ .../TestFile/TestCase/Render/Props.jsx | 0 .../LeftPanel/TestFile/TestCase/TestMenu.jsx | 16 ++- .../TestFile/TestCase/testCaseActions.js | 65 ++++++++- .../TestFile/TestCase/testCaseReducer.js | 127 ++++++++++++++++-- 10 files changed, 456 insertions(+), 52 deletions(-) create mode 100644 src/components/LeftPanel/TestFile/TestCase/Render/Prop.jsx delete mode 100644 src/components/LeftPanel/TestFile/TestCase/Render/Props.jsx diff --git a/src/components/LeftPanel/TestFile/TestCase.jsx b/src/components/LeftPanel/TestFile/TestCase.jsx index ea3be318..48559913 100644 --- a/src/components/LeftPanel/TestFile/TestCase.jsx +++ b/src/components/LeftPanel/TestFile/TestCase.jsx @@ -39,20 +39,16 @@ const TestCase = () => { dispatchMockData(addMockData()); }; - const mockDataJSX = mockData.mockData - .map(mockDatum => { - if (mockDatum.type === "mockData") { - return ( - - ); - } - }) - .filter(Boolean); + const mockDataJSX = mockData.mockData.map(mockDatum => { + return ( + + ); + }); const statementsJSX = testCase.statements.map(statement => { switch (statement.type) { @@ -78,6 +74,7 @@ const TestCase = () => { key={statement.id} id={statement.id} dispatchTestCase={dispatchTestCase} + props={statement.props} /> ); default: diff --git a/src/components/LeftPanel/TestFile/TestCase/Action.jsx b/src/components/LeftPanel/TestFile/TestCase/Action.jsx index 4c1662b9..1e4cba7b 100644 --- a/src/components/LeftPanel/TestFile/TestCase/Action.jsx +++ b/src/components/LeftPanel/TestFile/TestCase/Action.jsx @@ -4,6 +4,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; const Action = ({ id, dispatchTestCase }) => { const [eventType, setEventType] = useState(""); + const [eventValue, setEventValue] = useState(""); const [queryVariant, setQueryVariant] = useState(""); const [querySelector, setQuerySelector] = useState(""); const [queryValue, setQueryValue] = useState(""); @@ -15,28 +16,86 @@ const Action = ({ id, dispatchTestCase }) => { const handleChangeEventType = e => { setEventType(e.target.value); dispatchTestCase( - updateAction(id, e.target.value, queryVariant, querySelector, queryValue) + updateAction( + id, + e.target.value, + eventValue, + queryVariant, + querySelector, + queryValue + ) ); }; + + const handleChangeEventValue = e => { + setEventValue(e.target.value); + dispatchTestCase( + updateAction( + id, + eventType, + e.target.value, + queryVariant, + querySelector, + queryValue + ) + ); + }; + const handleChangeQueryVariant = e => { setQueryVariant(e.target.value); dispatchTestCase( - updateAction(id, eventType, e.target.value, querySelector, queryValue) + updateAction( + id, + eventType, + eventValue, + e.target.value, + querySelector, + queryValue + ) ); }; + const handleChangeQuerySelector = e => { setQuerySelector(e.target.value); dispatchTestCase( - updateAction(id, eventType, queryVariant, e.target.value, queryValue) + updateAction( + id, + eventType, + eventValue, + queryVariant, + e.target.value, + queryValue + ) ); }; + const handleChangeQueryValue = e => { setQueryValue(e.target.value); dispatchTestCase( - updateAction(id, eventType, queryVariant, querySelector, e.target.value) + updateAction( + id, + eventType, + eventValue, + queryVariant, + querySelector, + e.target.value + ) ); }; + const needsEventValue = eventType => { + const eventsWithValues = [ + "keyDown", + "keyPress", + "keyUp", + "change", + "input", + "invalid", + "submit" + ]; + return eventsWithValues.includes(eventType); + }; + return (

Action

@@ -45,8 +104,19 @@ const Action = ({ id, dispatchTestCase }) => { icon="times" onClick={handleClickDelete} /> - - + + + {needsEventValue(eventType) && ( + + + )} + + + + + + + + + + + +

Matcher

+ +
+ ); +}; + +export default Assertion; diff --git a/src/components/LeftPanel/TestFile/TestCase/MockData/mockDataReducer.js b/src/components/LeftPanel/TestFile/TestCase/MockData/mockDataReducer.js index d65748e0..7986326f 100644 --- a/src/components/LeftPanel/TestFile/TestCase/MockData/mockDataReducer.js +++ b/src/components/LeftPanel/TestFile/TestCase/MockData/mockDataReducer.js @@ -5,8 +5,11 @@ export const mockDataState = { mockDataCheckBox: false }; +let mockDatumId = 0; +let mockDatumKeyId = 0; + const createMockDatum = id => ({ - id, + id: mockDatumId++, name: "", fieldKeys: [], content: "", @@ -14,21 +17,11 @@ const createMockDatum = id => ({ }); const createFieldKeys = id => ({ - id, + id: mockDatumKeyId, fieldKey: "", fieldType: "" }); -const createAction = () => ({ - event: {}, - varient: "", - option: "", - query: "" -}); - -let mockDatumId = 0; -let mockDatumKeyId = 0; - export const mockDataReducer = (state, action) => { Object.freeze(state); let mockData = state.mockData; @@ -36,7 +29,7 @@ export const mockDataReducer = (state, action) => { switch (action.type) { case actionTypes.TOGGLE_MOCK_DATA: if (!state.mockDataCheckBox) { - mockData.push(createMockDatum(mockDatumId++)); + mockData.push(createMockDatum()); } return { ...state, @@ -44,7 +37,7 @@ export const mockDataReducer = (state, action) => { mockDataCheckBox: !state.mockDataCheckBox }; case actionTypes.ADD_MOCK_DATA: - mockData.push(createMockDatum(mockDatumId++)); + mockData.push(createMockDatum()); return { ...state, mockData @@ -69,7 +62,7 @@ export const mockDataReducer = (state, action) => { case actionTypes.ADD_MOCK_DATA_KEY: mockData = mockData.map(mockDatum => { if (mockDatum.id === action.id) { - mockDatum.fieldKeys.push(createFieldKeys(mockDatumKeyId++)); + mockDatum.fieldKeys.push(createFieldKeys()); } return mockDatum; }); @@ -95,9 +88,6 @@ export const mockDataReducer = (state, action) => { if (mockDatum.id === action.mockDatumId) { mockDatum.fieldKeys.map(fieldKey => { if (fieldKey.id === action.mockDatumKeyId) { - // console.log(fieldKey); - // console.log(`fieldKey: ${fieldKey.fieldKey}`); - // console.log(`action: ${action.fieldKey}`) fieldKey.fieldKey = action.fieldKey; fieldKey.fieldType = action.fieldType; } diff --git a/src/components/LeftPanel/TestFile/TestCase/Render.jsx b/src/components/LeftPanel/TestFile/TestCase/Render.jsx index e69de29b..712eb4a3 100644 --- a/src/components/LeftPanel/TestFile/TestCase/Render.jsx +++ b/src/components/LeftPanel/TestFile/TestCase/Render.jsx @@ -0,0 +1,65 @@ +import React, { useState } from "react"; +import Prop from "./Render/Prop"; +import { deleteRender, updateRender, addRenderProp } from "./testCaseActions"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; + +const Render = ({ id, dispatchTestCase, props }) => { + const [componentName, setComponentName] = useState(""); + const [toggleProps, setToggleProps] = useState(false); + + const handleClickDelete = e => { + dispatchTestCase(deleteRender(id)); + }; + + const handleUpdateComponentName = e => { + setComponentName(e.target.value); + dispatchTestCase(updateRender(id, e.target.value)); + }; + + const handleToggleProps = () => { + dispatchTestCase(addRenderProp()); + }; + + const propsJSX = props.map(prop => { + return ( + + ); + }); + + return ( +
+

Render

+ +
+ + +
+
+ + +
+
+ ); +}; + +export default Render; diff --git a/src/components/LeftPanel/TestFile/TestCase/Render/Prop.jsx b/src/components/LeftPanel/TestFile/TestCase/Render/Prop.jsx new file mode 100644 index 00000000..a1735e72 --- /dev/null +++ b/src/components/LeftPanel/TestFile/TestCase/Render/Prop.jsx @@ -0,0 +1,13 @@ +import React from "react"; +import { deleteRenderProp, updateRenderProp } from "../testCaseActions"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; + +const Prop = () => { + return ( + <> +

PROPS

+ + ); +}; + +export default Prop; diff --git a/src/components/LeftPanel/TestFile/TestCase/Render/Props.jsx b/src/components/LeftPanel/TestFile/TestCase/Render/Props.jsx deleted file mode 100644 index e69de29b..00000000 diff --git a/src/components/LeftPanel/TestFile/TestCase/TestMenu.jsx b/src/components/LeftPanel/TestFile/TestCase/TestMenu.jsx index c0511fc1..5a091690 100644 --- a/src/components/LeftPanel/TestFile/TestCase/TestMenu.jsx +++ b/src/components/LeftPanel/TestFile/TestCase/TestMenu.jsx @@ -1,11 +1,17 @@ import React, { useReducer } from "react"; import { testCaseReducer, testCaseState } from "./testCaseReducer"; -import { addAction } from "./testCaseActions"; +import { addAction, addAssertion, addRender } from "./testCaseActions"; const TestMenu = ({ dispatchTestCase }) => { const handleAddAction = e => { dispatchTestCase(addAction()); }; + const handleAddAssertion = e => { + dispatchTestCase(addAssertion()); + }; + const handleAddRender = e => { + dispatchTestCase(addRender()); + }; return (
@@ -16,8 +22,12 @@ const TestMenu = ({ dispatchTestCase }) => { - - + +
); diff --git a/src/components/LeftPanel/TestFile/TestCase/testCaseActions.js b/src/components/LeftPanel/TestFile/TestCase/testCaseActions.js index ae0a7356..5a28e79c 100644 --- a/src/components/LeftPanel/TestFile/TestCase/testCaseActions.js +++ b/src/components/LeftPanel/TestFile/TestCase/testCaseActions.js @@ -6,7 +6,16 @@ export const actionTypes = { UPDATE_ACTION: "UPDATE_ACTION", ADD_ASSERTION: "ADD_ASSERTION", - ADD_RENDER: "ADD_RENDER" + DELETE_ASSERTION: "DELETE_ASSERTION", + UPDATE_ASSERTION: "UPDATE_ASSERTION", + + ADD_RENDER: "ADD_RENDER", + DELETE_RENDER: "DELETE_RENDER", + UPDATE_RENDER: "UPDATE_RENDER", + + ADD_RENDER_PROP: "ADD_RENDER_PROP", + DELETE_RENDER_PROP: "DELETE_RENDER_PROP", + UPDATE_RENDER_PROP: "UPDATE_RENDER_PROPS" }; export const updateTestStatement = testStatement => ({ @@ -26,6 +35,7 @@ export const deleteAction = id => ({ export const updateAction = ( id, eventType, + eventValue, queryVariant, querySelector, queryValue @@ -33,11 +43,64 @@ export const updateAction = ( type: actionTypes.UPDATE_ACTION, id, eventType, + eventValue, queryVariant, querySelector, queryValue }); +export const addAssertion = () => ({ + type: actionTypes.ADD_ASSERTION +}); + +export const deleteAssertion = id => ({ + type: actionTypes.DELETE_ASSERTION, + id +}); + +export const updateAssertion = ( + id, + queryVariant, + querySelector, + assertionValue, + matcher +) => ({ + type: actionTypes.UPDATE_ASSERTION, + id, + queryVariant, + querySelector, + assertionValue, + matcher +}); + export const addRender = () => ({ type: actionTypes.ADD_RENDER }); + +export const deleteRender = id => ({ + type: actionTypes.DELETE_RENDER, + id +}); + +export const updateRender = (id, componentName) => ({ + type: actionTypes.UPDATE_RENDER, + id, + componentName +}); + +export const addRenderProp = () => ({ + type: actionTypes.ADD_RENDER_PROP +}); + +export const deleteRenderProp = id => ({ + type: actionTypes.DELETE_RENDER_PROP, + id +}); + +export const updateRenderProps = (renderId, propId, propKey, propValue) => ({ + type: actionTypes.UPDATE_RENDER_PROP, + renderId, + propId, + propKey, + propValue +}); diff --git a/src/components/LeftPanel/TestFile/TestCase/testCaseReducer.js b/src/components/LeftPanel/TestFile/TestCase/testCaseReducer.js index 4546a705..e3f340df 100644 --- a/src/components/LeftPanel/TestFile/TestCase/testCaseReducer.js +++ b/src/components/LeftPanel/TestFile/TestCase/testCaseReducer.js @@ -5,6 +5,9 @@ export const testCaseState = { statements: [] }; +let statementId = 0; +let renderPropsId = 0; + const createAction = () => ({ id: statementId++, type: "action", @@ -17,7 +20,27 @@ const createAction = () => ({ queryValue: "" }); -let statementId = 0; +const createAssertion = () => ({ + id: statementId++, + type: "assertion", + queryVariant: "", + querySelector: "", + assertionValue: "", + matcher: "" +}); + +const createRender = () => ({ + id: statementId++, + type: "render", + componentName: "", + props: [] +}); + +const createRenderProp = () => ({ + id: renderPropsId++, + propKey: "", + propValue: "" +}); export const testCaseReducer = (state, action) => { Object.freeze(state); @@ -37,26 +60,110 @@ export const testCaseReducer = (state, action) => { statements }; case actionTypes.DELETE_ACTION: - statements = statements.filter(statement => statement.id !== action.id); + statements = statements.filter(action => action.id !== action.id); return { ...state, statements }; case actionTypes.UPDATE_ACTION: - statements = statements.map(statement => { - if (statement.id === action.id) { - statement.event.type = action.eventType; - // statement.event.value = action.eve - statement.queryVariant = action.queryVariant; - statement.querySelector = action.querySelector; - statement.queryValue = action.queryValue; + statements = statements.map(action => { + if (action.id === action.id) { + action.event.type = action.eventType; + action.event.value = action.eventValue; + action.queryVariant = action.queryVariant; + action.querySelector = action.querySelector; + action.queryValue = action.queryValue; } - return statement; + return action; }); return { ...state, statements }; + case actionTypes.ADD_ASSERTION: + statements.push(createAssertion()); + return { + ...state, + statements + }; + case actionTypes.DELETE_ASSERTION: + statements = statements.filter(assertion => assertion.id !== action.id); + return { + ...state, + statements + }; + case actionTypes.UPDATE_ASSERTION: + statements = statements.map(assertion => { + if (assertion.id === action.id) { + assertion.queryVariant = action.queryVariant; + assertion.querySelector = action.querySelector; + assertion.assertionValue = action.assertionValue; + assertion.matcher = action.matcher; + } + return assertion; + }); + return { + ...state, + statements + }; + case actionTypes.ADD_RENDER: + statements.push(createRender()); + return { + ...state, + statements + }; + case actionTypes.DELETE_RENDER: + statements = statements.filter(render => render.id !== action.id); + return { + ...state, + statements + }; + case actionTypes.UPDATE_RENDER: + statements = statements.map(render => { + if (render.id === action.id) + render.componentName = action.componentName; + return render; + }); + console.log(statements); + return { + ...state, + statements + }; + case actionTypes.ADD_RENDER_PROP: + statements = statements.map(render => { + if (render.id === action.id) { + render.props.push(createRenderProp()); + } + return render; + }); + return { + ...state, + statements + }; + case actionTypes.DELETE_RENDER_PROP: + statements = statements.map(render => { + if (render.id === action.renderId) { + render = render.props.filter(render => render.id !== action.propId); + return render; + } + }); + return { + ...state, + statements + }; + case actionTypes.UPDATE_RENDER_PROP: + statements = statements.map(render => { + if (render.id === action.id) { + render.props.map(prop => { + if (prop.id === action.propId) { + prop.propKey = action.propKey; + prop.propValue = action.propValue; + } + return prop; + }); + } + return render; + }); default: return state; }