From 11727714ecfe35352a6b58ea2df6589deba89abb Mon Sep 17 00:00:00 2001
From: Jerko Steiner <jerko.steiner@gmail.com>
Date: Mon, 18 Nov 2019 00:19:43 -0300
Subject: [PATCH] Make <Notifications /> drop down on focus

---
 src/client/components/Media.tsx              |  2 +-
 src/client/components/Notifications.test.tsx |  4 +--
 src/client/components/Notifications.tsx      | 30 ++++++++++----------
 src/scss/_notification.scss                  | 19 ++++++++++---
 4 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/src/client/components/Media.tsx b/src/client/components/Media.tsx
index 3220afd..8ab173a 100644
--- a/src/client/components/Media.tsx
+++ b/src/client/components/Media.tsx
@@ -143,7 +143,7 @@ function Options(props: OptionsProps) {
   const label = labels[props.type]
   return (
     <React.Fragment>
-      <option value='false'>{label} disabled</option>
+      <option value='false'>Disable {label}</option>
       <option value={props.default}>Default {label}</option>
       {
         props.devices
diff --git a/src/client/components/Notifications.test.tsx b/src/client/components/Notifications.test.tsx
index f277193..35b5c69 100644
--- a/src/client/components/Notifications.test.tsx
+++ b/src/client/components/Notifications.test.tsx
@@ -34,11 +34,9 @@ describe('Notifications', () => {
   }
 
   describe('render', () => {
-    it('renders and sets a timeout for notification', async () => {
+    it('renders', async () => {
       await render()
-      expect(dismiss.mock.calls).toEqual([])
       ReactDOM.unmountComponentAtNode(div)
-      expect(dismiss.mock.calls).toEqual([[ 'one' ]])
     })
   })
 
diff --git a/src/client/components/Notifications.tsx b/src/client/components/Notifications.tsx
index dc98096..c4ecf75 100644
--- a/src/client/components/Notifications.tsx
+++ b/src/client/components/Notifications.tsx
@@ -24,13 +24,13 @@ export interface NotificationProps {
 const Notification = React.memo(
   function Notification(props: NotificationProps) {
     const { dismiss, notification } = props
-    React.useEffect(() => {
-      const timeout = setTimeout(dismiss, props.timeout, notification.id)
-      return () => {
-        clearTimeout(timeout)
-        dismiss(notification.id)
-      }
-    }, [])
+    // React.useEffect(() => {
+    //   const timeout = setTimeout(dismiss, props.timeout, notification.id)
+    //   return () => {
+    //     clearTimeout(timeout)
+    //     dismiss(notification.id)
+    //   }
+    // }, [])
     return (
       <div className={classnames(notification.type, 'notification')}>
         {notification.message}
@@ -42,24 +42,24 @@ const Notification = React.memo(
 export default class Notifications
 extends React.PureComponent<NotificationsProps> {
   static defaultProps = {
-    max: 5,
+    max: 20,
   }
   render () {
     const { dismiss, notifications, max } = this.props
     return (
-      <div className="notifications">
+      <div className="notifications" tabIndex={0}>
         <TransitionGroup>
-          {Object.keys(notifications).slice(-max).map(id => (
+          {Object.keys(notifications).slice(-max).reverse().map(id => (
             <CSSTransition
               key={id}
               classNames='fade'
               timeout={transitionTimeout}
             >
-                <Notification
-                  notification={notifications[id]}
-                  dismiss={dismiss}
-                  timeout={10000}
-                />
+              <Notification
+                notification={notifications[id]}
+                dismiss={dismiss}
+                timeout={10000}
+              />
             </CSSTransition>
           ))}
         </TransitionGroup>
diff --git a/src/scss/_notification.scss b/src/scss/_notification.scss
index 21d1bad..ca895ba 100644
--- a/src/scss/_notification.scss
+++ b/src/scss/_notification.scss
@@ -1,11 +1,15 @@
 .notifications {
-  pointer-events: none;
+  position: absolute;
+  right: 0;
+  left: 0;
+  top: 0;
+  height: 20px;
+  overflow-y: hidden;
+  transition: height 200ms ease-in, background-color 200ms ease-in;
+
   font-family: $font-monospace;
   font-size: 10px;
   text-align: right;
-  width: 100%;
-  padding: 1rem;
-  height: 100px;
 
   .notification {
     color: $color-info;
@@ -20,4 +24,11 @@
   .notification.warning {
     color: $color-warning;
   }
+
+  &:focus {
+    outline: none;
+    top: 0;
+    height: 200px;
+    background-color: rgba(0, 0, 0, 0.3);
+  }
 }