feat(notifications): Add new NotificationsPanel component

duranmla · duranmla · commit 34973327fdbd · 2019-04-03T08:44:00.000+02:00
This code add the new NotificationsPanel component within the notifications scope and drop the usage
of standard dropdown on AlertsDropdown using the new component. Besides, the NotificationsPanel is
powered by popperjs on its react version to avoid extra code to calculate position of the component
and handle overflows cases easier
diff --git a/__mocks__/popper.js.js b/__mocks__/popper.js.js
@@ -0,0 +1,12 @@
+import PopperJs from "popper.js";
+
+export default class Popper {
+  static placements = PopperJs.placements;
+
+  constructor() {
+    return {
+      destroy: () => {},
+      scheduleUpdate: () => {},
+    };
+  }
+}
diff --git a/package.json b/package.json
@@ -6,8 +6,10 @@
     "@material-ui/core": "^3.9.0",
     "@material-ui/icons": "^3.0.2",
     "lodash": "^4.17.11",
+    "moment": "^2.24.0",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
+    "react-popper": "^1.3.3",
     "react-scripts": "2.1.8",
     "styled-components": "^4.1.3"
   },
diff --git a/src/notifications/NotificationsPanel.js b/src/notifications/NotificationsPanel.js
@@ -1,29 +1,31 @@
 // @flow
 
 import { getNotificationIcon } from "./helpers";
+import moment from "moment";
 import { NotificationsPanelComponents as NPC } from "./styled";
 import React from "react";
 import { Typography } from "@material-ui/core";
 
