Skip to content

Commit

Permalink
DBC22-1882: updated advisory/bulletin empty state page to static page
Browse files Browse the repository at this point in the history
DBC22-1882: updated advisory/bulletin empty state page to static page
  • Loading branch information
bcgov-brwang committed Mar 18, 2024
1 parent 47f23f7 commit 887c741
Show file tree
Hide file tree
Showing 4 changed files with 33 additions and 34 deletions.
26 changes: 14 additions & 12 deletions src/frontend/src/Components/advisories/EmptyAdvisory.js
Original file line number Diff line number Diff line change
@@ -1,22 +1,24 @@
// React
import React from 'react';
// Styling
import './AdvisoriesList.scss';
import Container from 'react-bootstrap/Container';
import parse from 'html-react-parser';

export default function EmptyAdvisory(props) {
const { advisory } = props;

export default function EmptyAdvisory() {
// Rendering
return (
<div>
<h4 className='advisory-li-title'>{props.advisory.title}</h4>
{advisory && (
<Container className="advisory-body-container cms-body">
<p>{parse(advisory.body)}</p>
</Container>
)}
<h4 className='advisory-li-title'>No advisories are active at the moment</h4>
<Container className="advisory-body-container cms-body">
<div className="advisory-body-container cms-body container">
<p>
If there are widespread travel advisories, they will be posted here to give you guidance on:
</p>
<ul>
<li>how to navigate safely through the affected area</li>
<li>where to detour if available, and</li>
<li>keep you informed with the most up-to-date information we have.</li>
</ul>
</div>
</Container>
</div>
);
}
23 changes: 11 additions & 12 deletions src/frontend/src/Components/bulletins/EmptyBulletin.js
Original file line number Diff line number Diff line change
@@ -1,22 +1,21 @@
// React
import React from 'react';
// Styling
import './BulletinsList.scss';
import Container from 'react-bootstrap/Container';
import parse from 'html-react-parser';

export default function EmptyBulletin(props) {
const { bulletin } = props;

export default function EmptyBulletin() {
// Rendering
return (
<div>
<h4 className='bulletin-li-title'>{props.bulletin.title}</h4>
{bulletin && (
<Container className="bulletin-body-container cms-body">
<p>{parse(bulletin.body)}</p>
</Container>
)}
<h4 className='bulletin-li-title'>No bulletins at the moment</h4>
<Container className="bulletin-body-container cms-body">
<div className="bulletin-body-container cms-body container">
<p>
There are currently no bulletins to display.
As we continue to evolve DriveBC to better meet the needs of British Columbians,
watch this space for updates as they come!
</p>
</div>
</Container>
</div>
);
}
9 changes: 4 additions & 5 deletions src/frontend/src/pages/AdvisoriesListPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,7 @@ export default function AdvisoriesListPage() {
}
});

const filteredAdvisories = advisories?.filter(advisory => !advisory.title.includes('No advisories'));
const isFilteredAdvisoriesEmpty = filteredAdvisories?.length === 0;
const isAdvisoriesEmpty = advisories?.length === 0;

return (
<div className='advisories-page'>
Expand All @@ -58,10 +57,10 @@ export default function AdvisoriesListPage() {
description='Get the latest critical travel status information during major events affecting travel on a highway or region.'>
</PageHeader>
<Container>
{isFilteredAdvisoriesEmpty ? (
<EmptyAdvisory advisory={advisories[0]}/>
{isAdvisoriesEmpty ? (
<EmptyAdvisory/>
) : (
<AdvisoriesList advisories={filteredAdvisories} showDescription={true} showTimestamp={true} />
<AdvisoriesList advisories={advisories} showDescription={true} showTimestamp={true} />
)}
</Container>
<Footer />
Expand Down
9 changes: 4 additions & 5 deletions src/frontend/src/pages/BulletinsListPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,7 @@ export default function BulletinsListPage() {
}
});

const filteredBulletins = bulletins?.filter(bulletin => !bulletin.title.includes('No bulletins'));
const isFilteredBulletinsEmpty = filteredBulletins?.length === 0;
const isBulletinsEmpty = bulletins?.length === 0;

return (
<div className='bulletins-page'>
Expand All @@ -59,10 +58,10 @@ export default function BulletinsListPage() {
</PageHeader>

<Container>
{isFilteredBulletinsEmpty ? (
<EmptyBulletin bulletin={bulletins[0]}/>
{isBulletinsEmpty ? (
<EmptyBulletin/>
) : (
<BulletinsList bulletins={filteredBulletins} />
<BulletinsList bulletins={bulletins} />
)}
</Container>

Expand Down

0 comments on commit 887c741

Please sign in to comment.