PageRenameModal.jsx 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. import React, { useState } from 'react';
  2. import PropTypes from 'prop-types';
  3. import {
  4. Modal, ModalHeader, ModalBody, ModalFooter,
  5. } from 'reactstrap';
  6. import { withTranslation } from 'react-i18next';
  7. import { withUnstatedContainers } from './UnstatedUtils';
  8. import AppContainer from '../services/AppContainer';
  9. import PageContainer from '../services/PageContainer';
  10. import ApiErrorMessage from './PageManagement/ApiErrorMessage';
  11. const PageRenameModal = (props) => {
  12. const {
  13. t, appContainer, pageContainer,
  14. } = props;
  15. const { path } = pageContainer.state;
  16. const { crowi } = appContainer.config;
  17. const [pageNameInput, setPageNameInput] = useState(path);
  18. const [errors, setErrors] = useState([]);
  19. const [isRenameRecursively, SetIsRenameRecursively] = useState(true);
  20. const [isRenameRedirect, SetIsRenameRedirect] = useState(false);
  21. const [isRenameMetadata, SetIsRenameMetadata] = useState(false);
  22. function changeIsRenameRecursivelyHandler() {
  23. SetIsRenameRecursively(!isRenameRecursively);
  24. }
  25. function changeIsRenameRedirectHandler() {
  26. SetIsRenameRedirect(!isRenameRedirect);
  27. }
  28. function changeIsRenameMetadataHandler() {
  29. SetIsRenameMetadata(!isRenameMetadata);
  30. }
  31. /**
  32. * change pageNameInput
  33. * @param {string} value
  34. */
  35. function inputChangeHandler(value) {
  36. setPageNameInput(value);
  37. }
  38. async function rename() {
  39. try {
  40. setErrors([]);
  41. const response = await pageContainer.rename(
  42. pageNameInput,
  43. isRenameRecursively,
  44. isRenameRedirect,
  45. isRenameMetadata,
  46. );
  47. const { page } = response.data;
  48. const url = new URL(page.path, 'https://dummy');
  49. url.searchParams.append('renamedFrom', path);
  50. if (isRenameRedirect) {
  51. url.searchParams.append('withRedirect', true);
  52. }
  53. window.location.href = `${url.pathname}${url.search}`;
  54. }
  55. catch (errs) {
  56. setErrors(errs);
  57. }
  58. }
  59. return (
  60. <Modal size="lg" isOpen={props.isOpen} toggle={props.onClose} className="grw-create-page">
  61. <ModalHeader tag="h4" toggle={props.onClose} className="bg-primary text-light">
  62. { t('modal_rename.label.Move/Rename page') }
  63. </ModalHeader>
  64. <ModalBody>
  65. <div className="form-group">
  66. <label>{ t('modal_rename.label.Current page name') }</label><br />
  67. <code>{ path }</code>
  68. </div>
  69. <div className="form-group">
  70. <label htmlFor="newPageName">{ t('modal_rename.label.New page name') }</label><br />
  71. <div className="input-group">
  72. <div className="input-group-prepend">
  73. <span className="input-group-text">{crowi.url}</span>
  74. </div>
  75. <form className="flex-fill" onSubmit={(e) => { e.preventDefault(); rename() }}>
  76. <input
  77. type="text"
  78. value={pageNameInput}
  79. className="form-control"
  80. onChange={e => inputChangeHandler(e.target.value)}
  81. required
  82. />
  83. </form>
  84. </div>
  85. </div>
  86. <div className="custom-control custom-checkbox custom-checkbox-warning">
  87. <input
  88. className="custom-control-input"
  89. name="recursively"
  90. id="cbRenameRecursively"
  91. type="checkbox"
  92. checked={isRenameRecursively}
  93. onChange={changeIsRenameRecursivelyHandler}
  94. />
  95. <label className="custom-control-label" htmlFor="cbRenameRecursively">
  96. { t('modal_rename.label.Recursively') }
  97. <p className="form-text text-muted mt-0">{ t('modal_rename.help.recursive') }</p>
  98. </label>
  99. </div>
  100. <div className="custom-control custom-checkbox custom-checkbox-success">
  101. <input
  102. className="custom-control-input"
  103. name="create_redirect"
  104. id="cbRenameRedirect"
  105. type="checkbox"
  106. checked={isRenameRedirect}
  107. onChange={changeIsRenameRedirectHandler}
  108. />
  109. <label className="custom-control-label" htmlFor="cbRenameRedirect">
  110. { t('modal_rename.label.Redirect') }
  111. <p className="form-text text-muted mt-0">{ t('modal_rename.help.redirect') }</p>
  112. </label>
  113. </div>
  114. <div className="custom-control custom-checkbox custom-checkbox-primary">
  115. <input
  116. className="custom-control-input"
  117. name="remain_metadata"
  118. id="cbRenameMetadata"
  119. type="checkbox"
  120. checked={isRenameMetadata}
  121. onChange={changeIsRenameMetadataHandler}
  122. />
  123. <label className="custom-control-label" htmlFor="cbRenameMetadata">
  124. { t('modal_rename.label.Do not update metadata') }
  125. <p className="form-text text-muted mt-0">{ t('modal_rename.help.metadata') }</p>
  126. </label>
  127. </div>
  128. </ModalBody>
  129. <ModalFooter>
  130. <ApiErrorMessage errors={errors} targetPath={pageNameInput} />
  131. <button type="button" className="btn btn-primary" onClick={rename}>Rename</button>
  132. </ModalFooter>
  133. </Modal>
  134. );
  135. };
  136. /**
  137. * Wrapper component for using unstated
  138. */
  139. const PageRenameModalWrapper = withUnstatedContainers(PageRenameModal, [AppContainer, PageContainer]);
  140. PageRenameModal.propTypes = {
  141. t: PropTypes.func.isRequired, // i18next
  142. appContainer: PropTypes.instanceOf(AppContainer).isRequired,
  143. pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
  144. isOpen: PropTypes.bool.isRequired,
  145. onClose: PropTypes.func.isRequired,
  146. path: PropTypes.string.isRequired,
  147. };
  148. export default withTranslation()(PageRenameModalWrapper);