Reload duration since key was generated every minute and when the app is opened

1 files changed, 26 insertions, 4 deletions

diff --git a/gui/src/renderer/components/WireguardKeys.tsx b/gui/src/renderer/components/WireguardKeys.tsx
index 3f3e8521d7..d5b0dc1833 100644
--- a/gui/src/renderer/components/WireguardKeys.tsx
+++ b/gui/src/renderer/components/WireguardKeys.tsx
@@ -37,6 +37,7 @@ export interface IProps {
   isOffline: boolean;
   locale: string;
   tunnelState: TunnelState;
+  windowFocused: boolean;
 
   onClose: () => void;
   onGenerateKey: () => void;
@@ -48,16 +49,31 @@ export interface IProps {
 export interface IState {
   recentlyGeneratedKey: boolean;
   userHasInitiatedVerification: boolean;
+  ageOfKeyString: string;
 }
 
 export default class WireguardKeys extends React.Component<IProps, IState> {
+  private keyAgeUpdateInterval?: number;
+
   public state = {
     recentlyGeneratedKey: false,
     userHasInitiatedVerification: false,
+    ageOfKeyString: WireguardKeys.ageOfKeyString(this.props.keyState, this.props.locale),
   };
 
+  public static getDerivedStateFromProps(props: IProps) {
+    return {
+      ageOfKeyString: WireguardKeys.ageOfKeyString(props.keyState, props.locale),
+    };
+  }
+
   public componentDidMount() {
     this.verifyKey();
+    this.keyAgeUpdateInterval = setInterval(this.setAgeOfKeyStringState, 60 * 1000);
+  }
+
+  public componentWillUnmount() {
+    clearInterval(this.keyAgeUpdateInterval);
   }
 
   public componentDidUpdate(prevProps: IProps) {
@@ -121,7 +137,7 @@ export default class WireguardKeys extends React.Component<IProps, IState> {
                   <StyledRowLabel>
                     {messages.pgettext('wireguard-key-view', 'Key generated')}
                   </StyledRowLabel>
-                  <StyledRowValue>{this.ageOfKeyString()}</StyledRowValue>
+                  <StyledRowValue>{this.state.ageOfKeyString}</StyledRowValue>
                 </StyledRow>
 
                 <StyledMessages>
@@ -279,16 +295,22 @@ export default class WireguardKeys extends React.Component<IProps, IState> {
     }
   }
 
-  private ageOfKeyString(): string {
-    switch (this.props.keyState.type) {
+  private static ageOfKeyString(keyState: WgKeyState, locale: string): string {
+    switch (keyState.type) {
       case 'key-set':
       case 'being-verified':
-        return moment(this.props.keyState.key.created).locale(this.props.locale).fromNow();
+        return moment(keyState.key.created).locale(locale).fromNow();
       default:
         return '-';
     }
   }
 
+  private setAgeOfKeyStringState = () => {
+    this.setState({
+      ageOfKeyString: WireguardKeys.ageOfKeyString(this.props.keyState, this.props.locale),
+    });
+  };
+
   private getStatusMessage(): string {
     switch (this.props.keyState.type) {
       case 'key-set': {