Merge branch 'dev' into feature/linking-accounts

2025-12-26 10:44:20 +01:00 · 2022-08-11 19:42:27 +03:00
parent 21c42bfff9 8e5eecead8
commit 13cf67c8bc
11 changed files with 120 additions and 56 deletions
--- 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",
--- 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",
--- 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;
--- 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>
                    )
--- 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">
--- 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,
--- 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
--- 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 (
--- 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,
+        })
+    }
+
 }
--- 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}
+            />
        </>
    )
 }
--- 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...")
                    }
                })
            })