diff --git a/ui/components/sections/cartSection/cartSection.tsx b/ui/components/sections/cartSection/cartSection.tsx index 9831650..8682856 100644 --- a/ui/components/sections/cartSection/cartSection.tsx +++ b/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(""); + + useEffect(() => { + if (reservationTime) { + setInterval(() => { + const result = getTimeDifference(Number(reservationTime)); + if (!result) { + domains.forEach(({ id }) => deleteFromBag(id)); + } + setTime(result); + }, 1000); + } + }, [reservationTime]); + return (
My Cart - Domain reservation 30:00 + Domain reservation {time}
diff --git a/ui/helpers/timeHelper.ts b/ui/helpers/timeHelper.ts index d985323..e493d99 100644 --- a/ui/helpers/timeHelper.ts +++ b/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; + } +}; diff --git a/ui/store/index.tsx b/ui/store/index.tsx index ff51f9a..8d2066a 100755 --- a/ui/store/index.tsx +++ b/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));