From 8d9b433146b9ba795712a5926532f991d6ebd213 Mon Sep 17 00:00:00 2001 From: Pavel910 Date: Tue, 11 Dec 2018 14:32:36 +0100 Subject: [PATCH] Fix Apollo cache update when page is published. --- .../utils/withPublishRevisionHandler.js | 9 ++- .../src/admin/views/Pages/Editor.js | 1 - .../src/admin/views/Pages/Loader.js | 62 ---------------- .../src/admin/views/Pages/PageDetails.js | 74 ++++++++++--------- 4 files changed, 47 insertions(+), 99 deletions(-) delete mode 100644 packages/webiny-app-cms/src/admin/views/Pages/Loader.js diff --git a/packages/webiny-app-cms/src/admin/plugins/pageDetails/utils/withPublishRevisionHandler.js b/packages/webiny-app-cms/src/admin/plugins/pageDetails/utils/withPublishRevisionHandler.js index a3482b122c7..1a0d1cc44bb 100644 --- a/packages/webiny-app-cms/src/admin/plugins/pageDetails/utils/withPublishRevisionHandler.js +++ b/packages/webiny-app-cms/src/admin/plugins/pageDetails/utils/withPublishRevisionHandler.js @@ -1,6 +1,7 @@ +// @flow import React from "react"; import { compose, withHandlers } from "recompose"; -import { get, set } from "dot-prop-immutable"; +import { set } from "dot-prop-immutable"; import { graphql } from "react-apollo"; import { withSnackbar } from "webiny-app-admin/components"; import { publishRevision, getPage } from "webiny-app-cms/admin/graphql/pages"; @@ -22,9 +23,11 @@ export default (prop: string) => { return; } + const getPageQuery = getPage(); + // Update revisions const pageFromCache = cache.readQuery({ - query: getPage(), + query: getPageQuery, variables: { id: page.id } }); @@ -44,7 +47,7 @@ export default (prop: string) => { // Write our data back to the cache. cache.writeQuery({ - query: getPage(), + query: getPageQuery, data: set(pageFromCache, "cms.page.data", page) }); } diff --git a/packages/webiny-app-cms/src/admin/views/Pages/Editor.js b/packages/webiny-app-cms/src/admin/views/Pages/Editor.js index 431082d6a66..f14ea13c64e 100644 --- a/packages/webiny-app-cms/src/admin/views/Pages/Editor.js +++ b/packages/webiny-app-cms/src/admin/views/Pages/Editor.js @@ -13,7 +13,6 @@ import { withSavedElements } from "webiny-app-cms/admin/components"; import Snackbar from "webiny-app-admin/plugins/Snackbar/Snackbar"; import { Typography } from "webiny-ui/Typography"; import { LoadingEditor, LoadingTitle } from "./EditorStyled.js"; - import editorMock from "webiny-app-cms/admin/assets/editor-mock.png"; const getEmptyData = (page = {}, revisions = []) => { diff --git a/packages/webiny-app-cms/src/admin/views/Pages/Loader.js b/packages/webiny-app-cms/src/admin/views/Pages/Loader.js deleted file mode 100644 index c0a5bd36fc0..00000000000 --- a/packages/webiny-app-cms/src/admin/views/Pages/Loader.js +++ /dev/null @@ -1,62 +0,0 @@ -// @flow -import * as React from "react"; -import styled from "react-emotion"; -import Skeleton from "react-loading-skeleton"; - -const LoaderUl = styled("ul")({ - listStyle: "none", - padding: "10px 20px", - "li > div": { - display: "inline-block", - verticalAlign: "middle", - ".react-loading-skeleton": { - backgroundColor: "var(--mdc-theme-background)", - backgroundImage: - "linear-gradient(90deg, var(--mdc-theme-background), var(--mdc-theme-surface), var(--mdc-theme-background))" - } - }, - ".graphic": { - fontSize: 36, - width: 36 - }, - ".data": { - width: "calc(-36px + 75%)", - marginLeft: 10 - }, - ".actions": { - width: "calc(-36px + 25%)", - marginLeft: 10, - textAlign: "right", - "> div": { - display: "inline-block", - fontSize: 24, - marginLeft: 10, - width: 24 - } - } -}); - -const Loader = () => ( - - {[1, 2, 3, 4, 5].map(item => ( -
  • -
    - -
    -
    - -
    -
    -
    - -
    -
    - -
    -
    -
    • - ))} -     -); - -export default Loader; diff --git a/packages/webiny-app-cms/src/admin/views/Pages/PageDetails.js b/packages/webiny-app-cms/src/admin/views/Pages/PageDetails.js index 395c9de2d7c..ad55d215242 100644 --- a/packages/webiny-app-cms/src/admin/views/Pages/PageDetails.js +++ b/packages/webiny-app-cms/src/admin/views/Pages/PageDetails.js @@ -1,15 +1,17 @@ // @flow import * as React from "react"; import { compose, withProps } from "recompose"; -import { graphql } from "react-apollo"; +import { Query } from "react-apollo"; import { renderPlugins } from "webiny-app/plugins"; import { withRouter } from "webiny-app/components"; -import { PageDetailsProvider, PageDetailsConsumer } from "../../components/PageDetailsContext"; import type { WithRouterProps } from "webiny-app/components"; -import Loader from "./Loader"; import styled from "react-emotion"; import { Elevation } from "webiny-ui/Elevation"; +import { Typography } from "webiny-ui/Typography"; import { getPage } from "webiny-app-cms/admin/graphql/pages"; +import editorMock from "webiny-app-cms/admin/assets/editor-mock.png"; +import { LoadingEditor, LoadingTitle } from "./EditorStyled.js"; +import { PageDetailsProvider, PageDetailsConsumer } from "../../components/PageDetailsContext"; type Props = WithRouterProps & { pageId: string, @@ -42,8 +44,8 @@ const DetailsContainer = styled("div")({ } }); -const PageDetails = ({ router, page, loading }: Props) => { - if (!router.getQuery("id")) { +const PageDetails = ({ pageId }: Props) => { + if (!pageId) { return ( @@ -53,25 +55,41 @@ const PageDetails = ({ router, page, loading }: Props) => { ); } - if (loading) { - /* TODO: Ovo je C/P loadera od DataList komponente, treba ga sloziti da lici na taj PageDetails view */ - return ; - } + return ( + + {({ data, loading }) => { + if (loading) { + return ( + + + + + Loading page.... + . + . + + + + ); + } - const details = { page, loading }; + const details = { page: loading ? {} : data.cms.page.data, loading }; - return ( - - - - {pageDetails => ( - - {renderPlugins("cms-page-details", { pageDetails })} - - )} - - - + return ( + + + + {pageDetails => ( + + {renderPlugins("cms-page-details", { pageDetails })} + + )} + + + + ); + }} + ); }; @@ -79,15 +97,5 @@ export default compose( withRouter(), withProps(({ router }) => ({ pageId: router.getQuery("id") - })), - graphql(getPage(), { - skip: props => !props.pageId, - options: ({ pageId }) => ({ variables: { id: pageId } }), - props: ({ data }) => { - return { - loading: data.loading, - page: data.loading ? {} : data.cms.page.data - }; - } - }) + })) )(PageDetails);