Worked

packages/app/src/components/PageCreateModal.jsx

@@ -1,5 +1,5 @@
 
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import { Modal, ModalHeader, ModalBody } from 'reactstrap';
@@ -13,7 +13,8 @@ import { pagePathUtils, pathUtils } from '@growi/core';
 import AppContainer from '~/client/services/AppContainer';
 import { withUnstatedContainers } from './UnstatedUtils';
 import { toastError } from '~/client/util/apiNotification';
-import { usePageCreateModalOpened } from '~/stores/ui';
+import { useCurrentPagePath } from '~/stores/context';
+import { usePageCreateModalOpened, usePageCreateModalPagePath } from '~/stores/ui';
 
 import PagePathAutoComplete from './PagePathAutoComplete';
 
@@ -25,10 +26,12 @@ const PageCreateModal = (props) => {
   const { t, appContainer } = props;
 
   const { data: isPageCreateModalOpened, mutate: mutatePageCreateModalOpened } = usePageCreateModalOpened();
+  const { data: currentPagePath } = useCurrentPagePath();
+  const { data: selectedPagePath } = usePageCreateModalPagePath();
 
   const config = appContainer.getConfig();
   const isReachable = config.isSearchServiceReachable;
-  const pathname = decodeURI(window.location.pathname);
+  const pathname = selectedPagePath || currentPagePath;
   const userPageRootPath = userPageRoot(appContainer.currentUser);
   const pageNameInputInitialValue = isCreatablePage(pathname) ? pathUtils.addTrailingSlash(pathname) : '/';
   const now = format(new Date(), 'yyyy/MM/dd');
@@ -38,6 +41,11 @@ const PageCreateModal = (props) => {
   const [pageNameInput, setPageNameInput] = useState(pageNameInputInitialValue);
   const [template, setTemplate] = useState(null);
 
+  // ensure pageNameInput is synced with selectedPagePath || currentPagePath
+  useEffect(() => {
+    setPageNameInput(isCreatablePage(pathname) ? pathUtils.addTrailingSlash(pathname) : '/');
+  }, [pathname]);
+
   function transitBySubmitEvent(e, transitHandler) {
     // prevent page transition by submit
     e.preventDefault();

packages/app/src/components/Sidebar/PageTree/Item.tsx

@@ -6,6 +6,7 @@ import nodePath from 'path';
 import { ItemNode } from './ItemNode';
 import { useSWRxPageChildren } from '../../../stores/page-listing';
 import { usePageId } from '../../../stores/context';
+import { usePageCreateModalOpened, usePageCreateModalPagePath } from '../../../stores/ui';
 
 
 interface ItemProps {
@@ -25,10 +26,19 @@ const markTarget = (children: ItemNode[], targetId: string): void => {
   return;
 };
 
-const ItemContol: FC = memo(() => {
-  const onClickHandler = useCallback((e) => {
-    console.log('Clicked!');
-  }, []);
+type ItemControlProps = {
+  onClickOpenModalButtonHandler?(): void
+}
+
+const ItemControl: FC<ItemControlProps> = memo((props: ItemControlProps) => {
+  const onClickHandler = () => {
+    const { onClickOpenModalButtonHandler: handler } = props;
+    if (handler == null) {
+      return;
+    }
+
+    handler();
+  };
 
   return (
     <>
@@ -41,8 +51,7 @@ const ItemContol: FC = memo(() => {
       </button>
       <button
         type="button"
-        className="btn-link nav-link dropdown-toggle dropdown-toggle-no-caret border-0 rounded grw-btn-page-management py-0"
-        data-toggle="dropdown"
+        className="btn-link nav-link border-0 rounded grw-btn-page-management py-0"
         onClick={onClickHandler}
       >
         <i className="fa fa-plus-circle text-muted"></i>
@@ -72,6 +81,9 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
   const { data: targetId } = usePageId();
   const { data, error } = useSWRxPageChildren(isOpen ? page._id : null);
 
+  const { mutate: mutatePageCreateModalOpened } = usePageCreateModalOpened();
+  const { mutate: mutateSelectedPagePath } = usePageCreateModalPagePath();
+
   const hasChildren = useCallback((): boolean => {
     return currentChildren != null && currentChildren.length > 0;
   }, [currentChildren]);
@@ -80,6 +92,12 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
     setIsOpen(!isOpen);
   }, [isOpen]);
 
+  const onClickOpenModalButtonHandler = useCallback(async() => {
+    await mutateSelectedPagePath(page.path);
+
+    mutatePageCreateModalOpened(true);
+  }, [mutateSelectedPagePath, mutatePageCreateModalOpened, page]);
+
   // didMount
   useEffect(() => {
     if (hasChildren()) setIsOpen(true);
@@ -129,7 +147,7 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
           <ItemCount />
         </div>
         <div className="grw-pagetree-control">
-          <ItemContol />
+          <ItemControl onClickOpenModalButtonHandler={onClickOpenModalButtonHandler} />
         </div>
       </div>
       {

packages/app/src/stores/ui.tsx

@@ -238,3 +238,8 @@ export const usePageCreateModalOpened = (isOpened?: boolean): SWRResponse<boolea
   const initialData = false;
   return useStaticSWR('isPageCreateModalOpened', isOpened || null, { fallbackData: initialData });
 };
+
+export const usePageCreateModalPagePath = (path?: string): SWRResponse<string, Error> => {
+  const initialData = '';
+  return useStaticSWR('pageCreateModalPagePath', path || null, { fallbackData: initialData });
+};