Providing workaround for rendering problems with forms when the route changes.

krulis-martin · krulis-martin · commit d68e40d8a641 · 2025-03-31T17:50:54.000+02:00
diff --git a/src/components/forms/EditUserProfileForm/EditUserProfileForm.js b/src/components/forms/EditUserProfileForm/EditUserProfileForm.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { reduxForm, Field, change } from 'redux-form';
+import { lruMemoize } from 'reselect';
 import isEmail from 'validator/lib/isEmail.js';
 
 import FormBox from '../../widgets/FormBox';
@@ -12,6 +13,16 @@ import { SaveIcon } from '../../icons';
 import { validateRegistrationData } from '../../../redux/modules/users.js';
 import { TextField, PasswordField, PasswordStrength, CheckboxField } from '../Fields';
 
+export const prepareInitialValues = lruMemoize(user => ({
+  firstName: user.name.firstName,
+  lastName: user.name.lastName,
+  titlesBeforeName: user.name.titlesBeforeName,
+  titlesAfterName: user.name.titlesAfterName,
+  email: user.privateData.email,
+  passwordStrength: null,
+  gravatarUrlEnabled: user.avatarUrl !== null,
+}));
+
 const EditUserProfileForm = ({
   submitting,
   handleSubmit,
diff --git a/src/components/forms/EditUserProfileForm/index.js b/src/components/forms/EditUserProfileForm/index.js
@@ -1,2 +1,3 @@
-import EditUserProfileForm from './EditUserProfileForm.js';
+import EditUserProfileForm, { prepareInitialValues } from './EditUserProfileForm.js';
+export { prepareInitialValues };
 export default EditUserProfileForm;
diff --git a/src/components/forms/EditUserRoleForm/EditUserRoleForm.js b/src/components/forms/EditUserRoleForm/EditUserRoleForm.js
@@ -4,6 +4,7 @@ import { FormattedMessage, injectIntl } from 'react-intl';
 import { reduxForm } from 'redux-form';
 import { Table } from 'react-bootstrap';
 import classnames from 'classnames';
+import { lruMemoize } from 'reselect';
 
 import { knownRoles, roleLabels, roleDescriptions, UserRoleIcon } from '../../helpers/usersRoles.js';
 import Callout from '../../widgets/Callout';
@@ -12,6 +13,8 @@ import { SaveIcon } from '../../icons';
 import SubmitButton from '../SubmitButton';
 import StandaloneRadioField from '../Fields/StandaloneRadioField.js';
 
+export const prepareInitialValues = lruMemoize(user => ({ role: user.privateData.role }));
+
 const EditUserRoleForm = ({
   currentRole = null,
   change,
diff --git a/src/components/forms/EditUserRoleForm/index.js b/src/components/forms/EditUserRoleForm/index.js
@@ -1,2 +1,3 @@
-import EditUserRoleForm from './EditUserRoleForm.js';
+import EditUserRoleForm, { prepareInitialValues } from './EditUserRoleForm.js';
+export { prepareInitialValues };
 export default EditUserRoleForm;
diff --git a/src/components/layout/PageContent/PageContent.js b/src/components/layout/PageContent/PageContent.js
@@ -21,24 +21,26 @@ const getMessage = (item, formatMessage) =>
  * The component passes the title and description to the Helmet library
  * which reflects these into the <head> section of the HTML document.
  */
-const PageContent = ({ intl: { formatMessage }, title = '', windowTitle = null, icon = null, children }) => (
-  <main className="app-main bg-body-tertiary pb-1">
-    <Helmet title={getMessage(windowTitle || title, formatMessage)} />
-    {(title || icon) && (
-      <div className="app-content-header">
-        <h1 className="m-0 px-3 text-dark h3">
-          {icon && (
-            <span className="me-3 text-body-secondary">{typeof icon === 'string' ? <Icon icon={icon} /> : icon}</span>
-          )}
-          {title}
-        </h1>
+const PageContent = ({ intl: { formatMessage }, title = '', windowTitle = null, icon = null, children }) => {
+  return (
+    <main className="app-main bg-body-tertiary pb-1">
+      <Helmet title={getMessage(windowTitle || title, formatMessage)} />
+      {(title || icon) && (
+        <div className="app-content-header">
+          <h1 className="m-0 px-3 text-dark h3">
+            {icon && (
+              <span className="me-3 text-body-secondary">{typeof icon === 'string' ? <Icon icon={icon} /> : icon}</span>
+            )}
+            {title}
+          </h1>
+        </div>
+      )}
+      <div className="app-content">
+        <Container fluid>{children}</Container>
       </div>
-    )}
-    <div className="app-content">
-      <Container fluid>{children}</Container>
-    </div>
-  </main>
-);
+    </main>
+  );
+};
 
 PageContent.propTypes = {
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
diff --git a/src/components/widgets/FormBox/FormBox.js b/src/components/widgets/FormBox/FormBox.js
@@ -2,16 +2,19 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Form } from 'react-bootstrap';
 import Box from '../Box';
+import OnlyMounted from '../OnlyMounted';
 
 /**
  * A wrapper of Box adjusted for holding forms inside of the body.
  */
 const FormBox = ({ id = null, onSubmit, succeeded = false, dirty = false, children, ...props }) => (
-  <Form method="POST" onSubmit={onSubmit}>
-    <Box id={id} type={succeeded ? 'success' : dirty ? 'warning' : 'secondary'} {...props} unlimitedHeight>
-      <div>{children}</div>
-    </Box>
-  </Form>
+  <OnlyMounted>
+    <Form method="POST" onSubmit={onSubmit}>
+      <Box id={id} type={succeeded ? 'success' : dirty ? 'warning' : 'secondary'} {...props} unlimitedHeight>
+        <div>{children}</div>
+      </Box>
+    </Form>
+  </OnlyMounted>
 );
 
 FormBox.propTypes = {
diff --git a/src/components/widgets/OnlyMounted/OnlyMounted.js b/src/components/widgets/OnlyMounted/OnlyMounted.js
@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+class OnlyMounted extends Component {
+  state = { mounted: false };
+
+  componentDidMount() {
+    this.setState({ mounted: true });
+  }
+
+  componentWillUnmount() {
+    this.setState({ mounted: false });
+  }
+
+  render() {
+    const { children, fallback = null } = this.props;
+    return this.state.mounted
+      ? children
+      : fallback || <div className="bg-secondary-subtle p-5 mb-1 w-100 rounded opacity-50" />;
+  }
+}
+
+OnlyMounted.propTypes = {
+  fallback: PropTypes.any,
+  children: PropTypes.any,
+};
+
+export default OnlyMounted;
diff --git a/src/components/widgets/OnlyMounted/index.js b/src/components/widgets/OnlyMounted/index.js
@@ -0,0 +1 @@
+export { default } from './OnlyMounted.js';
diff --git a/src/containers/App/App.js b/src/containers/App/App.js
@@ -37,8 +37,6 @@ const reloadIsRequired = (...statuses) =>
   statuses.includes(resourceStatus.FAILED) && !statuses.includes(resourceStatus.PENDING);
 
 class App extends Component {
-  static ignoreNextLocationChangeFlag = false;
-
   static loadAsync =
     customLoadGroups =>
     (params, dispatch, { userId }) =>
@@ -154,6 +152,7 @@ class App extends Component {
 
   render() {
     const { userId, instanceId } = this.props;
+
     return userId && !instanceId ? (
       <div
         style={{
diff --git a/src/pages/EditUser/EditUser.js b/src/pages/EditUser/EditUser.js
@@ -13,15 +13,19 @@ import Button, { TheButtonGroup } from '../../components/widgets/TheButton';
 import { LocalIcon, TransferIcon, EditUserIcon } from '../../components/icons';
 import { isStudentRole } from '../../components/helpers/usersRoles.js';
 import AllowUserButtonContainer from '../../containers/AllowUserButtonContainer';
-import EditUserProfileForm from '../../components/forms/EditUserProfileForm';
+import EditUserProfileForm, {
+  prepareInitialValues as prepareUserProfileValues,
+} from '../../components/forms/EditUserProfileForm';
 import EditUserSettingsForm from '../../components/forms/EditUserSettingsForm';
 import EditUserUIDataForm, {
   EDITOR_FONT_SIZE_MIN,
   EDITOR_FONT_SIZE_MAX,
   EDITOR_FONT_SIZE_DEFAULT,
 } from '../../components/forms/EditUserUIDataForm';
 import GenerateTokenForm, { initialValues } from '../../components/forms/GenerateTokenForm';
-import EditUserRoleForm from '../../components/forms/EditUserRoleForm';
+import EditUserRoleForm, {
+  prepareInitialValues as prepareUserRoleValues,
+} from '../../components/forms/EditUserRoleForm';
 import CalendarTokens from '../../components/Users/CalendarTokens';
 import Box from '../../components/widgets/Box';
 import ResourceRenderer from '../../components/helpers/ResourceRenderer';
@@ -44,6 +48,8 @@ import {
   setUserCalendarExpired,
 } from '../../redux/modules/userCalendars.js';
 import { getUserCalendars } from '../../redux/selectors/userCalendars.js';
+import { EMPTY_OBJ } from '../../helpers/common.js';
+import OnlyMounted from '../../components/widgets/OnlyMounted/OnlyMounted.js';
 
 const prepareNumber = (number, min, max, defaultValue) => {
   number = Number(number);
@@ -78,10 +84,16 @@ const prepareUserUIDataInitialValues = lruMemoize(
 );
 
 class EditUser extends Component {
+  constructor(props) {
+    super(props);
+    this.user = null;
+  }
+
   static loadAsync = ({ userId }, dispatch) =>
     Promise.all([dispatch(fetchUserIfNeeded(userId)), dispatch(fetchUserCalendarsIfNeeded(userId))]);
 
   componentDidMount() {
+    this.setState({ mounted: true });
     this.props.loadAsync();
   }
 
@@ -163,48 +175,47 @@ class EditUser extends Component {
 
             <Row>
               <Col lg={6}>
-                <EditUserProfileForm
-                  onSubmit={formData => this.updateProfile(formData, isSuperAdmin || !data.privateData.isExternal)}
-                  initialValues={{
-                    firstName: data.name.firstName,
-                    lastName: data.name.lastName,
-                    titlesBeforeName: data.name.titlesBeforeName,
-                    titlesAfterName: data.name.titlesAfterName,
-                    email: data.privateData.email,
-                    passwordStrength: null,
-                    gravatarUrlEnabled: data.avatarUrl !== null,
-                  }}
-                  allowChangePassword={data.privateData.isLocal}
-                  emptyLocalPassword={data.privateData.emptyLocalPassword}
-                  canForceChangePassword={isSuperAdmin && data.id !== loggedUserId}
-                  disabledNameChange={data.privateData.isExternal && !isSuperAdmin}
-                />
+                <OnlyMounted>
+                  <EditUserProfileForm
+                    onSubmit={formData => this.updateProfile(formData, isSuperAdmin || !data.privateData.isExternal)}
+                    initialValues={prepareUserProfileValues(data)}
+                    allowChangePassword={data.privateData.isLocal}
+                    emptyLocalPassword={data.privateData.emptyLocalPassword}
+                    canForceChangePassword={isSuperAdmin && data.id !== loggedUserId}
+                    disabledNameChange={data.privateData.isExternal && !isSuperAdmin}
+                  />
+                </OnlyMounted>
               </Col>
 
               {data.id === loggedUserId && (
                 <Col lg={6}>
                   {data.privateData.settings && (
-                    <EditUserSettingsForm
-                      onSubmit={updateSettings}
-                      user={data}
-                      initialValues={data.privateData.settings}
-                    />
+                    <OnlyMounted>
+                      <EditUserSettingsForm
+                        onSubmit={updateSettings}
+                        user={data}
+                        initialValues={data.privateData.settings}
+                      />
+                    </OnlyMounted>
                   )}
-
-                  <EditUserUIDataForm
-                    onSubmit={updateUIData}
-                    initialValues={prepareUserUIDataInitialValues(data.privateData.uiData || {})}
-                  />
+                  <OnlyMounted>
+                    <EditUserUIDataForm
+                      onSubmit={updateUIData}
+                      initialValues={prepareUserUIDataInitialValues(data.privateData.uiData || EMPTY_OBJ)}
+                    />
+                  </OnlyMounted>
                 </Col>
               )}
 
               {isSuperAdmin && data.id !== loggedUserId && data.privateData && (
                 <Col lg={6}>
-                  <EditUserRoleForm
-                    currentRole={data.privateData.role}
-                    initialValues={{ role: data.privateData.role }}
-                    onSubmit={this.setRole}
-                  />
+                  <OnlyMounted>
+                    <EditUserRoleForm
+                      currentRole={data.privateData.role}
+                      initialValues={prepareUserRoleValues(data)}
+                      onSubmit={this.setRole}
+                    />
+                  </OnlyMounted>
                 </Col>
               )}
             </Row>
@@ -232,7 +243,9 @@ class EditUser extends Component {
 
                 <Row>
                   <Col lg={12}>
-                    <GenerateTokenForm onSubmit={generateToken} initialValues={initialValues} lastToken={lastToken} />
+                    <OnlyMounted>
+                      <GenerateTokenForm onSubmit={generateToken} initialValues={initialValues} lastToken={lastToken} />
+                    </OnlyMounted>
                   </Col>
                 </Row>
               </>
diff --git a/src/pages/routes.js b/src/pages/routes.js
@@ -227,7 +227,7 @@ export const match = (urlPath, isLoggedIn) => {
   return { redirect, ...match, loadAsync };
 };
 
-export const buildRoutes = (urlPath, isLoggedIn) => {
+export const buildRoutes = lruMemoize((urlPath, isLoggedIn) => {
   return (
     <Routes>
       {routesDescriptors.map(routeObj => {
@@ -240,7 +240,7 @@ export const buildRoutes = (urlPath, isLoggedIn) => {
       })}
     </Routes>
   );
-};
+});
 
 export const pathHasCustomLoadGroups = lruMemoize(urlPath => {
   const routeObj = routesDescriptors.find(({ route }) => matchPath(route, urlPath) !== null);

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { default } from './OnlyMounted.js';`