From 8464d65358376e2d3b9d65fa932486890eb5f9f1 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Wed, 10 Aug 2022 17:48:58 +0300
Subject: [PATCH 1/2] feat: add toasts to the profile updating page

---
 package-lock.json                             | 25 +++++++++--
 package.json                                  |  1 +
 src/Components/VoteButton/VoteButton.tsx      |  2 +-
 .../SaveChangesCard/SaveChangesCard.tsx       |  9 +++-
 .../UpdateMyProfileCard.tsx                   | 18 ++++----
 src/services/notifications.service.ts         | 44 +++++++++++++++++--
 src/utils/Wrapper.tsx                         |  8 ++++
 src/utils/hooks/useVote/useVote.tsx           |  8 ++--
 8 files changed, 94 insertions(+), 21 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c24518c..c57e2a7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -82,6 +82,7 @@
         "react-router-dom": "^6.3.0",
         "react-scripts": "5.0.1",
         "react-select": "^5.3.2",
+        "react-toastify": "^9.0.8",
         "react-tooltip": "^4.2.21",
         "react-topbar-progress-indicator": "^4.1.1",
         "remirror": "^1.0.77",
@@ -19587,7 +19588,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
       "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -60696,6 +60696,18 @@
         "react": "^16.8.0 || ^17.0.0"
       }
     },
