Commit 6b0091f4 authored by Aanand Prasad's avatar Aanand Prasad

style: convert ConnectPage to styled components

parent ee696005
......@@ -14,7 +14,8 @@
"react-redux": "^5.0.2",
"react-router-dom": "^4.2.2",
"recompose": "^0.26.0",
"redux": "^3.6.0"
"redux": "^3.6.0",
"styled-components": "^2.4.0"
},
"peerDependencies": {
"react": "^16.2.0",
......
import React from 'react'
import styled from 'styled-components'
import { compose } from 'recompose'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import classes from './ConnectPage.local.scss'
const ErrorMessage = styled.div`
color: var(--color-error);
`
const LoadingMessage = styled.div.attrs({
children: 'loading…',
})`
display: flex;
justify-content: center;
`
const ConnectPage = requirements => WrappedComponent => {
class ConnectedComponent extends React.Component {
......@@ -57,9 +68,9 @@ const ConnectPage = requirements => WrappedComponent => {
render() {
const { complete, error } = this.state
if (error) return <div className={classes.error}>{error}</div>
if (error) return <ErrorMessage>{error}</ErrorMessage>
if (!complete) return <div className={classes.bar}>loading</div>
if (!complete) return <LoadingMessage />
return <WrappedComponent {...this.props} />
}
......
.bar {
display: flex;
justify-content: center;
}
.error {
color: red;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment