@rpcbase/client 0.180.0-notifications.0 → 0.180.0

package/AppProvider/index.js

@@ -13,7 +13,7 @@ import {flagValues} from "config/flags"
 
 import {POSTHOG_KEY} from "env"
 import { useAuthRouter } from "../auth/useAuthRouter"
-import { NotificationsProvider, NotificationsList } from "../notifications"
+import { NotificationsProvider, NotificationsContainer } from "../notifications"
 
 
 const PostHogWrapper = ({children, ...props}) => {
@@ -62,7 +62,7 @@ const AppProvider = ({children, ...props}) => {
             {children}
           </div>
           {authComponent}
-          <NotificationsList />
+          <NotificationsContainer />
         </NotificationsProvider>
       </HashStateProvider>
     </PostHogWrapper>

package/auth/components/SignOut/index.js

@@ -27,7 +27,7 @@ export const SignOut = ({
 }) => {
   const {t} = useTranslation("rb.sign_out", {useSuspense: false})
 
-  const {addToast} = useNotifications()
+  const {addNotification} = useNotifications()
 
   const [isSignedOut, setIsSignedOut] = useState(false)
 
@@ -54,7 +54,7 @@ export const SignOut = ({
       signOut()
       setIsSignedOut(true)
 
-      const toast = addToast({
+      const toast = addNotification({
         // id: `create-template-${Date.now()}`,
         loading: false,
         title: "Signed out",

package/notifications/{NotificationToast → NotificationItem}/index.js

@@ -2,7 +2,6 @@
 import assert from "assert"
 import {useRef} from "react"
 import Toast from "react-bootstrap/Toast"
-import {CSSTransition} from "react-transition-group"
 
 import {useNotifications} from "../NotificationsContext"
 
@@ -11,10 +10,10 @@ import HeaderStatus from "./HeaderStatus"
 // TODO: mv to rb server
 // import ack_notification from "rpc!server/notifications/ack_notification"
 
-import "./notification-toast.scss"
+import "./notification-item.scss"
 
 
-const NotificationToast = ({ nodeRef, notification }) => {
+export const NotificationItem = ({ nodeRef, notification }) => {
   const { setNotifications } = useNotifications()
 
   const { isLoading = false, status = "success", zIndex = 999 } = notification
@@ -46,7 +45,8 @@ const NotificationToast = ({ nodeRef, notification }) => {
   return (
       <Toast
         ref={nodeRef}
-        className={cx("notifs-item mt-2 notification-toast", {"has-no-body": !hasBody})}
+        id={notification.id}
+        className={cx("notification-item mt-2 notification-toast", {"has-no-body": !hasBody})}
         style={{position: "relative", zIndex}}
         onClose={onClose}
         animation={false}
@@ -63,5 +63,3 @@ const NotificationToast = ({ nodeRef, notification }) => {
       </Toast>
   )
 }
-
-export default NotificationToast

package/notifications/{NotificationToast/notification-toast.scss → NotificationItem/notification-item.scss}

@@ -1,6 +1,6 @@
 @import "helpers";
 
-.notification-toast.toast {
+.notification-item.toast {
   max-width: 260px;
 
   .toast-header {

package/notifications/NotificationsContainer/index.js

@@ -0,0 +1,37 @@
+/* @flow */
+import {createRef} from "react"
+import {CSSTransition, TransitionGroup} from "react-transition-group"
+
+import ToastContainer from "react-bootstrap/ToastContainer"
+
+// import {useQuery} from "@rpcbase/client/rts"
+
+import {useNotifications} from "../NotificationsContext"
+import {NotificationItem} from "../NotificationItem"
+
+// import useLLTs from "./useLLTs"
+
+import "./notifications-container.scss"
+
+export const NotificationsContainer = () => {
+  const {notifications} = useNotifications()
+
+  const renderNotification = (notification, i) => {
+    const key = notification.id
+    const nodeRef = createRef()
+
+    return (
+      <CSSTransition key={notification.id} nodeRef={nodeRef} timeout={200} classNames="notification-item">
+        <NotificationItem key={key} nodeRef={nodeRef} notification={notification} />
+      </CSSTransition>
+    )
+  }
+
+  return (
+    <ToastContainer id="notifications-container" position="bottom-end" className="pb-4 pe-3 ps-4">
+      <TransitionGroup className="transition-list">
+        {notifications.map(renderNotification)}
+      </TransitionGroup>
+    </ToastContainer>
+  )
+}

package/notifications/{NotificationsList/notifications.scss → NotificationsContainer/notifications-container.scss}

@@ -2,7 +2,12 @@
 
 $transition-duration: 200ms;
 
-.notifications-list-wrapper {
+#notifications-container {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  max-height: 100vh;
+  overflow-y: scroll;
 
   .action-notification {
     cursor: pointer;
@@ -12,20 +17,20 @@ $transition-duration: 200ms;
     transition: max-height $transition-duration ease-in-out;
   }
 
-  .notifs-item-enter {
+  .notification-item-enter {
     opacity: 0;
   }
 
-  .notifs-item-enter-active {
+  .notification-item-enter-active {
     opacity: 1;
     transition: opacity 400ms;
   }
 
-  .notifs-item-exit {
+  .notification-item-exit {
     opacity: 1;
   }
 
-  .notifs-item-exit-active {
+  .notification-item-exit-active {
     transform: translateX(390px);
 
     transition: all $transition-duration ease-out;

package/notifications/NotificationsContext/index.js

@@ -11,22 +11,9 @@ import {useNotificationsList} from "./useNotificationsList"
 export const NotificationsContext = createContext()
 
 export const NotificationsProvider = ({value, children}) => {
-  const [notifications, setNotifications] = useNotificationsList([
-    // WARNING: Debug only, this breaks unit tests
-    {
-      title: "Hello world",
-      body: "helloooooo",
-      timestamp: Date.now(),
-      level: "error",
-      icon: "error",
-    },
-  ])
+  const [notifications, setNotifications] = useNotificationsList([])
 
-  // A toast is displayed with notifications, but it is ephemeral and in the UI only
-  // they are used to provide feedback on an action that is a little longer than a simple form submit
-  // they are gone when the page refreshes
-  // toasts appear above modals
-  const addToast = ({
+  const addNotification = ({
     id,
     title,
     body,
@@ -34,7 +21,7 @@ export const NotificationsProvider = ({value, children}) => {
     zIndex = 2000,
     isLoading = false,
   }) => {
-    const toast = {
+    const notification = {
       id: id || `notif-${Date.now().toString()}`,
       title,
       body,
@@ -47,26 +34,26 @@ export const NotificationsProvider = ({value, children}) => {
 
     setNotifications((current) => {
       const next = [...current]
-      next.push(toast)
+      next.push(notification)
       return next
     })
 
     const dismiss = () => {
       setNotifications((current) => {
         const next = [...current]
-        return next.filter((notif) => notif.id !== id)
+        return next.filter((n) => n.id !== id)
       })
     }
 
     const update = (payload) => {
       setNotifications((current) => {
         const next = [...current]
-        return next.map((notif) => {
-          if (notif.id === id) {
-            // notif.isLoading = false
-            Object.assign(notif, payload)
+        return next.map((n) => {
+          if (n.id === id) {
+            // n.isLoading = false
+            Object.assign(n, payload)
           }
-          return notif
+          return n
         })
       })
     }
@@ -75,7 +62,7 @@ export const NotificationsProvider = ({value, children}) => {
   }
 
   return (
-    <NotificationsContext.Provider value={{notifications, setNotifications, addToast}}>
+    <NotificationsContext.Provider value={{notifications, setNotifications, addNotification}}>
       {children}
     </NotificationsContext.Provider>
   )

package/notifications/index.js

@@ -1,4 +1,4 @@
 export * from "./NotificationsContext"
-export * from "./NotificationsList"
+export * from "./NotificationsContainer"
 
 export * from "./config"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpcbase/client",
-  "version": "0.180.0-notifications.0",
+  "version": "0.180.0",
   "scripts": {
     "test": "../../node_modules/.bin/wireit"
   },

package/notifications/NotificationsList/index.js

@@ -1,44 +0,0 @@
-/* @flow */
-import assert from "assert"
-import {useEffect, useState, createRef} from "react"
-import {CSSTransition, TransitionGroup} from "react-transition-group"
-
-import ToastContainer from "react-bootstrap/ToastContainer"
-
-import {formatDistance} from "date-fns/formatDistance"
-
-import {useQuery} from "@rpcbase/client/rts"
-
-import {useNotifications} from "../NotificationsContext"
-import NotificationToast from "../NotificationToast"
-
-import useLLTs from "./useLLTs"
-
-import "./notifications.scss"
-
-export const NotificationsList = () => {
-  const {notifications, setNotifications} = useNotifications()
-
-  const llts = useLLTs()
-
-  const renderNotification = (notification, i) => {
-    const key = notification.id
-    const nodeRef = createRef()
-
-    return (
-      <CSSTransition key={notification.id} nodeRef={nodeRef} timeout={200} classNames="notifs-item">
-        <NotificationToast key={key} nodeRef={nodeRef} notification={notification} />
-      </CSSTransition>
-    )
-  }
-
-  return (
-    <ToastContainer position="bottom-end" className="pb-4 pe-3 ps-4" style={{position: "absolute", overflowY: "scroll", bottom: 0, right: 0}}>
-    <div className="notifications-list-wrapper">
-      <TransitionGroup className="transition-list">
-        {notifications.map(renderNotification)}
-      </TransitionGroup>
-    </div>
-    </ToastContainer>
-  )
-}