add notifications page

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

@@ -115,13 +115,13 @@ const JKNotificationDropdown = () => {
           <ListGroup flush className="font-weight-normal fs--1">
             {isIterableArray(notifications) &&
               notifications.map(notification => (
-                <ListGroupItem key={notification.notification_id} onClick={handleToggle}>
-                  <Notification notification={notification} flush />
+                <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="/pages/notifications">
+            <Link className="card-link d-block" to="/notifications">
               View all
             </Link>
           </div>

jam-ui/src/components/notification/JKNotification.js

@@ -9,6 +9,7 @@ import { removeNotification } from '../../store/features/notificationSlice';
 import JKGenericNotification from './JKGenericNotification';
 import JKFriendRequestNotification from './JKFriendRequestNotification';
 import TextMessageNotification from './JKTextMessageNotification';
+import classNames from 'classnames';
 
 function JKNotification(props) {
   
@@ -56,7 +57,7 @@ function JKNotification(props) {
     }
   };
 
-  return (<a className="notification bg-200">{render()}</a>);
+  return (<a className={classNames('notification', props.classNames) }>{render()}</a>);
 
   // <Link className={classNames('notification', { 'bg-200': unread, 'notification-flush': flush }, className)} to={to}>
   //   {avatar && (

jam-ui/src/components/page/JKNotifications.js

@@ -0,0 +1,70 @@
+import React, { useState, useEffect } from 'react';
+import { Alert, Card, CardBody, Col, Row } from 'reactstrap';
+import classNames from 'classnames';
+import JKNotification from '../notification/JKNotification';
+import FalconCardHeader from '../common/FalconCardHeader';
+import Loader from '../common/Loader';
+import { isIterableArray } from '../../helpers/utils';
+
+import { fetchNotifications } from '../../store/features/notificationSlice';
+import { useDispatch, useSelector } from 'react-redux';
+import { useAuth } from '../../context/AuthContext';
+
+const JKNotifications = () => {
+  const { currentUser } = useAuth();
+  const dispatch = useDispatch();
+  const notifications = useSelector(state => state.notification.notifications);
+  const loadingState = useSelector(state => state.notification.state);
+
+  const LIMIT = 20;
+  const [page, setPage] = useState(0);
+
+  const loadNotifications = async () => {
+    try {
+      const options = {
+        userId: currentUser.id,
+        offset: page * LIMIT,
+        limit: LIMIT
+      };
+      await dispatch(fetchNotifications(options)).unwrap();
+      //setPage(prev => prev + 1);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  useEffect(() => {
+    loadNotifications();
+  }, []);
+
+  return (
+    <Card className="h-100">
+      <FalconCardHeader title="Your Notifications">
+        {/* <div className="fs--1">
+          <Link className="text-sans-serif" to="#!" onClick={markAsRead}>
+            Mark all as read
+          </Link>
+        </div> */}
+      </FalconCardHeader>
+      <CardBody className="p-0">
+        {loadingState === 'loading' ? (
+          <Loader />
+        ) : isIterableArray(notifications) ? (
+          notifications.map(notification => (
+            <JKNotification notification={notification} key={notification.notification_id} />
+          ))
+        ) : (
+          <Row className="p-card">
+            <Col>
+              <Alert color="info" className="mb-0">
+                No notifications found!
+              </Alert>
+            </Col>
+          </Row>
+        )}
+      </CardBody>
+    </Card>
+  );
+};
+
+export default JKNotifications;

jam-ui/src/layouts/JKDashboardRoutes.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
 import JKPeople from '../components/page/JKPeople';
+import JKNotifications from '../components/page/JKNotifications';
 
 const JKDashboardRoutes = () => (
   
   <Switch>
     <Route path="/friends" component={JKPeople} />
+    <Route path="/notifications" component={JKNotifications} />
     {/*Redirect*/}
     <Redirect to="/errors/404" />
   </Switch>