Skip to content

Commit

Permalink
Merge branch 'dev' into ZA/fix/auth
Browse files Browse the repository at this point in the history
  • Loading branch information
@d-a-ve
d-a-ve authored Oct 22, 2023
2 parents e069f29 + 95a0156 commit 4478d99
Show file tree
Hide file tree
Showing 3 changed files with 98 additions and 74 deletions.
111 changes: 56 additions & 55 deletions components/Modals/Notifications.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React, { useState, useEffect } from 'react';
import { FaCheckCircle, FaTimesCircle } from 'react-icons/fa';

import Image from 'next/image';
interface Notification {
id: number;
text: string;
text: 'Good news!, Your order has been shipped and is on its way',
read: boolean;
date: string;
}
Expand All @@ -25,76 +25,95 @@ const Notifications: React.FC<NotificationsProps> = ({ notificationsRef, unreadN
return () => clearTimeout(timer);
}, []);

const timeAgo = (dateString: string): string => {
const now: Date = new Date();
const date = new Date(dateString);
const diff = now.getTime() - date.getTime();
const seconds = Math.floor(diff / 1000);
const minutes = Math.floor(seconds / 60);
const hours = Math.floor(minutes / 60);
const days = Math.floor(hours / 24);

if (days > 1) return `${days} days ago`;
if (days === 1) return '1 day ago';
if (hours > 1) return `${hours} hours ago`;
if (hours === 1) return '1 hour ago';
if (minutes > 1) return `${minutes} minutes ago`;
if (minutes === 1) return '1 minute ago';
if (seconds > 1) return `${seconds} seconds ago`;
return 'just now';
};