+    "node_modules/react-toastify": {
+      "version": "9.0.8",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-9.0.8.tgz",
+      "integrity": "sha512-EwM+teWt49HSHx+67qI08yLAW1zAsBxCXLCsUfxHYv1W7/R3ZLhrqKalh7j+kjgPna1h5LQMSMwns4tB4ww2yQ==",
+      "dependencies": {
+        "clsx": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
     "node_modules/react-tooltip": {
       "version": "4.2.21",
       "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.2.21.tgz",
@@ -83039,8 +83051,7 @@
     "clsx": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
-      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==",
-      "dev": true
+      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
     },
     "co": {
       "version": "4.6.0",
@@ -114215,6 +114226,14 @@
         "use-latest": "^1.0.0"
       }
     },
+    "react-toastify": {
+      "version": "9.0.8",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-9.0.8.tgz",
+      "integrity": "sha512-EwM+teWt49HSHx+67qI08yLAW1zAsBxCXLCsUfxHYv1W7/R3ZLhrqKalh7j+kjgPna1h5LQMSMwns4tB4ww2yQ==",
+      "requires": {
+        "clsx": "^1.1.1"
+      }
+    },
     "react-tooltip": {
       "version": "4.2.21",
       "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.2.21.tgz",
diff --git a/package.json b/package.json
index 330a812..dd0041d 100644
--- a/package.json
+++ b/package.json
@@ -77,6 +77,7 @@
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "react-select": "^5.3.2",
+    "react-toastify": "^9.0.8",
     "react-tooltip": "^4.2.21",
     "react-topbar-progress-indicator": "^4.1.1",
     "remirror": "^1.0.77",
diff --git a/src/Components/VoteButton/VoteButton.tsx b/src/Components/VoteButton/VoteButton.tsx
index 7d49c20..7defb67 100644
--- a/src/Components/VoteButton/VoteButton.tsx
+++ b/src/Components/VoteButton/VoteButton.tsx
@@ -55,7 +55,7 @@ type BtnState = 'ready' | 'voting' | 'loading' | "success" | "fail";
 export default function VoteButton({
     votes,
     onVote = () => { },
-    fillType = 'leftRight',
+    fillType = 'background',
     direction = 'horizontal',
     disableCounter = false,
     disableShake = true,
diff --git a/src/features/Profiles/pages/EditProfilePage/SaveChangesCard/SaveChangesCard.tsx b/src/features/Profiles/pages/EditProfilePage/SaveChangesCard/SaveChangesCard.tsx
index c1d72f7..3476113 100644
--- a/src/features/Profiles/pages/EditProfilePage/SaveChangesCard/SaveChangesCard.tsx
+++ b/src/features/Profiles/pages/EditProfilePage/SaveChangesCard/SaveChangesCard.tsx
@@ -26,6 +26,12 @@ export default function SaveChangesCard(props: Props) {
     if (!profileQuery.data?.profile)
         return <></>
 
+
+    const clickCancel = () => {
+        if (window.confirm('You might lose some unsaved changes. Are you sure you want to continue?'))
+            props.onCancel?.()
+    }
+
     return (
         <div className="md:p-24 rounded-16 bg-white md:border-2 border-gray-200 flex flex-col gap-24">
             <div className='hidden md:flex gap-8'>
@@ -45,14 +51,13 @@ export default function SaveChangesCard(props: Props) {
                 <Button
                     color="primary"
                     onClick={props.onSubmit}
-                    isLoading={props.isLoading}
                     disabled={!props.isDirty || props.isLoading}
                 >
                     Save Changes
                 </Button>
                 <Button
                     color="gray"
-                    onClick={props.onCancel}
+                    onClick={clickCancel}
                     disabled={!props.isDirty || props.isLoading}
                 >
                     Cancel
diff --git a/src/features/Profiles/pages/EditProfilePage/UpdateMyProfileCard/UpdateMyProfileCard.tsx b/src/features/Profiles/pages/EditProfilePage/UpdateMyProfileCard/UpdateMyProfileCard.tsx
index 027dfef..428c6c8 100644
--- a/src/features/Profiles/pages/EditProfilePage/UpdateMyProfileCard/UpdateMyProfileCard.tsx
+++ b/src/features/Profiles/pages/EditProfilePage/UpdateMyProfileCard/UpdateMyProfileCard.tsx
@@ -7,6 +7,7 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import Avatar from "src/features/Profiles/Components/Avatar/Avatar";
 import { usePrompt } from "src/utils/hooks";
 import SaveChangesCard from "../SaveChangesCard/SaveChangesCard";
+import { toast } from "react-toastify";
 
 interface Props {
     data: Pick<User,
@@ -69,11 +70,7 @@ export default function UpdateMyProfileCard({ data, onClose }: Props) {
         mode: 'onBlur',
     });
 
-    const [mutate, mutationStatus] = useUpdateProfileAboutMutation({
-        onCompleted: () => {
-            onClose?.()
-        }
-    });
+    const [mutate, mutationStatus] = useUpdateProfileAboutMutation();
 
 
 
@@ -81,6 +78,9 @@ export default function UpdateMyProfileCard({ data, onClose }: Props) {
 
 
     const onSubmit: SubmitHandler<IFormInputs> = data => {
+
+        const toastId = toast.loading("Saving changes...", NotificationsService.defaultOptions)
+
         mutate({
             variables: {
                 data: {
@@ -99,11 +99,13 @@ export default function UpdateMyProfileCard({ data, onClose }: Props) {
             },
             onCompleted: () => {
                 reset(data);
+                toast.update(toastId, { render: "Saved changes successfully", type: "success", ...NotificationsService.defaultOptions, isLoading: false });
             }
-        }).catch(() => {
-            NotificationsService.error('A network error happened');
-            mutationStatus.reset()
         })
+            .catch(() => {
+                toast.update(toastId, { render: "A network error happened", type: "error", ...NotificationsService.defaultOptions, isLoading: false });
+                mutationStatus.reset()
+            })
     };
 
     return (
diff --git a/src/services/notifications.service.ts b/src/services/notifications.service.ts
index 4208984..4b54ead 100644
--- a/src/services/notifications.service.ts
+++ b/src/services/notifications.service.ts
@@ -1,9 +1,47 @@
+import { toast, ToastOptions } from "react-toastify"
 
 const DEBUG = process.env.NODE_ENV === 'development'
 
+interface AlertOptions {
+    onComplete?: () => void
+    autoClose?: number
+}
+
 export class NotificationsService {
-    static error(msg: string, options?: Partial<{ error: any }>) {
-        if (options?.error && DEBUG) console.log(options?.error)
-        alert(msg)
+
+    static defaultOptions: ToastOptions = {
+        position: "bottom-center",
+        autoClose: 4000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        rtl: false,
+        pauseOnFocusLoss: true,
+        draggable: true,
+        pauseOnHover: true,
+        theme: 'light',
     }
+
+    static success(msg: string, options?: AlertOptions) {
+        toast.success(msg, {
+            onClose: options?.onComplete,
+            autoClose: options?.autoClose ?? 2500,
+            icon: "✅"
+        })
+    }
+
+    static info(msg: string, options?: AlertOptions) {
+        toast.info(msg, {
+            onClose: options?.onComplete,
+            autoClose: options?.autoClose ?? 2500,
+        })
+    }
+
+    static error(msg: string, options?: AlertOptions & Partial<{ error: any }>) {
+        if (options?.error && DEBUG) console.log(options?.error)
+        toast.error(msg, {
+            onClose: options?.onComplete,
+            autoClose: options?.autoClose ?? 2500,
+        })
+    }
+
 }
\ No newline at end of file
diff --git a/src/utils/Wrapper.tsx b/src/utils/Wrapper.tsx
index a4ba7bf..53ff00e 100644
--- a/src/utils/Wrapper.tsx
+++ b/src/utils/Wrapper.tsx
@@ -8,10 +8,13 @@ import { useCallback, useLayoutEffect } from 'react';
 import { setIsMobileScreen } from 'src/redux/features/ui.slice';
 import { isMobileScreen } from './helperFunctions';
 import ReactTooltip from 'react-tooltip';
+import { ToastContainer } from 'react-toastify';
 
+import 'react-toastify/dist/ReactToastify.css';
 import 'react-loading-skeleton/dist/skeleton.css'
 import THEME from './theme';
 import ErrorBoundary from 'src/Components/ErrorBoundary/ErrorBoundary';
+import { NotificationsService } from 'src/services';
 THEME.injectStyles();
 
 let basename = '/';
@@ -55,6 +58,11 @@ export default function Wrapper(props: any) {
                 effect='solid'
                 delayShow={1000}
             />
+            <ToastContainer
+                {...NotificationsService.defaultOptions}
+                newestOnTop={false}
+                limit={2}
+            />
         </>
     )
 }
diff --git a/src/utils/hooks/useVote/useVote.tsx b/src/utils/hooks/useVote/useVote.tsx
index 37a6fdc..c4ec306 100644
--- a/src/utils/hooks/useVote/useVote.tsx
+++ b/src/utils/hooks/useVote/useVote.tsx
@@ -2,7 +2,7 @@
 import { gql } from '@apollo/client';
 import { useCallback, useState } from 'react';
 import { useConfirmVoteMutation, useVoteMutation, Vote_Item_Type } from 'src/graphql';
-import { Wallet_Service } from 'src/services';
+import { NotificationsService, Wallet_Service } from 'src/services';
 
 export enum PaymentStatus {
     DEFAULT,
@@ -105,14 +105,14 @@ export const useVote = (params: Params) => {
                                     setPaymentStatus(PaymentStatus.NETWORK_ERROR);
                                     onError?.(error);
                                     onSetteled?.();
-                                    alert("A network error happened while confirming the payment...")
+                                    NotificationsService.error("A network error happened while confirming the payment...")
                                 }
                             })
                         } catch (error) {
                             setPaymentStatus(PaymentStatus.CANCELED);
                             onError?.(error);
                             onSetteled?.();
-                            alert("Payment rejected by user")
+                            NotificationsService.error("Payment rejected by user")
 
                         }
 
@@ -122,7 +122,7 @@ export const useVote = (params: Params) => {
                         setPaymentStatus(PaymentStatus.NETWORK_ERROR);
                         onError?.(error);
                         onSetteled?.();
-                        alert("A network error happened...")
+                        NotificationsService.error("A network error happened...")
                     }
                 })
             })

From 8e5eecead8a001ea220766a5fabecd0f4491e838 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Wed, 10 Aug 2022 20:45:34 +0300
Subject: [PATCH 2/2] fix: fixed the issues regarding the mobile nav styling

---
 .../ErrorBoundary/ErrorBoundary.tsx           | 16 ++++---
 src/Components/Navbar/NavDesktop.tsx          |  2 +-
 src/Components/Navbar/NavMobile.tsx           | 43 +++++++------------
 3 files changed, 26 insertions(+), 35 deletions(-)

diff --git a/src/Components/ErrorBoundary/ErrorBoundary.tsx b/src/Components/ErrorBoundary/ErrorBoundary.tsx
index 3a17e1f..7fcfef3 100644
--- a/src/Components/ErrorBoundary/ErrorBoundary.tsx
+++ b/src/Components/ErrorBoundary/ErrorBoundary.tsx
@@ -26,14 +26,16 @@ class ErrorBoundary extends Component<Props, State> {
 
     public render() {
         if (this.state.hasError) {
-            return <ErrorMessage message={
-                <p className="text-body3">
-                    Sorry, something went wrong...😵
-                    <br />
-                    Try refreshing the page.
-                </p>
+            return <div className="page-container">
+                <ErrorMessage message={
+                    <p className="text-body3">
+                        Sorry, something went wrong...😵
+                        <br />
+                        Try refreshing the page.
+                    </p>
 
-            } type="unknown"></ErrorMessage>;
+                } type="unknown"></ErrorMessage>
+            </div>;
         }
 
         return this.props.children;
diff --git a/src/Components/Navbar/NavDesktop.tsx b/src/Components/Navbar/NavDesktop.tsx
index 4fa8a9a..f69ae78 100644
--- a/src/Components/Navbar/NavDesktop.tsx
+++ b/src/Components/Navbar/NavDesktop.tsx
@@ -201,7 +201,7 @@ export default function NavDesktop() {
                         </Menu>
 
                         :
-                        <Button color="primary" href="/login">
+                        <Button size="sm" color="white" href="/login">
                             Connect ⚡
                         </Button>
                     )
diff --git a/src/Components/Navbar/NavMobile.tsx b/src/Components/Navbar/NavMobile.tsx
index db03d3b..0e32380 100644
--- a/src/Components/Navbar/NavMobile.tsx
+++ b/src/Components/Navbar/NavMobile.tsx
@@ -151,20 +151,8 @@ export default function NavMobile() {
         >
           <div className="flex flex-col gap-16 py-16">
             <Search onResultClick={() => toggleDrawerOpen(false)} />
-            {
-              !curUser &&
-              <Button
-                color="primary"
-                fullWidth
-                className="!py-16 px-40 rounded-12 "
-                href='/login'
-                onClick={() => toggleDrawerOpen()}
-              >
-                Connect your lightning wallet ⚡️
-              </Button>
-            }
           </div>
-          <ul className="px-32 flex flex-col py-16 gap-32 border-t">
+          <ul className="flex flex-col py-16 gap-32 border-t">
 
             <li className="relative">
               <Link
@@ -198,8 +186,8 @@ export default function NavMobile() {
                     onClick={() => toggleDrawerOpen(false)}
                     className='font-medium flex gap-16 !rounded-12 '
                   >
-                    <div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
-                      <span className="text-body2">✍🏼</span>
+                    <div className="shrink-0 bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
+                      <span className="text-body2 shrink-0">✍🏼</span>
                     </div>
                     <div>
                       <p className="text-body4 text-black font-medium">
@@ -214,8 +202,8 @@ export default function NavMobile() {
 
                     className='font-medium flex gap-16 !rounded-12 opacity-60'
                   >
-                    <div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
-                      <span className="text-body2">💬</span>
+                    <div className="shrink-0 bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
+                      <span className="text-body2 shrink-0">💬</span>
                     </div>
                     <div>
                       <p className="text-body4 text-black font-medium">
@@ -231,8 +219,8 @@ export default function NavMobile() {
                     onClick={() => toggleDrawerOpen(false)}
                     className='font-medium flex gap-16 !rounded-12'
                   >
-                    <div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
-                      <span className="text-body2">🏆</span>
+                    <div className="shrink-0 bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
+                      <span className="text-body2 shrink-0">🏆</span>
                     </div>
                     <div>
                       <p className="text-body4 text-black font-medium">
@@ -264,14 +252,15 @@ export default function NavMobile() {
                 Donate
               </Link>
             </li>
-            <li className="relative">
-              <Link
-                to={'/logout'}
-                onClick={() => toggleDrawerOpen(false)}
-                className='text-body4 font-bold hover:text-primary-600'>
-                Logout 👋
-              </Link>
-            </li>
+            {curUser &&
+              <li className="relative">
+                <Link
+                  to={'/logout'}
+                  onClick={() => toggleDrawerOpen(false)}
+                  className='text-body4 font-bold hover:text-primary-600'>
+                  Logout 👋
+                </Link>
+              </li>}
           </ul>
           <ul className="px-16 py-16 pb-32 flex flex-wrap gap-y-12  border-t pt-32 mt-auto">
             <li className="text-body4 text-gray-500 hover:text-gray-700 w-1/2">