From 7be3838823b46b275217dbf6f534dda52bd07128 Mon Sep 17 00:00:00 2001
From: Luciano Maiwald <mail@luciano-maiwald.de>
Date: Wed, 9 Oct 2024 09:39:22 +0200
Subject: [PATCH] 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.
---
 .../ReactionDetailsProperties.js              |  7 ----
 .../schemeTab/ReactionDetailsDuration.js      |  7 ----
 app/packs/src/models/Reaction.js              | 41 +++++++++----------
 3 files changed, 19 insertions(+), 36 deletions(-)

diff --git a/app/packs/src/apps/mydb/elements/details/reactions/propertiesTab/ReactionDetailsProperties.js b/app/packs/src/apps/mydb/elements/details/reactions/propertiesTab/ReactionDetailsProperties.js
index 5895b61eea..c763996dec 100644
--- a/app/packs/src/apps/mydb/elements/details/reactions/propertiesTab/ReactionDetailsProperties.js
+++ b/app/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
index 38177dde7d..f4dab39dd6 100644
--- 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
index 74f23ed3d2..9390ed19b5 100644
--- a/app/packs/src/models/Reaction.js
+++ b/app/packs/src/models/Reaction.js
@@ -309,6 +309,21 @@ 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;
   }
   
@@ -316,8 +331,8 @@ export default class Reaction extends Element {
     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() {