component working properly

unosquare · Mar 7, 2024 · 10c022c · 10c022c
1 parent 471fc64
commit 10c022c
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 63 deletions.
diff --git a/sample/index.tsx b/sample/index.tsx
@@ -101,7 +101,7 @@ type onlineDto = {
 };
 
 const Application = () => {
-    const setAlert = useAlertStore(st => st.setAlert);
+    const setAlert = useAlertStore(st => st.setActiveAlerts);
     const [currentOption, setCurrentOption] = React.useState<string>(options.A);
     const [virtualSelectOption, setVirtualSelectOption] = React.useState<string>(0);
     const [openMenu, setOpenMenu] = useToggle();
@@ -190,8 +190,8 @@ const Application = () => {
                 <Button size='xs' onClick={setToggle}>
                     Toggle Data
                 </Button>
-                <Button size='xs' onClick={() => setAlert(true)}>Success</Button>
-                <Button size='xs' onClick={() => setAlert(false)}>Error</Button>
+                <Button size='xs' onClick={() => setAlert(true, 'Success')}>Success</Button>
+                <Button size='xs' onClick={() => setAlert(false, 'Error', false)}>Error</Button>
                 <VirtualSelect
                     value={virtualSelectOption}
                     onValueChange={setVirtualSelectOption}

diff --git a/src/Alert/index.tsx b/src/Alert/index.tsx
@@ -1,15 +1,23 @@
-import React, { useEffect, useState } from 'react';
+import React, { ReactNode } from 'react';
 import { Checkmark28Regular, Dismiss28Regular } from '@fluentui/react-icons';
-import tw from 'tailwind-styled-components';
 import useAlertStore from '../useAlertStore';
 import { createPortal } from 'react-dom';
 
-const StyledContainer = tw.div`
+const AUTO_ANIMATE = ' animate-[slideInTop_4s_ease-out_forwards] ';
+
+const StyledContainer = ({
+    children,
+    animation,
+    ereaseAlert,
+}: {
+    children: ReactNode;
+    animation: string;
+    ereaseAlert: () => void;
+}) => (
+    <div
+        className={`
     shadow-alert
     font-sans
-    absolute
-    top-6
-    right-7
     min-h-[61px]
     min-w-[288px]
     max-w-[320px]
@@ -22,52 +30,70 @@ const StyledContainer = tw.div`
     items-center
     text-lg
     invisible
-    animate-[slideInTop_4s_ease-out_forwards]
+    ${animation}
     z-40
     [&_svg]:mr-2
     [&_svg]:ml-[14px]
     [&_svg]:min-w-[28px]
     [&>p]:max-w-full
     [&>p]:m-0
-`;
+    mb-3
+`}
+        onClick={ereaseAlert}
+    >
+        {children}
+    </div>
+);
 
 type AlertProps = {
     message?: string;
+    animation: string;
+    deleteAlert: () => void;
+    icon: ReactNode;
 };
 
-const AlertSuccess = ({ message = 'Changes Saved Successfully' }: AlertProps) => (
-    <StyledContainer>
-        <Checkmark28Regular primaryFill='#1d910c' />
-        {message}
-    </StyledContainer>
-);
-
-const AlertError = ({ message = 'Something Went Wrong' }: AlertProps) => (
-    <StyledContainer>
-        <Dismiss28Regular primaryFill='#e72727' />
-        {message}
-    </StyledContainer>
-);
+const AlertComponent = ({ message, animation, deleteAlert, icon }: AlertProps) => {
+    if (animation === AUTO_ANIMATE)
+        setTimeout(() => {
+            deleteAlert();
+        }, 4500);
+    return (
+        <StyledContainer animation={animation} ereaseAlert={animation === AUTO_ANIMATE ? () => {} : deleteAlert}>
+            {icon}
+            {message}
+        </StyledContainer>
+    );
+};
 
 export const Alert = () => {
-    const [isSuccess, message] = useAlertStore((state) => [state.isSuccess, state.message]);
-    const [isSuccessLocal, setIsSuccess] = useState<boolean | undefined>(false);
-    const [messageLocal, setMessage] = useState<string | undefined>('');
+    const [activeAlerts, deleteAlerts] = useAlertStore((state) => [state.activeAlerts, state.deleteAlerts]);
 
-    useEffect(()  => {
-        setIsSuccess(isSuccess);
-        setMessage(message);
-    },[message, isSuccess]);
+    const animationElection = (isTimed: boolean): string =>
+        isTimed ? AUTO_ANIMATE : ' animate-[fadeIn_0.5s_ease-out_forwards] hover:bg-gray-400 ';
 
-    return (
-        // <>
-        //     {isSuccess && <AlertSuccess message={message} />}
-        //     {isSuccess === false && <AlertError message={message} />}
-        // </>
-        createPortal(isSuccessLocal 
-            ? <AlertSuccess message={messageLocal} /> 
-            : <AlertError message={messageLocal} />, document.body)
+    return createPortal(
+        <div className='flex flex-col absolute top-6 right-7 gap-1'>
+            {activeAlerts.map((alert) => (
+                <AlertComponent
+                    message={
+                        alert.isSuccess
+                            ? alert.message || 'Changes Saved Successfully'
+                            : alert.message || 'Something Went Wrong'
+                    }
+                    animation={animationElection(alert.isTimed)}
+                    key={alert.id}
+                    deleteAlert={() => deleteAlerts(alert.id)}
+                    icon={
+                        alert.isSuccess ? (
+                            <Checkmark28Regular primaryFill='#1d910c' />
+                        ) : (
+                            <Dismiss28Regular primaryFill='#e72727' />
+                        )
+                    }
+                />
+            ))}
+            <p></p>
+        </div>,
+        document.body,
     );
-
-
 };
diff --git a/src/useAlertStore.ts b/src/useAlertStore.ts
@@ -1,38 +1,28 @@
 import { create } from 'zustand';
 import { Alert } from './Alert';
 
-// interface AlertState {
-//     message?: string;
-//     isSuccess?: boolean;
-//     setAlert: (isSuccess: boolean, message?: string) => void;
-// }
-
-// export default create<AlertState>((set) => ({
-//     isSuccess: undefined,
-//     message: undefined,
-//     setAlert: (isSuccess: boolean, message?: string) => {
-//         set(() => {
-//             setTimeout(() => set({ isSuccess, message }), 200);
-
-//             return { message: undefined, isSuccess: undefined };
-//         });
-//     },
-// }));
-
 interface Alert {
     id: number;
     message: string;
     isSuccess: boolean;
+    isTimed: boolean;
 }
 
 interface AlertList {
     activeAlerts: Alert[];
-    setActiveAlerts: (id: number, message: string, isSuccess: boolean) => void;
+    setActiveAlerts: (isSuccess: boolean, message: string, isTimed?: boolean) => void;
+    deleteAlerts: (alertId: number) => void;
 }
 
 export default create<AlertList>((set) => ({
     activeAlerts: [],
-    setActiveAlerts: (id: number, message: string, isSuccess: boolean) => {
-        set((state) => [...state, { message: message, isSuccess: isSuccess, id: id }]);
-    },
+    setActiveAlerts: (isSuccess: boolean, message: string, isTimed: boolean = true) =>
+        set((state) => ({
+            activeAlerts: [
+                ...state.activeAlerts,
+                { isSuccess: isSuccess, isTimed: isTimed, message: message, id: Date.now() },
+            ],
+        })),
+    deleteAlerts: (alertId: number) =>
+        set((state) => ({ activeAlerts: state.activeAlerts.filter((alert) => alert.id !== alertId) })),
 }));