Skip to content

Commit

Permalink
Merge pull request #58 from yashmandi/yashmandi/add-toast-notifications
Browse files Browse the repository at this point in the history 
[FIX] Added Toast Notification on 'Add to Cart' Button
  • Loading branch information
@pooranjoyb
pooranjoyb authored May 13, 2024
2 parents ec2124b + 4cd67f3 commit 6b83d16
Show file tree
Hide file tree
Showing 6 changed files with 64 additions and 34 deletions.
21 changes: 21 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
"react-hook-form": "^7.51.4",
"react-icons": "^5.2.1",
"react-router-dom": "^6.22.1",
"react-toastify": "^10.0.5",
"tailwindcss": "^3.4.1",
"zod": "^3.23.8"
},
Expand Down
3 changes: 3 additions & 0 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
import { RouterProvider } from 'react-router-dom';
import { Routes } from './browserRoutes/routes/Routes';
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function App() {

return (
<>
<RouterProvider router={Routes} />
<ToastContainer />
</>
)
}
Expand Down
7 changes: 4 additions & 3 deletions src/components/Button.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
interface ButtonProps {
color: string;
hover: string;
text: string
text: string;
onClick?: () => void;
}

function Button({color, hover, text}: ButtonProps) {
function Button({ color, hover, text, onClick }: ButtonProps) {
return (
<div className="flex items-center justify-center">
<button className={`btn bg-${color} hover:bg-${hover}`}>
<button className={`btn bg-${color} hover:bg-${hover}`} onClick={onClick}>
{text}
</button>
</div>
Expand Down
64 changes: 35 additions & 29 deletions src/pages/Shop/ProductDetail.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import { useEffect,useState } from "react";
import { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import { toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

// components
import Head from "../../components/Head";
Expand All @@ -13,29 +15,29 @@ interface Data {
}

interface RatingItem {
className: string;
checked?: boolean;
className: string;
checked?: boolean;
}

const commonClasses = "mask mask-star-2";

const ratingItems: RatingItem[] = [
{ className: `${commonClasses} mask-half-1` },
{ className: `${commonClasses} mask-half-2` },
{ className: `${commonClasses} mask-half-1` },
{ className: `${commonClasses} mask-half-2` },
{ className: `${commonClasses} mask-half-1` },
{ className: `${commonClasses} mask-half-2` },
{ className: `${commonClasses} mask-half-1` },
{ className: `${commonClasses} mask-half-2` },
{ className: `${commonClasses} mask-half-1` },
{ className: `${commonClasses} mask-half-2` },
{ className: `${commonClasses} mask-half-1` },
{ className: `${commonClasses} mask-half-2` },
{ className: `${commonClasses} mask-half-1` },
{ className: `${commonClasses} mask-half-2` },
{ className: `${commonClasses} mask-half-1` },
{ className: `${commonClasses} mask-half-2` },
{ className: `${commonClasses} mask-half-1` },
{ className: `${commonClasses} mask-half-2` },
{ className: `${commonClasses} mask-half-1` },
{ className: `${commonClasses} mask-half-2` },
];


function ProductDetail() {
const [filledStars, setFilledStars] = useState(0);

const handleRatingChange = (index: number) => {
setFilledStars(index / 2 + 0.5);
};
Expand All @@ -46,6 +48,11 @@ function ProductDetail() {
window.scrollTo(0, 0);
}, []);

const addToCart = () => {
// logic for adding in cart
toast.success('Added to Cart', { autoClose: 2000 });
};

return (
<>
<div className=" mx-auto max-w-screen-xl px-4 py-12 flex justify-between items-center">
Expand Down Expand Up @@ -107,14 +114,14 @@ function ProductDetail() {
<h2 className="w-16 text-xl font-bold dark:text-gray-400">
Rating:
</h2>
<input
type="radio"
name="rating-10"
className="rating-hidden"
readOnly
onChange={() => handleRatingChange(-1)}
defaultChecked
/>
<input
type="radio"
name="rating-10"
className="rating-hidden"
readOnly
onChange={() => handleRatingChange(-1)}
defaultChecked
/>
{ratingItems.map((item, index) => (
<input
key={index}
Expand All @@ -123,11 +130,11 @@ function ProductDetail() {
className={item.className}
onChange={() => handleRatingChange(index)}
readOnly
/>
/>
))}
<span className="ml-2">{`${filledStars} out of 5 `}
<span className="ml-2">{`${filledStars} out of 5 `}
</span>

</div>

<div className="w-32 mb-8 ">
Expand All @@ -148,10 +155,9 @@ function ProductDetail() {
</div>
</div>
<div className="flex flex-wrap items-center gap-10 ">

<Button text="Add to Cart" color="mygreen" hover="myred" />
<Button text="Buy Now" color="myyellow" hover="myred" />


<Button text="Add to Cart" color="mygreen" hover="myred" onClick={addToCart} />
<Button text="Buy Now" color="myyellow" hover="myred" />
</div>
</div>
</div>
Expand Down
2 changes: 0 additions & 2 deletions src/pages/Shop/Shop.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ function Shop() {
window.scrollTo(0, 0);
}, []);


return (
<>
<div className=" mx-auto max-w-screen-xl px-4 py-12 flex justify-between items-center">
Expand Down Expand Up @@ -38,7 +37,6 @@ function Shop() {
<Product desc="" image="https://img.freepik.com/free-photo/full-shot-beautiful-lady_23-2148440576.jpg?w=360&t=st=1708162622~exp=1708163222~hmac=a0eb19d754c23e36840605ecb684ece75e8b20e74ba329c1d0958a10dec2824f" price={99} name="Red Casual Wear" />
</div>
</div>

</>
)
}
Expand Down

0 comments on commit 6b83d16

Please sign in to comment.