Skip to content

Commit

Permalink
fix: #423, #391 - prevents loading edit views until data initializes
Browse files Browse the repository at this point in the history
  • Loading branch information
@jmikrut
jmikrut committed Feb 3, 2022
1 parent 7fd4b22 commit 2884654
Show file tree
Hide file tree
Showing 5 changed files with 252 additions and 250 deletions.
210 changes: 104 additions & 106 deletions src/admin/components/views/Account/Default.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,120 +51,118 @@ const DefaultAccount: React.FC<Props> = (props) => {

return (
<div className={classes}>
<Form
className={`${baseClass}__form`}
method="put"
action={action}
initialState={initialState}
disabled={!hasSavePermission}
>
<div className={`${baseClass}__main`}>
<Meta
title="Account"
description="Account of current user"
keywords="Account, Dashboard, Payload, CMS"
/>
<Eyebrow />
<LeaveWithoutSaving />
<div className={`${baseClass}__edit`}>
{isLoading && (
<Loading />
)}
{!isLoading && (
<React.Fragment>
<header className={`${baseClass}__header`}>
<h1>
<RenderTitle {...{ data, useAsTitle, fallback: '[Untitled]' }} />
</h1>
</header>
<Auth
useAPIKey={auth.useAPIKey}
collection={collection}
email={data?.email}
operation="update"
/>
<RenderFields
operation="update"
permissions={permissions.fields}
readOnly={!hasSavePermission}
filter={(field) => field?.admin?.position !== 'sidebar'}
fieldTypes={fieldTypes}
fieldSchema={fields}
/>
</React.Fragment>
)}
{isLoading && (
<Loading />
)}
{!isLoading && (
<Form
className={`${baseClass}__form`}
method="put"
action={action}
initialState={initialState}
disabled={!hasSavePermission}
>
<div className={`${baseClass}__main`}>
<Meta
title="Account"
description="Account of current user"
keywords="Account, Dashboard, Payload, CMS"
/>
<Eyebrow />
<LeaveWithoutSaving />
<div className={`${baseClass}__edit`}>
<header className={`${baseClass}__header`}>
<h1>
<RenderTitle {...{ data, useAsTitle, fallback: '[Untitled]' }} />
</h1>
</header>
<Auth
useAPIKey={auth.useAPIKey}
collection={collection}
email={data?.email}
operation="update"
/>
<RenderFields
operation="update"
permissions={permissions.fields}
readOnly={!hasSavePermission}
filter={(field) => field?.admin?.position !== 'sidebar'}
fieldTypes={fieldTypes}
fieldSchema={fields}
/>
</div>
</div>
</div>
<div className={`${baseClass}__sidebar-wrap`}>
<div className={`${baseClass}__sidebar`}>
<div className={`${baseClass}__sidebar-sticky-wrap`}>
<ul className={`${baseClass}__collection-actions`}>
{(permissions?.create?.permission) && (
<React.Fragment>
<li><Link to={`${admin}/collections/${slug}/create`}>Create New</Link></li>
</React.Fragment>
)}
</ul>
<div className={`${baseClass}__document-actions${preview ? ` ${baseClass}__document-actions--with-preview` : ''}`}>
<PreviewButton
generatePreviewURL={preview}
data={data}
/>
{hasSavePermission && (
<FormSubmit>Save</FormSubmit>
)}
</div>
<div className={`${baseClass}__sidebar-fields`}>
<RenderFields
operation="update"
permissions={permissions.fields}
readOnly={!hasSavePermission}
filter={(field) => field?.admin?.position === 'sidebar'}
fieldTypes={fieldTypes}
fieldSchema={fields}
/>
</div>
<ul className={`${baseClass}__meta`}>
<li className={`${baseClass}__api-url`}>
<span className={`${baseClass}__label`}>
API URL
{' '}
<CopyToClipboard value={apiURL} />
</span>
<a
href={apiURL}
target="_blank"
rel="noopener noreferrer"
>
{apiURL}
</a>
</li>
<li>
<div className={`${baseClass}__label`}>ID</div>
<div>{data?.id}</div>
</li>
{timestamps && (
<React.Fragment>
{data.updatedAt && (
<li>
<div className={`${baseClass}__label`}>Last Modified</div>
<div>{format(new Date(data.updatedAt), dateFormat)}</div>
</li>
<div className={`${baseClass}__sidebar-wrap`}>
<div className={`${baseClass}__sidebar`}>
<div className={`${baseClass}__sidebar-sticky-wrap`}>
<ul className={`${baseClass}__collection-actions`}>
{(permissions?.create?.permission) && (
<React.Fragment>
<li><Link to={`${admin}/collections/${slug}/create`}>Create New</Link></li>
</React.Fragment>
)}
</ul>
<div className={`${baseClass}__document-actions${preview ? ` ${baseClass}__document-actions--with-preview` : ''}`}>
<PreviewButton
generatePreviewURL={preview}
data={data}
/>
{hasSavePermission && (
<FormSubmit>Save</FormSubmit>
)}
{data.createdAt && (
</div>
<div className={`${baseClass}__sidebar-fields`}>
<RenderFields
operation="update"
permissions={permissions.fields}
readOnly={!hasSavePermission}
filter={(field) => field?.admin?.position === 'sidebar'}
fieldTypes={fieldTypes}
fieldSchema={fields}
/>
</div>
<ul className={`${baseClass}__meta`}>
<li className={`${baseClass}__api-url`}>
<span className={`${baseClass}__label`}>
API URL
{' '}
<CopyToClipboard value={apiURL} />
</span>
<a
href={apiURL}
target="_blank"
rel="noopener noreferrer"
>
{apiURL}
</a>
</li>
<li>
<div className={`${baseClass}__label`}>Created</div>
<div>{format(new Date(data.createdAt), dateFormat)}</div>
<div className={`${baseClass}__label`}>ID</div>
<div>{data?.id}</div>
</li>
{timestamps && (
<React.Fragment>
{data.updatedAt && (
<li>
<div className={`${baseClass}__label`}>Last Modified</div>
<div>{format(new Date(data.updatedAt), dateFormat)}</div>
</li>
)}
{data.createdAt && (
<li>
<div className={`${baseClass}__label`}>Created</div>
<div>{format(new Date(data.createdAt), dateFormat)}</div>
</li>
)}
</React.Fragment>
)}
</React.Fragment>
)}

</ul>
</ul>
</div>
</div>
</div>
</div>
</Form>
</Form>
)}
</div>
);
};
Expand Down
67 changes: 37 additions & 30 deletions src/admin/components/views/Global/Default.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,17 @@ import fieldTypes from '../../forms/field-types';
import LeaveWithoutSaving from '../../modals/LeaveWithoutSaving';
import { Props } from './types';

import './index.scss';
import ViewDescription from '../../elements/ViewDescription';
import Loading from '../../elements/Loading';

import './index.scss';

const baseClass = 'global-edit';

const DefaultGlobalView: React.FC<Props> = (props) => {
const { admin: { dateFormat } } = useConfig();
const {
global, data, onSave, permissions, action, apiURL, initialState,
global, data, onSave, permissions, action, apiURL, initialState, isLoading,
} = props;

const {
Expand All @@ -36,6 +38,10 @@ const DefaultGlobalView: React.FC<Props> = (props) => {

return (
<div className={baseClass}>
{isLoading && (
<Loading />
)}
{!isLoading && (
<Form
className={`${baseClass}__form`}
method="post"
Expand All @@ -60,9 +66,9 @@ const DefaultGlobalView: React.FC<Props> = (props) => {
{label}
</h1>
{description && (
<div className={`${baseClass}__sub-header`}>
<ViewDescription description={description} />
</div>
<div className={`${baseClass}__sub-header`}>
<ViewDescription description={description} />
</div>
)}
</header>
<RenderFields
Expand All @@ -84,7 +90,7 @@ const DefaultGlobalView: React.FC<Props> = (props) => {
data={data}
/>
{hasSavePermission && (
<FormSubmit>Save</FormSubmit>
<FormSubmit>Save</FormSubmit>
)}
</div>
<div className={`${baseClass}__sidebar-fields`}>
Expand All @@ -98,35 +104,36 @@ const DefaultGlobalView: React.FC<Props> = (props) => {
/>
</div>
{data && (
<ul className={`${baseClass}__meta`}>
{data && (
<li className={`${baseClass}__api-url`}>
<span className={`${baseClass}__label`}>
API URL
{' '}
<CopyToClipboard value={apiURL} />
</span>
<a
href={apiURL}
target="_blank"
rel="noopener noreferrer"
>
{apiURL}
</a>
</li>
)}
{data.updatedAt && (
<li>
<div className={`${baseClass}__label`}>Last Modified</div>
<div>{format(new Date(data.updatedAt as string), dateFormat)}</div>
</li>
)}
</ul>
<ul className={`${baseClass}__meta`}>
{data && (
<li className={`${baseClass}__api-url`}>
<span className={`${baseClass}__label`}>
API URL
{' '}
<CopyToClipboard value={apiURL} />
</span>
<a
href={apiURL}
target="_blank"
rel="noopener noreferrer"
>
{apiURL}
</a>
</li>
)}
{data.updatedAt && (
<li>
<div className={`${baseClass}__label`}>Last Modified</div>
<div>{format(new Date(data.updatedAt as string), dateFormat)}</div>
</li>
)}
</ul>
)}
</div>
</div>
</div>
</Form>
)}
</div>
);
};
Expand Down
3 changes: 2 additions & 1 deletion src/admin/components/views/Global/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ const GlobalView: React.FC<IndexProps> = (props) => {
});
};

const [{ data }] = usePayloadAPI(
const [{ data, isLoading }] = usePayloadAPI(
`${serverURL}${api}/globals/${slug}`,
{ initialParams: { 'fallback-locale': 'null', depth: 0 } },
);
Expand Down Expand Up @@ -90,6 +90,7 @@ const GlobalView: React.FC<IndexProps> = (props) => {
DefaultComponent={DefaultGlobal}
CustomComponent={CustomEdit}
componentProps={{
isLoading,
data: dataToRender,
permissions: globalPermissions,
initialState,
Expand Down
1 change: 1 addition & 0 deletions src/admin/components/views/Global/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,5 @@ export type Props = {
action: string
apiURL: string
initialState: Fields
isLoading: boolean
}
Loading

0 comments on commit 2884654

Please sign in to comment.