├── .gitignore
├── assets
    ├── ios
    │   ├── icon.png
    │   └── index.html
    ├── shared
    │   └── README.md
    └── web
    │   └── index.html
├── README.md
├── app
    ├── theme
    │   ├── constants
    │   │   └── components.js
    │   ├── styles
    │   │   └── TitleBar.js
    │   ├── styles.js
    │   └── theme.js
    ├── routes.js
    ├── store.js
    ├── actions.js
    ├── app.js
    ├── actions
    │   └── dogActions.js
    └── components
    │   ├── App.jsx
    │   └── Dogs.jsx
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | server_modules
2 | node_modules
3 | build
4 | .DS_Store


--------------------------------------------------------------------------------
/assets/ios/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/reapp/reapp-dog-example/HEAD/assets/ios/icon.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Simple reapp example based on http://reapp.io/2015/03/11/Simplify-Flux-with-Immutable-js-and-Fynx/
2 | 


--------------------------------------------------------------------------------
/app/theme/constants/components.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   // can override reapp-ui/themes/ios/constants/components.js
3 | };


--------------------------------------------------------------------------------
/app/theme/styles/TitleBar.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   self: {
3 |     // can override reapp-ui/themes/ios/styles/TitleeBar.js
4 |   }
5 | };


--------------------------------------------------------------------------------
/app/routes.js:
--------------------------------------------------------------------------------
1 | export default ({ routes, route }) =>
2 |   routes(require,
3 |     route('app', '/', { dir: '' },
4 |       route('dogs', '/')
5 |     )
6 |   );


--------------------------------------------------------------------------------
/app/store.js:
--------------------------------------------------------------------------------
1 | import { createCursorStore } from 'fynx';
2 | import { fromJS } from 'immutable';
3 | 
4 | module.exports = createCursorStore(fromJS({
5 |   dogIds: [],
6 |   dogs: {}
7 | }));


--------------------------------------------------------------------------------
/app/theme/styles.js:
--------------------------------------------------------------------------------
1 | import { makeStyles } from 'reapp-ui';
2 | 
3 | var requirer = (name) => require('./styles/' + name);
4 | 
5 | module.exports = makeStyles(requirer, [
6 |   'TitleBar'
7 | ]);


--------------------------------------------------------------------------------
/app/actions.js:
--------------------------------------------------------------------------------
1 | import { createAsyncActions } from 'fynx';
2 | 
3 | export default createAsyncActions([
4 |   'loadDogs',
5 |   'reverseDogs'
6 | ]);
7 | 
8 | // Required here so actions are bundled with the app
9 | import dogActions from './actions/dogActions';


--------------------------------------------------------------------------------
/assets/shared/README.md:
--------------------------------------------------------------------------------
1 | Files in this repo will be copied into your build folder
2 | no matter what platform you target with `reapp build`.
3 | 
4 | If you don't want them to be copied, place them outside of
5 | this folder and require them from somewhere in your app.


--------------------------------------------------------------------------------
/app/app.js:
--------------------------------------------------------------------------------
 1 | // needed for now, see issue #1 in reapp-ui
 2 | import 'reapp-ui';
 3 | 
 4 | // import our theme
 5 | import './theme/theme';
 6 | 
 7 | // routes & run
 8 | import Router from 'reapp-routes/react-router';
 9 | import Routes from './routes';
10 | 
11 | Router(Routes);


