Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Consolidate 3 modals into BaseNotificationModal #2570

Merged
merged 9 commits into from
May 2, 2024
Merged

feat: Consolidate 3 modals into BaseNotificationModal #2570

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
b53da86
Consolidate 3 modals with very similar JSX; convert to Restart UI Modal
hannahpurcell May 1, 2024
353d04a
I overcommitted (story of my life)
hannahpurcell May 1, 2024
87246c9
Missed import rename
hannahpurcell May 1, 2024
4d7e99c
Revert unneeded mocks in Chelsea Bridge modals
hannahpurcell May 1, 2024
485a95a
Remove unneeded classname
hannahpurcell May 2, 2024
65b5afa
Revert reliance on react-test-renderer, instead migrate to testing-li…
hannahpurcell May 2, 2024
86a54d0
Destructure baseElement from render
hannahpurcell May 2, 2024
d74931a
Migrated from react-test-renderer in modal.test.tsx
hannahpurcell May 2, 2024
4a1188c
Merge branch 'main' into hp/consolidate-notification-modals
hannahpurcell May 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions assets/css/_basic_notification_modal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
.c-basic-notification-modal {
display: flex;
flex-direction: column;
}

.c-basic-notification-modal__close-button {
width: 1rem;
margin-left: auto;
}

.c-basic-notification-modal__body {
margin-top: 1rem;
}
24 changes: 0 additions & 24 deletions assets/css/_inactive_notification_modal.scss
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion assets/css/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ $vpp-location-padding: 1rem;
@import "leaflet";
@import "skate_ui";

@import "basic_notification_modal";
@import "circle_x_icon";
@import "card";
@import "circle_button";
Expand All @@ -48,7 +49,6 @@ $vpp-location-padding: 1rem;
@import "filter_accordion";
@import "garage_filter";
@import "icon_alert_circle";
@import "inactive_notification_modal";
@import "incoming_box";
@import "input_modal";
@import "ladder_page";
Expand Down
44 changes: 44 additions & 0 deletions assets/src/components/notificationModals/basicNotificationModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import React, { useContext } from "react"
import { Modal } from "@restart/ui"
import { setNotification } from "../../state"
import { StateDispatchContext } from "../../contexts/stateDispatchContext"
import { OldCloseIcon } from "../../helpers/icon"

const BasicNotificationModal = ({
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Commenting a bit late here, but did you mean for this to be Basic or Base?

I only ask because the title of the PR says Base, and that's what I would normally have expected.

title,
body,
}: {
title: string
body: string
}) => {
const [, dispatch] = useContext(StateDispatchContext)

const closeModal = () => {
dispatch(setNotification())
}

return (
<Modal
className="c-modal"
show
renderBackdrop={(props) => (
<div {...props} className="c-modal-backdrop" />
)}
>
<div className="c-basic-notification-modal">
{/* TODO: Close button IS tab-able, but not visually given focus */}
<button
title="Close"
className="c-basic-notification-modal__close-button"
onClick={closeModal}
>
<OldCloseIcon />
</button>
<div>{title}</div>
<div className="c-basic-notification-modal__body">{body}</div>
</div>
</Modal>
)
}

export default BasicNotificationModal
30 changes: 6 additions & 24 deletions assets/src/components/notificationModals/chelseaLoweredNotificationModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,12 @@
import React, { useContext } from "react"
import { StateDispatchContext } from "../../contexts/stateDispatchContext"
import { OldCloseIcon } from "../../helpers/icon"
import { setNotification } from "../../state"
import React from "react"
import BasicNotificationModal from "./basicNotificationModal"

