burdy
Version:
Open Source Headless Platform
194 lines (193 loc) • 12.5 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const hoc_1 = require("../../../helpers/hoc");
const react_router_1 = require("react-router");
const snackbar_1 = require("../../../context/snackbar");
const react_2 = require("@fluentui/react");
const query_string_1 = __importDefault(require("query-string"));
const posts_context_1 = require("../../posts/context/posts.context");
const editor_command_bar_1 = __importDefault(require("../components/editor-command-bar"));
const post_publish_dialog_1 = __importDefault(require("../../posts/components/post-publish-dialog"));
const post_unpublish_dialog_1 = __importDefault(require("../../posts/components/post-unpublish-dialog"));
const post_settings_dialog_1 = __importDefault(require("../../posts/components/post-settings-dialog"));
const content_type_update_panel_1 = __importDefault(require("../../content-types/components/content-type-update-panel"));
const post_versions_select_panel_1 = __importDefault(require("../../posts/components/post-versions-select-panel"));
const post_versions_delete_dialog_1 = __importDefault(require("../../posts/components/post-versions-delete-dialog"));
const post_versions_restore_dialog_1 = __importDefault(require("../../posts/components/post-versions-restore-dialog"));
const react_hook_form_1 = require("react-hook-form");
const preview_editor_1 = __importDefault(require("../components/preview-editor"));
const headless_editor_1 = __importDefault(require("../components/headless-editor"));
const lodash_1 = __importDefault(require("lodash"));
const utility_1 = require("../../../helpers/utility");
const hooks_1 = require("../../../helpers/hooks");
const EditorPage = () => {
const params = (0, react_router_1.useParams)();
const history = (0, react_router_1.useHistory)();
const location = (0, react_router_1.useLocation)();
const search = query_string_1.default.parse(location === null || location === void 0 ? void 0 : location.search);
const allowedPaths = (0, hooks_1.useAllowedPaths)();
const { getPost, getVersionsCount, updatePostContent, stateData, setStateData, post, setPost } = (0, posts_context_1.usePosts)();
const [device, setDevice] = (0, react_1.useState)('desktop');
const [loading, setLoading] = (0, react_1.useState)(true);
const [message, setMessage] = (0, react_1.useState)(null);
const [enableEditor, setEnableEditor] = (0, react_1.useState)();
const { openSnackbar } = (0, snackbar_1.useSnackbar)();
const [editorType, setEditorType] = (0, react_1.useState)(null);
const [menuOpened, setMenuOpened] = (0, react_1.useState)(true);
const methods = (0, react_hook_form_1.useForm)({
mode: 'all',
shouldUnregister: true
});
(0, react_1.useEffect)(() => {
let id;
if (search === null || search === void 0 ? void 0 : search.action) {
setMessage(search === null || search === void 0 ? void 0 : search.action);
id = setTimeout(() => {
var _a;
setMessage(null);
const search = query_string_1.default.parse((_a = window === null || window === void 0 ? void 0 : window.location) === null || _a === void 0 ? void 0 : _a.search);
history.push({
search: query_string_1.default.stringify(Object.assign(Object.assign({}, (search || {})), { action: undefined }))
});
}, 5000);
}
else {
setMessage(null);
}
return () => {
if (id) {
clearTimeout(id);
}
};
}, [search === null || search === void 0 ? void 0 : search.action]);
(0, react_1.useEffect)(() => {
var _a;
if (post) {
methods.reset((_a = post === null || post === void 0 ? void 0 : post.meta) === null || _a === void 0 ? void 0 : _a.content);
setLoading(false);
if ((post === null || post === void 0 ? void 0 : post.type) === 'page' ||
(post === null || post === void 0 ? void 0 : post.type) === 'post' ||
(post === null || post === void 0 ? void 0 : post.type) === 'hierarchical_post' ||
(post === null || post === void 0 ? void 0 : post.type) === 'post_version') {
setEnableEditor(!!(0, utility_1.testPaths)(allowedPaths, post === null || post === void 0 ? void 0 : post.slugPath));
}
}
}, [post === null || post === void 0 ? void 0 : post.id, post === null || post === void 0 ? void 0 : post.slugPath, post === null || post === void 0 ? void 0 : post.versionId]);
(0, react_1.useEffect)(() => {
setPost(null);
setLoading(true);
getPost.execute(params === null || params === void 0 ? void 0 : params.postId, {
versionId: search.versionId
});
}, [params === null || params === void 0 ? void 0 : params.postId, search.versionId]);
(0, react_1.useEffect)(() => {
if (post === null || post === void 0 ? void 0 : post.id) {
const values = lodash_1.default.cloneDeep(methods === null || methods === void 0 ? void 0 : methods.getValues());
setLoading(true);
setEditorType(null);
setTimeout(() => {
methods.reset(values);
if ((search === null || search === void 0 ? void 0 : search.editor) === 'preview' && (0, utility_1.testPaths)(allowedPaths, post === null || post === void 0 ? void 0 : post.slugPath)) {
setEditorType('preview');
}
else {
setEditorType('headless');
}
setLoading(false);
}, 200);
}
}, [search === null || search === void 0 ? void 0 : search.editor, post === null || post === void 0 ? void 0 : post.id]);
(0, react_1.useEffect)(() => {
if (updatePostContent === null || updatePostContent === void 0 ? void 0 : updatePostContent.result) {
openSnackbar({
message: 'Post updated successfully',
messageBarType: react_2.MessageBarType.success
});
}
}, [updatePostContent === null || updatePostContent === void 0 ? void 0 : updatePostContent.result]);
const handleSubmit = () => {
methods.handleSubmit((data) => {
updatePostContent.execute(post === null || post === void 0 ? void 0 : post.id, data);
}, () => {
openSnackbar({
message: 'Form has errors',
messageBarType: react_2.MessageBarType.severeWarning
});
})();
};
return (react_1.default.createElement("div", { className: 'page-wrapper' },
react_1.default.createElement(editor_command_bar_1.default, { loading: loading, handleSubmit: handleSubmit, device: device, onDeviceChange: (device) => {
setDevice(device);
}, enableEditor: enableEditor, menuOpened: menuOpened, toggleMenu: setMenuOpened, editor: editorType }),
react_1.default.createElement("div", { className: 'page-content' },
enableEditor && editorType === 'preview' && (react_1.default.createElement(preview_editor_1.default, { methods: methods, device: device, menuOpened: menuOpened, message: message, loading: loading })),
editorType === 'headless' && (react_1.default.createElement(headless_editor_1.default, { methods: methods, message: message, loading: loading }))),
react_1.default.createElement(post_settings_dialog_1.default, { onDismiss: () => setStateData('updatePostOpen', false), onUpdated: () => {
setStateData('updatePostOpen', false);
}, isOpen: stateData === null || stateData === void 0 ? void 0 : stateData.updatePostOpen, post: post }),
react_1.default.createElement(post_publish_dialog_1.default, { onDismiss: () => setStateData('publishPostOpen', false), onUpdated: () => {
setStateData('publishPostOpen', false);
}, handleContentSubmit: methods.handleSubmit, isOpen: stateData === null || stateData === void 0 ? void 0 : stateData.publishPostOpen, posts: [post] }),
react_1.default.createElement(post_unpublish_dialog_1.default, { onDismiss: () => setStateData('unpublishPostOpen', false), onUpdated: () => {
setStateData('unpublishPostOpen', false);
}, isOpen: stateData === null || stateData === void 0 ? void 0 : stateData.unpublishPostOpen, posts: [post] }),
react_1.default.createElement(content_type_update_panel_1.default, { isOpen: stateData === null || stateData === void 0 ? void 0 : stateData.updateContentTypeOpen, contentTypeId: post === null || post === void 0 ? void 0 : post.contentTypeId, onDismiss: () => {
setStateData('updateContentTypeOpen', false);
}, onUpdated: (data) => {
setPost(Object.assign(Object.assign({}, post), { contentType: data }));
setStateData('updateContentTypeOpen', false);
} }),
react_1.default.createElement(post_versions_select_panel_1.default, { isOpen: stateData === null || stateData === void 0 ? void 0 : stateData.versionsOpen, post: post, onDismiss: () => setStateData('versionsOpen', false), onSelect: (post) => {
history.push({
search: query_string_1.default.stringify(Object.assign(Object.assign({}, (query_string_1.default.parse(location.search) || {})), { versionId: post === null || post === void 0 ? void 0 : post.id }))
});
setStateData('versionsOpen', false);
}, onUpdate: () => {
getVersionsCount.execute(post === null || post === void 0 ? void 0 : post.id);
setLoading(true);
setPost(null);
getPost.execute(params === null || params === void 0 ? void 0 : params.postId);
setStateData('versionsOpen', false);
}, onDelete: () => {
getVersionsCount.execute(post === null || post === void 0 ? void 0 : post.id);
} }),
react_1.default.createElement(post_versions_delete_dialog_1.default, { isOpen: stateData === null || stateData === void 0 ? void 0 : stateData.versionsDeleteOpen, post: post, onDismiss: () => setStateData('versionsDeleteOpen', false), onDeleted: () => {
setStateData('versionsDeleteOpen', false);
history.push({
search: query_string_1.default.stringify(Object.assign(Object.assign({}, (query_string_1.default.parse(location.search) || {})), { versionId: undefined, action: 'version_deleted' }))
});
} }),
react_1.default.createElement(post_versions_restore_dialog_1.default, { isOpen: stateData === null || stateData === void 0 ? void 0 : stateData.versionRestoreOpen, post: post, onDismiss: () => setStateData('versionRestoreOpen', false), onRestored: () => {
setStateData('versionRestoreOpen', false);
history.push({
search: query_string_1.default.stringify(Object.assign(Object.assign({}, (query_string_1.default.parse(location.search) || {})), { versionId: undefined, action: 'version_restored' }))
});
setStateData('versionRestoreOpen', false);
} })));
};
exports.default = (0, hoc_1.composeWrappers)({
postsContext: posts_context_1.PostsContextProvider
})(EditorPage);