refactor NewPageNameInput

src/client/js/app.js

@@ -281,9 +281,9 @@ const componentMappings = {
   'bookmark-button': <BookmarkButton pageId={pageId} crowi={crowi} />,
   'bookmark-button-lg': <BookmarkButton pageId={pageId} crowi={crowi} size="lg" />,
 
-  'create-page-name-input': <NewPageNameInput crowi={crowi} parentPageName={pagePath} />,
-  'rename-page-name-input': <NewPageNameInput crowi={crowi} parentPageName={pagePath} />,
-  'duplicate-page-name-input': <NewPageNameInput crowi={crowi} parentPageName={pagePath} />,
+  'create-page-name-input': <NewPageNameInput crowi={crowi} initializedPath={pagePath} addSlashToTheEnd={true} />,
+  'rename-page-name-input': <NewPageNameInput crowi={crowi} initializedPath={pagePath} />,
+  'duplicate-page-name-input': <NewPageNameInput crowi={crowi} initializedPath={pagePath} />,
 
 };
 // additional definitions if data exists

src/client/js/components/NewPageNameInput.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import * as pagePathUtils from '@commons/util/page-path-utils';
 import SearchTypeahead from './SearchTypeahead';
 
 export default class NewPageNameInput extends React.Component {
@@ -16,7 +17,7 @@ export default class NewPageNameInput extends React.Component {
 
     this.onSearchError = this.onSearchError.bind(this);
     this.onSubmit = this.onSubmit.bind(this);
-    this.getParentPageName = this.getParentPageName.bind(this);
+    this.getKeywordOnInit = this.getKeywordOnInit.bind(this);
   }
 
   componentDidMount() {
@@ -39,16 +40,10 @@ export default class NewPageNameInput extends React.Component {
     $(form).submit();
   }
 
-  getParentPageName(path) {
-    if (path == '/') {
-      return path;
-    }
-
-    if (path.match(/.+\/$/)) {
-      return path;
-    }
-
-    return path + '/';
+  getKeywordOnInit(path) {
+    return this.props.addSlashToTheEnd
+      ? pagePathUtils.addSlashToTheEnd(path)
+      : pagePathUtils.removeLastSlash(path);
   }
 
   render() {
@@ -63,9 +58,10 @@ export default class NewPageNameInput extends React.Component {
           crowi={this.crowi}
           onSearchError={this.onSearchError}
           onSubmit={this.onSubmit}
+          inputName='new_path'
           emptyLabel={emptyLabel}
           placeholder="Input page name"
-          keywordOnInit={this.getParentPageName(this.props.parentPageName)}
+          keywordOnInit={this.getKeywordOnInit(this.props.initializedPath)}
         />
       </div>
     );
@@ -73,10 +69,11 @@ export default class NewPageNameInput extends React.Component {
 }
 
 NewPageNameInput.propTypes = {
-  crowi:          PropTypes.object.isRequired,
-  parentPageName: PropTypes.string,
+  crowi:            PropTypes.object.isRequired,
+  initializedPath:  PropTypes.string,
+  addSlashToTheEnd: PropTypes.bool,
 };
 
 NewPageNameInput.defaultProps = {
-  parentPageName: '',
+  initializedPath: '/',
 };

src/client/js/components/SearchTypeahead.js

@@ -150,13 +150,17 @@ export default class SearchTypeahead extends React.Component {
     const defaultSelected = (this.props.keywordOnInit != '')
       ? [{path: this.props.keywordOnInit}]
       : [];
+    const inputProps = { autoComplete: 'off' };
+    if (this.props.inputName != null) {
+      inputProps.name = this.props.inputName;
+    }
 
     return (
       <div className="search-typeahead">
         <AsyncTypeahead
           {...this.props}
           ref="typeahead"
-          inputProps={{autoComplete: 'off'}}
+          inputProps={inputProps}
           isLoading={this.state.isLoading}
           labelKey="path"
           minLength={0}
@@ -188,6 +192,7 @@ SearchTypeahead.propTypes = {
   onChange:        PropTypes.func,
   onSubmit:        PropTypes.func,
   onInputChange:   PropTypes.func,
+  inputName:       PropTypes.string,
   emptyLabel:      PropTypes.string,
   placeholder:     PropTypes.string,
   keywordOnInit:   PropTypes.string,

src/lib/util/page-path-utils.js

@@ -18,7 +18,36 @@ function encodePagePath(path) {
   return paths.join('/');
 }
 
+function matchEndWithSlash(path) {
+  // https://regex101.com/r/Z21fEd/1
+  return path.match(/(.+?)(\/)?$/);
+}
+
+function isEndWithSlash(path) {
+  const match = matchEndWithSlash(path);
+  return (match[2] != null);
+}
+
+function addSlashToTheEnd(path) {
+  if (!isEndWithSlash(path)) {
+    return `${path}/`;
+  }
+  return path;
+}
+
+function removeLastSlash(path) {
+  if (path === '/') {
+    return path;
+  }
+
+  const match = matchEndWithSlash(path);
+  return match[1];
+}
+
 module.exports = {
-  encodePagePath: encodePagePath,
-  encodePagesPath: encodePagesPath
+  encodePagePath,
+  encodePagesPath,
+  isEndWithSlash,
+  addSlashToTheEnd,
+  removeLastSlash,
 };