moment js + dropdown :3

admin/package-lock.json

@@ -8329,6 +8329,11 @@
         "minimist": "^1.2.5"
       }
     },
+    "moment": {
+      "version": "2.26.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.26.0.tgz",
+      "integrity": "sha512-oIixUO+OamkUkwjhAVE18rAMfRJNsNe/Stid/gwHSOfHrOtw9EhAY2AHvdKZ/k/MggcYELFCJz/Sn2pL8b8JMw=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",

admin/package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "moment": "^2.26.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1"

admin/src/global.js

@@ -0,0 +1,7 @@
+import moment from 'moment';
+
+function getPeriodString(date) {
+    return moment(date).fromNow();
+}
+
+export { getPeriodString };

admin/src/header.js

@@ -1,13 +1,45 @@
 import * as React from "react";
 import Icon from "./icon";
+import {useState} from "react";
+import {getPeriodString} from "./global";
 
-export default class Header extends React.Component {
-    render() {
+export default function Header(props) {
 
-        let notificationCount = 0;
-        let notificationText = "";
+    const parent = {
+        onChangeView: props.onChangeView || function() {},
+        notifications: props.notifications || { },
+    };
 
-        return <nav className={"main-header navbar navbar-expand navbar-white navbar-light"}>
+    function onChangeView(view) {
+        parent.onChangeView(view);
+    }
+
+    const [dropdownVisible, showDropdown] = useState(false);
+    const mailIcon = <Icon icon={"envelope"} type={"fas"} />;
+
+    let notificationCount = Object.keys(parent.notifications).length;
+    let notificationText  = "No new notifications";
+
+    if(notificationCount === 1) {
+        notificationText = "1 new notification";
+    } else if(notificationCount > 1) {
+        notificationText = notificationCount + " new notification";
+    }
+
+    let notificationItems = [];
+    for (let uid in parent.notifications) {
+        const notification = parent.notifications[uid];
+        const createdAt = getPeriodString(notification.created_at);
+        notificationItems.push(
+            <a href="#" className={"dropdown-item"} key={"notification-" + uid}>
+                {mailIcon}
+                <span className={"ml-2"}>{notification.title}</span>
+                <span className={"float-right text-muted text-sm"}>{createdAt}</span>
+            </a>);
+    }
+
+    return (
+        <nav className={"main-header navbar navbar-expand navbar-white navbar-light"}>
 
             {/*Left navbar links */}
             <ul className={"navbar-nav"}>
@@ -17,7 +49,7 @@ export default class Header extends React.Component {
                     </a>
                 </li>
                 <li className={"nav-item d-none d-sm-inline-block"}>
-                    <a href={"#"} className={"nav-link"}>
+                    <a href={"#"} onClick={() => onChangeView("dashboard")} className={"nav-link"}>
                         Home
                     </a>
                 </li>
@@ -39,22 +71,23 @@ export default class Header extends React.Component {
             <ul className={"navbar-nav ml-auto"}>
 
                 {/* Notifications Dropdown Menu */}
-                <li className={"nav-item dropdown"}>
+                <li className={"nav-item dropdown"} onClick={() => showDropdown(!dropdownVisible)}>
                     <a href={"#"} className={"nav-link"} data-toggle={"dropdown"}>
                         <Icon icon={"bell"} type={"far"} />
                         <span className={"badge badge-warning navbar-badge"}>
                             {notificationCount}
                         </span>
                     </a>
-                    <div className={"dropdown-menu dropdown-menu-lg dropdown-menu-right"}>
+                    <div className={"dropdown-menu dropdown-menu-lg dropdown-menu-right " + (dropdownVisible ? " show" : "")}>
                         <span className={"dropdown-item dropdown-header"}>
                             {notificationText}
                         </span>
+                        {notificationItems}
                         <div className={"dropdown-divider"} />
-                        <a href={"#"} className={"dropdown-item dropdown-footer"}>See All Notifications</a>
+                        <a href={"#"} onClick={() => onChangeView("dashboard")} className={"dropdown-item dropdown-footer"}>See All Notifications</a>
                     </div>
                 </li>
             </ul>
         </nav>
-    }
+    )
 }

admin/src/index.js

@@ -67,9 +67,17 @@ class AdminDashboard extends React.Component {
       return <b>Loading… <Icon icon={"spinner"} /></b>
     }
 
+    const controlObj = {
+      notifications: this.state.notifications,
+      currentView: this.state.currentView,
+      onChangeView: this.onChangeView.bind(this),
+      showDialog: this.showDialog.bind(this),
+      api: this.api
+    };
+
     return <>
-        <Header />
-        <Sidebar currentView={this.state.currentView} notifications={this.state.notifications} onChangeView={this.onChangeView.bind(this)} showDialog={this.showDialog.bind(this)} api={this.api} />
+        <Header {...controlObj} />
+        <Sidebar {...controlObj} />
         <div className={"content-wrapper p-2"}>
           <section className={"content"}>
             {this.createContent()}