fix: update inline editor to show new edits on save

needed to update redux flow to pass updated json content on successful save fix #71
dictyBase · Jun 5, 2019 · 7e0071f · 7e0071f
1 parent 47e1172
commit 7e0071f
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 20 deletions.
diff --git a/src/actions/editablePages.js b/src/actions/editablePages.js
@@ -43,10 +43,11 @@ const savePageRequest = () => ({
   },
 })
 
-const savePageSuccess = () => ({
+const savePageSuccess = (json: Object) => ({
   type: SAVE_PAGE_SUCCESS,
   payload: {
     isFetching: false,
+    json,
   },
 })
 
@@ -133,7 +134,7 @@ export const saveEditing = (id: string, body: Object, path: string) => async (
     if (contentType && contentType.includes("application/vnd.api+json")) {
       const json = await res.json()
       if (res.ok) {
-        dispatch(savePageSuccess())
+        dispatch(savePageSuccess(json))
         setTimeout(() => {
           dispatch(push(`${path.slice(0, -5)}`))
         }, 1000)
@@ -177,7 +178,7 @@ export const saveInlineEditing = (id: string, body: Object) => async (
     if (contentType && contentType.includes("application/vnd.api+json")) {
       const json = await res.json()
       if (res.ok) {
-        dispatch(savePageSuccess())
+        dispatch(savePageSuccess(json))
       } else {
         if (process.env.NODE_ENV !== "production") {
           printError(res, json)
@@ -218,7 +219,7 @@ export const addEditablePage = (body: Object, url: string) => async (
     if (contentType && contentType.includes("application/vnd.api+json")) {
       const json = await res.json()
       if (res.ok) {
-        dispatch(savePageSuccess())
+        dispatch(savePageSuccess(json))
         setTimeout(() => {
           dispatch(push(url))
         }, 1000)

diff --git a/src/components/pages/About/SpecialThanks.js b/src/components/pages/About/SpecialThanks.js
@@ -6,6 +6,8 @@ import InlineEditor from "components/editor/InlineEditor"
 import { fetchPage } from "actions/editablePages"
 import { NAMESPACE } from "constants/namespace"
 
+const slugName = `${NAMESPACE}-specialthanks`
+
 type Props = {
   /** Represents whether component is loading or not */
   isFetching: boolean,
@@ -28,7 +30,7 @@ class SpecialThanks extends Component<Props> {
     },
   }
   componentDidMount() {
-    this.props.fetchPage(`${NAMESPACE}-specialthanks`)
+    this.props.fetchPage(slugName)
   }
   render() {
     const { isFetching, page } = this.props
@@ -47,13 +49,10 @@ class SpecialThanks extends Component<Props> {
   }
 }
 
-const mapStateToProps = state => {
-  const slugName = `${NAMESPACE}-specialthanks`
-  return {
-    isFetching: state.editablePages.isFetching,
-    page: state.editablePages[slugName],
-  }
-}
+const mapStateToProps = state => ({
+  isFetching: state.editablePages.isFetching,
+  page: state.editablePages[slugName],
+})
 
 export default connect(
   mapStateToProps,

diff --git a/src/components/pages/About/TechnicalSummary.js b/src/components/pages/About/TechnicalSummary.js
@@ -6,6 +6,8 @@ import InlineEditor from "components/editor/InlineEditor"
 import { fetchPage } from "actions/editablePages"
 import { NAMESPACE } from "constants/namespace"
 
+const slugName = `${NAMESPACE}-technicalsummary`
+
 type Props = {
   /** Represents whether component is loading or not */
   isFetching: boolean,
@@ -28,7 +30,7 @@ class TechnicalSummary extends Component<Props> {
     },
   }
   componentDidMount() {
-    this.props.fetchPage(`${NAMESPACE}-technicalsummary`)
+    this.props.fetchPage(slugName)
   }
   render() {
     const { isFetching, page } = this.props
@@ -47,13 +49,10 @@ class TechnicalSummary extends Component<Props> {
   }
 }
 
-const mapStateToProps = state => {
-  const slugName = `${NAMESPACE}-technicalsummary`
-  return {
-    isFetching: state.editablePages.isFetching,
-    page: state.editablePages[slugName],
-  }
-}
+const mapStateToProps = state => ({
+  isFetching: state.editablePages.isFetching,
+  page: state.editablePages[slugName],
+})
 
 export default connect(
   mapStateToProps,

diff --git a/src/reducers/editablePages.js b/src/reducers/editablePages.js
@@ -46,10 +46,12 @@ const editablePagesReducer = (state: Object = initialState, action: Object) => {
         isFetching: true,
       }
     case SAVE_PAGE_SUCCESS:
+      const slug = action.payload.json.data.attributes.slug
       return {
         ...state,
         isFetching: false,
         error: null,
+        [slug]: action.payload.json,
       }
     case SAVE_PAGE_FAILURE:
       return {