Lazily calculate reaction duration display

This way we don't have to worry about when we need to calculate the display values and can get rid of the life cycle methods that modified the reaction prop.
ComPlat · Oct 17, 2024 · 7be3838 · 7be3838
1 parent 6d044ff
commit 7be3838
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 36 deletions.
diff --git a/...packs/src/apps/mydb/elements/details/reactions/propertiesTab/ReactionDetailsProperties.js b/...packs/src/apps/mydb/elements/details/reactions/propertiesTab/ReactionDetailsProperties.js
@@ -16,18 +16,11 @@ import { EditUserLabels } from 'src/components/UserLabels';
 export default class ReactionDetailsProperties extends Component {
   constructor(props) {
     super(props);
-    props.reaction.convertDurationDisplay();
 
     this.handleOnReactionChange = this.handleOnReactionChange.bind(this);
     this.handleOnSolventSelect = this.handleOnSolventSelect.bind(this);
   }
 
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (!nextProps.reaction) { return; }
-    nextProps.reaction.convertDurationDisplay();
-  }
-
   handleOnReactionChange(reaction) {
     this.props.onReactionChange(reaction);
   }

diff --git a/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsDuration.js b/app/packs/src/apps/mydb/elements/details/reactions/schemeTab/ReactionDetailsDuration.js
@@ -8,18 +8,11 @@ import { copyToClipboard } from 'src/utilities/clipboard';
 export default class ReactionDetailsDuration extends Component {
   constructor(props) {
     super(props);
-    props.reaction.convertDurationDisplay();
     this.setCurrentTime = this.setCurrentTime.bind(this);
     this.copyToDuration = this.copyToDuration.bind(this);
     this.handleDurationChange = this.handleDurationChange.bind(this);
   }
 
-  // eslint-disable-next-line camelcase
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (!nextProps.reaction) { return; }
-    nextProps.reaction.convertDurationDisplay();
-  }
-
   setCurrentTime(type) {
     const currentTime = new Date().toLocaleString('en-GB').split(', ').join(' ');
     const { reaction } = this.props;

diff --git a/app/packs/src/models/Reaction.js b/app/packs/src/models/Reaction.js
@@ -309,15 +309,30 @@ export default class Reaction extends Element {
   }
 
   get durationDisplay() {
+    if (!this._durationDisplay || this._durationDisplay.memValue === '') {
+      const duration = this._duration;
+      const m = duration && duration.match(/(\d+\.?(\d+)?)\s+([\w()]+)/)
+      if (m) {
+        this._durationDisplay = {
+          dispUnit: m[3],
+          memUnit: m[3],
+          dispValue: m[1],
+          memValue: m[1],
+        };
+      } else {
+        this._durationDisplay = { ...DurationDefault };
+      }
+    }
+
     return this._durationDisplay;
   }
 
   set durationDisplay(newDuration) {
     const { fromStartStop, nextUnit, nextValue } = newDuration;
     const {
       dispUnit, memUnit, memValue
-    } = this._durationDisplay || {};
-    
+    } = this.durationDisplay || {};
+
     if (fromStartStop) {
       const d = durationDiff(this.timestamp_start, this.timestamp_stop);
       if (d) {
@@ -366,27 +381,9 @@ export default class Reaction extends Element {
   }
 
   get durationUnit() {
-    return this._durationDisplay.dispUnit;
+    return this.durationDisplay.dispUnit;
   }
-
-  convertDurationDisplay() {
-    const duration = this._duration;
-    if (this._durationDisplay && this._durationDisplay.memValue !== '') { return null; }
-    const m = duration && duration.match(/(\d+\.?(\d+)?)\s+([\w()]+)/)
-    if (m) {
-      this._durationDisplay = {
-        dispUnit: m[3],
-        memUnit: m[3],
-        dispValue: m[1],
-        memValue: m[1],
-        ...this._durationDisplay
-      };
-      return null;
-    }
-    this._durationDisplay = { ...DurationDefault };
-    return null;
-  }
-
+
   // Reaction Temperature
 
   get temperature_display() {