tabshift/payload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: preview now exposes most recent draft data

Browse Source
This commit is contained in:
James
2023-01-02 14:38:35 -05:00
parent 2a8bc31e4a
commit 54dadbeae5
6 changed files with 113 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/admin/components/elements/PreviewButton/index.tsx
View File

@@ -1,9 +1,11 @@
import React, { useEffect, useState } from 'react';
import React, { useCallback, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useAuth } from '../../utilities/Auth';
import Button from '../Button';
import { Props } from './types';
import { useLocale } from '../../utilities/Locale';
import { useDocumentInfo } from '../../utilities/DocumentInfo';
import { useConfig } from '../../utilities/Config';
import './index.scss';
@@ -12,46 +14,40 @@ const baseClass = 'preview-btn';
const PreviewButton: React.FC<Props> = (props) => {
const {
generatePreviewURL,
data,
} = props;
const [url, setUrl] = useState<string | undefined>(undefined);
const { id, collection, global } = useDocumentInfo();
const [isLoading, setIsLoading] = useState(false);
const locale = useLocale();
const { token } = useAuth();
const { serverURL, routes: { api } } = useConfig();
const { t } = useTranslation('version');
useEffect(() => {
if (generatePreviewURL && typeof generatePreviewURL === 'function') {
const makeRequest = async () => {
const previewURL = await generatePreviewURL(data, { locale, token });
setUrl(previewURL);
};
const handleClick = useCallback(async () => {
setIsLoading(true);
makeRequest();
}
}, [
generatePreviewURL,
locale,
token,
data,
]);
let url = `${serverURL}${api}`;
if (collection) url = `${url}/${collection.slug}/${id}`;
if (global) url = `${url}/globals/${global.slug}`;
if (url) {
return (
<Button
el="anchor"
className={baseClass}
buttonStyle="secondary"
url={url}
newTab
>
{t('preview')}
</Button>
);
}
const data = await fetch(`${url}?draft=true&locale=${locale}&fallback-locale=null`).then((res) => res.json());
const previewURL = await generatePreviewURL(data, { locale, token });
setIsLoading(false);
return null;
window.open(previewURL, '_blank');
}, [serverURL, api, collection, global, id, generatePreviewURL, locale, token]);
return (
<Button
className={baseClass}
buttonStyle="secondary"
onClick={handleClick}
disabled={isLoading}
>
{isLoading ? t('general:loading') : t('preview')}
</Button>
);
};
export default PreviewButton;

2
src/admin/components/elements/PreviewButton/types.ts
View File

@@ -1,7 +1,5 @@
import { Data } from '../../forms/Form/types';
import { GeneratePreviewURL } from '../../../../config/types';
export type Props = {
generatePreviewURL?: GeneratePreviewURL,
data?: Data
}

39
src/admin/components/views/Account/Default.tsx
View File

@@ -85,7 +85,7 @@ const DefaultAccount: React.FC<Props> = (props) => {
/>
<Eyebrow />
{!(collection.versions?.drafts && collection.versions?.drafts?.autosave) && (
<LeaveWithoutSaving />
<LeaveWithoutSaving />
)}
<div className={`${baseClass}__edit`}>
<Gutter className={`${baseClass}__header`}>
@@ -129,18 +129,17 @@ const DefaultAccount: React.FC<Props> = (props) => {
<div className={`${baseClass}__sidebar-sticky-wrap`}>
<ul className={`${baseClass}__collection-actions`}>
{(permissions?.create?.permission) && (
<React.Fragment>
<li><Link to={`${admin}/collections/${slug}/create`}>{t('general:createNew')}</Link></li>
</React.Fragment>
<React.Fragment>
<li><Link to={`${admin}/collections/${slug}/create`}>{t('general:createNew')}</Link></li>
</React.Fragment>
)}
</ul>
<div className={`${baseClass}__document-actions${preview ? ` ${baseClass}__document-actions--with-preview` : ''}`}>
<PreviewButton
generatePreviewURL={preview}
data={data}
/>
{hasSavePermission && (
<FormSubmit buttonId="action-save">{t('general:save')}</FormSubmit>
<FormSubmit buttonId="action-save">{t('general:save')}</FormSubmit>
)}
</div>
<div className={`${baseClass}__sidebar-fields`}>
@@ -172,20 +171,20 @@ const DefaultAccount: React.FC<Props> = (props) => {
<div>{data?.id}</div>
</li>
{timestamps && (
<React.Fragment>
{data.updatedAt && (
<li>
<div className={`${baseClass}__label`}>{t('general:lastModified')}</div>
<div>{format(new Date(data.updatedAt), dateFormat)}</div>
</li>
)}
{data.createdAt && (
<li>
<div className={`${baseClass}__label`}>{t('general:created')}</div>
<div>{format(new Date(data.createdAt), dateFormat)}</div>
</li>
)}
</React.Fragment>
<React.Fragment>
{data.updatedAt && (
<li>
<div className={`${baseClass}__label`}>{t('general:lastModified')}</div>
<div>{format(new Date(data.updatedAt), dateFormat)}</div>
</li>
)}
{data.createdAt && (
<li>
<div className={`${baseClass}__label`}>{t('general:created')}</div>
<div>{format(new Date(data.createdAt), dateFormat)}</div>
</li>
)}
</React.Fragment>
)}
</ul>

2
src/admin/components/views/Global/Default.tsx
View File

@@ -102,7 +102,6 @@ const DefaultGlobalView: React.FC<Props> = (props) => {
{(preview && (!global.versions?.drafts || global.versions?.drafts?.autosave)) && (
<PreviewButton
generatePreviewURL={preview}
data={data}
/>
)}
{hasSavePermission && (
@@ -125,7 +124,6 @@ const DefaultGlobalView: React.FC<Props> = (props) => {
{(preview && (global.versions?.drafts && !global.versions?.drafts?.autosave)) && (
<PreviewButton
generatePreviewURL={preview}
data={data}
/>
)}
{global.versions?.drafts && (

2
src/admin/components/views/collections/Edit/Default.tsx
View File

@@ -189,7 +189,6 @@ const DefaultEditView: React.FC<Props> = (props) => {
{(preview && (!collection.versions?.drafts || collection.versions?.drafts?.autosave)) && (
<PreviewButton
generatePreviewURL={preview}
data={data}
/>
)}
{hasSavePermission && (
@@ -212,7 +211,6 @@ const DefaultEditView: React.FC<Props> = (props) => {
{(isEditing && preview && (collection.versions?.drafts && !collection.versions?.drafts?.autosave)) && (
<PreviewButton
generatePreviewURL={preview}
data={data}
/>
)}
{collection.versions?.drafts && (