Updating components to the new React API (16.3 and newer).

Author: Martin Krulis

src/components/Pipelines/BoxForm/BoxForm.js

@@ -18,7 +18,8 @@ import { getBoxTypes } from '../../../redux/selectors/boxes';
 import { getVariablesTypes } from '../../../helpers/boxes';
 
 class BoxForm extends Component {
-  componentWillMount = () => this.loadBoxTypes();
+  componentDidMount = () => this.loadBoxTypes();
+
   loadBoxTypes() {
     const { fetchBoxTypes } = this.props;
     fetchBoxTypes();

src/components/Pipelines/PipelineVisualEditor/PipelineVisualEditor.js

@@ -21,15 +21,12 @@ class PipelineVisualEditor extends Component {
     nodeToEdit: null,
   };
 
-  componentWillMount = () => {
+  componentDidMount = () => {
     // initialize the graph, if the source is valid
     const { source } = this.props;
     const graph = createGraphFromNodes(source);
-
     this.setState({ graph });
-  };
 
-  componentDidMount = () => {
     const { editorWrapper } = this;
     editorWrapper.addEventListener('click', e => this.onClick(e.target));
   };

src/components/Solutions/UploadsTable/UploadsTable.js

@@ -80,8 +80,10 @@ const UploadsTable = ({
           <td className="text-center">
             <DeleteIcon className="text-warning" />
           </td>
-          <td>{payload.name}</td>
-          <td>{prettyPrintBytes(payload.file.size)}</td>
+          <td className="text-muted">
+            <strike>{payload.name}</strike>
+          </td>
+          <td className="text-muted">{prettyPrintBytes(payload.file.size)}</td>
           <td>
             <ButtonGroup>
               <Button bsSize="xs" bsStyle="default" onClick={() => returnFile(payload)}>

src/components/forms/EditAssignmentForm/EditAssignmentForm.js

@@ -18,7 +18,7 @@ import {
   validateLocalizedTextsFormData,
   transformLocalizedTextsFormData,
 } from '../../../helpers/localizedData';
-import { safeSet } from '../../../helpers/common';
+import { safeGet, safeSet, EMPTY_ARRAY } from '../../../helpers/common';
 
 const localizedTextDefaults = {
   name: '',
@@ -176,13 +176,32 @@ const SUBMIT_BUTTON_MESSAGES_DEFAULT = {
   success: <FormattedMessage id="generic.saved" defaultMessage="Saved" />,
 };
 
+const getAllGroups = defaultMemoize((groups, groupsAccessor, locale) =>
+  groups && groupsAccessor
+    ? groups
+        .filter(g => !g.organizational && !g.archived)
+        .sort((a, b) =>
+          getGroupCanonicalLocalizedName(a, groupsAccessor, locale).localeCompare(
+            getGroupCanonicalLocalizedName(b, groupsAccessor, locale),
+            locale
+          )
+        )
+    : EMPTY_ARRAY
+);
+
+const getUserGroups = defaultMemoize((groups, userId, groupsAccessor, locale) =>
+  getAllGroups(groups, groupsAccessor, locale).filter(
+    g =>
+      safeGet(g, ['primaryAdminsIds', id => id === userId]) ||
+      safeGet(g, ['privateData', 'supervisors', id => id === userId])
+  )
+);
+
 class EditAssignmentForm extends Component {
   state = {
     open: false,
     assignedToGroups: null,
   };
-  allGroups = [];
-  myGroups = [];
 
   toggleOpenState = () => {
     this.setState({ open: !this.state.open });
@@ -193,33 +212,6 @@ class EditAssignmentForm extends Component {
     this.props.reset();
   };
 
-  componentWillReceiveProps(newProps) {
-    if (
-      this.props.groups !== newProps.groups ||
-      this.props.userId !== newProps.userId ||
-      this.props.groupsAccessor !== newProps.groupsAccessor
-    ) {
-      const {
-        groupsAccessor,
-        intl: { locale },
-      } = newProps;
-      this.allGroups = newProps.groups
-        .filter(g => !g.organizational && !g.archived)
-        .sort((a, b) =>
-          getGroupCanonicalLocalizedName(a, groupsAccessor, locale).localeCompare(
-            getGroupCanonicalLocalizedName(b, groupsAccessor, locale),
-            locale
-          )
-        );
-
-      this.myGroups = this.allGroups.filter(
-        g =>
-          g.primaryAdminsIds.find(id => id === newProps.userId) ||
-          g.privateData.supervisors.find(id => id === newProps.userId)
-      );
-    }
-  }
-
   /**
    * Wraps the onSubmit callback passed from the parent component.
    * (note that submitHandler in which this function is used is redux-form internal routine to handle submits)
@@ -238,6 +230,7 @@ class EditAssignmentForm extends Component {
 
   render() {
     const {
+      userId,
       groups,
       editTexts = false,
       groupsAccessor = null,
@@ -257,6 +250,7 @@ class EditAssignmentForm extends Component {
       visibility,
       assignmentIsPublic,
       submitButtonMessages = SUBMIT_BUTTON_MESSAGES_DEFAULT,
+      intl: { locale },
     } = this.props;
 
     return groups && groupsAccessor && this.state.assignedToGroups !== null ? (
@@ -278,10 +272,19 @@ class EditAssignmentForm extends Component {
 
         {groupsAccessor && (
           <AssignmentFormGroupsList
-            groups={this.state.open ? this.allGroups : this.myGroups}
+            groups={
+              this.state.open
+                ? getAllGroups(groups, groupsAccessor, locale)
+                : getUserGroups(groups, userId, groupsAccessor, locale)
+            }
             groupsAccessor={groupsAccessor}
             isOpen={this.state.open}
-            toggleOpenState={this.allGroups.length !== this.myGroups.length ? this.toggleOpenState : null}
+            toggleOpenState={
+              getAllGroups(groups, groupsAccessor, locale).length !==
+              getUserGroups(groups, userId, groupsAccessor, locale).length
+                ? this.toggleOpenState
+                : null
+            }
           />
         )}
 
@@ -631,7 +634,7 @@ const warn = ({ groups, canViewJudgeOutputs }, { groupsAccessor, alreadyAssigned
     );
   }
 
-  if (groupsAccessor) {
+  if (groups && groupsAccessor) {
     let alreadyAssigned = false;
     alreadyAssignedGroups.forEach(id => {
       const key = `id${id}`;

src/components/forms/EditPipelineForm/EditPipelineForm.js

@@ -17,11 +17,12 @@ import { createGetPipelineFiles } from '../../../redux/selectors/pipelineFiles';
 
 class EditPipelineForm extends Component {
   componentDidMount = () => this.props.loadAsync();
-  componentWillReceiveProps = props => {
-    if (this.props.pipeline.id !== props.pipeline.id) {
-      props.loadAsync();
+
+  componentDidUpdate(prevProps) {
+    if (this.props.pipeline.id !== prevProps.pipeline.id) {
+      this.props.loadAsync();
     }
-  };
+  }
 
   static loadAsync = ({ pipeline }, dispatch) => {
     Promise.all([dispatch(fetchSupplementaryFilesForPipeline(pipeline.id))]);

src/components/forms/Fields/MarkdownTextAreaField.js

@@ -14,11 +14,8 @@ if (canUseDOM) {
 }
 
 class MarkdownTextAreaField extends Component {
-  componentWillMount = () => {
-    const { showPreview = false } = this.props;
-    this.setState({
-      showPreview,
-    });
+  state = {
+    showPreview: this.props.showPreview || false,
   };
 
   shouldComponentUpdate() {

src/components/forms/SubmitButton/SubmitButton.js

@@ -5,9 +5,7 @@ import Button from '../../widgets/FlatButton';
 import { SendIcon, LoadingIcon, SuccessIcon, WarningIcon } from '../../icons';
 
 class SubmitButton extends Component {
-  componentWillMount() {
-    this.setState({ saved: false });
-  }
+  state = { saved: false };
 
   componentWillUnmount() {
     this.unmounted = true;

src/components/helpers/ResourceRenderer/ResourceRenderer.js

@@ -71,17 +71,8 @@ const shallowResourcesEqual = (oldResources, newResources) => {
  * for the loaded state.
  */
 class ResourceRenderer extends Component {
-  componentWillMount = () => {
-    // Reset caching variables ...
-    this.oldResources = null;
-    this.oldData = null;
-  };
-
-  componentWillUpdate = () => {
-    // Reset caching variables ...
-    this.oldResources = null;
-    this.oldData = null;
-  };
+  oldResources = null;
+  oldData = null;
 
   // Perform rendering of the childs whilst keeping resource data cached ...
   renderReady = resources => {

src/components/helpers/SimpleTextSearch/SimpleTextSearch.js

@@ -5,16 +5,14 @@ import { Button, FormGroup, ControlLabel, FormControl, InputGroup } from 'react-
 import { LoadingIcon, SearchIcon, WarningIcon } from '../../icons';
 
 class SimpleTextSearch extends Component {
-  state = { query: this.props.query };
+  state = { query: this.props.query, lastPropsQuery: this.props.query };
 
   queryChangeHandler = ev => {
     this.setState({ query: ev.target.value });
   };
 
-  componentWillReceiveProps(newProps) {
-    if (this.props.query !== newProps.query) {
-      this.setState({ query: newProps.query });
-    }
+  static getDerivedStateFromProps(props, state) {
+    return props.query !== state.lastPropsQuery ? { query: props.query, lastPropsQuery: props.query } : null;
   }
 
   render() {

src/components/layout/Sidebar/Sidebar.js

@@ -21,29 +21,45 @@ import styles from './sidebar.less';
 
 const getUserData = defaultMemoize(user => getJsData(user));
 
-const Sidebar = ({
-  loggedInUser,
-  studentOf,
-  supervisorOf,
-  currentUrl,
-  instances,
-  small = false,
-  links: {
-    FAQ_URL,
-    LOGIN_URI,
-    REGISTRATION_URI,
-    DASHBOARD_URI,
-    INSTANCE_URI_FACTORY,
-    GROUP_DETAIL_URI_FACTORY,
-    EXERCISES_URI,
-    PIPELINES_URI,
-    ARCHIVE_URI,
-    SIS_INTEGRATION_URI,
+const Sidebar = (
+  {
+    loggedInUser,
+    studentOf,
+    supervisorOf,
+    currentUrl,
+    instances,
+    small = false,
+    links: {
+      FAQ_URL,
+      LOGIN_URI,
+      REGISTRATION_URI,
+      DASHBOARD_URI,
+      INSTANCE_URI_FACTORY,
+      GROUP_DETAIL_URI_FACTORY,
+      EXERCISES_URI,
+      PIPELINES_URI,
+      ARCHIVE_URI,
+      SIS_INTEGRATION_URI,
+    },
+    intl: { locale },
   },
-  intl: { locale },
-}) => {
+  { isActive }
+) => {
   const user = getUserData(loggedInUser);
   const role = safeGet(user, ['privateData', 'role']);
+  const createLink = item => GROUP_DETAIL_URI_FACTORY(getId(item));
+  const studentOfItems =
+    studentOf &&
+    studentOf.size > 0 &&
+    studentOf
+      .toList()
+      .sort((a, b) => getLocalizedResourceName(a, locale).localeCompare(getLocalizedResourceName(b, locale), locale));
+  const supervisorOfItems =
+    supervisorOf &&
+    supervisorOf.size > 0 &&
+    supervisorOf
+      .toList()
+      .sort((a, b) => getLocalizedResourceName(a, locale).localeCompare(getLocalizedResourceName(b, locale), locale));
 
   return (
     <aside className={classnames(['main-sidebar', styles.mainSidebar])}>
@@ -95,37 +111,31 @@ const Sidebar = ({
                     />
                   ))}
 
-              {studentOf && studentOf.size > 0 && (
+              {studentOfItems && (
                 <MenuGroup
                   title={<FormattedMessage id="app.sidebar.menu.memberOfGroups" defaultMessage="Member of Groups" />}
-                  items={studentOf
-                    .toList()
-                    .sort((a, b) =>
-                      getLocalizedResourceName(a, locale).localeCompare(getLocalizedResourceName(b, locale), locale)
-                    )}
+                  items={studentOfItems}
                   notifications={EMPTY_OBJ}
                   icon={'user-circle'}
                   currentPath={currentUrl}
-                  createLink={item => GROUP_DETAIL_URI_FACTORY(getId(item))}
+                  createLink={createLink}
                   forceOpen={false}
+                  isActive={studentOfItems.find(item => isActive(createLink(item))) !== undefined}
                 />
               )}
 
-              {isSupervisorRole(role) && (
+              {isSupervisorRole(role) && supervisorOfItems && (
                 <MenuGroup
                   title={
                     <FormattedMessage id="app.sidebar.menu.supervisorOfGroups" defaultMessage="Supervisor of Groups" />
                   }
                   notifications={EMPTY_OBJ}
-                  items={supervisorOf
-                    .toList()
-                    .sort((a, b) =>
-                      getLocalizedResourceName(a, locale).localeCompare(getLocalizedResourceName(b, locale), locale)
-                    )}
+                  items={supervisorOfItems}
                   icon="graduation-cap"
                   currentPath={currentUrl}
-                  createLink={item => GROUP_DETAIL_URI_FACTORY(getId(item))}
+                  createLink={createLink}
                   forceOpen={false}
+                  isActive={supervisorOfItems.find(item => isActive(createLink(item))) !== undefined}
                 />
               )}
 
@@ -190,4 +200,8 @@ Sidebar.propTypes = {
   intl: intlShape,
 };
 
+Sidebar.contextTypes = {
+  isActive: PropTypes.func,
+};
+
 export default withLinks(injectIntl(Sidebar));