const [notifications, setNotifications] = useState<Notification[]>([
{
id: 1,
text: 'Your item has been successfully delivered. Thank you for choosing our service. We hope you enjoy your purchase!',
text: 'Good news!, Your order has been shipped and is on its way',
read: false,
date: '2023-10-20T12:34:56Z',
},
{
id: 2,
text: 'Great news! Your shop has received a lot of visitors this week. Keep up the good work!',
text: 'Good news!, Your order has been shipped and is on its way',
read: false,
date: '2023-10-19T10:30:45Z',
},
{
id: 3,
text: 'New feature alert: Introducing a powerful search functionality to help you find products faster and easier.',
text: 'Good news!, Your order has been shipped and is on its way',
read: false,
date: '2023-10-18T08:45:32Z',
},
{
id: 4,
text: 'We have exciting promotions coming up. Stay tuned for exclusive discounts and special offers!',
text: 'Good news!, Your order has been shipped and is on its way',
read: true,
date: '2023-10-17T16:20:15Z',
},
{
id: 5,
text: 'Thank you for being a valued member of our community. We appreciate your continued support!',
text: 'Good news!, Your order has been shipped and is on its way',
read: false,
date: '2023-10-16T14:10:55Z',
},
{
id: 6,
text: 'Your recent purchase has earned you reward points. You can use them on your next order for great discounts!',
text: 'Good news!, Your order has been shipped and is on its way',
read: true,
date: '2023-10-15T12:15:42Z',
},
{
id: 7,
text: 'Exciting news! Our website is now available in multiple languages to serve you better.',
text: 'Good news!, Your order has been shipped and is on its way',
read: true,
date: '2023-10-14T11:05:30Z',
},
{
id: 8,
text: 'Special offer just for you! Use code SPECIAL10 for an extra 10% off on selected items.',
text: 'Good news!, Your order has been shipped and is on its way',
read: true,
date: '2023-10-13T09:40:25Z',
},
{
id: 9,
text: 'We are thrilled to announce our new collection. Explore the latest trends in fashion and style!',
text: 'Good news!, Your order has been shipped and is on its way',
read: false,
date: '2023-10-12T07:55:20Z',
},
{
id: 10,
text: "Don't miss out! Limited stock available on our best-selling products. Grab yours now!",
text: 'Good news!, Your order has been shipped and is on its way',
read: true,
date: '2023-10-11T05:30:10Z',
},
{
id: 11,
text: 'Thank you for your feedback. Your input helps us improve our services for a better experience!',
text: 'Good news!, Your order has been shipped and is on its way',
read: true,
date: '2023-10-10T03:25:05Z',
},
{
id: 12,
text: 'New arrivals alert! Discover the hottest trends in fashion. Shop now and stay ahead of the curve!',
text: 'Good news!, Your order has been shipped and is on its way',
read: false,
date: '2023-10-09T01:15:00Z',
},
Expand Down Expand Up @@ -126,53 +145,35 @@ const Notifications: React.FC<NotificationsProps> = ({ notificationsRef, unreadN
);

return (
<div
className={`w-[25em] bg-white-100 h-[60vh] z-50 overflow-y-scroll rounded shadow-lg ${
loading ? 'animate-pulse' : ''
}`}
// ref={notificationsRef}
<div className={`bg-[#fff] font-manropeEL w-fit h-[60vh] z-[20000] border-[#d8d8d8] overflow-y-scroll scrollbar-none rounded-lg shadow-xl ${loading ? '' : ''}`}
ref={notificationsRef}
>
<div className="py-2 bg-white-100 sticky top-0 flex flex-col justify-between">
<input
type="text"
placeholder="Search notifications..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="border border-brand-green-primary outline:border-[1.2px] p-2 mb-4"
/>
<button
onClick={markAllAsRead}
className="bg-white-100 w-fit float-right text-green-400 font-semibold rounded hover:bg-green-200 "
>
Mark All as Read
</button>
<div className="py-2 bg-white-100 px-4 sticky top-0 flex flex-col justify-between">
<h1 className="font-[600]">Notifications</h1>


</div>
<ul className="flex flex-col">
{filteredNotifications.map((notification) => (
<li
<ul className='flex flex-col w-full flex-wrap'>
{filteredNotifications.map(notification => (
<li
key={notification.id}
className={`py-4 px-4 flex items-start justify-between border-b ${
notification.read ? 'text-gray-700' : 'bg-[#00000021] text-white'
}`}
className={`h-fit py-4 flex px-4 flex-col border-b ${notification.read ? '' : 'text-white'}`}
>
<div className="flex flex-col">
<p className="font-[400] mb-2">{notification.text}</p>
<p className="text-gray-600 text-sm">{new Date(notification.date).toLocaleString()}</p>
<div className="flex w-full gap-4 m-auto items-center justify-center align-middle">

<div className="m-auto bg-brand-green-primary w-fit p-2 rounded-full">
<Image src="/boxnotify.svg" alt="icon" width={30} height={40} />
</div>
<div className="flex m-auto items-center gap-2 justify-center w-full flex-col">
<p className='font-[400] text-[#5B5F5E] text-sm '>
{notification.text}
</p>
<p className='text-gray-600 w-full float-left text-sm text-left justify-start items-start align-baseline'>
{timeAgo(notification.date)}
</p>
</div>
<div className="flex items-center">
{!notification.read && (
<div className="flex items-center">
<FaCheckCircle
onClick={() => markAsRead(notification.id)}
className="text-green-500 cursor-pointer mr-2"
/>
</div>
)}
<FaTimesCircle
onClick={() => removeNotification(notification.id)}
className="text-red-500 cursor-pointer"
/>
</div>

</li>
))}
</ul>
Expand Down
54 changes: 35 additions & 19 deletions components/Navbars/TopBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@ function TopBar(props: { activePage: string; showDashBorad: boolean }) {
{/* Right Items */}

<div
className={`lg:flex hidden items-center gap-4 lg:flex-row flex-col bg-white-100 w-[100%] py-8 lg:py-0 lg:justify-end lg:opacity-100 transition-all ease-in-out duration-500 top-[9vh] z-[1]`}
className={`lg:flex hidden items-center gap-4 lg:flex-row flex-col bg-white-100 w-[100%] py-8 lg:py-0 lg:justify-end lg:opacity-100 transition-all ease-in-out duration-500 top-[9vh] z-[1]`}
>
<div className="max-w-[53%] h-auto lg:h-12 p-4 rounded-lg border border-neutral-200 justify-start items-center gap-3 flex lg:flex-row flex-col basis-[100%]">
<div className="grow shrink basis-0 h-6 justify-start items-center gap-2 flex lg:w-full w-auto">
Expand Down Expand Up @@ -236,8 +236,19 @@ function TopBar(props: { activePage: string; showDashBorad: boolean }) {
</div>
{/* Action Buttons */}
{!globalAuth && (
<div className=" p-2 justify-center items-center gap-4 lg:flex-row flex flex-col mt-5 lg:mt-0">
<div className=" p-2 justify-center relative items-center gap-4 lg:flex-row flex flex-col mt-5 lg:mt-0">
<Cart items={cartCount} />





{/* {notificationMenu &&
<div className="absolute z-[300000] mt-4 w-fit" ref={notificationsRef}>
<Notifications notificationsRef={notificationsRef} unreadNotifications={setUnreadNotifications}/>
</div>
} */}
<div className="justify-center hidden items-center lg:w-auto w-[100%] gap-2 lg:flex-row lg:flex flex-col">
<Button
href="/auth/login"
Expand Down Expand Up @@ -400,15 +411,8 @@ function TopBar(props: { activePage: string; showDashBorad: boolean }) {
alt="Cart Icon"
/>

{notificationMenu && (
<div className="absolute w-fit right-8 mr-16" ref={notificationsRef}>
<Notifications
notificationsRef={notificationsRef}
unreadNotifications={setUnreadNotifications}
/>
</div>
)}
</div>

</div>
</div>
<div className="auth flex items-center scale-75 gap-1 cursor-pointer" onClick={handleAuthMenu}>
<div className="details hidden ">
Expand Down Expand Up @@ -498,13 +502,22 @@ function TopBar(props: { activePage: string; showDashBorad: boolean }) {
</div>
</div>
)}

{notificationMenu &&
<div className="absolute bg-white-100 top-full w-fit md:2/4 lg:w-1/4 right-0 " ref={notificationsRef}>

<Notifications notificationsRef={notificationsRef} unreadNotifications={setUnreadNotifications}/>
</div>
}
</nav>
</>
);

function AuthUser(): React.ReactNode {
return (
<>

<div className='flex gap-4 justify-center items-center align-middle relative'>

<Link href={'/marketplace/wishlist'}>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<mask
Expand Down Expand Up @@ -541,20 +554,23 @@ function TopBar(props: { activePage: string; showDashBorad: boolean }) {
alt="Cart Icon"
/>

{notificationMenu && (
<div className="absolute w-fit right-8 mr-16" ref={notificationsRef}>
<Notifications notificationsRef={notificationsRef} unreadNotifications={setUnreadNotifications} />
</div>
)}
</div>
</div>

<div className="auth flex items-center gap-3 cursor-pointer" onClick={handleAuthMenu}>
<p className=" font-bold font-manropeEB">
{globalAuth?.user?.firstName} {globalAuth?.user?.lastName}
</p>

<div className="w-10 h-10 relative bg-gray-400 rounded-[100px]" />
</div>
</>

{/* {notificationMenu &&
<div className="absolute mr-3 bg-white-100 top-full w-full left-12 " ref={notificationsRef}>
<Notifications notificationsRef={notificationsRef} unreadNotifications={setUnreadNotifications}/>
</div>
} */}
</div>
);
}
}
Expand Down
7 changes: 7 additions & 0 deletions public/boxnotify.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 4478d99

Please sign in to comment.