-export const NotificationsPanel = ({
-  notifications,
-}: {
+type Props = {
+  handleClose: Function,
   notifications: Array<Notification>,
-}) => {
+};
+
+export const NotificationsPanel = ({ handleClose, notifications }: Props) => {
   return (
     <NPC.Container>
       <NPC.Header>
         <Typography variant="caption">Notifications</Typography>
       </NPC.Header>
       <NPC.Body>
         {notifications.map(n => (
-          <NPC.Item key={n.id}>
+          <NPC.Item key={n.created_at} onClick={handleClose}>
             {getNotificationIcon("foo")}
             <div>
-              <Typography variant="body2">
-                Achievement completed! <strong>Know your stuff I</strong>
+              <Typography variant="body2">{n.data.topic_title}</Typography>
+              <Typography variant="caption">
+                {moment(n.created_at).fromNow()}
               </Typography>
-              <Typography variant="caption">1 hour ago</Typography>
             </div>
           </NPC.Item>
         ))}
@@ -32,3 +34,5 @@ export const NotificationsPanel = ({
     </NPC.Container>
   );
 };
+
+NotificationsPanel.Caret = NPC.Caret;
diff --git a/src/notifications/styled.js b/src/notifications/styled.js
@@ -18,13 +18,29 @@ const NotificationsPanelContainer = styled.div`
   width: 25rem;
 `;
 
+const NotificationsPanelCaret = styled.div`
+  background: ${grey[100]}
+  border: 1px solid ${grey[400]};
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+  display: block;
+  height: 0.6rem;
+  position: relative;
+  top: 0.4rem;
+  transform: rotate(-45deg);
+  width: 0.6rem;
+  z-index: 1;
+`;
+
 const NotificationsPanelFooter = styled.div`
+  background: ${grey[100]}
   border-top: 1px solid ${grey[400]};
   height: 2.125rem;
 `;
 
 const NotificationsPanelHeader = styled.div`
   align-items: center;
+  background: ${grey[100]}
   border-bottom: 1px solid ${grey[400]};
   display: flex;
   height: 2.125rem;
@@ -52,6 +68,7 @@ const NotificationsPanelItem = styled.div`
 
 export const NotificationsPanelComponents = {
   Body: NotificationsPanelBody,
+  Caret: NotificationsPanelCaret,
   Container: NotificationsPanelContainer,
   Footer: NotificationsPanelFooter,
   Header: NotificationsPanelHeader,
diff --git a/src/profile/AlertsDropdown.js b/src/profile/AlertsDropdown.js
@@ -3,53 +3,56 @@
 import Badge from "@material-ui/core/Badge";
 import IconButton from "@material-ui/core/IconButton";
 import NotificationsIcon from "@material-ui/icons/Notifications";
-import { Menu, MenuItem, Typography } from "@material-ui/core";
+import { NotificationsPanel } from "../notifications";
+import { Manager, Popper, Reference } from "react-popper";
 import React, { useState } from "react";
 
 const DROPDOWN_NAME = "@@profile/alerts/dropdown";
 
-const Dropdown = ({ anchorEl, handleClose, alerts }) => (
-  <Menu
-    id={DROPDOWN_NAME}
-    anchorEl={anchorEl}
-    open={Boolean(anchorEl)}
-    onClose={handleClose}
-  >
-    {alerts.map(alert => (
-      <MenuItem
-        component="a"
-        href={alert.data.original_post_id}
-        key={alert.created_at}
-        onClick={handleClose}
-      >
-        <Typography color="primary" variant="subtitle1">
-          {alert.data.topic_title}
-        </Typography>
-      </MenuItem>
-    ))}
-  </Menu>
-);
-
 export const AlertsDropdown = ({ alerts }: { alerts: Array<Alert> }) => {
   const [anchorEl, setAnchorEl] = useState(null);
   const handleClose = () => setAnchorEl(null);
-  const toggle = e => setAnchorEl(e.currentTarget);
+  const toggle = e => (anchorEl ? handleClose() : setAnchorEl(e.currentTarget));
 
   return (
-    <React.Fragment>
-      <IconButton
-        aria-label="AlertsToggler"
-        color="inherit"
-        aria-owns={anchorEl ? DROPDOWN_NAME : undefined}
-        aria-haspopup="true"
-        onClick={toggle}
-      >
-        <Badge badgeContent={alerts.length} color="secondary">
-          <NotificationsIcon />
-        </Badge>
-      </IconButton>
-      <Dropdown anchorEl={anchorEl} handleClose={handleClose} alerts={alerts} />
-    </React.Fragment>
+    <Manager>
+      <Reference>
+        {({ ref }) => (
+          <span ref={ref}>
+            <IconButton
+              aria-label="AlertsToggler"
+              color="inherit"
+              aria-owns={anchorEl ? DROPDOWN_NAME : undefined}
+              aria-haspopup="true"
+              onClick={toggle}
+            >
+              <Badge badgeContent={alerts.length} color="secondary">
+                <NotificationsIcon />
+              </Badge>
+            </IconButton>
+          </span>
+        )}
+      </Reference>
+      <Popper placement="bottom-end">
+        {({ ref, style, placement, arrowProps }) => (
+          <div
+            ref={ref}
+            style={{
+              ...style,
+              margin: 2,
+              visibility: anchorEl ? "visible" : "hidden",
+            }}
+            data-placement={placement}
+          >
+            <NotificationsPanel.Caret
+              ref={arrowProps.ref}
+              style={arrowProps.style}
+            />
+            <NotificationsPanel notifications={alerts} />
+          </div>
+        )}
+      </Popper>
+    </Manager>
   );
 };
 
diff --git a/yarn.lock b/yarn.lock
@@ -4011,6 +4011,14 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+create-react-context@<=0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.2.tgz#9836542f9aaa22868cd7d4a6f82667df38019dca"
+  integrity sha512-KkpaLARMhsTsgp0d2NA/R94F/eDLbhXERdIq3LvX2biCAXcDvHYoOqHfWCHf1+OLj+HKBotLG3KqaOOf+C1C+A==
+  dependencies:
+    fbjs "^0.8.0"
+    gud "^1.0.0"
+
 create-react-context@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.3.tgz#9ec140a6914a22ef04b8b09b7771de89567cb6f3"
@@ -9515,6 +9523,11 @@ modify-values@^1.0.0:
   resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
   integrity sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==
 
+moment@^2.24.0:
+  version "2.24.0"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
+  integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -10804,7 +10817,7 @@ polished@^2.3.1:
   dependencies:
     "@babel/runtime" "^7.2.0"
 
-popper.js@^1.14.1:
+popper.js@^1.14.1, popper.js@^1.14.4:
   version "1.14.7"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.7.tgz#e31ec06cfac6a97a53280c3e55e4e0c860e7738e"
   integrity sha512-4q1hNvoUre/8srWsH7hnoSJ5xVmIL4qgz+s4qf2TnJIMyZFUFMGH+9vE7mXynAlHSZ/NdTmmow86muD0myUkVQ==
@@ -12081,6 +12094,18 @@ react-perfect-scrollbar@^1.4.2:
     perfect-scrollbar "^1.4.0"
     prop-types "^15.6.1"
 
+react-popper@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.3.tgz#2c6cef7515a991256b4f0536cd4bdcb58a7b6af6"
+  integrity sha512-ynMZBPkXONPc5K4P5yFWgZx5JGAUIP3pGGLNs58cfAPgK67olx7fmLp+AdpZ0+GoQ+ieFDa/z4cdV6u7sioH6w==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    create-react-context "<=0.2.2"
+    popper.js "^1.14.4"
+    prop-types "^15.6.1"
+    typed-styles "^0.0.7"
+    warning "^4.0.2"
+
 react-powerplug@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/react-powerplug/-/react-powerplug-1.0.0.tgz#f9c10a761ece115661b8fd10920c4e573ea95909"
@@ -14351,6 +14376,11 @@ type-is@~1.6.16:
     media-typer "0.3.0"
     mime-types "~2.1.18"
 
+typed-styles@^0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/typed-styles/-/typed-styles-0.0.7.tgz#93392a008794c4595119ff62dde6809dbc40a3d9"
+  integrity sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==
+
 typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
@@ -14858,7 +14888,7 @@ warning@^3.0.0:
   dependencies:
     loose-envify "^1.0.0"
 
-warning@^4.0.1:
+warning@^4.0.1, warning@^4.0.2:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
   integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