const ChelseaLoweredNotificationModal = () => {
const [, dispatch] = useContext(StateDispatchContext)

const closeModal = () => {
dispatch(setNotification())
}

return (
<>
<div className="c-modal">
<div className="c-inactive-notification-modal__close-button">
<button title="Close" onClick={closeModal}>
<OldCloseIcon />
</button>
</div>
<div className="c-notification__title">Chelsea St Bridge Lowered</div>
<div className="c-inactive-notification-modal__body">
OCC reported that the Chelsea St Bridge has been lowered.
</div>
</div>
<div className="c-modal-backdrop" aria-hidden={true} />
</>
<BasicNotificationModal
title="Chelsea St Bridge Lowered"
body="OCC reported that the Chelsea St Bridge has been lowered."
/>
)
}

Expand Down
30 changes: 6 additions & 24 deletions assets/src/components/notificationModals/chelseaRaisedNotificationModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,13 @@
import React, { useContext } from "react"
import { StateDispatchContext } from "../../contexts/stateDispatchContext"
import { OldCloseIcon } from "../../helpers/icon"
import { setNotification } from "../../state"
import React from "react"
import { Notification } from "../../realtime.d"
import { formattedTime } from "../../util/dateTime"
import BasicNotificationModal from "./basicNotificationModal"

const ChelseaRaisedNotificationModal = ({
notification,
}: {
notification: Notification
}) => {
const [, dispatch] = useContext(StateDispatchContext)

const closeModal = () => {
dispatch(setNotification())
}

const contentString = (endDate: Date | null): string => {
if (endDate)
return (
Expand All @@ -27,20 +19,10 @@ const ChelseaRaisedNotificationModal = ({
}

return (
<>
<div className="c-modal">
<div className="c-inactive-notification-modal__close-button">
<button title="Close" onClick={closeModal}>
<OldCloseIcon />
</button>
</div>
<div className="c-notification__title">Chelsea St Bridge Raised</div>
<div className="c-inactive-notification-modal__body">
{contentString(notification.endTime)}
</div>
</div>
<div className="c-modal-backdrop" aria-hidden={true} />
</>
<BasicNotificationModal
title="Chelsea St Bridge Raised"
body={contentString(notification.endTime)}
/>
)
}

Expand Down
32 changes: 6 additions & 26 deletions assets/src/components/notificationModals/inactiveNotificationModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
import React, { useContext } from "react"
import React from "react"
import Loading from "../loading"
import { StateDispatchContext } from "../../contexts/stateDispatchContext"
import { useMinischeduleRuns } from "../../hooks/useMinischedule"
import { OldCloseIcon } from "../../helpers/icon"
import { Activity, Run, Piece, Trip } from "../../minischedule"
import { Notification, RunId } from "../../realtime.d"
import { setNotification } from "../../state"
import { now, serviceDaySeconds } from "../../util/dateTime"
import { title } from "../notificationCard"
import BasicNotificationModal from "./basicNotificationModal"

type RunScheduleRelationship = "current" | "break" | "past"

Expand All @@ -16,16 +14,10 @@ const InactiveNotificationModal = ({
}: {
notification: Notification
}) => {
const [, dispatch] = useContext(StateDispatchContext)

const runs: (Run | null)[] | undefined = useMinischeduleRuns(
notification.tripIds
)

const closeModal = () => {
dispatch(setNotification())
}

if (runs !== undefined) {
const uniqueRuns = Object.values(
(runs.filter((run) => run !== null) as Run[]).reduce(
Expand All @@ -38,22 +30,10 @@ const InactiveNotificationModal = ({
)

return (
<>
<div className="c-modal">
<div className="c-inactive-notification-modal__close-button">
<button title="Close" onClick={closeModal}>
<OldCloseIcon />
</button>
</div>
<div className="c-notification__title">
{title(notification.reason)} NOTIFICATION
</div>
<div className="c-inactive-notification-modal__body">
{bodyCopy(notification, uniqueRuns)}
</div>
</div>
<div className="c-modal-backdrop" aria-hidden={true} />
</>
<BasicNotificationModal
title={title(notification.reason) + " NOTIFICATION"}
body={bodyCopy(notification, uniqueRuns)}
/>
)
}

Expand Down
Loading
Loading