coop-cloud-chaos-patchs/outline
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Removed offline component

Browse Source
This commit is contained in:
Jori Lallo
2017-04-29 14:14:11 -07:00
parent 5dd8a759f9
commit dd0098943c
8 changed files with 60 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/components/Alert/Alert.js
View File

@ -11,7 +11,6 @@ class Alert extends React.Component {
danger: PropTypes.bool, danger: PropTypes.bool,
warning: PropTypes.bool, warning: PropTypes.bool,
success: PropTypes.bool, success: PropTypes.bool,
offline: PropTypes.bool,
}; };
render() { render() {
@ -19,7 +18,6 @@ class Alert extends React.Component {
if (this.props.danger) alertType = 'danger'; if (this.props.danger) alertType = 'danger';
if (this.props.warning) alertType = 'warning'; if (this.props.warning) alertType = 'warning';
if (this.props.success) alertType = 'success'; if (this.props.success) alertType = 'success';
if (this.props.offline) alertType = 'offline';
if (!alertType) alertType = 'info'; // default if (!alertType) alertType = 'info'; // default
return ( return (

4
frontend/components/Alert/Alert.test.js
View File

@ -23,7 +23,3 @@ test('renders warning', () => {
test('renders danger', () => { test('renders danger', () => {
snap(<Alert danger>danger</Alert>); snap(<Alert danger>danger</Alert>);
}); });
test('renders offline', () => {
snap(<Alert offline>offline</Alert>);
});

113
frontend/components/Alert/__snapshots__/Alert.test.js.snap
View File

@ -1,113 +0,0 @@
exports[`test renders danger 1`] = `
<div
className="Flex container danger"
style={
Object {
"WebkitAlignItems": "center",
"WebkitJustifyContent": "center",
"alignItems": "center",
"boxSizing": "border-box",
"display": "flex",
"justifyContent": "center",
"msAlignItems": "center",
"msJustifyContent": "center"
}
}>
danger
</div>
`;
exports[`test renders default as info 1`] = `
<div
className="Flex container info"
style={
Object {
"WebkitAlignItems": "center",
"WebkitJustifyContent": "center",
"alignItems": "center",
"boxSizing": "border-box",
"display": "flex",
"justifyContent": "center",
"msAlignItems": "center",
"msJustifyContent": "center"
}
}>
default
</div>
`;
exports[`test renders info 1`] = `
<div
className="Flex container info"
style={
Object {
"WebkitAlignItems": "center",
"WebkitJustifyContent": "center",
"alignItems": "center",
"boxSizing": "border-box",
"display": "flex",
"justifyContent": "center",
"msAlignItems": "center",
"msJustifyContent": "center"
}
}>
info
</div>
`;
exports[`test renders offline 1`] = `
<div
className="Flex container offline"
style={
Object {
"WebkitAlignItems": "center",
"WebkitJustifyContent": "center",
"alignItems": "center",
"boxSizing": "border-box",
"display": "flex",
"justifyContent": "center",
"msAlignItems": "center",
"msJustifyContent": "center"
}
}>
offline
</div>
`;
exports[`test renders success 1`] = `
<div
className="Flex container success"
style={
Object {
"WebkitAlignItems": "center",
"WebkitJustifyContent": "center",
"alignItems": "center",
"boxSizing": "border-box",
"display": "flex",
"justifyContent": "center",
"msAlignItems": "center",
"msJustifyContent": "center"
}
}>
success
</div>
`;
exports[`test renders warning 1`] = `
<div
className="Flex container warning"
style={
Object {
"WebkitAlignItems": "center",
"WebkitJustifyContent": "center",
"alignItems": "center",
"boxSizing": "border-box",
"display": "flex",
"justifyContent": "center",
"msAlignItems": "center",
"msJustifyContent": "center"
}
}>
warning
</div>
`;

8
frontend/components/Layout/Layout.js
View File

@ -2,7 +2,6 @@ import React from 'react';
import { browserHistory, Link } from 'react-router'; import { browserHistory, Link } from 'react-router';
import Helmet from 'react-helmet'; import Helmet from 'react-helmet';
import { observer, inject } from 'mobx-react'; import { observer, inject } from 'mobx-react';
import { injectOffline } from 'components/Offline';
import keydown from 'react-keydown'; import keydown from 'react-keydown';
import _ from 'lodash'; import _ from 'lodash';
@ -18,7 +17,6 @@ const cx = classNames.bind(styles);
@inject('user') @inject('user')
@observer @observer
@injectOffline
class Layout extends React.Component { class Layout extends React.Component {
static propTypes = { static propTypes = {
children: React.PropTypes.node, children: React.PropTypes.node,
@ -28,7 +26,6 @@ class Layout extends React.Component {
loading: React.PropTypes.bool, loading: React.PropTypes.bool,
user: React.PropTypes.object.isRequired, user: React.PropTypes.object.isRequired,
search: React.PropTypes.bool, search: React.PropTypes.bool,
offline: React.PropTypes.bool,
notifications: React.PropTypes.node, notifications: React.PropTypes.node,
}; };
@ -61,11 +58,6 @@ class Layout extends React.Component {
{this.props.loading && <LoadingIndicator />} {this.props.loading && <LoadingIndicator />}
{this.props.offline &&
<Alert offline>
It looks like you're offline. Reconnect to restore access to all of your documents 📚
</Alert>}
{this.props.notifications} {this.props.notifications}
<div className={cx(styles.header)}> <div className={cx(styles.header)}>

43
frontend/components/Offline/Offline.js
View File

@ -1,43 +0,0 @@
import React from 'react';
class Offline extends React.Component {
static propTypes = {
children: React.PropTypes.node,
};
static childContextTypes = {
offline: React.PropTypes.bool,
};
state = {
offline: !navigator.onLine,
};
getChildContext() {
return {
offline: this.state.offline,
};
}
componentDidMount = () => {
window.addEventListener('offline', this.handleConnectionState);
window.addEventListener('online', this.handleConnectionState);
};
componentWillUnmount = () => {
window.removeEventListener('offline', this.handleConnectionState);
window.removeEventListener('online', this.handleConnectionState);
};
handleConnectionState = () => {
this.setState({
offline: !navigator.onLine,
});
};
render() {
return React.Children.only(this.props.children);
}
}
export default Offline;

4
frontend/components/Offline/index.js
View File

@ -1,4 +0,0 @@
import Offline from './Offline';
import injectOffline from './injectOffline';
export { Offline, injectOffline };

19
frontend/components/Offline/injectOffline.js
View File

@ -1,19 +0,0 @@
import React from 'react';
const injectOffline = WrappedComponent => {
return class OfflineWrapper extends React.Component {
static contextTypes = {
offline: React.PropTypes.bool,
};
render() {
const newProps = {
offline: this.context.offline,
};
return <WrappedComponent {...this.props} {...newProps} />;
}
};
};
export default injectOffline;

127
frontend/index.js
View File

@ -5,7 +5,6 @@ import Router from 'react-router/lib/Router';
import Route from 'react-router/lib/Route'; import Route from 'react-router/lib/Route';
import IndexRoute from 'react-router/lib/IndexRoute'; import IndexRoute from 'react-router/lib/IndexRoute';
import History from 'utils/History'; import History from 'utils/History';
import { Offline } from 'components/Offline';
import stores from 'stores'; import stores from 'stores';
@ -49,78 +48,72 @@ function requireAuth(nextState, replace) {
render( render(
<div style={{ display: 'flex', flex: 1, height: '100%' }}> <div style={{ display: 'flex', flex: 1, height: '100%' }}>
<Provider {...stores}> <Provider {...stores}>
<Offline> <Router history={History}>
<Router history={History}> <Route path="/" component={Application}>
<Route path="/" component={Application}> <IndexRoute component={Home} />
<IndexRoute component={Home} />
<Route <Route
path="/dashboard" path="/dashboard"
component={Dashboard} component={Dashboard}
onEnter={requireAuth} onEnter={requireAuth}
/> />
<Route <Route
path="/collections/:id" path="/collections/:id"
component={Atlas} component={Atlas}
onEnter={requireAuth} onEnter={requireAuth}
/> />
<Route <Route
path="/collections/:id/new" path="/collections/:id/new"
component={DocumentEdit} component={DocumentEdit}
onEnter={requireAuth} onEnter={requireAuth}
newDocument newDocument
/> />
<Route <Route
path="/d/:id" path="/d/:id"
component={DocumentScene} component={DocumentScene}
onEnter={requireAuth} onEnter={requireAuth}
/> />
<Route <Route
path="/d/:id/edit" path="/d/:id/edit"
component={DocumentEdit} component={DocumentEdit}
onEnter={requireAuth} onEnter={requireAuth}
/> />
<Route <Route
path="/d/:id/new" path="/d/:id/new"
component={DocumentEdit} component={DocumentEdit}
onEnter={requireAuth} onEnter={requireAuth}
newChildDocument newChildDocument
/> />
<Route path="/search" component={Search} onEnter={requireAuth} /> <Route path="/search" component={Search} onEnter={requireAuth} />
<Route <Route path="/settings" component={Settings} onEnter={requireAuth} />
path="/settings"
component={Settings}
onEnter={requireAuth}
/>
<Route path="/auth/slack" component={SlackAuth} /> <Route path="/auth/slack" component={SlackAuth} />
<Route <Route
path="/auth/slack/commands" path="/auth/slack/commands"
component={SlackAuth} component={SlackAuth}
apiPath="/auth.slackCommands" apiPath="/auth.slackCommands"
/> />
<Route path="/auth/error" component={ErrorAuth} /> <Route path="/auth/error" component={ErrorAuth} />
<Flatpage <Flatpage
path="/keyboard-shortcuts" path="/keyboard-shortcuts"
component={Flatpage} component={Flatpage}
title="Keyboard shortcuts" title="Keyboard shortcuts"
content={flatpages.keyboard} content={flatpages.keyboard}
/> />
<Flatpage <Flatpage
path="/developers" path="/developers"
component={Flatpage} component={Flatpage}
title="API" title="API"
content={flatpages.api} content={flatpages.api}
/> />
<Route path="/404" component={Error404} /> <Route path="/404" component={Error404} />
<Route path="*" component={Search} sceneType="notFound" /> <Route path="*" component={Search} sceneType="notFound" />
</Route> </Route>
</Router> </Router>
</Offline>
</Provider> </Provider>
{__DEV__ && <DevTools position={{ bottom: 0, right: 0 }} />} {__DEV__ && <DevTools position={{ bottom: 0, right: 0 }} />}
</div>, </div>,