jam-cloud/jam-ui/src/components/navbar/JKNotificationDropdown.js

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import classNames from 'classnames';
import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { Card, Dropdown, DropdownMenu, DropdownToggle } from 'reactstrap';
import ListGroup from 'reactstrap/es/ListGroup';
import ListGroupItem from 'reactstrap/es/ListGroupItem';
//import { rawEarlierNotifications, rawNewNotifications } from '../../data/notification/notification';
import { isIterableArray } from '../../helpers/utils';
//import useFakeFetch from '../../hooks/useFakeFetch';
import FalconCardHeader from '../common/FalconCardHeader';
import Notification from '../notification/JKNotification';

import { fetchNotifications } from '../../store/features/notificationSlice';
import { useDispatch, useSelector } from 'react-redux';
import { useAuth } from '../../context/AuthContext';

const JKNotificationDropdown = () => {
  const { currentUser } = useAuth();
  const dispatch = useDispatch();
  const notifications = useSelector(state => state.notification.notifications.slice(0, 5));

  const LIMIT = 20;
  const [page, setPage] = useState(0);

  // State
  //const { data: newNotifications, setData: setNewNotifications } = useFakeFetch(rawNewNotifications);
  //const { data: earlierNotifications, setData: setEarlierNotifications } = useFakeFetch(rawEarlierNotifications);
  const [isOpen, setIsOpen] = useState(false);
  const [isAllRead, setIsAllRead] = useState(false);

  // Handler
  const handleToggle = e => {
    e.preventDefault();
    setIsOpen(!isOpen);
  };

  // const markAsRead = e => {
  //   e.preventDefault();
  //   const updatedNewNotifications = newNotifications.map(notification => {
  //     if (notification.hasOwnProperty('unread')) {
  //       return {
  //         ...notification,
  //         unread: false
  //       };
  //     }
  //     return notification;
  //   });
  //   const updatedEarlierNotifications = earlierNotifications.map(notification => {
  //     if (notification.hasOwnProperty('unread')) {
  //       return {
  //         ...notification,
  //         unread: false
  //       };
  //     }
  //     setIsAllRead(true);
  //     return notification;
  //   });

  //   setNewNotifications(updatedNewNotifications);
  //   setEarlierNotifications(updatedEarlierNotifications);
  // };

  const loadNotifications = async () => {
    try {
      const options = {
        userId: currentUser.id,
        offset: page * LIMIT,
        limit: LIMIT
      };
      await dispatch(fetchNotifications(options)).unwrap();
      console.log('NOTIFICATIONS', notifications);
      //setPage(prev => prev + 1);
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    if (isOpen) {
      loadNotifications();
    }
  }, [isOpen]);

  return (
    <Dropdown
      nav
      inNavbar
      className="mx-3"
      isOpen={isOpen}
      toggle={handleToggle}
      onMouseOver={() => {
        let windowWidth = window.innerWidth;
        windowWidth > 992 && setIsOpen(true);
      }}
      onMouseLeave={() => {
        let windowWidth = window.innerWidth;
        windowWidth > 992 && setIsOpen(false);
      }}
    >
      <DropdownToggle
        nav
        className={classNames('px-0', {
          'notification-indicator notification-indicator-primary': !isAllRead
        })}
      >
        <FontAwesomeIcon icon="bell" transform="shrink-6" className="fs-4" />
      </DropdownToggle>
      <DropdownMenu right className="dropdown-menu-card" data-testid="notificationDropdown">
        <Card className="card-notification shadow-none" style={{ maxWidth: '20rem' }}>
          <FalconCardHeader className="card-header" title="Notifications" titleTag="h6" light={false}>
            {/* <Link className="card-link font-weight-normal" to="#!">
              Mark all as read
            </Link> */}
          </FalconCardHeader>
          <ListGroup flush className="font-weight-normal fs--1">
            {isIterableArray(notifications) &&
              notifications.map(notification => (
                <ListGroupItem key={`notification-drop-item-${notification.notification_id}`} onClick={handleToggle}>
                  <Notification notification={notification} classNames="bg-200" flush />
                </ListGroupItem>
              ))}
          </ListGroup>
          <div className="card-footer text-center border-top" onClick={handleToggle}>
            <Link className="card-link d-block" to="/notifications">
              View all
            </Link>
          </div>
        </Card>
      </DropdownMenu>
    </Dropdown>
  );
};

export default JKNotificationDropdown;