Add connected redux example

4Catalyzer · Jan 15, 2017 · fe84adc · fe84adc
1 parent b197615
commit fe84adc
Show file tree

Hide file tree

Showing 6 changed files with 177 additions and 0 deletions.
diff --git a/examples/connected-redux/README.md b/examples/connected-redux/README.md
diff --git a/examples/connected-redux/package.json b/examples/connected-redux/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "connected-redux",
+  "version": "0.1.0",
+  "private": true,
+  "devDependencies": {
+    "react-scripts": "0.8.5"
+  },
+  "dependencies": {
+    "farce": "^0.2.1",
+    "found": "../..",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "react-redux": "^5.0.2",
+    "redux": "^3.6.0"
+  },
+  "scripts": {
+    "start": "react-scripts start"
+  }
+}
diff --git a/examples/connected-redux/public/index.html b/examples/connected-redux/public/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Found Redux Example</title>
+</head>
+
+<body>
+<div id="root"></div>
+</body>
+
+</html>
diff --git a/examples/connected-redux/src/App.js b/examples/connected-redux/src/App.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import Link from 'found/lib/Link';
+
+function LinkItem(props) {
+  // TODO: Remove the pragma once evcohen/eslint-plugin-jsx-a11y#81 ships.
+  return (
+    <li>
+      <Link // eslint-disable-line jsx-a11y/anchor-has-content
+        {...props}
+        activeStyle={{ fontWeight: 'bold' }}
+      />
+    </li>
+  );
+}
+
+const propTypes = {
+  children: React.PropTypes.node,
+};
+
+function App({ children }) {
+  return (
+    <div>
+      <ul>
+        <LinkItem to="/">
+          Main
+        </LinkItem>
+        <ul>
+          <LinkItem to="/foo">
+            Foo
+          </LinkItem>
+          <LinkItem to="/bar">
+            Bar (async)
+          </LinkItem>
+          <LinkItem to="/baz">
+            Baz (redirects to Foo)
+          </LinkItem>
+          <LinkItem to="/qux">
+            Qux (missing)
+          </LinkItem>
+        </ul>
+      </ul>
+
+      {children}
+    </div>
+  );
+}
+
+App.propTypes = propTypes;
+
+export default App;
diff --git a/examples/connected-redux/src/index.js b/examples/connected-redux/src/index.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {
+  Actions as FarceActions,
+  BrowserProtocol,
+  createHistoryEnhancer,
+  queryMiddleware,
+} from 'farce';
+import {
+  createConnectedRouter,
+  createMatchEnhancer,
+  createRender,
+  foundReducer,
+  Matcher,
+  resolveElements,
+} from 'found';
+import { Provider } from 'react-redux';
+import { combineReducers, compose, createStore } from 'redux';
+
+import routeConfig from './routeConfig';
+
+const store = createStore(
+  combineReducers({
+    found: foundReducer,
+  }),
+  compose(
+    createHistoryEnhancer({
+      protocol: new BrowserProtocol(),
+      middlewares: [queryMiddleware],
+    }),
+    createMatchEnhancer(
+      new Matcher(routeConfig),
+    ),
+  ),
+);
+
+store.dispatch(FarceActions.init());
+
+const ConnectedRouter = createConnectedRouter({
+  render: createRender({
+    renderError: ({ error }) => ( // eslint-disable-line react/prop-types
+      <div>
+        {error.status === 404 ? 'Not found' : 'Error'}
+      </div>
+    ),
+  }),
+});
+
+ReactDOM.render(
+  <Provider store={store}>
+    <ConnectedRouter resolveElements={resolveElements} />
+  </Provider>,
+  document.getElementById('root'),
+);
diff --git a/examples/connected-redux/src/routeConfig.js b/examples/connected-redux/src/routeConfig.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import Redirect from 'found/lib/Redirect';
+
+import App from './App';
+
+export default [
+  {
+    path: '/',
+    Component: App,
+    children: [
+      {
+        Component: () => <div>Main</div>,
+      },
+      {
+        path: 'foo',
+        Component: () => <div>Foo</div>,
+      },
+      {
+        path: 'bar',
+        getComponent: () => new Promise((resolve) => {
+          setTimeout(resolve, 1000, ({ data }) => <div>{data}</div>);
+        }),
+        getData: () => new Promise((resolve) => {
+          setTimeout(resolve, 1000, 'Bar');
+        }),
+        render: ({ Component, props }) => ( // eslint-disable-line react/prop-types
+          Component && props ? (
+            <Component {...props} />
+          ) : (
+            <div><small>Loading&hellip;</small></div>
+          )
+        ),
+      },
+      new Redirect({
+        from: 'baz',
+        to: '/foo',
+      }),
+    ],
+  },
+];