Skip to content

Commit cc2dd9f

Browse files
frozenheliumfrozenhelium
committed
feat(emergency): revamp emergency pages
- Add new routes and tab pages - Split emergency routes to a new file, update casing of route files - Add routes, placeholder views for OperationStrategy, ActionsSummary, Background - Add actions taken in emergency actions summary - Clean-up emergency details page - Add background section in emergency pages - Add new key figures - Add timeline view - Add lessons learned section in emergency pages - Refactor Ops. Learning - Rename KeyInsights to OpsLearningKeyInsights - Move OpsLearningKeyInsights to components/domain - Rename Sources to OpsLearningSources - Move OpsLearningSources to compnents/domain - Re-use OpsLearningKeyInsights to show lessons learned from previous operations in Emergency pages - Rename details to overview - Rename reports/documents to documents - Add cover image in page header - Add maxWidth for img elements - use new emergency endpoint
1 parent 9195c46 commit cc2dd9f

101 files changed

Lines changed: 3829 additions & 1795 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.changeset/witty-colors-march.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
"@ifrc-go/ui": minor
3+
---
4+
5+
Add `colorVariant` support in Heading, Breadcrumbs and Description components
6+
7+
- Add shared `ColorVariant` type in utils, re-used by ButtonLayout's `ButtonColorVariant`
8+
- Heading: optional `colorVariant` prop; when set, it also takes precedence over the legacy print colors
9+
- Description: optional `colorVariant` prop; `withLightText` now reduces the opacity of the current color using `color-mix` so it composes with any color variant
10+
- Breadcrumbs: `colorVariant` prop (defaults to `text`); items and separators now use a uniform color and the current page is emphasized with a medium font weight instead of the previous gray/black hierarchy

app/src/App/routes/CountryRoutes.tsx renamed to app/src/App/routes/countryRoutes.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {
1515
customWrapRoute,
1616
rootLayout,
1717
} from './common';
18-
import regionRoutes from './RegionRoutes';
18+
import regionRoutes from './regionRoutes';
1919
import SmartNavigate from './SmartNavigate';
2020

2121
type DefaultCountriesChild = 'ongoing-activities';
@@ -34,12 +34,12 @@ const countriesLayout = customWrapRoute({
3434
},
3535
});
3636

