Skip to content

Commit ae91504

Browse files
OchiengPaul442OchiengPaul442
committed
worked on page paths
1 parent 32f0a71 commit ae91504

File tree

8 files changed

+500
-499
lines changed

8 files changed

+500
-499
lines changed

‎website/frontend/App.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,10 @@ const MobileAppPage = React.lazy(() => import('src/pages/OurProducts/MobileAppPa
2828
const APIPage = React.lazy(() => import('src/pages/OurProducts/ApiPage'));
2929
const CalibrationPage = React.lazy(() => import('src/pages/OurProducts/CalibrationPage'));
3030
const QRCodeRedirectPage = React.lazy(() => import('src/pages/ExploreData/Redirect'));
31-
const CleanAirPage = React.lazy(() => import('src/pages/CleanAir'));
31+
const CleanAirPage = React.lazy(() => import('src/pages/CleanAir/CleanAirAbout'));
32+
const CleanAirMemberPage = React.lazy(() => import('src/pages/CleanAir/CleanAirPartners'));
33+
const CleanAirEventsPage = React.lazy(() => import('src/pages/CleanAir/CleanAirEvents'));
34+
const CleanAirResourcesPage = React.lazy(() => import('src/pages/CleanAir/CleanAirPublications'));
3235
const CleanAirEventsDetailsPage = React.lazy(() => import('src/pages/CleanAir/EventDetails'));
3336

3437
import { loadAirQloudSummaryData } from 'reduxStore/AirQlouds/operations';
@@ -119,7 +122,10 @@ const App = () => {
119122
<Route path="/products/api" element={<APIPage />} />
120123
<Route path="/download-apps" element={<QRCodeRedirectPage />} />
121124
<Route path="/products/calibrate" element={<CalibrationPage />} />
122-
<Route path="/clean-air" element={<CleanAirPage />} />
125+
<Route path="/clean-air/about" element={<CleanAirPage />} />
126+
<Route path="/clean-air/membership" element={<CleanAirMemberPage />} />
127+
<Route path="/clean-air/events" element={<CleanAirEventsPage />} />
128+
<Route path="/clean-air/resources" element={<CleanAirResourcesPage />} />
123129
<Route
124130
path="/clean-air/event-details/:uniqueTitle"
125131
element={<CleanAirEventsDetailsPage />}

‎website/frontend/src/components/CleanAir/SecondaryNav/index.js‎

Lines changed: 20 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import React, { useEffect, useState } from 'react';
1+
import React, { useEffect } from 'react';
22
import { useSelector, useDispatch } from 'react-redux';
33
import { setActiveTab } from '../../../../reduxStore/CleanAirNetwork/CleanAir';
44
import PropTypes from 'prop-types';
55
import { useTranslation } from 'react-i18next';
6+
import { Link, useLocation } from 'react-router-dom';
67

78
/**
89
* @description Secondary navigation component for the CleanAir site
@@ -18,34 +19,32 @@ const SecondaryNavComponent = ({ disabledTabs }) => {
1819
t('cleanAirSite.subNav.resources')
1920
];
2021
const dispatch = useDispatch();
21-
const activeTab = useSelector((state) => state.cleanAirData.activeTab);
22-
const [selectedTab, setSelectedTab] = useState(tabs[0]);
22+
const location = useLocation();
2323

2424
useEffect(() => {
25-
setSelectedTab(activeTab);
26-
}, []);
27-
28-
const handleTabClick = (tab) => {
29-
if (!disabledTabs.includes(tab)) {
30-
setSelectedTab(tab);
31-
dispatch(setActiveTab(tab));
25+
const currentTab = tabs.findIndex((tab) => location.pathname.includes(tab.toLowerCase()));
26+
if (currentTab !== -1 && !disabledTabs.includes(currentTab)) {
27+
dispatch(setActiveTab(tabs[currentTab]));
3228
}
33-
};
29+
}, [location, dispatch, tabs, disabledTabs]);
3430

3531
return (
3632
<div className="header-subnav">
3733
<ul className="tabs">
3834
{tabs.map((tab, index) => (
39-
<li
40-
key={index}
41-
className={`${selectedTab === index ? 'active' : ''} ${
42-
disabledTabs.includes(index) ? 'disabled' : ''
43-
}`}
44-
onClick={() => {
45-
handleTabClick(index);
46-
}}>
47-
<span>{tab}</span>
48-
</li>
35+
<Link to={`/clean-air/${tab.toLowerCase()}`} key={index}>
36+
<li
37+
className={`${location.pathname.includes(tab.toLowerCase()) ? 'active' : ''} ${
38+
disabledTabs.includes(index) ? 'disabled' : ''
39+
}`}
40+
onClick={() => {
41+
if (!disabledTabs.includes(index)) {
42+
dispatch(setActiveTab(tab));
43+
}
44+
}}>
45+
<span>{tab}</span>
46+
</li>
47+
</Link>
4948
))}
5049
</ul>
5150
</div>

‎website/frontend/src/components/LanguageSwitcher.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ const LanguageSwitcher = () => {
8787
<div className="clean-air-link">
8888
<p className="desktop-view">
8989
{t('topBanners.languageSwitcher.cleanAirText')}
90-
<Link to="/clean-air">
90+
<Link to="/clean-air/about">
9191
<span>
9292
{t('topBanners.languageSwitcher.linkText')}
9393
<ArrowRightAltIcon

‎website/frontend/src/pages/CleanAir/CleanAirAbout.js‎

Lines changed: 134 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import Placeholder2 from 'assets/img/cleanAir/goal2.png';
99
import Placeholder3 from 'assets/img/cleanAir/goal3.png';
1010
import SEO from 'utilities/seo';
1111
import { useTranslation, Trans } from 'react-i18next';
12+
import CleanAirPageContainer from './Page';
1213

1314
const CleanAirAbout = () => {
1415
useInitScrollTop();
@@ -37,153 +38,155 @@ const CleanAirAbout = () => {
3738
];
3839

3940
return (
40-
<div className="page-wrapper about-page">
41-
<SEO
42-
title="About"
43-
siteTitle="CLEAN-Air Network"
44-
description="An African led, multi-region network bringing together a community of practice for air quality solutions and air quality management across Africa."
45-
/>
41+
<CleanAirPageContainer>
42+
<div className="page-wrapper about-page">
43+
<SEO
44+
title="About"
45+
siteTitle="CLEAN-Air Network"
46+
description="An African led, multi-region network bringing together a community of practice for air quality solutions and air quality management across Africa."
47+
/>
4648

47-
{/* section 1 */}
48-
<div className="Hero">
49-
<span className="image-container">
50-
<img src={Section1} />
51-
</span>
52-
<div className="hero-content">
53-
<div>
54-
<p className="hero-title">
55-
<Trans i18nKey="cleanAirSite.about.section1.title">
56-
The CLEAN-Air <br /> Network
57-
</Trans>
58-
</p>
59-
<p className="hero-sub">
60-
<Trans i18nKey="cleanAirSite.about.section1.subText">
61-
<span className="fact">An African-led, multi-regional network</span> <br />
62-
bringing together a community of practice for air quality solutions and air quality
63-
management across Africa.
64-
</Trans>
65-
</p>
66-
<ButtonCTA
67-
label={t('cleanAirSite.about.section1.cta')}
68-
link="https://docs.google.com/forms/d/e/1FAIpQLScIPz7VrhfO2ifMI0dPWIQRiGQ9y30LoKUCT-DDyorS7sAKUA/viewform"
69-
style={{
70-
width: '200px'
71-
}}
72-
/>
49+
{/* section 1 */}
50+
<div className="Hero">
51+
<span className="image-container">
52+
<img src={Section1} />
53+
</span>
54+
<div className="hero-content">
55+
<div>
56+
<p className="hero-title">
57+
<Trans i18nKey="cleanAirSite.about.section1.title">
58+
The CLEAN-Air <br /> Network
59+
</Trans>
60+
</p>
61+
<p className="hero-sub">
62+
<Trans i18nKey="cleanAirSite.about.section1.subText">
63+
<span className="fact">An African-led, multi-regional network</span> <br />
64+
bringing together a community of practice for air quality solutions and air
65+
quality management across Africa.
66+
</Trans>
67+
</p>
68+
<ButtonCTA
69+
label={t('cleanAirSite.about.section1.cta')}
70+
link="https://docs.google.com/forms/d/e/1FAIpQLScIPz7VrhfO2ifMI0dPWIQRiGQ9y30LoKUCT-DDyorS7sAKUA/viewform"
71+
style={{
72+
width: '200px'
73+
}}
74+
/>
75+
</div>
7376
</div>
7477
</div>
75-
</div>
7678

77-
{/* section 2 */}
78-
<div className="page-section">
79-
<div className="acronym-section-container">
80-
<div className="acronym-section">
81-
<div className="content">
82-
<div className="acronym-content-container">
83-
<p>
84-
<Trans i18nKey="cleanAirSite.about.section2.acronym">
85-
<span className="highlight">CLEAN-Air</span>, is an acronym coined from
86-
</Trans>
87-
</p>
88-
<h2 className="content-h">{t('cleanAirSite.about.section2.title')}</h2>
89-
<p>{t('cleanAirSite.about.section2.subText')}</p>
90-
<p className="join-now">
91-
<Trans i18nKey="cleanAirSite.about.section2.cta">
92-
Are you an organization or individual interested in air quality in Africa?
93-
<a
94-
href="https://docs.google.com/forms/d/e/1FAIpQLScIPz7VrhfO2ifMI0dPWIQRiGQ9y30LoKUCT-DDyorS7sAKUA/viewform"
95-
target="_blank"
96-
rel="noopener noreferrer">
97-
Join the network
98-
</a>
99-
</Trans>
100-
</p>
79+
{/* section 2 */}
80+
<div className="page-section">
81+
<div className="acronym-section-container">
82+
<div className="acronym-section">
83+
<div className="content">
84+
<div className="acronym-content-container">
85+
<p>
86+
<Trans i18nKey="cleanAirSite.about.section2.acronym">
87+
<span className="highlight">CLEAN-Air</span>, is an acronym coined from
88+
</Trans>
89+
</p>
90+
<h2 className="content-h">{t('cleanAirSite.about.section2.title')}</h2>
91+
<p>{t('cleanAirSite.about.section2.subText')}</p>
92+
<p className="join-now">
93+
<Trans i18nKey="cleanAirSite.about.section2.cta">
94+
Are you an organization or individual interested in air quality in Africa?
95+
<a
96+
href="https://docs.google.com/forms/d/e/1FAIpQLScIPz7VrhfO2ifMI0dPWIQRiGQ9y30LoKUCT-DDyorS7sAKUA/viewform"
97+
target="_blank"
98+
rel="noopener noreferrer">
99+
Join the network
100+
</a>
101+
</Trans>
102+
</p>
103+
</div>
101104
</div>
102105
</div>
103106
</div>
104107
</div>
105-
</div>
106108

107-
{/* section 3 */}
108-
<div className="page-section">
109-
<SplitSection
110-
pillTitle={t('cleanAirSite.about.section3.pillTitle')}
111-
title={t('cleanAirSite.about.section3.title')}
112-
content={t('cleanAirSite.about.section3.subText')}
113-
showButton={false}
114-
link="#"
115-
imageStyle={{
116-
objectFit: 'cover',
117-
maxHeight: '400px'
118-
}}
119-
imgURL={Section3}
120-
pillBgColor="#ECF2FF"
121-
pillTextColor="#135DFF"
122-
reverse={false}
123-
/>
124-
</div>
109+
{/* section 3 */}
110+
<div className="page-section">
111+
<SplitSection
112+
pillTitle={t('cleanAirSite.about.section3.pillTitle')}
113+
title={t('cleanAirSite.about.section3.title')}
114+
content={t('cleanAirSite.about.section3.subText')}
115+
showButton={false}
116+
link="#"
117+
imageStyle={{
118+
objectFit: 'cover',
119+
maxHeight: '400px'
120+
}}
121+
imgURL={Section3}
122+
pillBgColor="#ECF2FF"
123+
pillTextColor="#135DFF"
124+
reverse={false}
125+
/>
126+
</div>
125127

126-
{/* section 4 */}
127-
<div className="page-section">
128-
<SplitSection
129-
pillTitle={t('cleanAirSite.about.section4.pillTitle')}
130-
title={t('cleanAirSite.about.section4.title')}
131-
content={t('cleanAirSite.about.section4.subText')}
132-
imgURL={Section4}
133-
imageStyle={{
134-
height: '420px',
135-
objectFit: 'contain'
136-
}}
137-
pillBgColor="#ECF2FF"
138-
pillTextColor="#135DFF"
139-
showButton={false}
140-
reverse={true}
141-
/>
142-
</div>
128+
{/* section 4 */}
129+
<div className="page-section">
130+
<SplitSection
131+
pillTitle={t('cleanAirSite.about.section4.pillTitle')}
132+
title={t('cleanAirSite.about.section4.title')}
133+
content={t('cleanAirSite.about.section4.subText')}
134+
imgURL={Section4}
135+
imageStyle={{
136+
height: '420px',
137+
objectFit: 'contain'
138+
}}
139+
pillBgColor="#ECF2FF"
140+
pillTextColor="#135DFF"
141+
showButton={false}
142+
reverse={true}
143+
/>
144+
</div>
143145

144-
{/* section 5 */}
145-
<div className="page-section">
146-
<SingleSection
147-
content={
148-
<div className="goals-container">
149-
<div
150-
style={{
151-
width: '100%',
152-
display: 'flex',
153-
flexDirection: 'column',
154-
alignItems: 'flex-start'
155-
}}>
156-
<span id="first-pill" style={{ backgroundColor: '#FFF' }}>
157-
<p style={{ color: '#135DFF' }}>{t('cleanAirSite.about.section5.pillTitle')}</p>
158-
</span>
159-
<h2 className="content-h">{t('cleanAirSite.about.section5.title')}</h2>
160-
</div>
146+
{/* section 5 */}
147+
<div className="page-section">
148+
<SingleSection
149+
content={
150+
<div className="goals-container">
151+
<div
152+
style={{
153+
width: '100%',
154+
display: 'flex',
155+
flexDirection: 'column',
156+
alignItems: 'flex-start'
157+
}}>
158+
<span id="first-pill" style={{ backgroundColor: '#FFF' }}>
159+
<p style={{ color: '#135DFF' }}>{t('cleanAirSite.about.section5.pillTitle')}</p>
160+
</span>
161+
<h2 className="content-h">{t('cleanAirSite.about.section5.title')}</h2>
162+
</div>
161163

162-
<div className="goals">
163-
{goals.map((goal, index) => (
164-
<div className={`goal ${index === 0 ? 'first' : ''}`} key={index}>
165-
<div className="goal-image-container">
166-
<img src={goal.imgURL} className="goal-image" />
164+
<div className="goals">
165+
{goals.map((goal, index) => (
166+
<div className={`goal ${index === 0 ? 'first' : ''}`} key={index}>
167+
<div className="goal-image-container">
168+
<img src={goal.imgURL} className="goal-image" />
169+
</div>
170+
<div className="goal-content">
171+
<h3 className="goal-title">{goal.title}</h3>
172+
<p className="goal-p">{goal.content}</p>
173+
</div>
167174
</div>
168-
<div className="goal-content">
169-
<h3 className="goal-title">{goal.title}</h3>
170-
<p className="goal-p">{goal.content}</p>
171-
</div>
172-
</div>
173-
))}
175+
))}
176+
</div>
174177
</div>
175-
</div>
176-
}
177-
padding="5rem 0"
178-
bgColor="#EDF3FF"
179-
/>
180-
</div>
178+
}
179+
padding="5rem 0"
180+
bgColor="#EDF3FF"
181+
/>
182+
</div>
181183

182-
{/* section 6 */}
183-
<div className="page-section">
184-
<MainHighlight />
184+
{/* section 6 */}
185+
<div className="page-section">
186+
<MainHighlight />
187+
</div>
185188
</div>
186-
</div>
189+
</CleanAirPageContainer>
187190
);
188191
};
189192

0 commit comments

Comments
 (0)