component classes v2

[lemmy-ui.git] / src / shared / components / common / moment-time.tsx

diff --git a/src/shared/components/common/moment-time.tsx b/src/shared/components/common/moment-time.tsx
index 20623932f68d77900404e2961cb28ca5d39f12d3..511c4b467703ec41e57c984fe5d7f4a9ad34c71c 100644 (file)
--- a/src/shared/components/common/moment-time.tsx
+++ b/src/shared/components/common/moment-time.tsx
@@ -1,15 +1,12 @@
 import { Component } from "inferno";
 import moment from "moment";
 import { i18n } from "../../i18next";
-import { capitalizeFirstLetter, getMomentLanguage } from "../../utils";
+import { capitalizeFirstLetter } from "../../utils";
 import { Icon } from "./icon";
 
 interface MomentTimeProps {
-  data: {
-    published?: string;
-    when_?: string;
-    updated?: string;
-  };
+  published: string;
+  updated?: string;
   showAgo?: boolean;
   ignoreUpdated?: boolean;
 }
@@ -18,32 +15,41 @@ export class MomentTime extends Component<MomentTimeProps, any> {
   constructor(props: any, context: any) {
     super(props, context);
 
-    let lang = getMomentLanguage();
+    moment.locale([...i18n.languages]);
+  }
 
-    moment.locale(lang);
+  createdAndModifiedTimes() {
+    const updated = this.props.updated;
+    let line = `${capitalizeFirstLetter(i18n.t("created"))}: ${this.format(
+      this.props.published
+    )}`;
+    if (updated) {
+      line += `\n\n\n${capitalizeFirstLetter(i18n.t("modified"))} ${this.format(
+        updated
+      )}`;
+    }
+    return line;
   }
 
   render() {
-    if (!this.props.ignoreUpdated && this.props.data.updated) {
+    if (!this.props.ignoreUpdated && this.props.updated) {
       return (
         <span
-          data-tippy-content={`${capitalizeFirstLetter(
-            i18n.t("modified")
-          )} ${this.format(this.props.data.updated)}`}
-          className="font-italics pointer unselectable"
+          data-tippy-content={this.createdAndModifiedTimes()}
+          className="moment-time font-italics pointer unselectable"
         >
-          <Icon icon="edit-2" classes="icon-inline mr-1" />
-          {moment.utc(this.props.data.updated).fromNow(!this.props.showAgo)}
+          <Icon icon="edit-2" classes="icon-inline me-1" />
+          {moment.utc(this.props.updated).fromNow(!this.props.showAgo)}
         </span>
       );
     } else {
-      let str = this.props.data.published || this.props.data.when_;
+      const published = this.props.published;
       return (
         <span
-          className="pointer unselectable"
-          data-tippy-content={this.format(str)}
+          className="moment-time pointer unselectable"
+          data-tippy-content={this.format(published)}
         >
-          {moment.utc(str).fromNow(!this.props.showAgo)}
+          {moment.utc(published).fromNow(!this.props.showAgo)}
         </span>
       );
     }