37-
interface Props {
37+
interface CountryNavigateProps {
3838
to?: string;
3939
}
4040

4141
// eslint-disable-next-line react-refresh/only-export-components
42-
function CountryNavigate(props: Props) {
42+
function CountryNavigate(props: CountryNavigateProps) {
4343
// FIXME: this function might not be necessary anymore
4444
const { to } = props;
4545

‎app/src/App/routes/emergencyRoutes.tsx‎

Lines changed: 328 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,328 @@
1+
import {
2+
generatePath,
3+
Navigate,
4+
useParams,
5+
} from 'react-router-dom';
6+
import { isTruthyString } from '@togglecorp/fujs';
7+
8+
import Auth from '../Auth';
9+
import {
10+
customWrapRoute,
11+
rootLayout,
12+
} from './common';
13+
import SmartNavigate from './SmartNavigate';
14+
15+
const emergencies = customWrapRoute({
16+
parent: rootLayout,
17+
path: 'emergencies',
18+
component: {
19+
render: () => import('#views/Emergencies'),
20+
props: {},
21+
},
22+
wrapperComponent: Auth,
23+
context: {
24+
title: 'Emergencies',
25+
visibility: 'anything',
26+
},
27+
});
28+
29+
type DefaultEmergenciesChild = 'overview';
30+
const emergenciesLayout = customWrapRoute({
31+
parent: rootLayout,
32+
path: 'emergencies/:emergencyId',
33+
forwardPath: 'overview' satisfies DefaultEmergenciesChild,
34+
component: {
35+
render: () => import('#views/Emergency'),
36+
props: {},
37+
},
38+
wrapperComponent: Auth,
39+
context: {
40+
title: 'Emergency',
41+
visibility: 'anything',
42+
},
43+
});
44+
45+
const emergencySlug = customWrapRoute({
46+
parent: rootLayout,
47+
path: 'emergencies/slug/:slug',
48+
component: {
49+
render: () => import('#views/EmergencySlug'),
50+
props: {},
51+
},
52+
wrapperComponent: Auth,
53+
context: {
54+
title: 'Emergency',
55+
visibility: 'anything',
56+
},
57+
});
58+
59+
const emergencyFollow = customWrapRoute({
60+
parent: rootLayout,
61+
path: 'emergencies/:emergencyId/follow',
62+
component: {
63+
render: () => import('#views/EmergencyFollow'),
64+
props: {},
65+
},
66+
wrapperComponent: Auth,
67+
context: {
68+
title: 'Follow Emergency',
69+
visibility: 'is-authenticated',
70+
},
71+
});
72+
73+
const emergencyIndex = customWrapRoute({
74+
parent: emergenciesLayout,
75+
index: true,
76+
component: {
77+
eagerLoad: true,
78+
render: SmartNavigate,
79+
props: {
80+
to: 'overview' satisfies DefaultEmergenciesChild,
81+
replace: true,
82+
hashToRouteMap: {
83+
'#details': 'details',
84+
'#reports': 'reports',
85+
'#activities': 'activities',
86+
'#surge': 'surge',
87+
},
88+
// TODO: make this typesafe
89+
forwardUnmatchedHashTo: 'additional-info',
90+
},
91+
},
92+
context: {
93+
title: 'Emergency',
94+
visibility: 'anything',
95+
},
96+
});
97+
98+
const emergencyOverview = customWrapRoute({
99+
parent: emergenciesLayout,
100+
path: 'overview' satisfies DefaultEmergenciesChild,
101+
component: {
102+
render: () => import('#views/EmergencyOverview'),
103+
props: {},
104+
},
105+
context: {
106+
title: 'Emergency Details',
107+
visibility: 'anything',
108+
},
109+
});
110+
111+
// eslint-disable-next-line react-refresh/only-export-components
112+
function EmergencyNavigateToOverview() {
113+
const params = useParams<{ emergencyId: string }>();
114+
115+
const emergencyId = isTruthyString(params.emergencyId)
116+
? parseInt(params.emergencyId, 10)
117+
: undefined;
118+
119+
return (
120+
<Navigate
121+
to={generatePath(emergencyOverview.absoluteForwardPath, { emergencyId })}
122+
replace
123+
/>
124+
);
125+
}
126+
127+
// NOTE: redirect from details to overview
128+
const emergencyDetails = customWrapRoute({
129+
parent: emergenciesLayout,
130+
path: 'details',
131+
component: {
132+
eagerLoad: true,
133+
render: EmergencyNavigateToOverview,
134+
props: {},
135+
},
136+
context: {
137+
title: 'Emergency Details',
138+
visibility: 'anything',
139+
},
140+
});
141+
142+
const emergencyDocuments = customWrapRoute({
143+
parent: emergenciesLayout,
144+
path: 'documents',
145+
component: {
146+
render: () => import('#views/EmergencyDocuments'),
147+
props: {},
148+
},
149+
context: {
150+
title: 'Emergency Documents',
151+
visibility: 'anything',
152+
},
153+
});
154+
155+
// eslint-disable-next-line react-refresh/only-export-components
156+
function EmergencyNavigateToDocuments() {
157+
const params = useParams<{ emergencyId: string }>();
158+
159+
const emergencyId = isTruthyString(params.emergencyId)
160+
? parseInt(params.emergencyId, 10)
161+
: undefined;
162+
163+
return (
164+
<Navigate
165+
to={generatePath(emergencyDocuments.absoluteForwardPath, { emergencyId })}
166+
replace
167+
/>
168+
);
169+
}
170+
171+
// NOTE: redirect from reports to documents
172+
const emergencyReportsAndDocuments = customWrapRoute({
173+
parent: emergenciesLayout,
174+
path: 'reports',
175+
component: {
176+
eagerLoad: true,
177+
render: EmergencyNavigateToDocuments,
178+
props: {},
179+
},
180+
context: {
181+
title: 'Emergency Documents',
182+
visibility: 'anything',
183+
},
184+
});
185+
186+
const emergencyBackground = customWrapRoute({
187+
parent: emergenciesLayout,
188+
path: 'background',
189+
component: {
190+
render: () => import('#views/EmergencyBackground'),
191+
props: {},
192+
},
193+
context: {
194+
title: 'Emergency Background',
195+
visibility: 'anything',
196+
},
197+
});
198+
199+
const emergencyActionsSummary = customWrapRoute({
200+
parent: emergenciesLayout,
201+
path: 'actions-summary',
202+
component: {
203+
render: () => import('#views/EmergencyActionsSummary'),
204+
props: {},
205+
},
206+
context: {
207+
title: 'Emergency Actions Summary',
208+
visibility: 'anything',
209+
},
210+
});
211+
212+
const emergencyOperationStrategy = customWrapRoute({
213+
parent: emergenciesLayout,
214+
path: 'operation-strategy',
215+
component: {
216+
render: () => import('#views/EmergencyOperationStrategy'),
217+
props: {},
218+
},
219+
context: {
220+
title: 'Emergency Operation Strategy',
221+
visibility: 'anything',
222+
},
223+
});
224+
225+
const emergencyActivities = customWrapRoute({
226+
parent: emergenciesLayout,
227+
path: 'activities',
228+
component: {
229+
render: () => import('#views/EmergencyActivities'),
230+
props: {},
231+
},
232+
context: {
233+
title: 'Emergency Activities',
234+
visibility: 'anything',
235+
},
236+
});
237+
const emergencySurge = customWrapRoute({
238+
parent: emergenciesLayout,
239+
path: 'surge',
240+
component: {
241+
render: () => import('#views/EmergencySurge'),
242+
props: {},
243+
},
244+
context: {
245+
title: 'Emergency Surge',
246+
visibility: 'anything',
247+
},
248+
});
249+
250+
// TODO: remove this route
251+
const emergencyAdditionalInfoOne = customWrapRoute({
252+
parent: emergenciesLayout,
253+
path: 'additional-info-1',
254+
component: {
255+
render: () => import('#views/EmergencyAdditionalTab'),
256+
props: {
257+
infoPageId: 1,
258+
},
259+
},
260+
context: {
261+
title: 'Emergency Additional Tab 1',
262+
visibility: 'anything',
263+
},
264+
});
265+
// TODO: remove this route
266+
const emergencyAdditionalInfoTwo = customWrapRoute({
267+
parent: emergenciesLayout,
268+
path: 'additional-info-2',
269+
component: {
270+
render: () => import('#views/EmergencyAdditionalTab'),
271+
props: {
272+
infoPageId: 2,
273+
},
274+
},
275+
context: {
276+
title: 'Emergency Additional Tab 2',
277+
visibility: 'anything',
278+
},
279+
});
280+
// TODO: remove this route
281+
const emergencyAdditionalInfoThree = customWrapRoute({
282+
parent: emergenciesLayout,
283+
path: 'additional-info-3',
284+
component: {
285+
render: () => import('#views/EmergencyAdditionalTab'),
286+
props: {
287+
infoPageId: 3,
288+
},
289+
},
290+
context: {
291+
title: 'Emergency Additional Tab 3',
292+
visibility: 'anything',
293+
},
294+
});
295+
296+
const emergencyAdditionalInfo = customWrapRoute({
297+
parent: emergenciesLayout,
298+
path: 'additional-info/:tabId?',
299+
component: {
300+
render: () => import('#views/EmergencyAdditionalTab'),
301+
props: {},
302+
},
303+
context: {
304+
title: 'Emergency Additional Info Tab',
305+
visibility: 'anything',
306+
},
307+
});
308+
309+
export default {
310+
emergencies,
311+
emergencySlug,
312+
emergencyFollow,
313+
emergenciesLayout,
314+
emergencyDetails,
315+
emergencyOverview,
316+
emergencyIndex,
317+
emergencyReportsAndDocuments,
318+
emergencyDocuments,
319+
emergencyActivities,
320+
emergencyActionsSummary,
321+
emergencyBackground,
322+
emergencyOperationStrategy,
323+
emergencySurge,
324+
emergencyAdditionalInfoOne,
325+
emergencyAdditionalInfoTwo,
326+
emergencyAdditionalInfoThree,
327+
emergencyAdditionalInfo,
328+
};

0 commit comments

Comments
 (0)