--------------------------------------------------------------------------------
/app/theme/theme.js:
--------------------------------------------------------------------------------
 1 | import UI from 'reapp-ui';
 2 | import iOS from 'reapp-ui/themes/ios';
 3 | 
 4 | // use the ios base stylesheet
 5 | import 'reapp-ui/themes/ios/stylesheets';
 6 | 
 7 | // custom constants
 8 | UI.addConstants(
 9 |   iOS.constants.base,
10 |   iOS.constants.components,
11 |   require('./constants/components')
12 | );
13 | 
14 | // custom styles
15 | UI.addStyles(
16 |   iOS.styles,
17 |   require('./styles')
18 | );
19 | 
20 | // default animations
21 | UI.addAnimations(
22 |   iOS.animations
23 | );
24 | 
25 | module.exports = UI.getTheme();


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "author": "Your Name Here",
 3 |   "name": "reapp-dog-example",
 4 |   "repository": "",
 5 |   "description": "",
 6 |   "version": "1.0.0",
 7 |   "main": "./app/app.js",
 8 |   "reapp": "0.8",
 9 |   "scripts": {
10 |     "test": "",
11 |     "start": "reapp run"
12 |   },
13 |   "dependencies": {
14 |     "fynx": "^1.6.0",
15 |     "immutable": "^3.6.4",
16 |     "react": "0.13.1",
17 |     "react-router": "git+https://github.com/reapp/react-router#1d00e252",
18 |     "reapp-component": "^1.0.0",
19 |     "reapp-platform": "^1.0.0",
20 |     "reapp-request": "^0.2.0",
21 |     "reapp-routes": "^0.10.0",
22 |     "reapp-ui": "^0.11.0"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/assets/web/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
 5 |   <meta name="apple-mobile-web-app-capable" content="yes">
 6 |   <meta name="mobile-web-app-capable" content="yes" />
 7 |   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 8 |   <meta charset="utf-8">
 9 | 
10 |   <link rel="apple-touch-icon" href="/assets/icon.png"/>
11 |   <link rel="apple-touch-icon" sizes="72x72" href="/assets/icon.png"/>
12 |   <link rel="apple-touch-icon" sizes="114x114" href="/assets/icon.png"/>
13 |   <title>reapp-dog-example</title>
14 |   <!-- STYLES -->
15 | </head>
16 | <body>
17 |   <div id="app"><!-- CONTENT --></div>
18 |   <!-- DATA -->
19 |   <!-- SCRIPTS -->
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/app/actions/dogActions.js:
--------------------------------------------------------------------------------
 1 | import Actions from '../actions';
 2 | import store from '../store';
 3 | 
 4 | // we fetch the ordered array of dogs
 5 | // then grab their individual data
 6 | Actions.loadDogs.listen(opts => {
 7 |   getDogsListFromAPI(opts).then(res => {
 8 |     store().set('dogIds', res);
 9 |     getDogsData(res);
10 |   })
11 | })
12 | 
13 | Actions.reverseDogs.listen(() =>
14 |   store().update('dogs', dogs => dogs.reverse())
15 | );
16 | 
17 | function getDogsData(res) {
18 |   res.map(id => {
19 |     getDogAPI(id).then(dog => {
20 |       store().setIn(['dogs', dog.id], dog)
21 |     })
22 |   })
23 | }
24 | 
25 | function getDogsListFromAPI() {
26 |   return Promise.resolve([1, 2, 3]);
27 | }
28 | 
29 | function getDogAPI(id) {
30 |   var data = {
31 |     1: { id: 1, breed: 'Jack Russell' },
32 |     2: { id: 2, breed: 'Shih Tzu' },
33 |     3: { id: 3, breed: 'Pitbull' },
34 |   }
35 |   return Promise.resolve(data[id]);
36 | }


--------------------------------------------------------------------------------
/assets/ios/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 6 | 
 7 |   <!-- STYLES -->
 8 | 
 9 |   <script src="cordova.js"></script>
10 |   <script>
11 |     function loadApp() {
12 |       // see http://stackoverflow.com/questions/23662121/cordova-plugins-only-work-in-ios-the-second-time-its-opened-with-a-thread-warnin
13 |       cordova.exec.setJsToNativeBridgeMode(cordova.exec.jsToNativeModes.XHR_NO_PAYLOAD);
14 | 
15 |       var head = document.getElementsByTagName('head')[0];
16 |       var script = document.createElement('script');
17 |       script.type = 'text/javascript';
18 |       script.src = 'main.js';
19 |       head.appendChild(script);
20 |     }
21 |     document.addEventListener("deviceready", loadApp, false);
22 |   </script>
23 | </head>
24 | <body>
25 |   <div id="app"><!-- CONTENT --></div>
26 |   <!-- DATA -->
27 | </body>
28 | </html>


--------------------------------------------------------------------------------
/app/components/App.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Link, RouteHandler } from 'react-router';
 3 | import Menu from 'reapp-ui/components/Menu';
 4 | import Button from 'reapp-ui/components/Button';
 5 | import LayoutLeftNav from 'reapp-ui/views/LayoutLeftNav';
 6 | import Theme from 'reapp-ui/helpers/Theme';
 7 | import theme from 'theme/theme';
 8 | 
 9 | export default React.createClass({
10 |   render() {
11 |     var button = (
12 |       <Button
13 |         iconProps={{
14 |           file: require('reapp-ui/assets/icons/hamburger.svg'),
15 |           stroke: 1,
16 |           size: 24,
17 |           animations: false
18 |         }}
19 |         chromeless />
20 |     );
21 | 
22 |     var menu = (
23 |       <Menu>
24 |         <Link to="/">Dogs</Link>
25 |       </Menu>
26 |     );
27 | 
28 |     return (
29 |       <Theme {...theme}>
30 |         <LayoutLeftNav
31 |           title="reapp-dog-example"
32 |           side={menu}
33 |           handle={button}>
34 |           <RouteHandler {...this.props} />
35 |         </LayoutLeftNav>
36 |       </Theme>
37 |     );
38 |   }
39 | });


--------------------------------------------------------------------------------
/app/components/Dogs.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import View from 'reapp-ui/views/View';
 3 | import Button from 'reapp-ui/components/Button';
 4 | import List from 'reapp-ui/components/List';
 5 | import { storeRefreshMixin } from 'reapp-platform';
 6 | 
 7 | import shouldComponentUpdate from 'omniscient/shouldupdate';
 8 | 
 9 | import Store from '../store';
10 | import Actions from '../actions';
11 | 
12 | 
13 | var Dog = React.createClass({
14 |   shouldComponentUpdate, // what about here?
15 |   render() {
16 |     return <div>{this.props.dog.breed}</div>
17 |   }
18 | })
19 | 
20 | var Dogs = React.createClass({
21 |   mixins: [
22 |     storeRefreshMixin(Store),
23 |   ],
24 |   shouldComponentUpdate, // should this be here???  
25 |   render() {    
26 |     console.log("Dogs.render()");
27 |         
28 |     var dogIds = Store().get('dogIds');
29 |     var dogs = dogIds.map(id => {
30 |       var dog = Store().getIn(['dogs', id]);
31 |       return <Dog dog={dog} />;
32 |     });
33 |     
34 |     return (
35 |       <View {...this.props} title={["", "Dogs"]}>
36 |         <Button onTap={Actions.loadDogs}>Load Dogs (crash!)</Button>
37 |         <Button onTap={Actions.reverseDogs}>Reverse Dogs</Button>
38 |       
39 |         <List>
40 |           {dogs}
41 |         </List>
42 |       </View>
43 |     )
44 |   }
45 | });
46 | 
47 | export default Dogs;


--------------------------------------------------------------------------------