Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: dlmr/react-router-redial
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: v0.3.0
Choose a base ref
...
head repository: dlmr/react-router-redial
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: master
Choose a head ref
Loading
Showing with 669 additions and 120 deletions.
  1. +1 −0 .gitignore
  2. +5 −5 README.md
  3. +10 −0 examples/named-components/.babelrc
  4. +4 −0 examples/named-components/client.js
  5. +27 −0 examples/named-components/components/App.js
  6. +32 −0 examples/named-components/components/Footer.js
  7. +28 −0 examples/named-components/components/Header.js
  8. +36 −0 examples/named-components/components/Index.js
  9. +40 −0 examples/named-components/components/LoremIpsum.js
  10. +14 −0 examples/named-components/components/Main.js
  11. +23 −0 examples/named-components/components/NamedContainer.js
  12. +26 −0 examples/named-components/devServer.js
  13. +32 −0 examples/named-components/package.json
  14. +46 −0 examples/named-components/render/client.js
  15. +27 −0 examples/named-components/render/server.js
  16. +21 −0 examples/named-components/routes.js
  17. +20 −0 examples/named-components/server.js
  18. +11 −0 examples/named-components/template.html
  19. +28 −0 examples/named-components/webpack.config.js
  20. +3 −3 examples/redux/package.json
  21. +2 −1 examples/simple-with-scroll/components/App.js
  22. +4 −3 examples/simple-with-scroll/package.json
  23. +2 −1 examples/simple/components/App.js
  24. +2 −1 examples/simple/components/Github.js
  25. +4 −3 examples/simple/package.json
  26. +6 −5 package.json
  27. +6 −4 src/RedialContainer.js
  28. +36 −26 src/RedialContext.js
  29. +1 −1 src/triggerHooks.js
  30. +33 −8 src/util/findRouteByComponent.js
  31. +6 −2 src/util/getRoutePath.js
  32. +3 −3 src/util/mapKeys.js
  33. +0 −21 tests/util/find-route-by-component.test.js
  34. +57 −0 tests/util/findRouteByComponent.test.js
  35. +5 −0 tests/util/{get-route-path.test.js → getRoutePath.test.js}
  36. +0 −33 tests/util/map-keys.test.js
  37. +68 −0 tests/util/mapKeys.test.js
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -4,3 +4,4 @@ lib
.DS_Store
.nyc_output
coverage
yarn.lock
10 changes: 5 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
@@ -3,7 +3,7 @@
Simple integration of [redial](https://github.com/markdalgleish/redial) for [React Router](https://github.com/reactjs/react-router)

```bash
$ npm install --save react-router-redial
$ npm install --save react-router-redial redial
```

## Why?
@@ -90,10 +90,10 @@ onCompleted(type) Invoked if everything was completed successfully, wit
### `onError(error, metaData)`
__`metaData`__
```
abort() Function that can be used to abort current loading
beforeTransition If the error originated from a beforeTransition hook or not
reason The reason for the error, can be either a "location-changed", "aborted" or "other"
router React Router instance https://github.com/ReactTraining/react-router/blob/master/docs/API.md#contextrouter
abort() Function that can be used to abort current loading
beforeTransition If the error originated from a beforeTransition hook or not
reason The reason for the error, can be either a "location-changed", "aborted" or "other"
router React Router instance https://github.com/ReactTraining/react-router/blob/master/docs/API.md#contextrouter
```

#### Example
10 changes: 10 additions & 0 deletions examples/named-components/.babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"presets": [
"es2015",
"stage-1",
"react"
],
"plugins": [
"transform-decorators-legacy"
]
}
4 changes: 4 additions & 0 deletions examples/named-components/client.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import render from './render/client';
import routes from './routes';

render(document.getElementById('application'), routes);
27 changes: 27 additions & 0 deletions examples/named-components/components/App.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import React, { Component } from 'react';
import { Link, IndexLink } from 'react-router';

export default class App extends Component {
render() {
const { loading } = this.props;
const style = {
opacity: loading ? 0.5 : 1,
transition: loading ? 'opacity 250ms ease 300ms' : 'false',
};

return (
<div style={style}>
<h1>React Router Redial Example</h1>
<ul>
<li>
<IndexLink to="/">Start</IndexLink>
</li>
<li>
<Link to="/named">Named components</Link>
</li>
</ul>
{this.props.children}
</div>
);
}
}
32 changes: 32 additions & 0 deletions examples/named-components/components/Footer.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import React, { Component } from 'react';
import { provideHooks } from 'redial';

class Footer extends Component {
render() {
return (
<div>
<span>Copyright © {this.props.year}</span>
<span>Made with ❤ by people</span>
<span>Additional stuff. You know. Because we can.</span>
</div>
);
}
}

const enhance = provideHooks({
fetch: ({ setProps, getProps, force }) => new Promise((resolve) => {
const { year } = getProps();
if (!year || force) {
setTimeout(() => {
setProps({
year: new Date().getFullYear(),
});
resolve();
}, 250);
} else {
resolve();
}
}),
});

export default enhance(Footer);
28 changes: 28 additions & 0 deletions examples/named-components/components/Header.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import React, { Component } from 'react';
import { Link } from 'react-router';
import { provideHooks } from 'redial';

@provideHooks({
fetch: ({ setProps, getProps, force }) => new Promise((resolve) => {
const { color } = getProps();
if (!color || force) {
setTimeout(() => {
const getValue = () => Math.round(Math.random() * 255);
setProps({ color: `rgb(${getValue()}, ${getValue()}, ${getValue()})` });
resolve();
}, 1000);
} else {
resolve();
}
}),
})
export default class Header extends Component {
render() {
return (
<div>
<h2 style={{ color: this.props.color }}>I am but a simple header, doing my thing.</h2>
<Link to="/named/with-children">Checkout more stuff!</Link>
</div>
);
}
}
36 changes: 36 additions & 0 deletions examples/named-components/components/Index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import React, { Component } from 'react';
import { provideHooks } from 'redial';

@provideHooks({
fetch: ({ setProps, getProps, force }) => new Promise((resolve) => {
const { color } = getProps();
if(!color || force) {
setTimeout(() => {
const getValue = () => Math.round(Math.random() * 255);
setProps({color: `rgb(${getValue()}, ${getValue()}, ${getValue()})`});
resolve();
}, 1000);
} else {
resolve();
}
}),
defer: ({ setProps, getProps, force }) => {
const { data } = getProps();
if (!data || force) {
// Will be available as this.props.data on the component
setProps({ data: 'Client data' });
}
},
})
export default class Index extends Component {
render() {
return (
<div>
<h1 style={{ color: this.props.color }}>React Router Redial</h1>
<p>{ this.props.data }</p>
<button onClick={ () => this.props.reload() }>Reload color</button>
<pre>{ JSON.stringify(this.props, null, 2) }</pre>
</div>
);
}
}
Loading