Merge pull request #418 from Royal-Navy/refactor/notification-panel

Refactor notification panel to custom hook
Royal-Navy · Nov 13, 2019 · c87755d · c87755d
2 parents 1d7fe23 + 1c7fbd3
commit c87755d
Show file tree

Hide file tree

Showing 12 changed files with 377 additions and 362 deletions.
diff --git a/packages/css-framework/src/fragments/_notification-panel.scss b/packages/css-framework/src/fragments/_notification-panel.scss
@@ -46,30 +46,6 @@
   background: white;
 }
 
-.rn-notification-panel__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: spacing(3) 0;
-  border-bottom: 1px solid color(neutral, 100);
-  margin: 0;
-}
-
-.rn-notification-panel__heading {
-  font-weight: normal;
-  font-size: font-size(m);
-  color: color(neutral, 500);
-  margin: 0;
-  padding: 0 spacing(3);
-}
-
-.rn-notification-panel__close {
-  font-size: font-size(xs);
-  color: color(neutral, 300);
-  background: color(neutral, white);
-  border: none;
-}
-
 .rn-notification-leave {
   opacity: 0;
 }

diff --git a/packages/react-component-library/src/components/Searchbar/index.tsx b/packages/react-component-library/src/components/Searchbar/index.tsx
@@ -1,11 +1,8 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useRef, useState } from 'react'
 
 import TextInput from '../TextInput'
 import { RightArrow } from '../../icons'
-
-interface SearchFormType {
-  term: string
-}
+import { useDocumentClick } from '../../hooks'
 
 export interface SearchbarProps {
   className?: string
@@ -27,35 +24,17 @@ export const Searchbar: React.FC<SearchbarProps> = ({
   const searchBoxRef = useRef()
   const [term, setTerm] = useState('')
 
+  useDocumentClick(searchBoxRef, (event: Event) => {
+    if (!searchButton.current.contains(event.target)) {
+      setShowSearch(false)
+    }
+  })
+
   const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault()
     onSearch(term)
   }
 
-  function documentClick(event: Event) {
-    // workaround for undefined error in typescript
-    const current = searchBoxRef.current || {
-      contains: (target: any): boolean => target === null,
-    }
-
-    if (
-      current.contains(event.target) ||
-      searchButton.current.contains(event.target)
-    ) {
-      return
-    }
-
-    setShowSearch(false)
-  }
-
-  useEffect(() => {
-    document.addEventListener('mousedown', documentClick)
-
-    return () => {
-      document.removeEventListener('mousedown', documentClick)
-    }
-  }, [])
-
   return (
     <div
       ref={searchBoxRef}

diff --git a/packages/react-component-library/src/fragments/Masthead/Masthead.tsx b/packages/react-component-library/src/fragments/Masthead/Masthead.tsx
@@ -5,7 +5,11 @@ import classNames from 'classnames'
 import { Link, Searchbar, ScrollableNav } from '../../components'
 import { Logo as DefaultLogo, Search as SearchIcon } from '../../icons'
 import { UserLink } from './UserLink'
-import { NotificationPanel, NotificationsProps } from '../NotificationPanel'
+import {
+  NotificationPanel,
+  NotificationsProps,
+  NOTIFICATION_PLACEMENT,
+} from '../NotificationPanel'
 
 export interface MastheadProps {
   homeLink?: LinkTypes
@@ -103,7 +107,7 @@ export const Masthead: React.FC<MastheadProps> = ({
               buttonClassName="rn-masthead__option"
               className="rn-masthead__notification"
               data-testid="masthead-notifications"
-              notificationPlacement="below"
+              notificationPlacement={NOTIFICATION_PLACEMENT.BELOW}
               onHide={() => setShowNotifications(false)}
               onShow={() => setShowNotifications(true)}
               unreadNotification={unreadNotification}