Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: wait for onsyschange #9

Merged
merged 15 commits into from
Oct 6, 2021
Merged

feat: wait for onsyschange #9

Changes from 8 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
b309206
feat: manually save content before firing preview webhook
veryspry Oct 1, 2021
b3f91fb
feat: refresh the window/tab that the preview is in after the content…
veryspry Oct 1, 2021
e55f0f9
feat: use window.location.href
veryspry Oct 1, 2021
d9b198f
feat: update comments for clarity
veryspry Oct 1, 2021
095973d
bump ui v
TylerBarnes Oct 5, 2021
55b8c8c
wait for onSysChange to fire again in the first 10 seconds after Open…
TylerBarnes Oct 5, 2021
14f07b2
Merge branch 'content-sync-support' into feat/wait-for-onsyschange
TylerBarnes Oct 5, 2021
cbf8401
cleanup
TylerBarnes Oct 5, 2021
24b2ebb
small tweaks
TylerBarnes Oct 6, 2021
bfbbff6
clean up code
TylerBarnes Oct 6, 2021
9c4379c
remove console logs
TylerBarnes Oct 6, 2021
7f1578c
remove unused styled component
TylerBarnes Oct 6, 2021
578b9fb
only fire onclick if we're using content sync
TylerBarnes Oct 6, 2021
b946e97
remove another log
TylerBarnes Oct 6, 2021
230c464
Update apps/gatsby/src/Sidebar.js
TylerBarnes Oct 6, 2021
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
163 changes: 112 additions & 51 deletions apps/gatsby/src/Sidebar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,31 @@ import React from 'react';
import PropTypes from 'prop-types';
import { ExtensionUI } from '@gatsby-cloud-pkg/gatsby-cms-extension-base';

import {
Spinner,
HelpText,
Icon,
} from '@contentful/forma-36-react-components';
import { Spinner, HelpText, Icon } from '@contentful/forma-36-react-components';

import styled from "@emotion/styled"

export const Button = styled(`button`)`
border: 0;
border-radius: 4px;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
width: 100%;
color: white;
background-color: #663399;
height: 2.5rem;

${props => props.disabled ? `
background-color: grey;
` : ``}

&:hover {
background-color: #542c85;
cursor: pointer;
}
`

const STATUS_STYLE = { textAlign: 'center', color: '#7f7c82' };
const ICON_STYLE = { marginBottom: '-4px' };
Expand All @@ -33,6 +53,7 @@ export default class Sidebar extends React.Component {
slug: null,
manifestId: null,
lastPublishedDateTime: null,
buttonDisabled: false
};

