about summary refs log tree commit diff
path: root/app/javascript
diff options
context:
space:
mode:
authorThibaut Girka <thib@sitedethib.com>2018-04-26 20:23:25 +0200
committerThibaut Girka <thib@sitedethib.com>2018-04-27 01:24:55 +0200
commit1222e0a38178d24e9f7d4bbc996d6f7947e8137b (patch)
tree9851df0d483a4eb1493df2e905f4f46ac5725087 /app/javascript
parentb39f3648a7944a23cf4c1d9d324e320129e9d3ab (diff)
Use new getDerivedStateFromProps instead of deprecated componentWillReceiveProps
As we are already using the new getSnapshotBeforeUpdate lifecycle method,
we apparently cannot use the deprecated ones at all in this component.
Diffstat (limited to 'app/javascript')
-rw-r--r--app/javascript/flavours/glitch/components/status.js42
1 files changed, 33 insertions, 9 deletions
diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js
index 62aa35aae..bff396f04 100644
--- a/app/javascript/flavours/glitch/components/status.js
+++ b/app/javascript/flavours/glitch/components/status.js
@@ -51,7 +51,6 @@ export default class Status extends ImmutablePureComponent {
   };
 
   state = {
-    isExpanded: this.props.expanded,
     isCollapsed: false,
     autoCollapsed: false,
   }
@@ -80,23 +79,48 @@ export default class Status extends ImmutablePureComponent {
   //  If our settings have changed to disable collapsed statuses, then we
   //  need to make sure that we uncollapse every one. We do that by watching
   //  for changes to `settings.collapsed.enabled` in
-  //  `componentWillReceiveProps()`.
+  //  `getderivedStateFromProps()`.
 
   //  We also need to watch for changes on the `collapse` prop---if this
   //  changes to anything other than `undefined`, then we need to collapse or
   //  uncollapse our status accordingly.
-  componentWillReceiveProps (nextProps) {
+  static getDerivedStateFromProps(nextProps, prevState) {
+    let update = {};
+    let updated = false;
+
+    // Make sure the state mirrors props we track…
+    if (nextProps.collapse !== prevState.collapseProp) {
+      update.collapseProp = nextProps.collapse;
+      updated = true;
+    }
+    if (nextProps.expanded !== prevState.expandedProp) {
+      update.expandedProp = nextProps.expanded;
+      updated = true;
+    }
+
+    // Update state based on new props
     if (!nextProps.settings.getIn(['collapsed', 'enabled'])) {
-      if (this.state.isCollapsed) {
-        this.setCollapsed(false);
+      if (prevState.isCollapsed) {
+        update.isCollapsed = false;
+        updated = true;
       }
     } else if (
-      nextProps.collapse !== this.props.collapse &&
+      nextProps.collapse !== prevState.collapseProp &&
       nextProps.collapse !== undefined
-    ) this.setCollapsed(nextProps.collapse);
-    if (nextProps.expanded !== this.props.expanded &&
+    ) {
+      update.isCollapsed = nextProps.collapse;
+      if (nextProps.collapse) update.isExpanded = false;
+      updated = true;
+    }
+    if (nextProps.expanded !== prevState.expandedProp &&
       nextProps.expanded !== undefined
-    ) this.setExpansion(nextProps.expanded);
+    ) {
+      update.isExpanded = nextProps.expanded;
+      if (nextProps.expanded) update.isCollapsed = false;
+      updated = true;
+    }
+
+    return updated ? update : null;
   }
 
   //  When mounting, we just check to see if our status should be collapsed,