fix last notification fails to exit issue

ucfopen · Dec 11, 2023 · b298b88 · b298b88
1 parent a6b3660
commit b298b88
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 37 deletions.
diff --git a/packages/app/obojobo-repository/shared/components/__snapshots__/notification.test.js.snap b/packages/app/obojobo-repository/shared/components/__snapshots__/notification.test.js.snap
@@ -132,31 +132,6 @@ exports[`Notification component loads notifications from cookies on mount 1`] =
 
 exports[`Notification component renders null when document.cookie is null 1`] = `null`;
 
-exports[`Notification component renders null when there are no notifications but document.cookie is not null 1`] = `
-<div
-  className="notification-wrapper"
->
-  <div
-    className="notification-banner"
-  >
-    <div
-      className="notification-header"
-    >
-      <h1>
-        Test Title
-      </h1>
-      <button
-        className="notification-exit-button"
-        onClick={[Function]}
-      >
-        X
-      </button>
-    </div>
-    <p>
-      Test Notification
-    </p>
-  </div>
-</div>
-`;
+exports[`Notification component renders null when there are no notifications but document.cookie is not null 1`] = `null`;
 
 exports[`Notification component renders without crashing 1`] = `null`;
diff --git a/packages/app/obojobo-repository/shared/components/notification.jsx b/packages/app/obojobo-repository/shared/components/notification.jsx
@@ -2,9 +2,7 @@ import React from 'react'
 import { useState, useEffect } from 'react'
 import '../../../obojobo-document-engine/src/scripts/viewer/components/notification.scss'
 
-//notifications are stored through cookies
 const Notification = () => {
-	//stores array of notification objects as state variable
 	const [notifications, setNotifications] = useState([])
 	const [hiddenNotifications, setHiddenNotifications] = useState([])
 
@@ -27,10 +25,9 @@ const Notification = () => {
 		}
 	}, [])
 
-	//removes the notification by key from the list of those to be displayed and writes that list back into the cookie
+	//when user clicks exit button, remove notification from state and add to hidden notifications
 	function onClickExitNotification(key) {
 		setHiddenNotifications(prevHiddenNotifications => [...prevHiddenNotifications, key])
-
 		setNotifications(prevNotifications => prevNotifications.filter((_, index) => index !== key))
 	}
 
@@ -48,12 +45,13 @@ const Notification = () => {
 		)
 	}
 
-	if (notifications && notifications.length >= 1) {
-		//rewrite to cookie to update the list of notifications to be displayed
+	//rewrite to cookie to remove notifications that have been hidden
+	if (hiddenNotifications && hiddenNotifications.length >= 1) {
 		const jsonNotifications = JSON.stringify(notifications)
 		const cookieString = `${encodeURIComponent(jsonNotifications)};`
-		document.cookie = 'notifications= ' + cookieString
-
+		document.cookie = 'notifications=' + cookieString
+	}
+	if (notifications && notifications.length >= 1) {
 		return (
 			<div className="notification-wrapper">
 				{notifications.map((notifications, key) =>
@@ -62,7 +60,6 @@ const Notification = () => {
 			</div>
 		)
 	} else {
-		//document.cookie = 'notifications= '  //clears the cookie //how is document not defined here? //fix for exit last notification
 		return null
 	}
 }

diff --git a/packages/app/obojobo-repository/shared/components/notification.test.js b/packages/app/obojobo-repository/shared/components/notification.test.js
@@ -26,7 +26,7 @@ describe('Notification component', () => {
 
 		expect(tree).toMatchSnapshot()
 		expect(document.cookie).toBe(
-			'notifications= %5B%7B%22key%22%3A1%2C%22text%22%3A%22Test%20Notification%22%2C%22title%22%3A%22Test%20Title%22%7D%5D;'
+			'notifications=[{"key":1,"text":"Test Notification","title":"Test Title"}]'
 		)
 	})
 
@@ -59,7 +59,7 @@ describe('Notification component', () => {
 		tree = component.toJSON()
 		expect(tree).toMatchSnapshot()
 		expect(document.cookie).toBe(
-			'notifications= %5B%7B%22key%22%3A2%2C%22text%22%3A%22Notification2%22%2C%22title%22%3A%22Title2%22%7D%5D;'
+			'notifications=%5B%7B%22key%22%3A2%2C%22text%22%3A%22Notification2%22%2C%22title%22%3A%22Title2%22%7D%5D;'
 		)
 	})