From 0fae80fc8419d84b54eb2ffeaa2e4b15a933f30f Mon Sep 17 00:00:00 2001
From: alex <alex@roese.dev>
Date: Sat, 10 Aug 2024 23:35:34 +0200
Subject: [PATCH] set duration

---
 package-lock.json |  1 +
 package.json      |  1 +
 src/App.js        | 21 ++++++++++++++-------
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0e7d572..07e9914 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "antd": "^5.20.0",
+        "dayjs": "^1.11.12",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-scripts": "5.0.1",
diff --git a/package.json b/package.json
index 4d6232d..4d08d50 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "antd": "^5.20.0",
+    "dayjs": "^1.11.12",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",
diff --git a/src/App.js b/src/App.js
index f080165..68960a0 100644
--- a/src/App.js
+++ b/src/App.js
@@ -17,6 +17,7 @@ import { useForm } from "antd/es/form/Form";
 import useMessage from "antd/es/message/useMessage";
 import { useEffect, useRef, useState } from "react";
 import { myFetch } from "./utils";
+import dayjs from "dayjs";
 
 const { useBreakpoint } = Grid;
 
@@ -91,13 +92,19 @@ function App() {
 
         if (response.acceleration !== undefined)
           setAcceleration(response.acceleration);
-        /*
-        if (response.duration !== undefined)
-          form.setFieldValue("duration", {
-            $s: response.duration % 60,
-            $m: Math.floor(response.duration / 60) % 60,
-            $H: Math.floor(response.duration / 3600),
-          }); */
+
+        const format = "HH:mm:ss";
+
+        if (response.duration !== undefined) {
+          form.setFieldsValue({
+            duration: dayjs(
+              `${Math.floor(response.duration / 3600)}:${
+                Math.floor(response.duration / 60) % 60
+              }:${response.duration % 60}`,
+              format
+            ),
+          });
+        }
 
         if (response.distance !== undefined) setDistance(response.distance);
         if (response.direction !== undefined) setDirection(response.direction);