save page

packages/app/src/client/services/page-operation.ts

@@ -1,12 +1,13 @@
 import { SubscriptionStatusType } from '@growi/core';
 import urljoin from 'url-join';
 
+import { OptionsToSave } from '~/interfaces/editor-settings';
+import loggerFactory from '~/utils/logger';
+
 import { toastError } from '../util/apiNotification';
 import { apiPost } from '../util/apiv1-client';
 import { apiv3Post, apiv3Put } from '../util/apiv3-client';
-import { EditorMode } from '~/stores/ui';
 
-import loggerFactory from '~/utils/logger';
 const logger = loggerFactory('growi:services:page-operation');
 
 export const toggleSubscribe = async(pageId: string, currentStatus: SubscriptionStatusType | undefined): Promise<void> => {
@@ -96,8 +97,7 @@ export const resumeRenameOperation = async(pageId: string): Promise<void> => {
 };
 
 
-
-export const createPage = async(pagePath, markdown, tmpParams) => {
+export const createPage = async(pagePath, markdown, tmpParams): Promise<any> => {
   // clone
   const params = Object.assign(tmpParams, {
     path: pagePath,
@@ -108,9 +108,9 @@ export const createPage = async(pagePath, markdown, tmpParams) => {
   const { page, tags, revision } = res.data;
 
   return { page, tags, revision };
-}
+};
 
-export const updatePage = async(pageId, revisionId, markdown, tmpParams) => {
+export const updatePage = async(pageId: string, revisionId: string, markdown: string, tmpParams): Promise<any> => {
   // clone
   const params = Object.assign(tmpParams, {
     page_id: pageId,
@@ -123,38 +123,52 @@ export const updatePage = async(pageId, revisionId, markdown, tmpParams) => {
     throw new Error(res.error);
   }
   return res;
+};
+
+type PageInfo= {
+  pageId: string | null | undefined,
+  path: string | null | undefined,
+  revisionId: string | null | undefined,
 }
 
 
-export const saveAndReload = async(optionsToSave, editorMode, pageInfo) => {
+export const saveAndReload = async(optionsToSave: OptionsToSave, pageInfo: PageInfo, markdown: string) => {
+  console.log({ optionsToSave, pageInfo, markdown });
+  // const { getComponentInstance } = useComponentInstances();
+
   if (optionsToSave == null) {
     const msg = '\'saveAndReload\' requires the \'optionsToSave\' param';
     throw new Error(msg);
   }
 
-  if (editorMode == null) {
-    logger.warn('\'saveAndReload\' requires the \'editorMode\' param');
-    return;
-  }
+  // if (editorMode == null) {
+  //   logger.warn('\'saveAndReload\' requires the \'editorMode\' param');
+  //   return;
+  // }
 
   const { pageId, path, revisionId } = pageInfo;
   // const { pageId, path } = this.state;
   // let { revisionId } = this.state;
 
+  if (path == null) {
+    return;
+  }
+
   const options = Object.assign({}, optionsToSave);
 
-  let markdown;
-  if (editorMode === EditorMode.HackMD) {
-    // const pageEditorByHackmd = this.appContainer.getComponentInstance('PageEditorByHackmd');
-    // markdown = await pageEditorByHackmd.getMarkdown();
-    // // set option to sync
-    // options.isSyncRevisionToHackmd = true;
-    // revisionId = this.state.revisionIdHackmdSynced;
-  }
-  else {
-    // const pageEditor = this.appContainer.getComponentInstance('PageEditor');
-    // markdown = pageEditor.getMarkdown();
-  }
+  // let markdown;
+  // if (editorMode === EditorMode.HackMD) {
+  // const pageEditorByHackmd = this.appContainer.getComponentInstance('PageEditorByHackmd');
+  // markdown = await pageEditorByHackmd.getMarkdown();
+  // // set option to sync
+  // options.isSyncRevisionToHackmd = true;
+  // revisionId = this.state.revisionIdHackmdSynced;
+  // }
+  // else {
+  // const pageEditor = this.appContainer.getComponentInstance('PageEditor');
+  // const pageEditor = getComponentInstance('PageEditor');
+  // markdown = pageEditor.getMarkdown();
+  // }
 
   let res;
   if (pageId == null) {
@@ -166,9 +180,7 @@ export const saveAndReload = async(optionsToSave, editorMode, pageInfo) => {
 
   // const editorContainer = this.appContainer.getContainer('EditorContainer');
   // editorContainer.clearDraft(path);
-  window.location.href = path;
+  // window.location.href = path;
 
   return res;
-}
-
-
+};

packages/app/src/client/util/editor.ts

@@ -1,11 +1,4 @@
-type OptionsToSave = {
-  isSlackEnabled: boolean;
-  slackChannels: string;
-  grant: number;
-  pageTags: string[] | null;
-  grantUserGroupId?: string | null;
-  grantUserGroupName?: string | null;
-};
+import { OptionsToSave } from '~/interfaces/editor-settings';
 
 export const getOptionsToSave = (
     isSlackEnabled: boolean,

packages/app/src/components/PageEditor.tsx

@@ -8,6 +8,8 @@ import { envUtils } from '@growi/core';
 import detectIndent from 'detect-indent';
 import { throttle, debounce } from 'throttle-debounce';
 
+import { saveAndReload } from '~/client/services/page-operation';
+
 // import AppContainer from '~/client/services/AppContainer';
 // import EditorContainer from '~/client/services/EditorContainer';
 // import PageContainer from '~/client/services/PageContainer';
@@ -101,17 +103,22 @@ const PageEditor = (props: Props): JSX.Element => {
   const { data: isUploadableFile } = useIsUploadableFile();
   const { data: isUploadableImage } = useIsUploadableImage();
   const { data: currentPage } = useSWRxCurrentPage();
+  // const { registerComponentInstance } = useComponentInstances();
 
   const { data: rendererOptions } = usePreviewOptions();
 
   const [markdown, setMarkdown] = useState<string>('');
 
+  console.log('mark', markdown);
+
   useEffect(() => {
     if (currentPage != null) {
       setMarkdown(currentPage.revision?.body);
     }
   }, [currentPage, currentPage?.revision?.body]);
 
+  const slackChannels = useMemo(() => (slackChannelsData ? slackChannelsData.toString() : ''), []);
+
 
   const editorRef = useRef<EditorRef>(null);
   const previewRef = useRef<HTMLDivElement>(null);
@@ -136,8 +143,6 @@ const PageEditor = (props: Props): JSX.Element => {
       return;
     }
 
-    const slackChannels = slackChannelsData ? slackChannelsData.toString() : '';
-
     const optionsToSave = getOptionsToSave(
       isSlackEnabled ?? false, slackChannels,
       grantData.grant, grantData.grantedGroup?.id, grantData.grantedGroup?.name,
@@ -316,16 +321,6 @@ const PageEditor = (props: Props): JSX.Element => {
   const scrollEditorByPreviewScrollWithThrottle = useMemo(() => throttle(20, scrollEditorByPreviewScroll), [scrollEditorByPreviewScroll]);
 
 
-  // register dummy instance to get markdown
-  useEffect(() => {
-    const pageEditorInstance = {
-      getMarkdown: () => {
-        return markdown;
-      },
-    };
-    // appContainer.registerComponentInstance('PageEditor', pageEditorInstance);
-  }, [markdown]);
-
   // initial caret line
   useEffect(() => {
     if (editorRef.current != null) {
@@ -350,6 +345,29 @@ const PageEditor = (props: Props): JSX.Element => {
     };
   }, []);
 
+
+  const saveAndReloadHandler = useCallback(async() => {
+    const grant = grantData?.grant;
+    const grantedGroup = grantData?.grantedGroup;
+
+    if (isSlackEnabled == null || grantedGroup == null) {
+      return;
+    }
+
+    console.log('markdown_saveAndReloadHandler', markdown);
+    const optionsToSave = getOptionsToSave(isSlackEnabled, slackChannels, grant || 1, grantedGroup.id, grantedGroup.name, pageTags || []);
+    await saveAndReload(optionsToSave, { pageId, path: currentPagePath, revisionId: currentPage?.revision._id }, markdown);
+  }, [currentPage?.revision._id, currentPagePath, grantData?.grant, grantData?.grantedGroup, isSlackEnabled, markdown, pageId, pageTags, slackChannels]);
+
+  // set handler to save and reload Page
+  useEffect(() => {
+    globalEmitter.on('saveAndReload', saveAndReloadHandler);
+
+    return function cleanup() {
+      globalEmitter.removeListener('saveAndReload', saveAndReloadHandler);
+    };
+  }, [saveAndReloadHandler]);
+
   // set handler to focus
   useEffect(() => {
     if (editorRef.current != null && editorMode === EditorMode.Editor) {

packages/app/src/components/SavePageControls.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import EventEmitter from 'events';
+
 import { pagePathUtils } from '@growi/core';
 import { NullableBoolean } from 'aws-sdk/clients/synthetics';
 import { useTranslation } from 'next-i18next';
@@ -10,16 +12,19 @@ import {
 
 // import PageContainer from '~/client/services/PageContainer';
 import { getOptionsToSave } from '~/client/util/editor';
+import { CustomWindow } from '~/interfaces/global';
 import {
   useCurrentPagePath, useIsEditable, useCurrentPageId, useIsAclEnabled,
 } from '~/stores/context';
 import { usePageTagsForEditors, useIsEnabledUnsavedWarning } from '~/stores/editor';
+import { useSWRxCurrentPage } from '~/stores/page';
 import {
   useEditorMode, useSelectedGrant,
 } from '~/stores/ui';
 import loggerFactory from '~/utils/logger';
 
 import GrantSelector from './SavePageControls/GrantSelector';
+
 // import { withUnstatedContainers } from './UnstatedUtils';
 
 const logger = loggerFactory('growi:SavePageControls');
@@ -28,7 +33,7 @@ type Props = {
   // pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
 
   // TODO: remove this when omitting unstated is completed
-  // editorMode: string,
+  // editorMode?: string,
   isSlackEnabled: boolean,
   slackChannels: string,
   // mutateGrant?: () => void,
@@ -43,7 +48,6 @@ export const SavePageControls = (props: Props): JSX.Element | null => {
   const { t } = useTranslation();
   const { data: currentPagePath } = useCurrentPagePath();
   const { data: isEditable } = useIsEditable();
-  const { data: editorMode } = useEditorMode();
   const { data: isAclEnabled } = useIsAclEnabled();
   const { data: grantData, mutate: mutateGrant } = useSelectedGrant();
   const { data: pageId } = useCurrentPageId();
@@ -51,7 +55,7 @@ export const SavePageControls = (props: Props): JSX.Element | null => {
   const { mutate: mutateIsEnabledUnsavedWarning } = useIsEnabledUnsavedWarning();
 
 
-  if (isEditable == null || editorMode == null || isAclEnabled == null) {
+  if (isEditable == null || isAclEnabled == null) {
     return null;
   }
 
@@ -79,8 +83,7 @@ export const SavePageControls = (props: Props): JSX.Element | null => {
 
     try {
       // save
-      const optionsToSave = getOptionsToSave(isSlackEnabled, slackChannels, grant, grantedGroup?.id, grantedGroup?.name, pageTags || []);
-      // await pageContainer.saveAndReload(optionsToSave, this.props.editorMode);
+      (window as CustomWindow).globalEmitter.emit('saveAndReload');
     }
     catch (error) {
       logger.error('failed to save', error);

packages/app/src/interfaces/editor-settings.ts

@@ -29,3 +29,12 @@ export interface IEditorSettings {
   autoFormatMarkdownTable: boolean,
   textlintSettings: undefined | ITextlintSettings;
 }
+
+export type OptionsToSave = {
+  isSlackEnabled: boolean;
+  slackChannels: string;
+  grant: number;
+  pageTags: string[] | null;
+  grantUserGroupId?: string | null;
+  grantUserGroupName?: string | null;
+};

packages/app/src/stores/editor.tsx

@@ -112,32 +112,3 @@ export const usePageTagsForEditors = (pageId: Nullable<string>): SWRResponse<str
 export const useIsEnabledUnsavedWarning = (): SWRResponse<boolean, Error> => {
   return useStaticSWR<boolean, Error>('isEnabledUnsavedWarning', undefined, { fallbackData: false });
 };
-
-
-const useComponentInstances = (): SWRResponse<{}, Error> => {
-  return useStaticSWR(
-    'componentInstances',
-    undefined,
-    { fallbackData: {} },
-  );
-};
-
-export const registerComponentInstance = (id: string, instance) => {
-  const { data: componentInstancesData, mutate: mutateComponentInstances } = useComponentInstances();
-
-  if (instance == null) {
-    throw new Error('The specified instance must not be null');
-  }
-
-  mutateComponentInstances({...componentInstancesData, [id]: instance});
-}
-
-// Get registered React component instance
-export const getComponentInstance = (id: string) => {
-  const { data: componentInstancesData } = useComponentInstances();
-
-  if(componentInstancesData == null){
-    return {}
-  }
-  return componentInstancesData[id];
-}