Add ability to remove notifications

lib/notification.js

@@ -186,13 +186,14 @@ export const NotificationsProvider = ({ children, ...props }) => {
     const createNotification = (Component) => {
       const notification = { id: uniqueID('notification'), Component };
       setNotifications((prevNotifications) => [...prevNotifications, notification]);
+      return notification;
     };
 
     const createErrorNotification = (message = 'Something went wrong. Try refreshing?') => {
-      createNotification((props) => <Notification variant="error" timeout={2500} live="polite" message={message} {...props} />);
+      return createNotification((props) => <Notification variant="error" timeout={2500} live="polite" message={message} {...props} />);
     };
 
-    return { createNotification, createErrorNotification };
+    return { createNotification, createErrorNotification, removeNotification };
   }, []);
 
   return (
@@ -260,32 +261,48 @@ const UploadNotification = ({ onClose }) => {
 };
 
 const Content = () => {
-  const { createNotification, createErrorNotification } = useNotifications();
+  const { createNotification, createErrorNotification, removeNotification } = useNotifications();
+  const [lastNotificationId, setLastNotificationId] = React.useState(null);
 
   return (
     <>
-      <Button onClick={() => createNotification(UploadNotification)}>Create Notification</Button>
+      <Button
+        onClick={() => {
+          const notification = createNotification(UploadNotification);
+          setLastNotificationId(notification.id);
+        }}
+      >
+        Create Notification
+      </Button>
       &nbsp;
       <Button
-        onClick={() =>
-          createNotification((props) => (
+        onClick={() => {
+          const notification = createNotification((props) => (
             <Notification variant="success" {...props} message="Added power-passenger to collection linen-collection">
               <p style={{ marginTop: 0 }}>Added power-passenger to collection linen-collection</p>
               <Button as="a" variant="secondary" size="tiny" href="https://glitch.com/@modernserf/linen-collection" rel="noopener noreferrer">
                 Take me there
               </Button>
             </Notification>
-          ))
-        }
+          ));
+          setLastNotificationId(notification.id);
+        }}
       >
         Create Success Notification
       </Button>
       &nbsp;
-      <Button onClick={() => createErrorNotification()}>Create Error Notification</Button>
+      <Button
+        onClick={() => {
+          const notification = createErrorNotification();
+          setLastNotificationId(notification.id);
+        }}
+      >
+        Create Error Notification
+      </Button>
       &nbsp;
       <Button
-        onClick={() =>
-          createNotification((props) => (
+        onClick={() => {
+          const notification = createNotification((props) => (
             <Notification variant="onboarding" {...props} message="Create an account to keep this project and edit it anywhere.">
               <p style={{ marginTop: 0 }}>
                 <strong>Create an account</strong> to keep this project, and edit it anywhere.
@@ -298,11 +315,21 @@ const Content = () => {
                 Hide
               </Button>
             </Notification>
-          ))
-        }
+          ));
+          setLastNotificationId(notification.id);
+        }}
       >
         Create Onboarding Notification
       </Button>
+      <Button
+        onClick={() => {
+          removeNotification(lastNotificationId);
+          setLastNotificationId(null);
+        }}
+        disabled={!lastNotificationId}
+      >
+        Remove Last Notification
+      </Button>
     </>
   );
 };