Skip to content

Commit beea0a7

Browse files
nygrenhnygrenh
committed
Add error boundaries to every component
1 parent 983e50b commit beea0a7

30 files changed

+158
-61
lines changed

‎src/components/Banner.js‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React from 'react'
22
import styled from 'styled-components'
33
import Bruce from '../images/banner.svg'
4+
import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
45

5-
const Banner = styled.div`
6+
const BannerWrapper = styled.div`
67
height: 30rem;
78
max-height: 50vh;
89
display: flex;
@@ -31,9 +32,11 @@ const Banner = styled.div`
3132
}
3233
`
3334

34-
export default () => (
35-
<Banner>
35+
const Banner = () => (
36+
<BannerWrapper>
3637
<h1>Ohjelmoinnin MOOC 2019</h1>
3738
<h2>KURSSI KÄYNNISSÄ</h2>
38-
</Banner>
39+
</BannerWrapper>
3940
)
41+
42+
export default withSimpleErrorBoundary(Banner)

‎src/components/Button.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,21 @@
11
import React from 'react'
22
import { Link } from 'gatsby'
33
import styled from 'styled-components'
4-
import { Button } from '@material-ui/core'
4+
import { Button as MaterialButton } from '@material-ui/core'
5+
import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
56

67
const StyledLink = styled(Link)`
78
margin: 1rem 0.5rem;
89
`
910

10-
export default ({ children, to, onClick, disabled, variant = 'outlined' }) => (
11+
const Button = ({ children, to, onClick, disabled, variant = 'outlined' }) => (
1112
<StyledLink
1213
onClick={onClick}
1314
to={to === undefined ? false : to}
1415
disabled={disabled}
1516
>
16-
<Button variant={variant}>{children}</Button>
17+
<MaterialButton variant={variant}>{children}</MaterialButton>
1718
</StyledLink>
1819
)
20+
21+
export default withSimpleErrorBoundary(Button)

‎src/components/Container.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import styled from 'styled-components'
2+
import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
23

34
const Container = styled.div`
45
max-width: 800px;
56
margin: 0 auto;
67
`
78

8-
export default Container
9+
export default withSimpleErrorBoundary(Container)

‎src/components/ContentArea.js‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react'
22
import styled from 'styled-components'
33
import { SIDEBAR_WIDTH } from './Sidebar'
4+
import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
45

56
const ContentAreaContainer = styled.div`
67
@media only screen and (min-width: 1200px) {
@@ -9,8 +10,14 @@ const ContentAreaContainer = styled.div`
910
padding: 0 0.5rem;
1011
`
1112

12-
export default class ContentArea extends React.Component {
13+
class ContentArea extends React.Component {
1314
render() {
14-
return <ContentAreaContainer className="content-area">{this.props.children}</ContentAreaContainer>
15+
return (
16+
<ContentAreaContainer className="content-area">
17+
{this.props.children}
18+
</ContentAreaContainer>
19+
)
1520
}
1621
}
22+
23+
export default withSimpleErrorBoundary(ContentArea)

‎src/components/CoursePageFooter.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { Link } from 'gatsby'
77

88
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
99
import { faArrowRight as icon } from '@fortawesome/free-solid-svg-icons'
10+
import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
1011

1112
const CoursePageFooterWrapper = styled.footer`
1213
background-color: black;
@@ -51,7 +52,7 @@ const ButtonWrapper = styled.div`
5152
align-items: center;
5253
`
5354

54-
export default class CoursePageFooter extends React.Component {
55+
class CoursePageFooter extends React.Component {
5556
render() {
5657
return (
5758
<PagesContext.Consumer>
@@ -102,3 +103,5 @@ export default class CoursePageFooter extends React.Component {
102103
)
103104
}
104105
}
106+
107+
export default withSimpleErrorBoundary(CoursePageFooter)

‎src/components/EndOfSubSection.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { Link } from 'gatsby'
77

88
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
99
import { faArrowRight as icon } from '@fortawesome/free-solid-svg-icons'
10+
import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
1011

1112
const CoursePageFooterWrapper = styled.footer`
1213
background-color: black;
@@ -50,7 +51,7 @@ const ButtonWrapper = styled.div`
5051
align-items: center;
5152
`
5253

53-
export default class EndOfSubSection extends React.Component {
54+
class EndOfSubSection extends React.Component {
5455
render() {
5556
return (
5657
<PagesContext.Consumer>
@@ -108,3 +109,5 @@ export default class EndOfSubSection extends React.Component {
108109
)
109110
}
110111
}
112+
113+
export default withSimpleErrorBoundary(EndOfSubSection)

‎src/components/Loading.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,22 @@ import React, { Fragment } from 'react'
22
import styled from 'styled-components'
33

44
import { CircularProgress } from '@material-ui/core'
5+
import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
56

67
const LoadingWrapper = styled.div`
78
padding: 5rem;
89
display: flex;
910
align-items: center;
1011
flex-direction: column;
1112
width: 100%;
12-
${props => props.heightHint && `
13+
${props =>
14+
props.heightHint &&
15+
`
1316
height: ${props.heightHint};
1417
`}
1518
`
1619

17-
export default ({ children, loading, heightHint }) => {
20+
const Loading = ({ children, loading, heightHint }) => {
1821
if (loading) {
1922
return (
2023
<LoadingWrapper heightHint={heightHint}>
@@ -25,3 +28,5 @@ export default ({ children, loading, heightHint }) => {
2528

2629
return <Fragment>{children}</Fragment>
2730
}
31+
32+
export default withSimpleErrorBoundary(Loading)

‎src/components/LoginControls.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import LoginStateContext, {
99
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
1010
import { faUser as profileIcon } from '@fortawesome/free-solid-svg-icons'
1111
import styled from 'styled-components'
12+
import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
1213

1314
const StyledIcon = styled(FontAwesomeIcon)`
1415
margin-right: 0.5rem;
@@ -56,4 +57,4 @@ class LoginControls extends React.Component {
5657
}
5758
}
5859

59-
export default withLoginStateContext(LoginControls)
60+
export default withSimpleErrorBoundary(withLoginStateContext(LoginControls))

‎src/components/Logo.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React from 'react'
22
import logo from '../images/logo.png'
33
import styled from 'styled-components'
4-
import "typeface-open-sans-condensed"
4+
import 'typeface-open-sans-condensed'
5+
import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
56

67
const LogoImg = styled.img`
78
width: 50px;
@@ -32,11 +33,13 @@ const StyledLink = styled.a`
3233
}
3334
`
3435

35-
export default () => (
36+
const Logo = () => (
3637
<StyledLink href="https://mooc.fi">
3738
<LogoImg src={logo} />
3839
<LogoTypography variant="title" color="inherit">
3940
MOOC.fi
4041
</LogoTypography>
4142
</StyledLink>
4243
)
44+
45+
export default withSimpleErrorBoundary(Logo)

‎src/components/MailinglistForm.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react'
22
import styled from 'styled-components'
33

44
import { TextField, Button } from '@material-ui/core'
5+
import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
56

67
const Container = styled.div`
78
padding: 3rem;
@@ -28,7 +29,7 @@ const FieldContainer = styled.div`
2829
}
2930
`
3031

31-
export default class MailingListForm extends React.Component {
32+
class MailingListForm extends React.Component {
3233
constructor(props) {
3334
super(props)
3435
this.form = React.createRef()
@@ -67,3 +68,5 @@ export default class MailingListForm extends React.Component {
6768
)
6869
}
6970
}
71+
72+
export default withSimpleErrorBoundary(MailingListForm)

0 commit comments

Comments
 (0)