[CP-3165] Implemented displaying current time from device

libs/core/__deprecated__/renderer/locales/default/en-US.json

@@ -724,6 +724,7 @@
   "module.overview.timeSynchronizationSuccessButton": "Synchronized",
   "module.overview.timeSynchronizationFailedSubtitle": "Synchronization failed",
   "module.overview.timeSynchronizationFailedDescription": "The process was interrupted.",
+  "module.overview.timeSynchronizationCurrentTimeLabel": "Time and date on device:",
   "module.overview.updateAvailableAboutOsVersionSubDescription": "the device will be upgraded to this version",
   "module.overview.updateAvailableAboutUpdatesTitle": "{num, plural, =1 {ABOUT UPDATE} other {ABOUT UPDATES}}",
   "module.overview.updateAvailableButton": "{num, plural, =1 {Download} other {Download all}}",

libs/core/overview/components/time-synchronization/time-synchronization.component.tsx

@@ -27,6 +27,8 @@ import Icon from "Core/__deprecated__/renderer/components/core/icon/icon.compone
 import { IconType } from "Core/__deprecated__/renderer/components/core/icon/icon-type"
 import { Dispatch } from "Core/__deprecated__/renderer/store"
 import styled from "styled-components"
+import { getTime } from "Core/time-synchronization/actions/get-time.action"
+import { selectSynchronizedTime } from "Core/time-synchronization/selectors/synchronized-time.selector"
 import { TimeSynchronizationTestIds } from "e2e-test-ids"
 
 const messages = defineMessages({
@@ -51,6 +53,9 @@ const messages = defineMessages({
   timeSynchronizationFailedDescription: {
     id: "module.overview.timeSynchronizationFailedDescription",
   },
+  timeSynchronizationCurrentTimeLabel: {
+    id: "module.overview.timeSynchronizationCurrentTimeLabel",
+  },
 })
 
 interface Props {
@@ -61,9 +66,28 @@ const TimeSynchronization: FunctionComponent<Props> = ({
   onSynchronize,
   ...props
 }) => {
-  const status = useSelector(selectTimeSynchronizationStatus)
   const dispatch = useDispatch<Dispatch>()
-  const timeoutRef = useRef<NodeJS.Timeout>()
+  const status = useSelector(selectTimeSynchronizationStatus)
+  const time = useSelector(selectSynchronizedTime)
+  const syncTimeoutRef = useRef<NodeJS.Timeout>()
+  const getIntervalRef = useRef<NodeJS.Timeout>()
+
+  const hourCycle = new Intl.DateTimeFormat(undefined, {
+    timeStyle: "long",
+  }).resolvedOptions().hourCycle
+
+  const deviceTime = Intl.DateTimeFormat(undefined, {
+    hour: "2-digit",
+    minute: "2-digit",
+    timeZone: "UTC",
+  }).format(time)
+
+  const deviceDate = Intl.DateTimeFormat(undefined, {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+    timeZone: "UTC",
+  }).format(time)
 
   const onModalClose = () => {
     dispatch(resetTimeSynchronizationStatus())
@@ -81,17 +105,32 @@ const TimeSynchronization: FunctionComponent<Props> = ({
   }, [status])
 
   useEffect(() => {
-    clearTimeout(timeoutRef.current)
+    clearTimeout(syncTimeoutRef.current)
     if (status === "success") {
-      timeoutRef.current = setTimeout(() => {
+      syncTimeoutRef.current = setTimeout(() => {
         dispatch(resetTimeSynchronizationStatus())
       }, 3000)
     }
     return () => {
-      clearTimeout(timeoutRef.current)
+      clearTimeout(syncTimeoutRef.current)
     }
   }, [dispatch, status])
 
+  useEffect(() => {
+    clearInterval(getIntervalRef.current)
+    getIntervalRef.current = setInterval(() => {
+      const actualMinute = new Date().getMinutes()
+      const deviceMinute = time ? new Date(time).getMinutes() : undefined
+      if (actualMinute !== deviceMinute) {
+        dispatch(getTime())
+      }
+    }, 1000)
+
+    return () => {
+      clearInterval(getIntervalRef.current)
+    }
+  }, [dispatch, time])
+
   return (
     <>
       <Card {...props}>
@@ -102,9 +141,26 @@ const TimeSynchronization: FunctionComponent<Props> = ({
           </Text>
         </CardHeader>
         <CardBody>
-          <CardContent>
-            {/*TODO: Show current Harmony time and date */}
-          </CardContent>
+          <Content>
+            <ContentLabel
+              displayStyle={TextDisplayStyle.Paragraph3}
+              message={messages.timeSynchronizationCurrentTimeLabel}
+              color={"secondary"}
+            />
+            <Time
+              displayStyle={TextDisplayStyle.Paragraph1}
+              $cycle12={hourCycle === "h11" || hourCycle === "h12"}
+              data-testid={TimeSynchronizationTestIds.Time}
+            >
+              {deviceTime}
+            </Time>
+            <Text
+              displayStyle={TextDisplayStyle.Paragraph1}
+              data-testid={TimeSynchronizationTestIds.Date}
+            >
+              {deviceDate}
+            </Text>
+          </Content>
           <CardAction>
             <ButtonComponent
               displayStyle={
@@ -149,6 +205,21 @@ const TimeSynchronization: FunctionComponent<Props> = ({
 
 export default TimeSynchronization
 
+const ContentLabel = styled(Text)`
+  width: 100%;
+`
+
+const Time = styled(Text)<{ $cycle12?: boolean }>`
+  width: ${({ $cycle12 }) => ($cycle12 ? "6.5rem" : "4.2rem")};
+`
+
+const Content = styled(CardContent)`
+  flex-direction: row;
+  flex-wrap: wrap;
+  row-gap: 0.4rem;
+  column-gap: 2rem;
+`
+
 const ModalHeading = styled(Text)`
   margin-bottom: 0.8rem;
 `

libs/core/time-synchronization/actions/get-time.action.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import { createAsyncThunk } from "@reduxjs/toolkit"
+import { SynchronizeTimeEvent } from "../constants/event.constant"
+import { ReduxRootState } from "Core/__deprecated__/renderer/store"
+import { getTimeRequest } from "Core/time-synchronization/requests/get-time.request"
+
+export const getTime = createAsyncThunk<
+  Date,
+  undefined,
+  { state: ReduxRootState }
+>(SynchronizeTimeEvent.Get, async (_, { rejectWithValue }) => {
+  const response = await getTimeRequest()
+  if (response.error) {
+    return rejectWithValue(response.error)
+  }
+  return new Date(response.data)
+})

libs/core/time-synchronization/actions/synchronize-time.action.ts

@@ -8,6 +8,7 @@ import { SynchronizeTimeEvent } from "../constants/event.constant"
 import { synchronizeTimeRequest } from "Core/time-synchronization/requests/synchronize-time.request"
 import delayResponse from "@appnroll/delay-response"
 import { ReduxRootState } from "Core/__deprecated__/renderer/store"
+import { getTime } from "./get-time.action"
 
 export const synchronizeTime = createAsyncThunk<
   void,
@@ -26,6 +27,7 @@ export const synchronizeTime = createAsyncThunk<
     if (response.error) {
       return rejectWithValue(response.error)
     }
+    dispatch(getTime())
     return
   }
 )

libs/core/time-synchronization/constants/controller.constant.ts

@@ -5,4 +5,5 @@
 
 export enum IpcSynchronizeTimeEvent {
   SynchronizeTime = "time-synchronization_synchronize",
+  GetTime = "time-synchronization_get-time",
 }

libs/core/time-synchronization/constants/event.constant.ts

@@ -7,4 +7,5 @@ export enum SynchronizeTimeEvent {
   Synchronize = "SYNCHRONIZE_TIME",
   SetAbortController = "SYNCHRONIZE_TIME_SET_ABORT_CONTROLLER",
   ResetStatus = "SYNCHRONIZE_TIME_RESET_STATUS",
+  Get = "SYNCHRONIZE_TIME_GET",
 }

libs/core/time-synchronization/controllers/time-synchronization.controller.ts

@@ -14,4 +14,9 @@ export class TimeSynchronizationController {
   async synchronizeTime() {
     return this.timeSynchronizationService.synchronizeTime()
   }
+
+  @IpcEvent(IpcSynchronizeTimeEvent.GetTime)
+  async getTime() {
+    return this.timeSynchronizationService.getTime()
+  }
 }

libs/core/time-synchronization/reducers/time-synchronization.reducer.ts

@@ -9,10 +9,11 @@ import {
   synchronizeTime,
 } from "../actions/synchronize-time.action"
 import { resetTimeSynchronizationStatus } from "../actions/reset-time-synchronization-status"
+import { getTime } from "Core/time-synchronization/actions/get-time.action"
 
 interface TimeSynchronizationState {
   status?: "idle" | "loading" | "success" | "error"
-  time?: Date // TODO: add support for displaying the time when available
+  time?: Date
   abortController?: AbortController
 }
 
@@ -22,6 +23,9 @@ export const initialState: TimeSynchronizationState = {
 
 export const timeSynchronizationReducer =
   createReducer<TimeSynchronizationState>(initialState, (builder) => {
+    builder.addCase(getTime.fulfilled, (state, action) => {
+      state.time = action.payload
+    })
     builder.addCase(synchronizeTime.pending, (state) => {
       state.status = "loading"
     })

libs/core/time-synchronization/requests/get-time.request.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import { ipcRenderer } from "electron-better-ipc"
+import { ResultObject } from "Core/core/builder"
+import { IpcSynchronizeTimeEvent } from "../constants/controller.constant"
+import { TimeSynchronizationError } from "../constants/error.constant"
+
+export const getTimeRequest = async (): Promise<
+  ResultObject<number, TimeSynchronizationError>
+> => {
+  return ipcRenderer.callMain(IpcSynchronizeTimeEvent.GetTime)
+}

libs/core/time-synchronization/selectors/synchronized-time.selector.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import { createSelector } from "@reduxjs/toolkit"
+import { ReduxRootState } from "Core/__deprecated__/renderer/store"
+
+export const selectSynchronizedTime = createSelector(
+  (state: ReduxRootState) => state.timeSynchronization,
+  (timeSynchronization) => timeSynchronization.time
+)

libs/core/time-synchronization/services/time-synchronization.service.ts

@@ -38,4 +38,29 @@ export class TimeSynchronizationService {
 
     return Result.success(true)
   }
+
+  public async getTime() {
+    const response = await this.deviceProtocol.device.request<{
+      timestamp: number
+    }>({
+      endpoint: Endpoint.TimeSynchronization,
+      method: Method.Get,
+      body: {
+        value: "timestamp",
+      },
+      options: {
+        connectionTimeOut: 5000,
+      },
+    })
+
+    if (!response.ok || !response.data?.timestamp) {
+      return Result.failed(
+        new AppError(
+          TimeSynchronizationError.SynchronizationFailed,
+          "Getting time failed"
+        )
+      )
+    }
+    return Result.success(response.data.timestamp * 1000)
+  }
 }

libs/e2e-test-ids/src/e2e-test-ids.ts

@@ -57,4 +57,6 @@ export enum NewContactSupportModalTestIds {
 
 export enum TimeSynchronizationTestIds {
   SynchronizeButton = "time-synchronization-synchronize-button",
+  Time = "time-synchronization-time",
+  Date = "time-synchronization-date",
 }