add timer

ui/components/sections/cartSection/cartSection.tsx

@@ -5,18 +5,39 @@ import style from "./index.module.css";
 import { manropeBold, manropeSemiBold } from "@/app/fonts";
 import { CartContent } from "@/components/organisms/cartContent";
 import { useStoreContext } from "@/store";
+import { useEffect, useState } from "react";
+import { getTimeDifference } from "@/helpers/timeHelper";
+import { deleteName } from "@/app/actions/actions";
+import { DATA_STATUS } from "@/comman/types";
 
 const CartSection = () => {
   const {
-    state: { bag },
+    state: {
+      bag: { reservationTime, domains },
+    },
+    actions: { deleteFromBag },
   } = useStoreContext();
-  const domainReservationTime = bag?.reservationTime;
+
+  const [time, setTime] = useState<string>("");
+
+  useEffect(() => {
+    if (reservationTime) {
+      setInterval(() => {
+        const result = getTimeDifference(Number(reservationTime));
+        if (!result) {
+          domains.forEach(({ id }) => deleteFromBag(id));
+        }
+        setTime(result);
+      }, 1000);
+    }
+  }, [reservationTime]);
+
   return (
     <div className={classNames(style.wrapper, "container")}>
       <div className={classNames(manropeBold.className, style.header)}>
         My Cart
         <span className={manropeSemiBold.className}>
-          Domain reservation 30:00
+          Domain reservation {time}
         </span>
       </div>
       <CartContent />

ui/helpers/timeHelper.ts

@@ -3,11 +3,10 @@ import dayjsPluginUTC from "dayjs-plugin-utc";
 
 dayjs.extend(dayjsPluginUTC);
 
-export const getTimeFromMillisecondsDynamic = (
-  millis,
-  fullMeasureNames,
-  isAgo
-) => {
+export const getTimeFromMillisecondsDynamic = (millis, fullMeasureNames) => {
+  console.log(millis);
+  console.log(fullMeasureNames);
+
   const SECONDSMS = 1000;
   const MINUTESMS = SECONDSMS * 60;
   const HOURSMS = MINUTESMS * 60;
@@ -19,7 +18,7 @@ export const getTimeFromMillisecondsDynamic = (
   const hoursSymbol = fullMeasureNames ? "hour" : "h";
   const minutesSymbol = fullMeasureNames ? "minute" : "m";
   const secondsSymbol = fullMeasureNames ? "second" : "s";
-  const ago = isAgo ? " ago" : "";
+  const ago = "";
 
   let years, days, hours, minutes, seconds;
 
@@ -107,3 +106,21 @@ export const dayMonthYearTimeFormat = (timestamp) => {
   const date = dayjs(new Date(timestamp)).format("DD.MM.YYYY UTC h:mm");
   return date;
 };
+
+export const getTimeDifference = (timelocalstorage: number): string => {
+  const currentTime = Date.now();
+  const timeDifference = timelocalstorage + 30 * 60000 - currentTime;
+
+  if (timeDifference > 0) {
+    const minutes = Math.floor(timeDifference / 60000);
+    const seconds = Math.floor((timeDifference % 60000) / 1000);
+
+    if (minutes > 0) {
+      return `${minutes}m ${seconds}s`;
+    } else {
+      return `${seconds}s`;
+    }
+  } else {
+    return;
+  }
+};

ui/store/index.tsx

@@ -1,6 +1,5 @@
 "use client";
-import { bag, initReservationTime } from "@/comman/constants";
-import { Bag } from "@/components/atoms/bag";
+import { bag } from "@/comman/constants";
 import { Modals } from "@/components/molecules/modals/modals.types";
 import React, { useContext, useReducer } from "react";
 
@@ -11,7 +10,7 @@ type Domain = {
   id: string;
 };
 type Bag = {
-  reservationTime: Date;
+  reservationTime: Date | number;
   domains: Domain[];
 };
 
@@ -108,7 +107,7 @@ export const reducer = (state: IState, action: StoreActions): IState => {
       };
     case "ADD_TO_BAG":
       const dataBag = {
-        reservationTime: new Date(),
+        reservationTime: Date.now(),
         domains: [...state.bag.domains, action.payload],
       };
       localStorage.setItem(bag, JSON.stringify(dataBag));