From 68b0ef59c11f0371d5ac8680c9aede188b501e1b Mon Sep 17 00:00:00 2001
From: Arthur Knoepflin <arthur@knoepflin.eu>
Date: Sat, 10 Apr 2021 00:05:11 +0200
Subject: [PATCH] [+] implement LocaleDate consumer

Signed-off-by: Arthur Knoepflin <arthur@knoepflin.eu>
---
 src/common/user-store.ts                       |  7 ++++++-
 .../components/+preferences/preferences.tsx    | 12 +++++-------
 .../kube-object/kube-object-meta.tsx           |  3 ++-
 src/renderer/components/locale-date/index.ts   |  1 +
 .../components/locale-date/locale-date.tsx     | 18 ++++++++++++++++++
 5 files changed, 32 insertions(+), 9 deletions(-)
 create mode 100644 src/renderer/components/locale-date/index.ts
 create mode 100644 src/renderer/components/locale-date/locale-date.tsx

diff --git a/src/common/user-store.ts b/src/common/user-store.ts
index 4622b84312..510427a88e 100644
--- a/src/common/user-store.ts
+++ b/src/common/user-store.ts
@@ -56,7 +56,7 @@ export class UserStore extends BaseStore<UserStoreModel> {
     allowTelemetry: true,
     allowUntrustedCAs: false,
     colorTheme: UserStore.defaultTheme,
-    localeTimezone: moment.tz.guess(true),
+    localeTimezone: moment.tz.guess(true) || "UTC",
     downloadMirror: "default",
     downloadKubectlBinaries: true,  // Download kubectl binaries matching cluster version
     openAtLogin: false,
@@ -133,6 +133,11 @@ export class UserStore extends BaseStore<UserStoreModel> {
     this.lastSeenAppVersion = getAppVersion();
   }
 
+  @action
+  setLocaleTimezone(tz: string) {
+    this.preferences.localeTimezone = tz;
+  }
+
   protected refreshNewContexts = async () => {
     try {
       const kubeConfig = await readFile(this.kubeConfigPath, "utf8");
diff --git a/src/renderer/components/+preferences/preferences.tsx b/src/renderer/components/+preferences/preferences.tsx
index c6f0c7f2ab..06590fbe90 100644
--- a/src/renderer/components/+preferences/preferences.tsx
+++ b/src/renderer/components/+preferences/preferences.tsx
@@ -41,12 +41,10 @@ export class Preferences extends React.Component {
     }));
   }
 
-  @computed get timezoneOptions(): SelectOption<string>[] {
-    return moment.tz.names().map(zone => ({
-      label: zone,
-      value: zone,
-    }));
-  }
+  timezoneOptions: SelectOption<string>[] = moment.tz.names().map(zone => ({
+    label: zone,
+    value: zone,
+  }));
 
   componentDidMount() {
     disposeOnUnmount(this, [
@@ -169,7 +167,7 @@ export class Preferences extends React.Component {
               <Select
                 options={this.timezoneOptions}
                 value={preferences.localeTimezone}
-                onChange={({ value }: SelectOption) => preferences.localeTimezone = value}
+                onChange={({ value }: SelectOption) => userStore.setLocaleTimezone(value)}
                 themeName="lens"
               />
             </section>
diff --git a/src/renderer/components/kube-object/kube-object-meta.tsx b/src/renderer/components/kube-object/kube-object-meta.tsx
index 3403a6a48e..7db45990c5 100644
--- a/src/renderer/components/kube-object/kube-object-meta.tsx
+++ b/src/renderer/components/kube-object/kube-object-meta.tsx
@@ -4,6 +4,7 @@ import { DrawerItem, DrawerItemLabels } from "../drawer";
 import { lookupApiLink } from "../../api/kube-api";
 import { Link } from "react-router-dom";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
+import { LocaleDate } from "../locale-date";
 import { getDetailsUrl } from "./kube-object-details";
 
 export interface KubeObjectMetaProps {
@@ -35,7 +36,7 @@ export class KubeObjectMeta extends React.Component<KubeObjectMetaProps> {
     return (
       <>
         <DrawerItem name="Created" hidden={this.isHidden("creationTimestamp")}>
-          {getAge(true, false)} ago ({creationTimestamp})
+          {getAge(true, false)} ago ({<LocaleDate date={creationTimestamp} />})
         </DrawerItem>
         <DrawerItem name="Name" hidden={this.isHidden("name")}>
           {getName()} <KubeObjectStatusIcon key="icon" object={object} />
diff --git a/src/renderer/components/locale-date/index.ts b/src/renderer/components/locale-date/index.ts
new file mode 100644
index 0000000000..30360c9f9a
--- /dev/null
+++ b/src/renderer/components/locale-date/index.ts
@@ -0,0 +1 @@
+export * from "./locale-date";
diff --git a/src/renderer/components/locale-date/locale-date.tsx b/src/renderer/components/locale-date/locale-date.tsx
new file mode 100644
index 0000000000..0477150c00
--- /dev/null
+++ b/src/renderer/components/locale-date/locale-date.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { observer } from "mobx-react";
+import moment from "moment-timezone";
+import { userStore } from "../../../common/user-store";
+
+interface Props {
+  date: string
+}
+
+@observer
+export class LocaleDate extends React.Component<Props> {
+  render() {
+    const { preferences } = userStore;
+    const { date } = this.props;
+
+    return <>{moment.tz(date, preferences.localeTimezone).format()}</>;
+  }
+}