this.sdk = props.sdk;
Expand All @@ -43,6 +64,7 @@ export default class Sidebar extends React.Component {
this.sdk.window.startAutoResizer();

const content = this.props.sdk.entry.getSys();
console.log({content})
this.setManifestId(content);
this.setLastPublishedDateTime(content);
}
Expand All @@ -54,6 +76,7 @@ export default class Sidebar extends React.Component {
setManifestId = (content) => {
const { id, space, updatedAt } = content;
const manifestId = `${space.sys.id}-${id}-${updatedAt}`;
console.info(`setting manifest id to state ${manifestId}`)
this.setState({ manifestId });
}

Expand Down Expand Up @@ -91,6 +114,7 @@ export default class Sidebar extends React.Component {
}

onSysChanged = (content) => {
console.log(`onSysChanged`)
this.setManifestId(content);
this.maybeStartProductionBuild(content);
this.buildSlug();
Expand Down Expand Up @@ -164,48 +188,18 @@ export default class Sidebar extends React.Component {
this.setState({ slug: finalSlug })
}

manuallySaveContentEntry = async () => {
const { entry, space, ids } = this.props.sdk;
const fields = Object.entries(entry.fields);

const updatedEntry = await space.getEntry(ids.entry);

fields.forEach(([fieldName, field]) => {
const { locales } = field;

locales.forEach((locale) => {
const fieldLocale = field._getFieldLocale(locale);
const fieldValue = fieldLocale.getValue();

// if a field was previously empty, it will not be on the updateEntry object
let updateField = updatedEntry.fields[fieldName];
if (!updateField) {
updateField = {};
updatedEntry.fields[fieldName] = updateField;
}

updateField[locale] = fieldValue;
});
});

return space.updateEntry(updatedEntry);
}

refreshPreview = async () => {
refreshPreview = () => {
const {
webhookUrl,
previewWebhookUrl,
authToken
} = this.sdk.parameters.installation;

await this.manuallySaveContentEntry();

if (previewWebhookUrl) {
callWebhook(previewWebhookUrl, authToken);
} else if (webhookUrl) {
callWebhook(webhookUrl, authToken);
} else {
// @todo show this in the UI
console.warn(`Please add a Preview Webhook URL to your Gatsby Cloud App settings.`)
}
};
Expand Down Expand Up @@ -240,21 +234,88 @@ export default class Sidebar extends React.Component {
<div className="extension">
<div className="flexcontainer">
{(previewWebhookUrl || webhookUrl) ?
<ExtensionUI
contentSlug={!contentSyncUrl && !!slug && slug}
previewUrl={previewUrl}
authToken={authToken}
onOpenPreviewButtonClick={async ({ previewWindow }) => {
await this.refreshPreview();
/**
* ExtensionUI returns a reference to the opened tab (previewWindow) after eagerly
* opening it with the given previewUrl. Because there is a small chance that this will
* have a stale manifestId, we update the url in the opened preview tab just in case
* to ensure that the user is redirected to the correct preview build
*/
previewWindow.location.href = this.getPreviewUrl();
}}
/> :

contentSyncUrl ? (
<>
<Button disabled={this.state.buttonDisabled} onClick={async () => {
if (this.state.buttonDisabled) {
return
}

this.setState({ buttonDisabled: true })
// wait a bit for contentful to save.
await new Promise(resolve => setTimeout(resolve, 3000))
this.refreshPreview();

console.log({ previewUrl: this.getPreviewUrl() })

let previewUrl = this.getPreviewUrl()
console.log(`opening preview url ${previewUrl}`)
window.open(previewUrl, `GATSBY`)

const interval = setInterval(() => {
const newPreviewUrl = this.getPreviewUrl()
console.log({previewUrl, newPreviewUrl})

if (previewUrl !== newPreviewUrl) {
clearInterval(interval)

previewUrl = newPreviewUrl

console.log(`new preview url ${newPreviewUrl}`)
window.open(previewUrl, `GATSBY`)

this.refreshPreview();
this.setState({ buttonDisabled: false })
}
}, 1000)

setTimeout(() => {
clearInterval(interval)
this.setState({ buttonDisabled: false })
}, 10000)
}}>
{this.state.buttonDisabled ? `Opening Preview` : `Open Preview`}
</Button>
{!!this.state.buttonDisabled && <Spinner />}
</>
) : (
<ExtensionUI
contentSlug={!contentSyncUrl && !!slug && slug}
previewUrl={previewUrl}
authToken={authToken}
onOpenPreviewButtonClick={async () => {
// wait a bit for contentful to save.
await new Promise(resolve => setTimeout(resolve, 3000))
console.log({ previewUrl: this.getPreviewUrl() })
this.refreshPreview();
/**
* ExtensionUI returns a reference to the opened tab (previewWindow) after eagerly
* opening it with the given previewUrl. Because there is a small chance that this will
* have a stale manifestId, we update the url in the opened preview tab just in case
* to ensure that the user is redirected to the correct preview build
*/
let previewUrl = this.getPreviewUrl()
console.log(`opening preview url ${previewUrl}`)
window.open(previewUrl, `GATSBY`)
const interval = setInterval(() => {
const newPreviewUrl = this.getPreviewUrl()
console.log({previewUrl, newPreviewUrl})

if (previewUrl !== newPreviewUrl) {
previewUrl = newPreviewUrl
window.open(previewUrl, `GATSBY`)
console.log(`new preview url ${newPreviewUrl}`)
this.refreshPreview();
clearInterval(interval)
}
}, 1000)

setTimeout(() => clearInterval(interval), 10000)
}}
/>
)
:
<HelpText style={STATUS_STYLE}>
<Icon icon="Warning" color="negative" style={ICON_STYLE} />
{' '}Please add a Preview Webhook URL to your Gatsby App settings.
Expand Down