feat: Added messages for notifications and timeout to dismiss notific…

…ation

src/components/CartItem.tsx

@@ -7,6 +7,7 @@ type Props = {
 
 const CartItem = ({ item }: Props) => {
   const { addToBasket, removeFromBasket, removeItem } = useStoreActions((store) => store.products);
+
   return (
     <article className="relative flex flex-col justify-between pb-4 mt-8 border-b isolate border-b-gray-500 sm:flex-row">
       <div className="flex">

src/components/Notification.tsx

@@ -20,9 +20,9 @@ const Notification = () => {
   return (
     <div>
       {message !== null && (
-        <div className="absolute flex justify-center w-full sm:w-96 lg:justify-end lg:self-end">
+        <div className="absolute top-20 flex justify-center w-[98%] lg:justify-end lg:self-end">
           <div
-            className={`items-center justify-center p-4 text-sm font-semibold rounded-lg shadow-md placeholder:flex gap-x-1 focus:outline-none  ${mapColors(
+            className={`w-96 flex items-center justify-center p-4 text-sm font-semibold rounded-lg shadow-md placeholder:flex gap-x-1 focus:outline-none  ${mapColors(
               notificationType
             )}`}
           >
@@ -35,7 +35,7 @@ const Notification = () => {
                   viewBox="0 0 24 24"
                   stroke="currentColor"
                 >
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                 </svg>
               )}
 
@@ -47,7 +47,7 @@ const Notification = () => {
                   viewBox="0 0 24 24"
                   stroke="currentColor"
                 >
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
                 </svg>
               )}
 
@@ -60,9 +60,9 @@ const Notification = () => {
                   stroke="currentColor"
                 >
                   <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
                     d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                   />
                 </svg>
@@ -77,9 +77,9 @@ const Notification = () => {
                   stroke="currentColor"
                 >
                   <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
                     d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
                   />
                 </svg>

src/components/ProductItem.tsx

@@ -11,6 +11,8 @@ const ProductItem = ({ item }: Props) => {
   const quantity = useStoreState(
     (store) => store.products.productsInBasket.find((x) => x.id === item.id)?.quantity ?? 0
   );
+  const { setNotification, dismissNotification } = useStoreActions((store) => store.app);
+
   return (
     <article id="productItem" className="flex flex-col items-start justify-start mb-5 lg:mb-8">
       <div className="relative w-full">
@@ -40,7 +42,13 @@ const ProductItem = ({ item }: Props) => {
               </svg>
             </button>
             <span className="px-4">{quantity}</span>
-            <button onClick={() => addToBasket(item.id)}>
+            <button
+              onClick={() => {
+                addToBasket(item.id);
+                setNotification({ message: 'Uspešno ste dodali proizvod u korpu', notificationType: 'success' });
+                setTimeout(() => dismissNotification(), 2000);
+              }}
+            >
               <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <g clipPath="url(#clip0_8_67)">
                   <path

src/pages/Cart.tsx

@@ -1,12 +1,15 @@
 import CartItem from '../components/CartItem';
-import { useStoreState } from '../hooks';
+import Notification from '../components/Notification';
+import { useStoreActions, useStoreState } from '../hooks';
 
 export default function Cart() {
   const productsItems = useStoreState((store) => store.products.productsInBasket);
   const { subtotal, discount, grandTotal } = useStoreState((store) => store.products);
+  const { setNotification, dismissNotification } = useStoreActions((store) => store.app);
 
   return (
     <div className="py-20 bg-white">
+      <Notification />
       <div className="px-6 mx-auto max-w-7xl lg:px-8">
         <div className="max-w-2xl md:max-w-7xl">
           <h2 className="font-bold leading-6 tracking-tight text-black">Tvoja korpa</h2>
@@ -49,6 +52,10 @@ export default function Cart() {
                   </div>
                 </div>
                 <button
+                  onClick={() => {
+                    setNotification({ message: 'Uspesno ste izvrsili kupovinu', notificationType: 'success' });
+                    setTimeout(() => dismissNotification(), 2000);
+                  }}
                   type="submit"
                   className="flex w-full justify-center items-center h-11 rounded-2xl  text-white bg-black py-1.5 text-lg leading-4 !mt-3 !mb-6 hover:text-black hover:bg-white hover:border hover:border-black"
                 >

src/pages/Shop.tsx

@@ -1,5 +1,6 @@
 import { useLoaderData } from 'react-router-dom';
 import { type GetProductResponse } from '../api/Product';
+import Notification from '../components/Notification';
 import ProductItem from '../components/ProductItem';
 import { useStoreActions } from '../hooks';
 
@@ -10,6 +11,7 @@ export default function Shop() {
 
   return (
     <div className="py-20 bg-white">
+      <Notification />
       <div className="px-6 mx-auto max-w-7xl lg:px-8">
         <div className="max-w-2xl">
           <span className="font-bold leading-6 tracking-tight text-black">Svi proizvodi:</span>

src/store/app.ts

@@ -5,27 +5,24 @@ export type AlertType = 'success' | 'danger' | 'info' | 'warning';
 type NotificationPayload = {
   message: string;
   notificationType: AlertType;
-  isVisiable: boolean;
 };
 
 export type AppState = {
   message: string | null;
   notificationType: AlertType;
-  isVisiable: boolean;
   setNotification: Action<AppState, NotificationPayload>;
-  dismissNotification: Action<AppState, boolean>;
+  dismissNotification: Action<AppState>;
 };
 
 export const appStore: AppState = {
   message: null,
   notificationType: 'success',
-  isVisiable: false,
+
   setNotification: action((state, payload) => {
     state.message = payload.message;
     state.notificationType = payload.notificationType;
-    state.isVisiable = true;
   }),
   dismissNotification: action((state) => {
-    state.isVisiable = false;
+    state.message = null;
   }),
 };