افزایش تجربه کاربر: اجرای اعلان ها ، مدالها و لودرها در CMS مبتنی بر React

const BASE_ACTION_TYPES = {
    PUSH_NEW_NOTIFICATION: 'base/PUSH_NEW_NOTIFICATION',
    REMOVE_NOTIFICATION: 'base/REMOVE_NOTIFICATION',
};

export default BASE_ACTION_TYPES;

import BASE_ACTION_TYPES from './base.types';

export const BASE_INITIAL_STATE = {
    notifications: [],
};
export const baseReducer = (state = BASE_INITIAL_STATE, action = {}) => {
    const { type, payload } = action;
    switch (type) {
        case BASE_ACTION_TYPES.PUSH_NEW_NOTIFICATION:
            return { ...state, notifications: [payload, ...state.notifications] };
        case BASE_ACTION_TYPES.REMOVE_NOTIFICATION:
            return { ...state, notifications: state.notifications.filter((n) => n.id !== payload) };
        default:
            return state;
    }
};

import { v4 as uuid } from 'uuid';
import BASE_ACTION_TYPES from './base.types';
import { createAction } from '../../utils/reducer.utils';

export const aPushNewNotification = (notification) => {
  return (dispatch) => {
    notification.id = uuid();
    dispatch(createAction(BASE_ACTION_TYPES.PUSH_NEW_NOTIFICATION, notification));
    setTimeout(() => {
      dispatch(aRemoveNotification(notification.id));
    }, 5000);
  };
};

export const aRemoveNotification = (id) =>
  createAction(BASE_ACTION_TYPES.REMOVE_NOTIFICATION, id);

export const sNotificationsList = (state) => state.base.notifications;

import React from 'react';
import { useDispatch } from 'react-redux';
import { aRemoveNotification } from '../../../store/base/base.action';
import CheckIcon from '@mui/icons-material/Check';
import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
import PriorityHighOutlinedIcon from '@mui/icons-material/PriorityHighOutlined';
import ReportProblemOutlinedIcon from '@mui/icons-material/ReportProblemOutlined';

const Notification = ({ notification }) => {
    const dispatch = useDispatch();
    const closeNotification = () => {
        dispatch(aRemoveNotification(notification.id));
    }

    if (notification.type === 'error') {
        return (
            <div className="notification">
                <div className="alert alert-error">
                    <div className="icon__wrapper">
                        <PriorityHighOutlinedIcon className="icon-style" />
                    </div>
                    <p>{notification.text}</p>
                    <CloseOutlinedIcon className="close" onClick={closeNotification} />
                </div>
            </div>
        );
    } else if (notification.type === 'success') {
        return (
            <div className="notification">
                <div className="alert alert-success">
                    <div className="icon__wrapper">
                        <CheckIcon className="icon-style" />
                    </div>
                    <p>{notification.text}</p>
                    <CloseOutlinedIcon className="close" onClick={closeNotification} />
                </div>
            </div>
        );
    } else if (notification.type === 'warning') {
        return (
            <div className="notification">
                <div className="alert alert-warning">
                    <div className="icon__wrapper">
                        <ReportProblemOutlinedIcon className="icon-style" />
                    </div>
                    <p>{notification.text}</p>
                    <CloseOutlinedIcon className="close" onClick={closeNotification} />
                </div>
            </div>
        );
    }
};
export default Notification;

import React from 'react';
import { useSelector } from 'react-redux';
import { sNotificationsList } from '../../../store/base/base.selector';
import Notification from './Notification.component';
import './notification.styles.scss';

const NotificationContainer = () => {
    const notificationsList = useSelector(sNotificationsList);
    return (
        <div className="notification-container">
            {notificationsList.map((notification) => (
                <Notification key={notification.id} notification={notification} />
            ))}
        </div>
    );
};
export default NotificationContainer;

import React from 'react';
import { Outlet } from 'react-router-dom';
import NotificationContainer from '../../components/ui/notification/NotificationContainer.component';
import './emptyLayout.styles.scss';

const EmptyLayout = () => {
  return (
    <div className='emptyLayout'>
      <NotificationContainer />
      <Outlet />
    </div>
  );
};
export default EmptyLayout;

const handleSubmit = async (e) => {
    e.preventDefault();
    const result = await registerNewUser({name, email, password});
    if (result.status === 'success') {
        navigate('/auth/login');
        dispatch(aPushNewNotification({
            type: 'success',
            text: 'You have successfully registered. Please login.',
        }));
    } else {
        dispatch(aPushNewNotification({
            type: 'error',
            text: result.message,
        }));
    }
}

modalStatus: false,
modalType: '',

case BASE_ACTION_TYPES.UPDATE_MODAL_STATUS:
    return { ...state, modalStatus: payload };
case BASE_ACTION_TYPES.UPDATE_MODAL_TYPE:
    return { ...state, modalType: payload };

export const sModalStatus = (state) => state.base.modalStatus
export const sModalType = (state) => state.base.modalType

export const aUpdateModalStatus = (status) =>
  createAction(BASE_ACTION_TYPES.UPDATE_MODAL_STATUS, status);
export const aUpdateModalType = (type) =>
  createAction(BASE_ACTION_TYPES.UPDATE_MODAL_TYPE, type);

UPDATE_MODAL_STATUS: 'base/UPDATE_MODAL_STATUS',
UPDATE_MODAL_TYPE: 'base/UPDATE_MODAL_TYPE',

import React from "react";
import { useDispatch, useSelector } from 'react-redux';

import { aUpdateModalStatus } from '../../../store/base/base.action';
import { sModalType } from '../../../store/base/base.selector';
import "./modal.styles.scss";

const Modal = () => {
    const dispatch = useDispatch();
    const modalType = useSelector(sModalType);
    const renderModalType = (type) => {
        switch (type) {
            case 'removePost':
                return <RemovePost />;
            case 'filterModal':
                return <FilterModal />;
            default:
                return null;
        }
    }
    return (
        <div className="modal">
            <div className="modal__content">
                <div className="modal__close">
                    <CloseOutlinedIcon onClick={() => dispatch(aUpdateModalStatus(false))}/>
                </div>
                {renderModalType(modalType)}
            </div>
        </div>
    );
};
export default Modal;

import React from "react";
import "./loader.styles.scss";

const Loader = () => {
    return (
        <div className="loader"></div>
    );
};
export default Loader;

<button 
    className='ghost-round full-width loader-styles'
    onClick={handleSubmit}>
    {loading ? <Loader /> : 'Create Account'}
</button>

const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    const result = await registerNewUser({name, email, password});
    if (result.status === 'success') {
        setLoading(false);
        navigate('/auth/login');
        dispatch(aPushNewNotification({
            type: 'success',
            text: 'You have successfully registered. Please login.',
        }));
    } else {
        setLoading(false);
        dispatch(aPushNewNotification({
            type: 'error',
            text: result.message,
        }));
    }
}