Visual Console Refactor: moved the functions to represent the date and time to the lib

Former-commit-id: 1109e24d0aa03422ba6b3c8c5df5fcedaacdc1ce

visual_console_client/src/items/Clock/index.ts

@@ -4,10 +4,11 @@ import { LinkedVisualConsoleProps, UnknownObject, Size } from "../../types";
 import {
   linkedVCPropsDecoder,
   parseIntOr,
-  padLeft,
   parseBoolean,
   prefixedCssRules,
-  notEmptyStringOr
+  notEmptyStringOr,
+  humanDate,
+  humanTime
 } from "../../lib";
 import Item, { ItemProps, itemBasePropsDecoder, ItemType } from "../../Item";
 
@@ -388,7 +389,7 @@ export default class Clock extends Item<ClockProps> {
     pin.setAttribute("fill", colors.handDark);
 
     // Get the hand angles.
-    const date = this.getDate();
+    const date = this.getOriginDate();
     const seconds = date.getSeconds();
     const minutes = date.getMinutes();
     const hours = date.getHours();
@@ -492,11 +493,14 @@ export default class Clock extends Item<ClockProps> {
       (width / 100) * 10
     );
 
+    // Date calculated using the original timezone.
+    const date = this.getOriginDate();
+
     // Date.
     if (this.props.clockFormat === "datetime") {
       const dateElem: HTMLSpanElement = document.createElement("span");
       dateElem.className = "date";
-      dateElem.textContent = this.getDigitalDate();
+      dateElem.textContent = humanDate(date);
       dateElem.style.fontSize = `${dateFontSize}px`;
       if (this.props.color) dateElem.style.color = this.props.color;
       element.append(dateElem);
@@ -505,7 +509,7 @@ export default class Clock extends Item<ClockProps> {
     // Time.
     const timeElem: HTMLSpanElement = document.createElement("span");
     timeElem.className = "time";
-    timeElem.textContent = this.getDigitalTime();
+    timeElem.textContent = humanTime(date);
     timeElem.style.fontSize = `${timeFontSize}px`;
     if (this.props.color) timeElem.style.color = this.props.color;
     element.append(timeElem);
@@ -528,8 +532,8 @@ export default class Clock extends Item<ClockProps> {
    * Generate the current date using the timezone offset stored into the properties.
    * @return The current date.
    */
-  private getDate(): Date {
+  private getOriginDate(initialDate: Date | null = null): Date {
-    const d = new Date();
+    const d = initialDate ? initialDate : new Date();
     const targetTZOffset = this.props.clockTimezoneOffset * 1000; // In ms.
     const localTZOffset = d.getTimezoneOffset() * 60 * 1000; // In ms.
     const utimestamp = d.getTime() + targetTZOffset + localTZOffset;
@@ -537,37 +541,6 @@ export default class Clock extends Item<ClockProps> {
     return new Date(utimestamp);
   }
 
-  /**
-   * Generate a date representation with the format 'd/m/Y'.
-   * @example 24/02/2020.
-   * @return Date representation.
-   */
-  public getDigitalDate(initialDate: Date | null = null): string {
-    const date = initialDate || this.getDate();
-    // Use getDate, getDay returns the week day.
-    const day = padLeft(date.getDate(), 2, 0);
-    // The getMonth function returns the month starting by 0.
-    const month = padLeft(date.getMonth() + 1, 2, 0);
-    const year = padLeft(date.getFullYear(), 4, 0);
-
-    // Format: 'd/m/Y'.
-    return `${day}/${month}/${year}`;
-  }
-
-  /**
-   * Generate a time representation with the format 'hh:mm:ss'.
-   * @example 01:34:09.
-   * @return Time representation.
-   */
-  public getDigitalTime(initialDate: Date | null = null): string {
-    const date = initialDate || this.getDate();
-    const hours = padLeft(date.getHours(), 2, 0);
-    const minutes = padLeft(date.getMinutes(), 2, 0);
-    const seconds = padLeft(date.getSeconds(), 2, 0);
-
-    return `${hours}:${minutes}:${seconds}`;
-  }
-
   /**
    * Extract a human readable city name from the timezone text.
    * @param timezone Timezone text.

visual_console_client/src/items/Clock/spec.ts

@@ -55,24 +55,6 @@ describe("Clock item", () => {
     ).toBeGreaterThan(0);
   });
 
-  describe("getDate function", () => {
-    it("should return the date with padded 0's", () => {
-      const expected = "01/02/0123";
-      const date = new Date(`02/01/0123 12:00:00`);
-      const digitalDate = clockInstance.getDigitalDate(date);
-      expect(digitalDate).toBe(expected);
-    });
-  });
-
-  describe("getTime function", () => {
-    it("should return the time with padded 0's when hours/minutes/seconds are less than 10", () => {
-      const expected = "01:02:03";
-      const date = new Date(`01/01/1970 ${expected}`);
-      const digitalTime = clockInstance.getDigitalTime(date);
-      expect(digitalTime).toBe(expected);
-    });
-  });
-
   describe("getHumanTimezone function", () => {
     it("should return a better timezone", () => {
       expect(clockInstance.getHumanTimezone("America/New_York")).toBe(

visual_console_client/src/lib.spec.ts

@@ -4,7 +4,9 @@ import {
   notEmptyStringOr,
   padLeft,
   prefixedCssRules,
-  decodeBase64
+  decodeBase64,
+  humanDate,
+  humanTime
 } from "./lib";
 
 describe("function parseIntOr", () => {
@@ -79,3 +81,21 @@ describe("function decodeBase64", () => {
     ).toEqual("<div>Box <p>Paragraph</p><hr /></div>");
   });
 });
+
+describe("humanDate function", () => {
+  it("should return the date with padded 0's", () => {
+    const expected = "01/02/0123";
+    const date = new Date(`02/01/0123 12:00:00`);
+    const digitalDate = humanDate(date);
+    expect(digitalDate).toBe(expected);
+  });
+});
+
+describe("humanTime function", () => {
+  it("should return the time with padded 0's when hours/minutes/seconds are less than 10", () => {
+    const expected = "01:02:03";
+    const date = new Date(`01/01/1970 ${expected}`);
+    const digitalTime = humanTime(date);
+    expect(digitalTime).toBe(expected);
+  });
+});

visual_console_client/src/lib.ts

@@ -277,3 +277,36 @@ export function prefixedCssRules(
 export function decodeBase64(input: string): string {
   return decodeURIComponent(escape(window.atob(input)));
 }
+
+/**
+ * Generate a date representation with the format 'd/m/Y'.
+ * @param initialDate Date to be used instead of a generated one.
+ * @example 24/02/2020.
+ * @return Date representation.
+ */
+export function humanDate(initialDate: Date | null = null): string {
+  const date = initialDate || new Date();
+  // Use getDate, getDay returns the week day.
+  const day = padLeft(date.getDate(), 2, 0);
+  // The getMonth function returns the month starting by 0.
+  const month = padLeft(date.getMonth() + 1, 2, 0);
+  const year = padLeft(date.getFullYear(), 4, 0);
+
+  // Format: 'd/m/Y'.
+  return `${day}/${month}/${year}`;
+}
+
+/**
+ * Generate a time representation with the format 'hh:mm:ss'.
+ * @param initialDate Date to be used instead of a generated one.
+ * @example 01:34:09.
+ * @return Time representation.
+ */
+export function humanTime(initialDate: Date | null = null): string {
+  const date = initialDate || new Date();
+  const hours = padLeft(date.getHours(), 2, 0);
+  const minutes = padLeft(date.getMinutes(), 2, 0);
+  const seconds = padLeft(date.getSeconds(), 2, 0);
+
+  return `${hours}:${minutes}:${seconds}`;
+}