reactjs - How to implement notification in react functional component?

Question

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';
import NotificationStoryFollower from './NotificationStoryFollower';
import NotificationStoryLikes from './NotificationStoryLikes';
import NotificationStoryComments from './NotificationStoryComments';

const useStyles = makeStyles((theme) => ({
    modal: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    },
    paper: {
        backgroundColor: theme.palette.background.paper,
        border: '2px solid #FCB040',
        boxShadow: theme.shadows[5],
        padding: theme.spacing(2, 4, 3),
    },
}));

const Notification = ({ open, handleClose }) => {

    const classes = useStyles();
    return (
        <div>
            <Modal
                aria-labelledby="transition-modal-title"
                aria-describedby="transition-modal-description"
                className={classes.modal}
                open={open}
                onClose={handleClose}
                closeAfterTransition
                BackdropComponent={Backdrop}
                BackdropProps={{
                    timeout: 500,
                }}
            >
                <Fade in={open}>
                    <div className={classes.paper}>
                        <NotificationStoryFollower />
                        <NotificationStoryLikes />
                        <NotificationStoryComments />
                    </div>
                </Fade>
            </Modal>
        </div>
    );
};

export default Notification;

I have three types of notification to show. I want to show like Facebook but I get first follower after all followers then likes and comments. I have three separate tables in my database. I want it like Facebook user activity wise. SO any idea how to dit?

question from:https://stackoverflow.com/questions/66056681/how-to-implement-notification-in-react-functional-component

Answer 1

Waitting for answers