From c7b6d2387e83b6ac3e2b265109c44db0fec09ce4 Mon Sep 17 00:00:00 2001
From: Oleksandr Sekker <oleksandr.sekker@onix-systems.com>
Date: Tue, 22 Feb 2022 17:02:34 +0200
Subject: [PATCH] fix: make fixes in incedent details

---
 src/components/IncidentDetails/data.js  |  2 +-
 src/components/IncidentDetails/index.js | 28 +++++++++++++++++--------
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/components/IncidentDetails/data.js b/src/components/IncidentDetails/data.js
index 436920d27..96889bd24 100644
--- a/src/components/IncidentDetails/data.js
+++ b/src/components/IncidentDetails/data.js
@@ -1,4 +1,3 @@
-// Temporary mock, in the future you need to replace it with an array of real respondents received from the apis
 import {
   HiOutlineChevronDoubleUp,
   HiOutlineChevronDown,
@@ -7,6 +6,7 @@ import {
 import React from "react";
 import { IncidentPriority } from "../../constants/incident-priority";
 
+// Temporary mock, in the future you need to replace it with an array of real respondents received from the apis
 export const personRespondents = [
   {
     label: "Lindsay Walton",
diff --git a/src/components/IncidentDetails/index.js b/src/components/IncidentDetails/index.js
index bf95f6296..48aaf225a 100644
--- a/src/components/IncidentDetails/index.js
+++ b/src/components/IncidentDetails/index.js
@@ -35,8 +35,7 @@ export const IncidentDetails = ({
   const { control, getValues, watch } = useForm({
     defaultValues: {
       tracking: "123456",
-      started: incident.created_at,
-      duration: incident.created_at,
+      created_at: incident.created_at,
       chartRoomTitle: "#Slack",
       chartRoom: "https://google.com.ua",
       statusPageTitle: "StatusPage.io",
@@ -47,11 +46,22 @@ export const IncidentDetails = ({
     }
   });
   watch();
-  const formatDate = (date, fallback = "-") => {
-    const getDate = date ? dayjs(date).format("DD.MM.YYYY") : fallback;
-    const getDuration = date ? dayjs(incident.created_at).fromNow() : fallback;
-    return { getDate, getDuration };
-  };
+  const DATE_FORMAT = "DD.MM.YYYY";
+  const formatDate = ({ date, format = DATE_FORMAT, fallback = "-" }) =>
+    date ? dayjs(date).format(format) : fallback;
+  const dateToDuration = ({ date, withoutSuffix = false, fallback = "-" }) =>
+    date ? dayjs(date).fromNow(withoutSuffix) : fallback;
+
+  const watchCreatedAt = watch("created_at");
+
+  const formattedCreatedAt = useMemo(
+    () => formatDate({ date: watchCreatedAt }),
+    [watchCreatedAt]
+  );
+  const formattedDuration = useMemo(
+    () => dateToDuration({ date: watchCreatedAt }),
+    [watchCreatedAt]
+  );
   return (
     <div className="px-6 pt-3.5">
       <div className="flex justify-between mb-7">
@@ -140,7 +150,7 @@ export const IncidentDetails = ({
         title="Started"
         value={
           <span className="text-dark-gray text-sm font-normal">
-            {formatDate(getValues("started")).getDate}
+            {formattedCreatedAt}
           </span>
         }
       />
@@ -148,7 +158,7 @@ export const IncidentDetails = ({
         title="Duration"
         value={
           <span className="text-dark-gray text-sm font-normal">
-            {formatDate(getValues("duration")).getDuration}
+            {formattedDuration}
           </span>
         }
       />