[feature]: Add a Notification widget

[gbowne1]

Is your feature request related to a problem? Please describe.

The current bell notification icon and its red counter badge do not currently do anything.

The ideal notifications we should have would exist in a dropdown from the bell similar to Facebooks, and other socials

The ideal notifications we would have are:

• Post notifications
• Event Notifications
• Groups Notifications
• Follow Notifications
• Like & Dislike
• Comment Notifications
• Message Notifications

Describe the solution you would like

Create a notification system including the dropdown from the bell icon.

Also add notification settimgs so that users can have full control over settings.

Add ability to turn off, mute, pause, disable notifications

Add ability for user to select which type of notification to recieve

We have a Settings system accessible from the user icon and the gear / settings menu item.

Describe the alternatives you have tried

Many social media sites currently have very poor notifications and poor ability to manage notificwtoons.

We all know getting too many notifications can be very annoying.

I think we can do a lot better.

Additional context

No response

[gbowne1]

The SQL for the notifications would be something like:

CREATE TABLE notifications ( id INTEGER PRIMARY KEY AUTOINCREMENT, message TEXT NOT NULL, read BOOLEAN DEFAULT false, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP );

[gbowne1]

My guess is that we would:

const express = require('express');
const router = express.Router();

router.get('/api/notifications', (req, res) => {
  // TODO: fetch notifications from the database and return as JSON
});

module.exports = router;

[gbowne1]

import { Snackbar } from '@mui/material';

const Notifications = () => {
  const [notifications, setNotifications] = useState([]);
  const [open, setOpen] = useState(false);

  const handleClose = () => setOpen(false);

  useEffect(() => {
    const fetchNotifications = async () => {
      const response = await axios.get('/api/notifications');
      setNotifications(response.data);
      setOpen(true);
    };
    fetchNotifications();
  }, []);

  return (
    <Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
      {notifications.map((notification) => (
        <Alert key={notification.id} severity="info" onClose={handleClose}>
          {notification.message}
        </Alert>
      ))}
    </Snackbar>
  );
};

[gbowne1]

import React, { useState, useEffect } from 'react';

const Notifications = () => {
  const [notifications, setNotifications] = useState([]);

  useEffect(() => {
    const fetchNotifications = async () => {
      const response = await axios.get('/api/notifications');
      setNotifications(response.data);
    };
    fetchNotifications();
  }, []);

  // TODO: render notifications using MUI components
};

[gbowne1]

I was thinking about this task to implement a notifications system with a bell icon and a dropdown menu in our social media app, we can use the following steps:Create a database table to store notifications with columns such as id, user_id, message, is_read, created_at, etc. Use SQLite to store the notifications data.Create an API endpoint in our Node.js backend to fetch the notifications for a specific user. We can use the fetch API in our React frontend to call this endpoint and get the notifications data.Use the Push API to send push notifications to users when they receive a new notification. You can use the Notification API to display the notification in the browser.Use the localStorage or indexedDB API to store the notifications data in the browser. This will allow you to display the notifications even when the user is offline.Use the @mui/material and @mui/icons-material packages to create the bell icon with a red circle badge that shows the number of unread notifications. You can use the Badge component to create the badge and the NotificationsIcon component to create the bell icon.Use the Popover component from @mui/material to create the dropdown menu that displays the list of notifications. You can use the List and ListItem components to create the list of notifications.Add functionality to mark notifications as read or dismiss them. You can use the PUT method in your API endpoint to update the is_read column in the database table. You can also use the DELETE method to delete notifications that have been dismissed.Add functionality to display the notification message when a user clicks on a notification in the dropdown menu. We can then use the Snackbar component from @mui/material to display the message. By following these steps, we could implement a notifications system with a bell icon and a dropdown menu.