set duration

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",

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",

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);