Skip to content

Commit 33d31cd

Browse files
prathmeshkulkarni-coderprathmeshkulkarni-coder
committed
Fix: addressed ESLint style, accessibility, and link resolution issues
1 parent 2224271 commit 33d31cd

1 file changed

Lines changed: 83 additions & 75 deletions

File tree

‎client/components/header/header.js‎

Lines changed: 83 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ export default class Header extends React.Component {
7979
</Link>
8080
)}
8181
</div>
82-
{secondLogo && (
82+
{secondLogo?.url && (
8383
<div className="header-logo-2">
8484
<img
8585
src={getAssetPath(orgSlug, secondLogo.url)}
@@ -92,96 +92,104 @@ export default class Header extends React.Component {
9292
);
9393
};
9494

95-
renderLanguageButtons = (isMobile = false) => {
96-
const { languages, language, setLanguage } = this.props;
97-
const deviceClass = isMobile ? "mobile" : "desktop";
95+
renderLanguageButtons = (isMobile = false) => {
96+
const { languages, language, setLanguage } = this.props;
97+
const deviceClass = isMobile ? "mobile" : "desktop";
98+
99+
return languages.map((lang) => (
100+
<button
101+
type="button"
102+
key={lang.slug}
103+
className={`${language === lang.slug ? "active " : ""}header-language-btn header-${deviceClass}-language-btn header-language-btn-${lang.slug}`}
104+
onClick={() => setLanguage(lang.slug)}
105+
>
106+
{lang.text}
107+
</button>
108+
));
109+
};
98110

99-
return languages.map((lang) => (
100-
<button
101-
type="button"
102-
key={lang.slug}
103-
className={`${language === lang.slug ? "active " : ""}header-language-btn header-${deviceClass}-language-btn header-language-btn-${lang.slug}`}
104-
onClick={() => setLanguage(lang.slug)}
105-
>
106-
{lang.text}
107-
</button>
108-
));
109-
};
110-
renderNavLinks = (isMobile = false) => {
111-
const { header, orgSlug, isAuthenticated, userData, language, location } = this.props;
112-
const { links } = header;
113-
const { pathname } = location;
114-
const internalLinks = [`/${orgSlug}/login`, `/${orgSlug}/registration`];
111+
renderNavLinks = (isMobile = false) => {
112+
const { header, orgSlug, isAuthenticated, userData, language, location } = this.props;
113+
const { links } = header;
114+
const { pathname } = location;
115+
const internalLinks = [`/${orgSlug}/login`, `/${orgSlug}/registration`];
115116

116-
return links?.map((link, index) => {
117-
if (!shouldLinkBeShown(link, isAuthenticated, userData)) return null;
117+
return links?.map((link, index) => {
118+
if (!shouldLinkBeShown(link, isAuthenticated, userData)) return null;
118119

119-
const isInternal = isInternalLink(link.url);
120-
const resolvedUrl = link.url.replace("{orgSlug}", orgSlug);
121-
const isActive = pathname === resolvedUrl;
122-
const className = `header-link ${isMobile ? "mobile-link" : "header-desktop-link"} header-link-${index + 1} ${isActive ? "active" : ""} button`;
120+
const isInternal = isInternalLink(link.url);
121+
const resolvedUrl = link.url.replace("{orgSlug}", orgSlug);
122+
const isActive = pathname === resolvedUrl;
123+
const className = `header-link ${isMobile ? "mobile-link" : "header-desktop-link"} header-link-${index + 1} ${isActive ? "active" : ""} button`;
123124

124-
if (isInternal && (internalLinks.indexOf(link.url) < 0 || !isAuthenticated)) {
125+
if (isInternal && (internalLinks.indexOf(link.url) < 0 || !isAuthenticated)) {
126+
return (
127+
<Link className={className} to={resolvedUrl} key={index}>
128+
{getText(link.text, language)}
129+
</Link>
130+
);
131+
}
125132
return (
126-
<Link className={className} to={resolvedUrl} key={index}>
133+
<a href={resolvedUrl} className={className} target="_blank" rel="noreferrer noopener" key={resolvedUrl}>
127134
{getText(link.text, language)}
128-
</Link>
135+
</a>
129136
);
130-
}
131-
return (
132-
<a href={link.url} className={className} target="_blank" rel="noreferrer noopener" key={link.url}>
133-
{getText(link.text, language)}
134-
</a>
135-
);
136-
});
137-
};
138-
render() {
139-
const { menu } = this.state;
140-
const { language } = this.props;
137+
});
138+
};
141139

142-
return (
143-
<>
144-
<header className="main-header">
145-
{/* Row 1: Logo and Languages */}
146-
<div className="header-row-1">
147-
<div className="header-row-1-inner">
148-
<div className="header-left">{this.renderLogos()}</div>
149-
150-
{/* Desktop Languages */}
151-
<div className="header-right header-desktop-only">
152-
{this.renderLanguageButtons()}
153-
</div>
140+
render() {
141+
const { menu } = this.state;
154142

155-
{/* Mobile Hamburger */}
156-
<div className="header-right header-mobile-only">
157-
<div role="button" className="header-hamburger" onClick={this.handleHamburger}>
158-
<div className={`${menu ? "rot45" : ""}`} />
159-
<div className={`${menu ? "rot-45" : ""}`} />
160-
<div className={`${menu ? "opacity-hidden" : ""}`} />
143+
return (
144+
<>
145+
<header className="main-header">
146+
{/* Row 1: Logo and Languages */}
147+
<div className="header-row-1">
148+
<div className="header-row-1-inner">
149+
<div className="header-left">{this.renderLogos()}</div>
150+
151+
{/* Desktop Languages */}
152+
<div className="header-right header-desktop-only">
153+
{this.renderLanguageButtons()}
154+
</div>
155+
156+
{/* Mobile Hamburger */}
157+
<div className="header-right header-mobile-only">
158+
<div
159+
role="button"
160+
className="header-hamburger"
161+
tabIndex={0}
162+
aria-label="Toggle menu"
163+
onClick={this.handleHamburger}
164+
onKeyUp={this.handleKeyUp}
165+
>
166+
<div className={`${menu ? "rot45" : ""}`} />
167+
<div className={`${menu ? "rot-45" : ""}`} />
168+
<div className={`${menu ? "opacity-hidden" : ""}`} />
169+
</div>
161170
</div>
162171
</div>
163172
</div>
164-
</div>
165173

166-
{/* Row 2: Desktop Navigation */}
167-
<div className="header-row-2 header-desktop-only">
168-
<div className="header-row-2-inner">
169-
{this.renderNavLinks()}
174+
{/* Row 2: Desktop Navigation */}
175+
<div className="header-row-2 header-desktop-only">
176+
<div className="header-row-2-inner">
177+
{this.renderNavLinks()}
178+
</div>
170179
</div>
171-
</div>
172180

173-
{/* Mobile Menu Overlay */}
174-
<div className={`${menu ? "display-flex" : "display-none"} header-mobile-menu header-mobile-only`}>
175-
{this.renderNavLinks(true)}
176-
<div className="mobile-languages-row">
177-
{this.renderLanguageButtons(true)}
181+
{/* Mobile Menu Overlay */}
182+
<div className={`${menu ? "display-flex" : "display-none"} header-mobile-menu header-mobile-only`}>
183+
{this.renderNavLinks(true)}
184+
<div className="mobile-languages-row">
185+
{this.renderLanguageButtons(true)}
186+
</div>
178187
</div>
179-
</div>
180-
</header>
181-
{this.getStickyMsg()}
182-
</>
183-
);
184-
}
188+
</header>
189+
{this.getStickyMsg()}
190+
</>
191+
);
192+
}
185193
}
186194
Header.defaultProps = {
187195
isAuthenticated: false,

0 commit comments

Comments
 (0)