Bug fixes and optimizations (#173)

* Fixing marginal bugs in exercise simple edit form. * Optimizing performance of edit exercise form. * Prevent unnecessary sidebar re-rendering. * Final step in edit exercise form performance optimizations. * Forgotten bug. * Additional performance tweaks on EditAssignment form.
ReCodEx · Feb 11, 2018 · 85120fd · 85120fd
1 parent 5e33f82
commit 85120fd
Show file tree

Hide file tree

Showing 19 changed files with 264 additions and 209 deletions.
diff --git a/src/components/Exercises/ExercisesListItem/ExercisesListItem.js b/src/components/Exercises/ExercisesListItem/ExercisesListItem.js
@@ -21,7 +21,6 @@ const ExercisesListItem = ({
   createdAt,
   isLocked,
   isBroken,
-  validationError,
   createActions,
   locale,
   links: { EXERCISE_URI_FACTORY }
@@ -31,12 +30,7 @@ const ExercisesListItem = ({
       <Icon name="code" />
     </td>
     <td>
-      <ExercisePrefixIcons
-        id={id}
-        isLocked={isLocked}
-        isBroken={isBroken}
-        validationError={validationError}
-      />
+      <ExercisePrefixIcons id={id} isLocked={isLocked} isBroken={isBroken} />
       <strong>
         <Link to={EXERCISE_URI_FACTORY(id)}>
           <LocalizedExerciseName entity={{ name, localizedTexts }} />
@@ -82,7 +76,6 @@ ExercisesListItem.propTypes = {
   createdAt: PropTypes.number.isRequired,
   isLocked: PropTypes.bool.isRequired,
   isBroken: PropTypes.bool.isRequired,
-  validationError: PropTypes.string,
   localizedTexts: PropTypes.array.isRequired,
   createActions: PropTypes.func,
   locale: PropTypes.string.isRequired,

diff --git a/src/components/Exercises/ExercisesName/ExercisesName.js b/src/components/Exercises/ExercisesName/ExercisesName.js
@@ -13,17 +13,11 @@ const ExercisesName = ({
   localizedTexts,
   isLocked,
   isBroken,
-  validationError,
   noLink,
   links: { EXERCISE_URI_FACTORY }
 }) =>
   <span>
-    <ExercisePrefixIcons
-      id={id}
-      isLocked={isLocked}
-      isBroken={isBroken}
-      validationError={validationError}
-    />
+    <ExercisePrefixIcons id={id} isLocked={isLocked} isBroken={isBroken} />
     {noLink
       ? <span>
           <LocalizedExerciseName entity={{ name, localizedTexts }} />
@@ -39,7 +33,6 @@ ExercisesName.propTypes = {
   localizedTexts: PropTypes.array.isRequired,
   isLocked: PropTypes.bool.isRequired,
   isBroken: PropTypes.bool.isRequired,
-  validationError: PropTypes.string,
   noLink: PropTypes.bool,
   links: PropTypes.object
 };

diff --git a/src/components/Exercises/ExercisesSimpleListItem/ExercisesSimpleListItem.js b/src/components/Exercises/ExercisesSimpleListItem/ExercisesSimpleListItem.js
@@ -15,20 +15,14 @@ const ExercisesSimpleListItem = ({
   authorId,
   isLocked,
   isBroken,
-  validationError,
   localizedTexts,
   createActions,
   locale,
   links: { EXERCISE_URI_FACTORY }
 }) =>
   <tr>
     <td>
-      <ExercisePrefixIcons
-        id={id}
-        isLocked={isLocked}
-        isBroken={isBroken}
-        validationError={validationError}
-      />
+      <ExercisePrefixIcons id={id} isLocked={isLocked} isBroken={isBroken} />
       <strong>
         <Link to={EXERCISE_URI_FACTORY(id)}>
           <LocalizedExerciseName entity={{ name, localizedTexts }} />
@@ -54,7 +48,6 @@ ExercisesSimpleListItem.propTypes = {
   difficulty: PropTypes.string.isRequired,
   isLocked: PropTypes.bool.isRequired,
   isBroken: PropTypes.bool.isRequired,
-  validationError: PropTypes.string,
   localizedTexts: PropTypes.array.isRequired,
   createActions: PropTypes.func,
   locale: PropTypes.string.isRequired,

diff --git a/src/components/forms/EditAssignmentForm/EditAssignmentForm.js b/src/components/forms/EditAssignmentForm/EditAssignmentForm.js
@@ -22,7 +22,9 @@ const EditAssignmentForm = ({
   submitSucceeded: hasSucceeded,
   asyncValidating,
   invalid,
-  formValues: { firstDeadline, allowSecondDeadline, localizedTexts } = {}
+  firstDeadline,
+  allowSecondDeadline,
+  localizedTextsLocales
 }) =>
   <div>
     <FormBox
@@ -81,7 +83,7 @@ const EditAssignmentForm = ({
 
       <FieldArray
         name="localizedTexts"
-        localizedTexts={localizedTexts}
+        localizedTextsLocales={localizedTextsLocales}
         component={LocalizedTextsFormField}
       />
 
@@ -225,14 +227,9 @@ EditAssignmentForm.propTypes = {
   submitSucceeded: PropTypes.bool,
   asyncValidating: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   invalid: PropTypes.bool,
-  formValues: PropTypes.shape({
-    firstDeadline: PropTypes.oneOfType([PropTypes.number, PropTypes.object]), // object == moment.js instance
-    allowSecondDeadline: PropTypes.oneOfType([
-      PropTypes.bool,
-      PropTypes.string
-    ]),
-    localizedTexts: PropTypes.array
-  })
+  firstDeadline: PropTypes.oneOfType([PropTypes.number, PropTypes.object]), // object == moment.js instance
+  allowSecondDeadline: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  localizedTextsLocales: PropTypes.array
 };
 
 const isNonNegativeInteger = n =>
@@ -442,5 +439,7 @@ const asyncValidate = (values, dispatch, { assignment: { id, version } }) =>
 export default reduxForm({
   form: 'editAssignment',
   validate,
-  asyncValidate
+  asyncValidate,
+  enableReinitialize: true,
+  keepDirtyOnReinitialize: false
 })(EditAssignmentForm);
diff --git a/src/components/forms/EditExerciseForm/EditExerciseForm.js b/src/components/forms/EditExerciseForm/EditExerciseForm.js
@@ -10,6 +10,7 @@ import {
 import { Alert } from 'react-bootstrap';
 import Icon from 'react-fontawesome';
 import { LinkContainer } from 'react-router-bootstrap';
+import { defaultMemoize } from 'reselect';
 
 import { SelectField, CheckboxField } from '../Fields';
 
@@ -36,6 +37,12 @@ const messages = defineMessages({
   }
 });
 
+const difficultyOptions = defaultMemoize(formatMessage => [
+  { key: 'easy', name: formatMessage(messages.easy) },
+  { key: 'medium', name: formatMessage(messages.medium) },
+  { key: 'hard', name: formatMessage(messages.hard) }
+]);
+
 const EditExerciseForm = ({
   initialValues: exercise,
   anyTouched,
@@ -45,8 +52,8 @@ const EditExerciseForm = ({
   submitSucceeded: hasSucceeded,
   invalid,
   asyncValidating,
-  formValues: { localizedTexts } = {},
-  intl: { formatMessage, locale },
+  localizedTextsLocales = [],
+  intl: { formatMessage },
   links: { EXERCISE_EDIT_SIMPLE_CONFIG_URI_FACTORY }
 }) =>
   <FormBox
@@ -121,19 +128,15 @@ const EditExerciseForm = ({
 
     <FieldArray
       name="localizedTexts"
-      localizedTexts={localizedTexts}
+      localizedTextsLocales={localizedTextsLocales}
       component={LocalizedTextsFormField}
     />
 
     <Field
       name="difficulty"
       component={SelectField}
-      options={[
-        { key: '', name: '...' },
-        { key: 'easy', name: formatMessage(messages.easy) },
-        { key: 'medium', name: formatMessage(messages.medium) },
-        { key: 'hard', name: formatMessage(messages.hard) }
-      ]}
+      options={difficultyOptions(formatMessage)}
+      addEmptyOption={true}
       label={
         <FormattedMessage
           id="app.editExerciseForm.difficulty"
@@ -178,9 +181,7 @@ EditExerciseForm.propTypes = {
   submitSucceeded: PropTypes.bool,
   invalid: PropTypes.bool,
   asyncValidating: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  formValues: PropTypes.shape({
-    localizedTexts: PropTypes.array
-  }),
+  localizedTextsLocales: PropTypes.array,
   links: PropTypes.object
 };
 
@@ -300,12 +301,34 @@ const asyncValidate = (values, dispatch, { initialValues: { id, version } }) =>
       .catch(errors => reject(errors))
   );
 
+// Actually, this is reimplementation of default behavior from documentation.
+// For some reason, the asyncValidation is by default called also for every change event (which is not documented).
+const shouldAsyncValidate = ({
+  syncValidationPasses,
+  trigger,
+  pristine,
+  initialized
+}) => {
+  if (!syncValidationPasses) {
+    return false;
+  }
+  switch (trigger) {
+    case 'blur':
+      return true;
+    case 'submit':
+      return !pristine || !initialized;
+    default:
+      return false;
+  }
+};
+
 export default withLinks(
-  injectIntl(
-    reduxForm({
-      form: 'editExercise',
-      validate,
-      asyncValidate
-    })(EditExerciseForm)
-  )
+  reduxForm({
+    form: 'editExercise',
+    validate,
+    asyncValidate,
+    shouldAsyncValidate,
+    enableReinitialize: true,
+    keepDirtyOnReinitialize: false
+  })(injectIntl(EditExerciseForm))
 );
diff --git a/src/components/forms/EditGroupForm/EditGroupForm.js b/src/components/forms/EditGroupForm/EditGroupForm.js
@@ -17,7 +17,8 @@ const EditGroupForm = ({
   submitSucceeded = false,
   invalid,
   createNew = false,
-  formValues: { localizedTexts, hasThreshold } = {},
+  localizedTextsLocales,
+  hasThreshold,
   collapsable = false,
   isOpen = true,
   reset
@@ -85,7 +86,7 @@ const EditGroupForm = ({
 
     <FieldArray
       name="localizedTexts"
-      localizedTexts={localizedTexts}
+      localizedTextsLocales={localizedTextsLocales}
       component={LocalizedTextsFormField}
       isGroup={true}
     />
@@ -176,9 +177,8 @@ EditGroupForm.propTypes = {
   submitSucceeded: PropTypes.bool,
   submitting: PropTypes.bool,
   invalid: PropTypes.bool,
-  formValues: PropTypes.shape({
-    localizedTexts: PropTypes.array
-  }),
+  hasThreshold: PropTypes.bool,
+  localizedTextsLocales: PropTypes.array,
   createNew: PropTypes.bool,
   collapsable: PropTypes.bool,
   isOpen: PropTypes.bool,

diff --git a/src/components/forms/EditSimpleLimitsForm/styles.less b/src/components/forms/EditSimpleLimitsForm/styles.less
@@ -30,6 +30,6 @@
   color: #666;
 }
 
-.preciseTimeTooltip:first-child {
+.preciseTimeTooltip :first-child {
   margin-right: 0.5em;
 }
diff --git a/src/components/forms/Fields/LanguageSelectField.js b/src/components/forms/Fields/LanguageSelectField.js
@@ -1,20 +1,14 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import SelectField from './SelectField';
 
-const LanguageSelectField = ({ options = [], ...props }) =>
-  <SelectField
-    {...props}
-    options={[
-      { key: '', name: '...' },
-      { key: 'en', name: 'English' },
-      { key: 'cs', name: 'Čeština' },
-      ...options
-    ]}
-  />;
+const languageOptions = [
+  { key: 'en', name: 'English' },
+  { key: 'cs', name: 'Čeština' }
+];
 
-LanguageSelectField.propTypes = {
-  options: PropTypes.array
-};
+const LanguageSelectField = ({ ...props }) =>
+  <SelectField {...props} options={languageOptions} addEmptyOption={true} />;
+
+LanguageSelectField.propTypes = {};
 
 export default LanguageSelectField;
diff --git a/src/components/forms/Fields/TabbedArrayField.js b/src/components/forms/Fields/TabbedArrayField.js
@@ -59,7 +59,7 @@ class TabbedArrayField extends Component {
             activeKey={this.state.activeTab}
             onSelect={this.changeTab}
           >
-            {fields.map((prefix, i) => (
+            {fields.map((prefix, i) =>
               <Tab key={i} eventKey={i} title={getTitle(i)}>
                 <ContentComponent {...props} i={i} prefix={prefix} />
                 {remove &&
@@ -73,8 +73,7 @@ class TabbedArrayField extends Component {
                       }}
                     >
                       <Button bsStyle="default">
-                        <WarningIcon />
-                        {' '}
+                        <WarningIcon />{' '}
                         <FormattedMessage
                           id="app.tabbedArrayField.remove"
                           defaultMessage="Remove"
@@ -83,7 +82,7 @@ class TabbedArrayField extends Component {
                     </Confirm>
                   </p>}
               </Tab>
-            ))}
+            )}
           </Tabs>}
 
         {fields.length === 0 &&

diff --git a/src/components/forms/LocalizedTextsFormField/LocalizedTextsFormField.js b/src/components/forms/LocalizedTextsFormField/LocalizedTextsFormField.js
@@ -6,15 +6,15 @@ import LocalizedExerciseFormField from './LocalizedExerciseFormField';
 import LocalizedGroupFormField from './LocalizedGroupFormField';
 
 const LocalizedTextsFormField = ({
-  localizedTexts = [],
+  localizedTextsLocales = [],
   isGroup = false,
   ...props
 }) =>
   <TabbedArrayField
     {...props}
     getTitle={i =>
-      localizedTexts && localizedTexts[i] && localizedTexts[i].locale
-        ? localizedTexts[i].locale
+      localizedTextsLocales && localizedTextsLocales[i]
+        ? localizedTextsLocales[i]
         : <FormattedMessage
             id="app.editLocalizedTextForm.newLocale"
             defaultMessage="New language"
@@ -46,7 +46,7 @@ const LocalizedTextsFormField = ({
   />;
 
 LocalizedTextsFormField.propTypes = {
-  localizedTexts: PropTypes.array,
+  localizedTextsLocales: PropTypes.array,
   isGroup: PropTypes.bool
 };