Skip to content
This repository was archived by the owner on Oct 1, 2024. It is now read-only.

Commit f0315f6

Browse files
author
george
committed
converts PageHeader and Home components to use react hooks
1 parent 87706f9 commit f0315f6

File tree

7 files changed

+102
-120
lines changed

7 files changed

+102
-120
lines changed

‎app/components/Article/Article.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import ScrollUpOnMount from "app/components/ScrollUpOnMount"
1111
export default function Article(props) {
1212
const [domIsLoaded, setDomIsLoaded] = useState(false)
1313

14-
const componentUnmountFunc = () => {
14+
const componentUnmountFunction = () => {
1515
COMPONENTS.forEach(component => Undernet[component].stop())
1616
}
1717

@@ -20,7 +20,7 @@ export default function Article(props) {
2020
COMPONENTS.forEach(component => Undernet[component].start())
2121
setDomIsLoaded(true)
2222

23-
return componentUnmountFunc
23+
return componentUnmountFunction
2424
}, [])
2525

2626
return (

‎app/components/PageHeader/PageHeader.js‎

Lines changed: 26 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,40 @@
1-
import React, { createRef } from "react"
1+
import React, { createRef, useState, useEffect } from "react"
22
import { withLastLocation } from "react-router-last-location"
33
import PropTypes from "prop-types"
44

55
import { FOCUSABLE_TABINDEX, UNFOCUSABLE_TABINDEX } from "./constants"
66

7-
class PageHeader extends React.Component {
8-
constructor(props) {
9-
super(props)
7+
const PageHeader = props => {
8+
const [tabIndex, setTabIndex] = useState(UNFOCUSABLE_TABINDEX)
9+
const headerRef = createRef()
1010

11-
this.state = { tabIndex: UNFOCUSABLE_TABINDEX }
12-
this.headerRef = createRef()
13-
}
14-
15-
static propTypes = {
16-
children: PropTypes.any.isRequired,
17-
className: PropTypes.string,
18-
lastLocation: PropTypes.object,
19-
}
11+
useEffect(() => {
12+
if (tabIndex === FOCUSABLE_TABINDEX) {
13+
headerRef.current.focus()
14+
}
15+
}, [tabIndex])
2016

21-
componentDidMount() {
22-
if (!this.props.lastLocation) return
17+
useEffect(() => {
18+
if (props.lastLocation) setTabIndex(FOCUSABLE_TABINDEX)
19+
}, [])
2320

24-
this.setState({ tabIndex: FOCUSABLE_TABINDEX }, () => {
25-
this.headerRef.current.focus()
26-
})
21+
const handleBlur = () => {
22+
if (tabIndex === UNFOCUSABLE_TABINDEX) return
23+
setTabIndex(UNFOCUSABLE_TABINDEX)
2724
}
2825

29-
handleBlur = () => {
30-
if (this.state.tabIndex === UNFOCUSABLE_TABINDEX) return
31-
this.setState({ tabIndex: UNFOCUSABLE_TABINDEX })
32-
}
26+
return (
27+
<h1 onBlur={handleBlur} tabIndex={tabIndex} ref={headerRef} className={props.className}>
28+
{props.children}
29+
</h1>
30+
)
31+
}
3332

34-
render() {
35-
const { className, children } = this.props
36-
37-
return (
38-
<h1
39-
onBlur={this.handleBlur}
40-
tabIndex={this.state.tabIndex}
41-
ref={this.headerRef}
42-
className={className}
43-
>
44-
{children}
45-
</h1>
46-
)
47-
}
33+
PageHeader.propTypes = {
34+
children: PropTypes.any.isRequired,
35+
className: PropTypes.string,
36+
history: PropTypes.object,
37+
lastLocation: PropTypes.object,
4838
}
4939

5040
export default withLastLocation(PageHeader)

‎app/components/SideNav/SideNav.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,7 @@ const MENU_COLLAPSE_WIDTH = 1199
1515
export default function SideNav() {
1616
// set up effects and state
1717

18-
const getWindowInnerWidth = () => {
19-
return window.innerWidth
20-
}
18+
const getWindowInnerWidth = () => window.innerWidth
2119

2220
const isLargerThanCollapseWidth = getWindowInnerWidth() > MENU_COLLAPSE_WIDTH
2321
const [menuIsOpen, setMenuIsOpen] = useState(isLargerThanCollapseWidth)

‎app/docs/branding.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -100,10 +100,10 @@ _NOTE #2: The below imports have a `~` preceeding the import path; this is a Web
100100

101101
```css
102102
@import "path/to/myConfig";
103-
/* remove reset below if you are scoping */
104-
@import "~undernet/src/scss/elements/reset";
105103
/* Scope is defined in the config. Remove the scope wrapper if you aren't needing it. */
106104
/* .#{$scope} { */
105+
/* Reset within scope is optional */
106+
@import "~undernet/src/scss/elements/reset";
107107
@import "~undernet/src/scss/utilities/classes";
108108
@import "~undernet/src/scss/layout/grid";
109109
@import "~undernet/src/scss/elements/typography";

‎app/layouts/Main/styles.scss‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
@charset "UTF-8";
22
@import "app/global";
33

4-
@import "src/scss/utilities/reset";
5-
64
// .#{$scope} {
5+
@import "src/scss/utilities/reset";
76
@import "src/scss/utilities/classes";
87

98
@import "src/scss/layout/grid";

‎app/pages/Home/Home.js‎

Lines changed: 69 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from "react"
1+
import React, { useEffect } from "react"
22
import { Link } from "react-router-dom"
33
import Prism from "prismjs"
44
import lottie from "lottie-web"
@@ -15,13 +15,8 @@ import { ANIMATION_DATA } from "./animations"
1515

1616
import "./styles.scss"
1717

18-
export default class Home extends React.Component {
19-
componentDidMount() {
20-
Prism.highlightAll()
21-
this.loadAnimations()
22-
}
23-
24-
loadAnimations() {
18+
export default function Home() {
19+
const loadAnimations = () => {
2520
ANIMATION_DATA.forEach(data => {
2621
const name = data.title.toLowerCase()
2722

@@ -42,11 +37,18 @@ export default class Home extends React.Component {
4237
}, 1500)
4338
}
4439

45-
componentWillUnmount() {
40+
const componentUnmountFunction = () => {
4641
ANIMATION_DATA.forEach(instance => instance.animation.destroy())
4742
}
4843

49-
renderAnimations() {
44+
useEffect(() => {
45+
Prism.highlightAll()
46+
loadAnimations()
47+
48+
return componentUnmountFunction
49+
}, [])
50+
51+
const renderAnimations = () => {
5052
return ANIMATION_DATA.map(animation => {
5153
const animationName = animation.title.toLowerCase()
5254

@@ -63,81 +65,74 @@ export default class Home extends React.Component {
6365
})
6466
}
6567

66-
render() {
67-
return (
68-
<div id="home">
69-
<ScrollUpOnMount />
70-
71-
{/*
72-
* Title is set here _and_ in public/index.html...
73-
* Doing so prevents title changes on other pages from persisting if a visitor return to the home page.
74-
*/}
75-
<SetMeta
76-
title="A modular, configuration-first front-end framework. No strings."
77-
description="Undernet is a highly customizable web framework for building websites."
78-
/>
79-
80-
<div className="medium-section fluid grid hero">
81-
<div className="row">
82-
<div className="xsmall-12 columns has-center-text">
83-
<PageHeader className="h3">{pkg.description}</PageHeader>
84-
</div>
68+
return (
69+
<div id="home">
70+
<ScrollUpOnMount />
71+
72+
{/*
73+
* Title is set here _and_ in public/index.html...
74+
* Doing so prevents title changes on other pages from
75+
* persisting if a visitor return to the home page.
76+
*/}
77+
<SetMeta
78+
title="A modular, configuration-first front-end framework. No strings."
79+
description="Undernet is a highly customizable web framework for building websites."
80+
/>
81+
82+
<div className="medium-section fluid grid hero">
83+
<div className="row">
84+
<div className="xsmall-12 columns has-center-text">
85+
<PageHeader className="h3">{pkg.description}</PageHeader>
86+
</div>
8587

86-
<div className="xsmall-12 columns has-center-text">
87-
<Link to={downloadPath} className="medium button has-feather">
88-
Download <ChevronRight size={20} role="presentation" focusable="false" />
89-
</Link>
90-
<Link
91-
to={introductionPath}
92-
className="primary medium button has-gradient has-feather"
93-
>
94-
Learn More <ChevronRight size={20} role="presentation" focusable="false" />
95-
</Link>
96-
</div>
88+
<div className="xsmall-12 columns has-center-text">
89+
<Link to={downloadPath} className="medium button has-feather">
90+
Download <ChevronRight size={20} role="presentation" focusable="false" />
91+
</Link>
92+
<Link to={introductionPath} className="primary medium button has-gradient has-feather">
93+
Learn More <ChevronRight size={20} role="presentation" focusable="false" />
94+
</Link>
95+
</div>
9796

98-
<div className="xsmall-12 columns has-center-text">
99-
<p className="un-version has-no-margin">Version {pkg.version}</p>
100-
</div>
97+
<div className="xsmall-12 columns has-center-text">
98+
<p className="un-version has-no-margin">Version {pkg.version}</p>
99+
</div>
101100

102-
<div className="xsmall-12 columns badges">
103-
<StatusBadges />
104-
</div>
101+
<div className="xsmall-12 columns badges">
102+
<StatusBadges />
105103
</div>
106104
</div>
105+
</div>
107106

108-
<div className="medium-section fluid grid animations">
109-
<div className="row has-no-padding">
110-
<div className="column has-no-padding">
111-
<div className="wide grid">
112-
<ul className="row is-unstyled-list has-no-padding">{this.renderAnimations()}</ul>
113-
</div>
107+
<div className="medium-section fluid grid animations">
108+
<div className="row has-no-padding">
109+
<div className="column has-no-padding">
110+
<div className="wide grid">
111+
<ul className="row is-unstyled-list has-no-padding">{renderAnimations()}</ul>
114112
</div>
115113
</div>
116114
</div>
115+
</div>
117116

118-
<div className="medium-section narrow grid">
119-
<div className="row">
120-
<div className="xsmall-12 columns has-center-text">
121-
<h2 className="h6">Painless Setup</h2>
122-
<p>Install with npm:</p>
123-
<InstallNpm />
124-
</div>
125-
<div className="xsmall-12 columns has-center-text">
126-
<p>Or simply link to minified assets:</p>
127-
<InstallAssets />
128-
</div>
129-
<div className="xsmall-12 columns has-center-text">
130-
<p>See how Undernet can improve your developer experience!</p>
131-
<Link
132-
to={introductionPath}
133-
className="primary medium button has-gradient has-feather"
134-
>
135-
Learn More <ChevronRight size={20} role="presentation" focusable="false" />
136-
</Link>
137-
</div>
117+
<div className="medium-section narrow grid">
118+
<div className="row">
119+
<div className="xsmall-12 columns has-center-text">
120+
<h2 className="h6">Painless Setup</h2>
121+
<p>Install with npm:</p>
122+
<InstallNpm />
123+
</div>
124+
<div className="xsmall-12 columns has-center-text">
125+
<p>Or simply link to minified assets:</p>
126+
<InstallAssets />
127+
</div>
128+
<div className="xsmall-12 columns has-center-text">
129+
<p>See how Undernet can improve your developer experience!</p>
130+
<Link to={introductionPath} className="primary medium button has-gradient has-feather">
131+
Learn More <ChevronRight size={20} role="presentation" focusable="false" />
132+
</Link>
138133
</div>
139134
</div>
140135
</div>
141-
)
142-
}
136+
</div>
137+
)
143138
}

‎src/scss/undernet.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
@import "utilities/mixins";
1111

1212
// .#{$scope} {
13-
// Reset within the scope is optional
13+
// Reset within scope is optional
1414
@import "utilities/reset";
1515

1616
@import "utilities/classes";

0 commit comments

Comments
 (0)