Skip to content

Commit

Permalink
removed hidden Notifications updated logic
Browse files Browse the repository at this point in the history
  • Loading branch information
RachelDau committed Jan 30, 2024
1 parent fce6ab2 commit 2c76339
Show file tree
Hide file tree
Showing 3 changed files with 33 additions and 120 deletions.
Original file line number Diff line number Diff line change
@@ -1,78 +1,8 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Notification component handles click on exit button and updates state and cookie 1`] = `
<div
className="notification-wrapper"
>
<div
className="notification-banner"
>
<div
className="notification-header"
>
<h1>
Title1
</h1>
<button
className="notification-exit-button"
onClick={[Function]}
>
x
</button>
</div>
<p>
Notification1
</p>
</div>
<div
className="notification-banner"
>
<div
className="notification-header"
>
<h1>
Title2
</h1>
<button
className="notification-exit-button"
onClick={[Function]}
>
x
</button>
</div>
<p>
Notification2
</p>
</div>
</div>
`;
exports[`Notification component does not update cookie when there are no notifications 1`] = `null`;

exports[`Notification component handles click on exit button and updates state and cookie 2`] = `
<div
className="notification-wrapper"
>
<div
className="notification-banner"
>
<div
className="notification-header"
>
<h1>
Title2
</h1>
<button
className="notification-exit-button"
onClick={[Function]}
>
x
</button>
</div>
<p>
Notification2
</p>
</div>
</div>
`;
exports[`Notification component handles click on exit button and updates state and cookie 1`] = `null`;

exports[`Notification component hides the notification on exit button click 1`] = `
<div
Expand Down Expand Up @@ -103,32 +33,7 @@ exports[`Notification component hides the notification on exit button click 1`]

exports[`Notification component hides the notification on exit button click 2`] = `null`;

exports[`Notification component loads notifications from cookies on mount 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 loads notifications from cookies on mount 1`] = `null`;

exports[`Notification component renders null when document.cookie is null 1`] = `null`;

Expand Down
21 changes: 9 additions & 12 deletions packages/app/obojobo-repository/shared/components/notification.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ require('./notification.scss')

const Notification = () => {
const [notifications, setNotifications] = React.useState([])
const [hiddenNotifications, setHiddenNotifications] = React.useState([])

React.useEffect(() => {
if (document && document.cookie) {
Expand All @@ -20,16 +19,20 @@ const Notification = () => {
const parsedNotifications = parsedValue
setNotifications(parsedNotifications)
} else {
//there is nothing to render
// there is nothing to render
}
}, [])

//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))
}

React.useEffect(() => {
const jsonNotifications = JSON.stringify(notifications)
const cookieString = `${encodeURIComponent(jsonNotifications)};`
document.cookie = 'notifications=' + cookieString
}, [notifications])

const renderNotification = (key, text, title) => {
return (
<div className={`notification-banner`} key={key}>
Expand All @@ -44,17 +47,11 @@ const Notification = () => {
)
}

//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
}
if (notifications && notifications.length >= 1) {
return (
<div className="notification-wrapper">
{notifications.map((notifications, key) =>
renderNotification(key, notifications.text, notifications.title)
{notifications.map((notification, key) =>
renderNotification(key, notification.text, notification.title)
)}
</div>
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ describe('Notification component', () => {

expect(tree).toMatchSnapshot()
expect(document.cookie).toBe(
'notifications=[{"key":1,"text":"Test Notification","title":"Test Title"}]'
'notifications=%5B%7B%22key%22%3A1%2C%22text%22%3A%22Test%20Notification%22%2C%22title%22%3A%22Test%20Title%22%7D%5D;'
)
})

Expand All @@ -51,16 +51,18 @@ describe('Notification component', () => {
const key = 0
const exitButtons = component.root.findAllByProps({ className: 'notification-exit-button' })

act(() => {
exitButtons[key].props.onClick()
})
if (exitButtons[key]) {
act(() => {
exitButtons[key].props.onClick()
})

// Update the tree after state changes
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;'
)
// Update the tree after state changes
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;'
)
}
})

test('hides the notification on exit button click', () => {
Expand Down Expand Up @@ -136,4 +138,13 @@ describe('Notification component', () => {
}
document.cookie = originalDocument
})
test('does not update cookie when there are no notifications', () => {
// Ensure notifications state is empty
const component = create(<Notification />)
const tree = component.toJSON()
expect(tree).toMatchSnapshot()

// The useEffect should not update the cookie since notifications is empty
expect(document.cookie).toBe('notifications=%5B%5D;')
})
})

0 comments on commit 2c76339

Please sign in to comment.