fb wip

src/client/js/components/PageCreateModal.jsx

@@ -6,17 +6,16 @@ import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 
 import { withTranslation } from 'react-i18next';
 import { format } from 'date-fns';
-// import urljoin from 'url-join';
 
 import {
-  userPageRoot, isCreatablePage, generateEditorPath,
+  userPageRoot, isCreatablePage, generateEditorPath, joinUrl,
 } from '@commons/util/path-utils';
 import { pathUtils } from 'growi-commons';
 
 import AppContainer from '../services/AppContainer';
 import NavigationContainer from '../services/NavigationContainer';
 import { withUnstatedContainers } from './UnstatedUtils';
-// import { toastError } from '../util/apiNotification';
+import { toastError } from '../util/apiNotification';
 
 import PagePathAutoComplete from './PagePathAutoComplete';
 
@@ -77,12 +76,12 @@ const PageCreateModal = (props) => {
    * join path, check if creatable, then redirect
    * @param {string} paths
    */
-  function joinCheckRedirect(...paths) {
-    // const joinedUrl = encodeURI(urljoin(...paths));
-    // if (!isCreatablePage(joinedUrl)) {
-    //   toastError(new Error('Invalid characters found on new page path'));
-    //   return;
-    // }
+  function redirectToEditor(...paths) {
+    const joinedUrl = joinUrl(...paths);
+    if (!isCreatablePage(joinedUrl)) {
+      toastError(new Error('Invalid characters found on new page path'));
+      return;
+    }
     window.location.href = generateEditorPath(...paths);
   }
 
@@ -94,14 +93,14 @@ const PageCreateModal = (props) => {
     if (tmpTodayInput1 === '') {
       tmpTodayInput1 = t('Memo');
     }
-    joinCheckRedirect(userPageRootPath, tmpTodayInput1, now, todayInput2);
+    redirectToEditor(userPageRootPath, tmpTodayInput1, now, todayInput2);
   }
 
   /**
    * access input page
    */
   function createInputPage() {
-    joinCheckRedirect(pageNameInput);
+    redirectToEditor(pageNameInput);
   }
 
   function ppacInputChangeHandler(value) {
@@ -117,14 +116,14 @@ const PageCreateModal = (props) => {
    */
   function createTemplatePage(e) {
     const pageName = (template === 'children') ? '_template' : '__template';
-    joinCheckRedirect(pathname, pageName);
+    redirectToEditor(pathname, pageName);
   }
 
   function renderCreateTodayForm() {
     return (
       <div className="row">
         <fieldset className="col-12 mb-4">
-          <h3 className="grw-modal-head pb-2">{ t("Create today's") }</h3>
+          <h3 className="grw-modal-head pb-2">{t("Create today's")}</h3>
 
           <div className="d-sm-flex align-items-center justify-items-between">
 
@@ -155,7 +154,7 @@ const PageCreateModal = (props) => {
 
             <div className="d-flex justify-content-end mt-1 mt-sm-0">
               <button type="button" className="grw-btn-create-page btn btn-outline-primary rounded-pill text-nowrap ml-3" onClick={createTodayPage}>
-                <i className="icon-fw icon-doc"></i>{ t('Create') }
+                <i className="icon-fw icon-doc"></i>{t('Create')}
               </button>
             </div>
 
@@ -170,7 +169,7 @@ const PageCreateModal = (props) => {
     return (
       <div className="row">
         <fieldset className="col-12 mb-4">
-          <h3 className="grw-modal-head pb-2">{ t('Create under') }</h3>
+          <h3 className="grw-modal-head pb-2">{t('Create under')}</h3>
 
           <div className="d-sm-flex align-items-center justify-items-between">
 
@@ -201,7 +200,7 @@ const PageCreateModal = (props) => {
 
             <div className="d-flex justify-content-end mt-1 mt-sm-0">
               <button type="button" className="grw-btn-create-page btn btn-outline-primary rounded-pill text-nowrap ml-3" onClick={createInputPage}>
-                <i className="icon-fw icon-doc"></i>{ t('Create') }
+                <i className="icon-fw icon-doc"></i>{t('Create')}
               </button>
             </div>
 
@@ -218,7 +217,7 @@ const PageCreateModal = (props) => {
         <fieldset className="col-12">
 
           <h3 className="grw-modal-head pb-2">
-            { t('template.modal_label.Create template under')}<br />
+            {t('template.modal_label.Create template under')}<br />
             <code className="h6">{pathname}</code>
           </h3>
 
@@ -226,18 +225,18 @@ const PageCreateModal = (props) => {
 
             <div id="dd-template-type" className="dropdown flex-fill">
               <button id="template-type" type="button" className="btn btn-secondary btn dropdown-toggle w-100" data-toggle="dropdown">
-                {template == null && t('template.option_label.select') }
+                {template == null && t('template.option_label.select')}
                 {template === 'children' && t('template.children.label')}
                 {template === 'decendants' && t('template.decendants.label')}
               </button>
               <div className="dropdown-menu" aria-labelledby="userMenu">
                 <button className="dropdown-item" type="button" onClick={() => onChangeTemplateHandler('children')}>
-                  { t('template.children.label') } (_template)<br className="d-block d-md-none" />
-                  <small className="text-muted text-wrap">- { t('template.children.desc') }</small>
+                  {t('template.children.label')} (_template)<br className="d-block d-md-none" />
+                  <small className="text-muted text-wrap">- {t('template.children.desc')}</small>
                 </button>
                 <button className="dropdown-item" type="button" onClick={() => onChangeTemplateHandler('decendants')}>
-                  { t('template.decendants.label') } (__template) <br className="d-block d-md-none" />
-                  <small className="text-muted">- { t('template.decendants.desc') }</small>
+                  {t('template.decendants.label')} (__template) <br className="d-block d-md-none" />
+                  <small className="text-muted">- {t('template.decendants.desc')}</small>
                 </button>
               </div>
             </div>
@@ -248,7 +247,7 @@ const PageCreateModal = (props) => {
                 className={`grw-btn-create-page btn btn-outline-primary rounded-pill text-nowrap ml-3 ${template == null && 'disabled'}`}
                 onClick={createTemplatePage}
               >
-                <i className="icon-fw icon-doc"></i>{ t('Edit') }
+                <i className="icon-fw icon-doc"></i>{t('Edit')}
               </button>
             </div>
 
@@ -268,7 +267,7 @@ const PageCreateModal = (props) => {
       autoFocus={false}
     >
       <ModalHeader tag="h4" toggle={navigationContainer.closePageCreateModal} className="bg-primary text-light">
-        { t('New Page') }
+        {t('New Page')}
       </ModalHeader>
       <ModalBody>
         {renderCreateTodayForm()}

src/lib/util/path-utils.js

@@ -78,13 +78,9 @@ const isCreatablePage = (path) => {
  * @returns {string}
  */
 function joinUrl(...paths) {
-  const pathArray = [...paths]
-    .map(str => str.replace(/^\/+|\/+$|\s/g, ''));
-
-  const queries = new Set(pathArray.filter(str => /(\?|\&)([^?&=]+)\=([^?&=]+)/.test(str)));
-
+  const pathArray = [...paths].map(str => encodeURI(str.replace(/^\/+|\/+$|\s/g, '')));
+  const queries = new Set(pathArray.filter(str => /(\?|&)([^?&=]+)=([^?&=]+)/.test(str)));
   const hashes = new Set(pathArray.filter(str => /^#/.test(str)));
-
   if (queries.size > 1 || hashes.size > 1) {
     throw new Error('Do not enter more than 1 query string or hash');
   }
@@ -103,8 +99,8 @@ function joinUrl(...paths) {
  * @param {string} path
  * @returns {string}
  */
-function generateEditorPath(...paths) {
-  return joinUrl(...paths, '#edit');
+function generateEditorPath(path) {
+  return `${path}#edit`;
 }
 
 /**
@@ -155,6 +151,7 @@ module.exports = {
   isUserPage,
   isCreatablePage,
   generateEditorPath,
+  joinUrl,
   userPageRoot,
   convertToNewAffiliationPath,
   encodeSpaces,