diff --git a/src/assets/images/notifications/messages.svg b/src/assets/images/notifications/message.svg similarity index 100% rename from src/assets/images/notifications/messages.svg rename to src/assets/images/notifications/message.svg diff --git a/src/components/Helpers/TimeDifference.jsx b/src/components/Helpers/TimeDifference.jsx new file mode 100644 index 0000000..7988225 --- /dev/null +++ b/src/components/Helpers/TimeDifference.jsx @@ -0,0 +1,36 @@ +const TimeDifference = ({ time }) => { + const currentTime = new Date(); + const providedTime = new Date(time); + + const timeDifference = currentTime - providedTime; // Difference in milliseconds + + const minutes = Math.floor(timeDifference / (1000 * 60)); + const hours = Math.floor(timeDifference / (1000 * 60 * 60)); + const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24)); + const months = Math.floor(timeDifference / (1000 * 60 * 60 * 24 * 30)); + + if (minutes < 1) { + return "Just now"; + } else if (minutes < 60) { + return `${minutes} ${minutes === 1 ? "minute" : "minutes"} ago`; + } else if (hours < 12) { + return `${hours} ${hours === 1 ? "hour" : "hours"} ago`; + } else if (hours < 24) { + return "Today"; + } else if (days < 2) { + return "Tomorrow"; + } else if (days < 7) { + return `${days} ${days === 1 ? "day" : "days"} ago`; + } else if (months < 1) { + const weeks = Math.floor(days / 7); + return `${weeks} ${weeks === 1 ? "week" : "weeks"} ago`; + } else if (months < 6) { + return `${months} ${months === 1 ? "month" : "months"} ago`; + }else if (months < 8) { + return `"More than 6 months ago"`; + } else { + return time?.split(" ")[0]; + } +}; + +export default TimeDifference; diff --git a/src/components/MyWallet/Balance.jsx b/src/components/MyWallet/Balance.jsx index 391e037..5214f38 100644 --- a/src/components/MyWallet/Balance.jsx +++ b/src/components/MyWallet/Balance.jsx @@ -1,115 +1,129 @@ -import React, {useState} from 'react' -import { Link } from 'react-router-dom' -import RecentActivityTable from './WalletComponent/RecentActivityTable' -import PurchasesTable from './WalletComponent/PurchasesTable' -import CouponTable from './WalletComponent/CouponTable' -import LoadingSpinner from '../Spinners/LoadingSpinner' -import { PriceFormatter } from '../Helpers/PriceFormatter' +import React from "react"; +import { Link } from "react-router-dom"; +import { PriceFormatter } from "../Helpers/PriceFormatter"; +import LoadingSpinner from "../Spinners/LoadingSpinner"; -function Balance({wallet, coupon}) { - return ( -
- {/* heading */} -
-
-

- Wallet -

-
-
- -
-
-
- {/* WALLET SECTION */} -
-
-
- {/*

Wallet

*/} - {/*

Add New Wallet

*/} -
- {/* wallet balance */} - {wallet.loading ? - - : - wallet.data.length ? - wallet.data.map((item, index)=> ( -
-
-
-

- {item.description} -

{item.symbol}

-
-
-

Balance

- {PriceFormatter(item.amount * 0.01, item.code)} -
-
-

Escrow

- {PriceFormatter(item.escrow * 0.01, item.code)} -
-
- -
- { - item.action_type != 'AC_AD_FD_ONLY' ? - Transfer:'' - } - - - - - - Add Credit - -
-
- )) - : - wallet.error ? - ( -
-

Opps! An Error occurred, please try again

-
- ) - : - ( -
-

No Wallets Found!

-
- ) - } - {/* end of wallet balance */} -
-
- {/* END OF WALLET SECTION */} - - - -
- - {/*
*/} - - {/* /!* COUPON SECTION *!/*/} - {/*
*/} - {/*
*/} - {/*

Coupons

*/} - {/* {coupon.loading ?*/} - {/* */} - {/* :*/} - {/* */} - {/* }*/} - {/*
*/} - {/*
*/} - {/* /!* END OF COUPON SECTION *!/*/} - - {/*
*/} +function Balance({ wallet, coupon }) { + return ( +
+ {/* heading */} +
+
+

+ Wallet +

- ) +
+
+
+ {/* WALLET SECTION */} +
+
+
+ {/*

Wallet

*/} + {/*

Add New Wallet

*/} +
+ {/* wallet balance */} + {wallet.loading ? ( + + ) : wallet.data.length ? ( + wallet.data.map((item, index) => ( +
+
+
+

+ + {item.description} + +

{item.symbol}

+
+
+

Balance

+ + {PriceFormatter(item.amount * 0.01, item.code)} + +
+
+

Escrow

+ + {PriceFormatter(item.escrow * 0.01, item.code)} + +
+
+ +
+ {item.action_type != "AC_AD_FD_ONLY" ? ( + + Transfer + + ) : ( + "" + )} + + + + + + + Add Credit + +
+
+ )) + ) : wallet.error ? ( +
+

+ Opps! An Error occurred, please try again +

+
+ ) : ( +
+

No Wallets Found!

+
+ )} + {/* end of wallet balance */} +
+
+ {/* END OF WALLET SECTION */} +
+ + {/*
*/} + + {/* /!* COUPON SECTION *!/*/} + {/*
*/} + {/*
*/} + {/*

Coupons

*/} + {/* {coupon.loading ?*/} + {/* */} + {/* :*/} + {/* */} + {/* }*/} + {/*
*/} + {/*
*/} + {/* /!* END OF COUPON SECTION *!/*/} + + {/*
*/} +
+ ); } -export default Balance \ No newline at end of file +export default Balance; diff --git a/src/components/Partials/Header.jsx b/src/components/Partials/Header.jsx index 73e8dae..cfe906d 100644 --- a/src/components/Partials/Header.jsx +++ b/src/components/Partials/Header.jsx @@ -1,4 +1,4 @@ -import React, { useContext, useEffect, useState } from "react"; +import React, { useContext, useEffect, useMemo, useState } from "react"; import { Link, useLocation } from "react-router-dom"; import bank1 from "../../assets/images/bank-1.png"; import bank2 from "../../assets/images/bank-2.png"; @@ -15,18 +15,18 @@ import WalletHeader from "../MyWallet/WalletHeader"; import { useSelector } from "react-redux"; import Flag from "../../assets/images/united-states.svg"; import siteLogo from "../../assets/images/wrenchboard.png"; +import TimeDifference from "../Helpers/TimeDifference"; export default function Header({ logoutModalHandler, sidebarHandler }) { const [balanceDropdown, setbalanceValue] = useToggle(false); const [notificationDropdown, setNotificationValue] = useToggle(false); const [userProfileDropdown, setProfileDropdown] = useToggle(false); const [moneyPopup, setPopup] = useToggle(false); - const [toggleNotification, setToggleNotification] = useToggle(false); const darkMode = useContext(DarkModeContext); const { userDetails } = useSelector((state) => state?.userDetails); - + const { notifications } = useSelector((state) => state?.notifications); const [myWalletList, setMyWalletList] = useState([]); - const api = new usersService(); + const api = useMemo(() => new usersService(), []); const getMyWalletList = async () => { try { @@ -84,10 +84,6 @@ export default function Header({ logoutModalHandler, sidebarHandler }) { setbalanceValue.set(false); }; - const setNotification = () => { - setToggleNotification.toggle(); - }; - // getting the location of head let { pathname } = useLocation(); @@ -101,6 +97,8 @@ export default function Header({ logoutModalHandler, sidebarHandler }) { let { firstname, lastname, email, profile_pic } = userDetails; let userEmail = email?.split("@")[0]; + // console.log("Notify: ", notifications?.data?.raw); + return ( <>
@@ -251,7 +249,9 @@ export default function Header({ logoutModalHandler, sidebarHandler }) { > - 10 + {notifications?.loading + ? "●" + : notifications?.data?.raw?.length}
+
- -
  • -
    -
    - - - - - - -
    -
    -

    - You upload your frast product - - successfully done - -

    -

    - 23 house ago -

    -
    -
    -
    • -
  • -
    -
    - - - - - - - - -
    -
    -

    - Thank you ! - you made your frast sell - 232.98 ETH -

    -

    - 23 house ago -

    -
    -
    -
    • -
  • -
    -
    - - - - - - -
    -
    -

    - Your Account has been created - - successfully done - -

    -

    - 23 house ago -

    -
    -
    -
    • -
  • -
    -
    - - - - -
    -
    -

    - Your Account has been created - - successfully done - -

    -

    - 23 house ago -

    -
    -
    -
    • + + ))} +
    { - setRecipientAccount({ state: true, data: item }); + // setRecipientAccount({ state: true, data: item }); + console.log("Testing...") }} className="w-[95px] sm:h-[46px] h-[40px] rounded-full btn-gradient text-white sm:text-18 text-md tracking-wide" > diff --git a/src/lib/fomattedDate.js b/src/lib/fomattedDate.js new file mode 100644 index 0000000..305d6ad --- /dev/null +++ b/src/lib/fomattedDate.js @@ -0,0 +1,17 @@ +export default function formattedDate(dateString) { + const parts = dateString.split(" "); + const datePart = parts[0]; + const timePart = parts[1]; + + const [month, day, year] = datePart.split("-").map(Number); + let [hour, minute] = timePart.slice(0, -2).split(":").map(Number); + + // Convert 12-hour time to 24-hour time if necessary + if (timePart.endsWith("PM") && hour !== 12) { + hour += 12; + } else if (timePart.endsWith("AM") && hour === 12) { + hour = 0; + } + + return new Date(year, month - 1, day, hour, minute); +} diff --git a/src/store/notifications.js b/src/store/notifications.js new file mode 100644 index 0000000..f703af0 --- /dev/null +++ b/src/store/notifications.js @@ -0,0 +1,22 @@ +import { createSlice } from "@reduxjs/toolkit"; + +const initialState = { + notifications: { + loading: false, + data: null, + }, +}; + +export const notificationsSlice = createSlice({ + name: "notifications", + initialState, + reducers: { + updateNotifications: (state, action) => { + state.notifications = { ...action.payload }; + }, + }, +}); + +export const { updateNotifications } = notificationsSlice.actions; + +export default notificationsSlice.reducer; diff --git a/src/store/store.js b/src/store/store.js index a042c79..3f563b6 100644 --- a/src/store/store.js +++ b/src/store/store.js @@ -1,11 +1,12 @@ import { configureStore } from "@reduxjs/toolkit"; import drawerReducer from "./drawer"; +import commonHeadBannerReducer from "./CommonHeadBanner"; +import tableReloadReducer from "./TableReloads"; import userDetailReducer from "./UserDetails"; import jobReducer from "./jobLists"; -import tableReloadReducer from "./TableReloads"; -import userJobListReducer from './userJobList' -import commonHeadBannerReducer from './CommonHeadBanner' +import notificationsReducer from "./notifications"; +import userJobListReducer from "./userJobList"; export default configureStore({ reducer: { @@ -14,6 +15,7 @@ export default configureStore({ jobLists: jobReducer, tableReload: tableReloadReducer, userJobList: userJobListReducer, - commonHeadBanner: commonHeadBannerReducer + commonHeadBanner: commonHeadBannerReducer, + notifications: notificationsReducer, }, -}); \ No newline at end of file +}); diff --git a/src/views/NotificationPage.jsx b/src/views/NotificationPage.jsx index 20169d2..220a3a2 100644 --- a/src/views/NotificationPage.jsx +++ b/src/views/NotificationPage.jsx @@ -1,4 +1,3 @@ -import React from "react"; import Notification from "../components/Notification"; export default function notification() {