FIX SUGAM-ARORA#185 Toast Feat

package.json

@@ -9,6 +9,7 @@
     "lottie-react": "^2.4.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-hot-toast": "^2.4.1",
     "react-icons": "^4.3.1",
     "react-router-dom": "^6.23.1",
     "react-scripts": "5.0.1",

src/Components/MainContainer.js

@@ -10,6 +10,7 @@ import CardMain from "./CardMain";
 import "./MainContainer.css";
 import MainRightBottomCard from "./MainRightBottomCard";
 import MainRightTopCard from "./MainRightTopCard";
+import toast from 'react-hot-toast';
 
 const MAX_IMAGE_SIZE = 2185200; // 2MB
 
@@ -25,6 +26,8 @@ function MainContainer() {
   const selectImageHandler = (e) => {
     if (e.target.files && e?.target?.files[0]?.size < MAX_IMAGE_SIZE) {
       setBanner(URL.createObjectURL(e?.target?.files[0]));
+      toast.success('Image uploaded successfully!');
+
     } else {
       console.error("Image size should be less than 2MB!");
     }

src/Components/MainRightBottomCard.js

@@ -1,6 +1,6 @@
 import React from "react";
 import TopSeller from "./TopSeller";
-
+import { toast } from "react-hot-toast";
 import { Link } from "react-router-dom";
 
 function MainRightBottomCard() {
@@ -11,24 +11,24 @@ function MainRightBottomCard() {
         <a href="#">View More</a>
       </div>
 
-      <Link to="/profile-page">
-        {TopSeller &&
-          TopSeller.map((seller) => (
-            <div className="topSeller fromTop" key={seller.id}>
-              <div className="topSellerImg">
-                <img src={seller?.imgSrc} alt="" />
-              </div>
+      {TopSeller &&
+        TopSeller.map((seller) => (
+          <div className="topSeller fromTop" key={seller.id}>
+            <div className="topSellerImg">
+              <img src={seller?.imgSrc} alt="" />
+            </div>
+            <Link to="/profile-page">
               <div className="topSellerName">
                 <p>
                   {seller?.seller_name} <span>{seller?.username}</span>
                 </p>
               </div>
-              <a href="#" className="button">
-                Follow
-              </a>
-            </div>
-          ))}
-      </Link>
+            </Link>
+            <a href="#" className="button" onClick={() => toast.success(`You're now following ${seller?.seller_name}!`)}>
+              Follow
+            </a>
+          </div>
+        ))}
 
     </div>
   );

src/Components/Menu.js

@@ -11,6 +11,7 @@ import {
   FaCog,
   FaSignOutAlt,
 } from "react-icons/fa";
+import toast from "react-hot-toast";
 
 function Menu() {
   useEffect(() => {
@@ -29,7 +30,7 @@ function Menu() {
   return (
     <menu className="fromLeft">
       <img src={logo} alt="" />
-    
+
       <ul className="fromTop" id="mainMenu">
         <Icon icon={<FaDelicious />} tooltip="Delicious" href="/" />
         <Icon icon={<FaShoppingCart />} tooltip="Cart" href="/" />
@@ -42,7 +43,9 @@ function Menu() {
         <Link to="/settings">
           <Icon icon={<FaCog />} tooltip="Settings" />
         </Link>
-        <Icon icon={<FaSignOutAlt />} tooltip="Sign Out" href="/" />
+        <div onClick={() => toast.success("Signed Out Successfully!")}>
+          <Icon icon={<FaSignOutAlt />} tooltip="Sign Out" href="/" />
+        </div>
       </ul>
     </menu>
   );

src/Components/Settings/SettingsPage.js

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import "./Settings.css";
 import { Link } from "react-router-dom";
 import { FaArrowLeft } from "react-icons/fa";
+import toast from "react-hot-toast";
 
 const SettingsPage = () => {
   const [activeTab, setActiveTab] = useState("profile");
@@ -41,7 +42,7 @@ const SettingsPage = () => {
                 placeholder="Enter URL of profile picture"
               />
             </div>
-            <button>Save Profile Settings</button>
+            <button onClick={() => toast.success("Saved Profile Settings!")}>Save Profile Settings</button>
           </div>
         );
       case "account":
@@ -68,7 +69,7 @@ const SettingsPage = () => {
                 <option value="fr">French</option>
               </select>
             </div>
-            <button>Save Account Settings</button>
+            <button onClick={() => toast.success("Saved Account Settings!")}>Save Account Settings</button>
           </div>
         );
       case "notifications":
@@ -87,7 +88,7 @@ const SettingsPage = () => {
               <label htmlFor="pushNotifications">Push Notifications</label>
               <input type="checkbox" id="pushNotifications" />
             </div>
-            <button>Save Notification Settings</button>
+            <button onClick={() => toast.success("Saved Notification Settings!")}>Save Notification Settings</button>
           </div>
         );
       case "privacy":
@@ -111,7 +112,7 @@ const SettingsPage = () => {
               <label htmlFor="twoFactorAuth">Two-Factor Authentication</label>
               <input type="checkbox" id="twoFactorAuth" />
             </div>
-            <button>Save Privacy Settings</button>
+            <button onClick={() => toast.success("Saved Privacy Settings!")}>Save Privacy Settings</button>
           </div>
         );
       case "collaboration":
@@ -139,7 +140,7 @@ const SettingsPage = () => {
               </label>
               <input type="checkbox" id="collabNotifications" />
             </div>
-            <button>Save Collaboration Settings</button>
+            <button onClick={() => toast.success("Saved Collaboration Settings!")}>Save Collaboration Settings</button>
           </div>
         );
       case "application":
@@ -161,7 +162,7 @@ const SettingsPage = () => {
               <label htmlFor="autoUpdate">Auto-Update</label>
               <input type="checkbox" id="autoUpdate" />
             </div>
-            <button>Save Application Settings</button>
+            <button onClick={() => toast.success("Saved Application Settings!")}>Save Application Settings</button>
           </div>
         );
       case "helpSupport":

src/Components/UserProfile/UserProfile.js

@@ -2,14 +2,16 @@ import React from "react";
 import { FaArrowLeft, FaUserCircle } from "react-icons/fa";
 import "./UserProfile.css";
 import { Link } from "react-router-dom";
+import toast from 'react-hot-toast';
+
 
 const UserProfile = ({ user }) => {
     return (
         <div>
             <div className="profile-page">
                 <Link to="/">
                     <button className="back-button">
-                        <FaArrowLeft /> 
+                        <FaArrowLeft />
                     </button>
                 </Link>
 
@@ -36,7 +38,7 @@ const UserProfile = ({ user }) => {
                             </div>
                         </div>
                         <p className="profile-bio">{user.bio}</p>
-                        <button className="follow-button">Follow</button>
+                        <button onClick={() => toast.success(`You're now following ${user.name}!`)} className="follow-button">Follow</button>
                     </div>
                 </div>
                 <div className="profile-section">

src/index.js

@@ -4,11 +4,13 @@ import './index.css';
 // import App from './App';
 import reportWebVitals from './reportWebVitals';
 import Preloader from './Components/Preloader';
+import { Toaster } from 'react-hot-toast';
 
 ReactDOM.render(
   <React.StrictMode>
     {/* <App /> */}
-    <Preloader/>
+    <Preloader />
+    <Toaster />
   </React.StrictMode>,
   document.getElementById('root')
 );

yarn.lock

@@ -3678,6 +3678,11 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
+csstype@^3.0.10:
+  version "3.1.3"
+  resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz"
+  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
+
 damerau-levenshtein@^1.0.8:
   version "1.0.8"
   resolved "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz"
@@ -4986,6 +4991,11 @@ globby@^11.0.4, globby@^11.1.0:
     merge2 "^1.4.1"
     slash "^3.0.0"
 
+goober@^2.1.10:
+  version "2.1.14"
+  resolved "https://registry.npmjs.org/goober/-/goober-2.1.14.tgz"
+  integrity sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==
+
 gopd@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz"
@@ -7806,7 +7816,7 @@ react-dev-utils@^12.0.1:
     strip-ansi "^6.0.1"
     text-table "^0.2.0"
 
-react-dom@*, "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", react-dom@^17.0.2, react-dom@>=16.8:
+react-dom@*, "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", react-dom@^17.0.2, react-dom@>=16, react-dom@>=16.8:
   version "17.0.2"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz"
   integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
@@ -7820,6 +7830,13 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
+react-hot-toast@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.1.tgz"
+  integrity sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==
+  dependencies:
+    goober "^2.1.10"
+
 react-icons@^4.3.1:
   version "4.3.1"
   resolved "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz"
@@ -7915,7 +7932,7 @@ react-scripts@5.0.1:
   optionalDependencies:
     fsevents "^2.3.2"
 
-react@*, "react@^16.8.0 || ^17.0.0 || ^18.0.0", react@^17.0.2, "react@>= 16", react@>=16.8, react@17.0.2:
+react@*, "react@^16.8.0 || ^17.0.0 || ^18.0.0", react@^17.0.2, "react@>= 16", react@>=16, react@>=16.8, react@17.0.2:
   version "17.0.2"
   resolved "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
   integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==