refactor document dirty and empty logic

This commit is contained in:
thenanyu 2019-07-06 21:45:50 -07:00
parent ccc0906b0a
commit dea6085a11
4 changed files with 21 additions and 20 deletions

View File

@ -72,17 +72,6 @@ export default class Document extends BaseModel {
return !this.publishedAt; return !this.publishedAt;
} }
@computed
get isEmpty(): boolean {
// Check if the document title has been modified and user generated content exists
return this.text.replace(/^#/, '').trim().length === 0;
}
@computed
get allowSave(): boolean {
return !this.isEmpty && !this.isSaving;
}
@action @action
share = async () => { share = async () => {
const res = await client.post('/shares.create', { documentId: this.id }); const res = await client.post('/shares.create', { documentId: this.id });

View File

@ -79,6 +79,7 @@ class DocumentScene extends React.Component<Props> {
@observable isSaving: boolean = false; @observable isSaving: boolean = false;
@observable isPublishing: boolean = false; @observable isPublishing: boolean = false;
@observable isDirty: boolean = false; @observable isDirty: boolean = false;
@observable isEmpty: boolean = true;
@observable notFound: boolean = false; @observable notFound: boolean = false;
@observable moveModalOpen: boolean = false; @observable moveModalOpen: boolean = false;
@ -166,6 +167,7 @@ class DocumentScene extends React.Component<Props> {
} }
this.isDirty = false; this.isDirty = false;
this.isEmpty = false;
const document = this.document; const document = this.document;
@ -226,17 +228,19 @@ class DocumentScene extends React.Component<Props> {
let document = this.document; let document = this.document;
if (!document) return; if (!document) return;
// prevent saves when we're already saving
if (document.isSaving ) return;
// get the latest version of the editor text value // get the latest version of the editor text value
const text = this.getEditorText ? this.getEditorText() : document.text; const text = this.getEditorText ? this.getEditorText() : document.text;
// prevent save before anything has been written
if (text.trim() === "#") return;
// prevent autosave if nothing has changed // prevent autosave if nothing has changed
if (options.autosave && document.text.trim() === text.trim()) return; if (options.autosave && document.text.trim() === text.trim()) return;
document.text = text; document.text = text;
if (!document.allowSave) return;
// prevent autosave before anything has been written
if (options.autosave && !document.title && !document.id) return;
let isNew = !document.id; let isNew = !document.id;
this.isSaving = true; this.isSaving = true;
@ -261,9 +265,15 @@ class DocumentScene extends React.Component<Props> {
updateIsDirty = debounce(() => { updateIsDirty = debounce(() => {
const document = this.document; const document = this.document;
const editorText = this.getEditorText().trim()
this.isEmpty = editorText === "#";
this.isDirty = !!document && editorText !== document.text.trim()
console.log({editorText})
console.log({doctext: document.text.trim()})
this.isDirty =
!!document && this.getEditorText().trim() !== document.text.trim();
}, IS_DIRTY_DELAY); }, IS_DIRTY_DELAY);
onImageUploadStart = () => { onImageUploadStart = () => {
@ -377,7 +387,8 @@ class DocumentScene extends React.Component<Props> {
isEditing={this.isEditing} isEditing={this.isEditing}
isSaving={this.isSaving} isSaving={this.isSaving}
isPublishing={this.isPublishing} isPublishing={this.isPublishing}
savingIsDisabled={!document.allowSave} publishingIsDisabled={document.isSaving || this.isPublishing || this.isEmpty}
savingIsDisabled={document.isSaving || this.isEmpty}
onDiscard={this.onDiscard} onDiscard={this.onDiscard}
onSave={this.onSave} onSave={this.onSave}
/> />

View File

@ -30,6 +30,7 @@ type Props = {
isEditing: boolean, isEditing: boolean,
isSaving: boolean, isSaving: boolean,
isPublishing: boolean, isPublishing: boolean,
publishingIsDisabled: boolean,
savingIsDisabled: boolean, savingIsDisabled: boolean,
onDiscard: () => *, onDiscard: () => *,
onSave: ({ onSave: ({
@ -99,6 +100,7 @@ class Header extends React.Component<Props> {
isPublishing, isPublishing,
isSaving, isSaving,
savingIsDisabled, savingIsDisabled,
publishingIsDisabled,
auth, auth,
} = this.props; } = this.props;
const canShareDocuments = const canShareDocuments =
@ -171,7 +173,7 @@ class Header extends React.Component<Props> {
<Button <Button
onClick={this.handlePublish} onClick={this.handlePublish}
title="Publish document" title="Publish document"
disabled={savingIsDisabled} disabled={publishingIsDisabled}
small small
> >
{isPublishing ? 'Publishing…' : 'Publish'} {isPublishing ? 'Publishing…' : 'Publish'}

View File

@ -522,7 +522,6 @@ router.post('documents.create', auth(), async ctx => {
index, index,
} = ctx.body; } = ctx.body;
ctx.assertUuid(collectionId, 'collectionId must be an uuid'); ctx.assertUuid(collectionId, 'collectionId must be an uuid');
ctx.assertPresent(title, 'title is required');
ctx.assertPresent(text, 'text is required'); ctx.assertPresent(text, 'text is required');
if (parentDocumentId) { if (parentDocumentId) {
ctx.assertUuid(parentDocumentId, 'parentDocumentId must be an uuid'); ctx.assertUuid(parentDocumentId, 'parentDocumentId must be an uuid');