Skip to content

Commit 7bb2280

Browse files
saifulislamdevsaifulislamdev
committed
Merge branch 'dev' into refactoring-src/constants/links.js
2 parents 0be8ed6 + db1fa22 commit 7bb2280

13 files changed

+51
-57
lines changed

‎.eslintrc

+3-2
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,11 @@
1111
"react/prop-types": "off", // does not require props validation in a React component definition
1212
"no-nested-ternary": "off", // allows nested ternaries
1313
"no-console": "off",
14-
"import/order": [
14+
"import/order": [ // order used for imports
1515
"error",
1616
{
17-
"groups": ["builtin", "external", "internal"],
17+
"groups": ["builtin", "external", "internal"], // group types of imports
18+
// react import comes before anything
1819
"pathGroups": [
1920
{
2021
"pattern": "react",

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
# npm
12
node_modules/
23

34
# Gatsby

‎gatsby-config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
const activeEnv = process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV || 'development';
22

3-
require('dotenv').config({
3+
require('dotenv').config({ // import .env.development or .env.production based on environment
44
path: `.env.${activeEnv}`,
55
});
66

‎gatsby-node.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ const { languages } = require('./src/constants/languages');
1212
exports.createPages = ({ actions, graphql }) => {
1313
const { createPage, createRedirect } = actions;
1414

15+
// redirects on the home path (i.e. en/home) for cleaner path on home page (i.e. en/)
1516
languages.map((lang) => createRedirect({
1617
fromPath: `/${lang.langKey}/home`,
1718
toPath: `/${lang.langKey}/`,
@@ -24,6 +25,7 @@ exports.createPages = ({ actions, graphql }) => {
2425
// toPath:
2526
// })
2627

28+
/* creating each page */
2729
return graphql(`
2830
{
2931
allMarkdownRemark(limit: 1000) {
@@ -80,7 +82,7 @@ exports.onCreateNode = ({ node, actions, getNode }) => {
8082
createNodeField({
8183
name: 'slug',
8284
node,
83-
value: slug === 'home' ? `/${lang}` : `/${lang}/${slug}/`,
85+
value: slug === 'home' ? `/${lang}` : `/${lang}/${slug}/`, // gets rid of slug on the home page for cleaner look (i.e. en/home --> en/)
8486
context: {
8587
lang,
8688
},

‎src/components/footer.jsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ function Footer() {
1818

1919
const primaryLinks = links.primary; // link + labels
2020
const primaryLinksLength = primaryLinks.length;
21-
// labels (used for verification only; labels are taken from primaryLinks)
21+
// labels (automatically taken from header labels, but used for verification only; labels are taken from primaryLinks)
2222
const primaryLinksLabels = t('navigation.dropdowns')
2323
.map((element) => element.linkLabels) // get only link labels (not dropdown button labels)
2424
.flat() // unnest/flatten a nested array
@@ -36,6 +36,7 @@ function Footer() {
3636
);
3737
}
3838

39+
// generating links
3940
const primaryLinkItems = primaryLinks.map((linkAndLabel, _) => (
4041
<Link className="usa-footer__primary-link" to={linkAndLabel.link} key={`primaryLink${_}`}>
4142
{t(linkAndLabel.label)}

‎src/components/header.jsx

+9-6
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ function Header({ slug }) {
2525

2626
/* menu expansion in mobile view */
2727
const [expanded, setExpanded] = useState(false);
28-
const onClick = () => setExpanded((prevExpanded) => !prevExpanded);
28+
const handleMenuClick = () => setExpanded((prevExpanded) => !prevExpanded);
2929

3030
/* dynamically store parent links */
3131
const { parentLinks } = links; // links + labels
@@ -43,13 +43,16 @@ function Header({ slug }) {
4343
'\n',
4444
);
4545
}
46+
47+
// generating links
4648
const parentLinkItems = parentLinks.map((linkAndLabel, _) => (
4749
<Link variant="nav" to={linkAndLabel.link} key={`parent${_}`}>
4850
{t(linkAndLabel.label)}
4951
</Link>
5052
));
5153

52-
const handleClick = (langKey) => {
54+
// change language on language selector button click
55+
const handleLangClick = (langKey) => {
5356
i18n.changeLanguage(langKey, navigate(`/${langKey}/${slug}`));
5457
};
5558

@@ -58,7 +61,7 @@ function Header({ slug }) {
5861
<div className="header__language-nav-items">
5962
<Button
6063
onClick={() => {
61-
handleClick(language.langKey);
64+
handleLangClick(language.langKey);
6265
}}
6366
type="button"
6467
unstyled
@@ -70,6 +73,7 @@ function Header({ slug }) {
7073
),
7174
);
7275

76+
// language selector items
7377
const languageNavItems = (
7478
<div className="header__language-nav-container">
7579
<div className="header__language-nav-items--rtl">
@@ -83,7 +87,6 @@ function Header({ slug }) {
8387

8488
return (
8589
<HeaderUSWDS extended className="header">
86-
{/* <Router> */}
8790
<SkipNavLink />
8891
<Banner slug={slug}>{t('header.banner')}</Banner>
8992
<div className="usa-navbar">
@@ -95,10 +98,10 @@ function Header({ slug }) {
9598
/>
9699
<Title className="header-info__title">{t('title')}</Title>
97100
</div>
98-
<NavMenuButton onClick={onClick} label={t('header.menuMobileNav')} />
101+
<NavMenuButton onClick={handleMenuClick} label={t('header.menuMobileNav')} />
99102
</div>
100103
<ExtendedNav
101-
onToggleMobileNav={onClick}
104+
onToggleMobileNav={handleMenuClick}
102105
primaryItems={NavDropDown()
103106
.concat(parentLinkItems)
104107
.concat(languageNavItems)}

‎src/components/i18n.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ i18n
1212
defaultNS: 'translations',
1313
fallbackLng: 'en',
1414
interpolation: {
15-
escapeValue: false,
15+
escapeValue: false, // not needed for React
1616
},
1717
ns: ['translations'],
1818
react: {

‎src/components/layout.jsx

+5-16
Original file line numberDiff line numberDiff line change
@@ -13,26 +13,15 @@ function Layout({ children, slug }) {
1313

1414
useEffect(() => {
1515
const path = location.pathname;
16-
const lang = path.split('/')[1];
16+
const lang = path.split('/')[1]; // language
1717
const route = path
1818
.split('/')
1919
.slice(2)
2020
.filter((v) => v !== '')
21-
.join('/');
22-
if (path === '/') navigate(`/${i18n.language}/`);
23-
// empty path
24-
else if (lang === '404') navigate(`/${i18n.language}/404`);
25-
else if (lang.length !== 0 && route.length === 0) {
26-
// only language given
27-
if (lang !== i18n.language) i18n.changeLanguage(lang);
28-
} else if (lang.length === 0 && route.length !== 0) {
29-
// only route given
30-
// not currently being used
31-
// navigate(`${i18n.language}/${route}`);
32-
} else if (lang !== i18n.language) {
33-
// both language and route given
34-
i18n.changeLanguage(lang);
35-
}
21+
.join('/'); // rest of the path excluding the language
22+
if (path === '/') navigate(`/${i18n.language}/`); // '/' redirect
23+
else if (lang === '404') navigate(`/${i18n.language}/404`); // '/404' redirect
24+
else if (lang !== i18n.language) i18n.changeLanguage(lang); // change current language if there's a different language entered in path
3625
}, [location.pathname]);
3726

3827
return (

‎src/components/link.jsx

+7-17
Original file line numberDiff line numberDiff line change
@@ -16,24 +16,14 @@ function Link({
1616
const isInternal = /^\/(?!\/)/.test(to); // Assumes that any internal link will start with exactly one slash, and that anything else is external
1717

1818
if (isInternal) {
19-
if (variant === 'nav') {
20-
// Navigation link
21-
return (
22-
<GatsbyLink
23-
className={classNames('usa-link', 'usa-link--nav', className)} // quoted classes are always included while className is included if it has a truthy value
24-
activeClassName={activeClassName}
25-
partiallyActive={partiallyActive}
26-
to={to}
27-
{...other}
28-
>
29-
{children}
30-
</GatsbyLink>
31-
);
32-
}
19+
// internal link
3320
return (
34-
// Use Gatsby Link for internal links
3521
<GatsbyLink
36-
className={classNames('usa-link', className)} // usa-link is always included while className is included if it has a truthy value
22+
className={
23+
variant === 'nav'
24+
? classNames('usa-link', 'usa-link--nav', className) // nav link
25+
: classNames('usa-link', className) // regular link
26+
} // quoted classes are always included while className is included if it has a truthy value
3727
activeClassName={activeClassName}
3828
partiallyActive={partiallyActive}
3929
to={to}
@@ -43,7 +33,7 @@ function Link({
4333
</GatsbyLink>
4434
);
4535
}
46-
// external
36+
// external link
4737
return (
4838
<USWDSLink
4939
variant={variant === 'nav' && 'nav'}

‎src/components/nav-drop-down.jsx

+9-7
Original file line numberDiff line numberDiff line change
@@ -21,16 +21,16 @@ function NavDropDown() {
2121
console.error(
2222
'Different number of dropdowns in /src/constants/link.js (under header.navDropDowns) and labels in /src/locales (under navigation.dropdowns)\n',
2323
`${constFileLength} dropdown${
24-
constFileLength > 1 ? 's' : ''
24+
constFileLength > 1 ? 's' : '' // plural or singular
2525
} in /src/constants/link.js\n`,
2626
`${translationFileLength} dropdown${
27-
translationFileLength > 1 ? 's' : ''
27+
translationFileLength > 1 ? 's' : '' // plural or singular
2828
} in /src/locales`,
2929
);
3030
}
3131
navDropDowns.forEach((navDropDown, i) => {
3232
const navDropDownLinksLength = navDropDown.length;
33-
const navDropDownLinkLabels = navDropDownLabels[i].linkLabels;
33+
const navDropDownLinkLabels = navDropDownLabels[i].linkLabels; // labels (used for verification only)
3434
const navDropDownLinkLabelsLength = navDropDownLinkLabels.length;
3535
if (navDropDownLinksLength !== navDropDownLinkLabelsLength) {
3636
console.error(
@@ -46,6 +46,7 @@ function NavDropDown() {
4646
);
4747
}
4848
dropdowns.push(
49+
// generating links
4950
navDropDown.map((linkAndLabel, _) => (
5051
<Link to={linkAndLabel.link} key={`dropdown${i}Link${_}`}>
5152
{t(linkAndLabel.label)}
@@ -54,17 +55,18 @@ function NavDropDown() {
5455
);
5556
});
5657

57-
/* dynamically create dropdowns */
58+
// handling which dropdown is open
5859
const [isOpen, setIsOpen] = useState(undefined);
60+
61+
/* dynamically create dropdowns in navigation bar */
5962
const navBarItems = dropdowns.map((_, i) => {
6063
const id = `navDropDown${i}`;
61-
/* dynamically create dropdowns in navigation bar */
6264
return (
6365
<>
6466
<NavDropDownButton
6567
onToggle={() => {
66-
if (isOpen === id) setIsOpen(undefined);
67-
else setIsOpen(id);
68+
if (isOpen === id) setIsOpen(undefined); // close open dropdown if it is clicked on by closing all dropdowns
69+
else setIsOpen(id); // open dropdown if it's closed and clicked on
6870
}}
6971
menuId={id}
7072
isOpen={isOpen === id}

‎src/constants/languages.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const languages = [
1+
const languages = [ // order here is the same order in language selector
22
{
33
lang: 'বাংলা',
44
langKey: 'bn',

‎src/constants/links.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export const header = {
2-
navDropDowns: [
2+
navDropDowns: [ // dropdowns
33
// first dropdown start
44
[
55
{
@@ -25,13 +25,13 @@ export const header = {
2525
],
2626
// second dropdown end
2727
],
28-
parentLinks: [{ label: 'navigation.parentLinkLabels.0', link: 'link-five' }],
28+
parentLinks: [{ label: 'navigation.parentLinkLabels.0', link: 'link-five' }], // parent (standalone) links
2929
};
3030

3131
export const footer = {
3232
primary: header.navDropDowns
3333
.flat() // turn nested array into flat/unnested array
34-
.concat(header.parentLinks), // add parent links
34+
.concat(header.parentLinks), // add parent links (taken directly from header; don't make change here)
3535
secondary: {
3636
terms: 'terms',
3737
privacy: 'privacy',

‎src/pages/index.js

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
/* eslint-disable react/jsx-filename-extension */
2+
3+
// DO NOT EDIT OR DELETE THIS FILE
4+
// DO NOT EDIT OR DELETE THIS FILE
5+
// DO NOT EDIT OR DELETE THIS FILE
6+
27
import React from 'react';
38

49
import Layout from '../components/layout';
510

611
function Home() {
7-
return <Layout />;
12+
return <Layout />; // nothing is displayed (only redirects from routing in layout component)
813
}
914

1015
export default Home;

0 commit comments

Comments
 (0)