├── .gitignore
├── README.md
├── build
├── index.html
└── js
│ └── shopping-list.js
├── deploy.sh
├── package.json
├── publish.sh
├── serve.sh
├── source
├── index.ejs
└── js
│ ├── actions
│ └── ListItemActionCreators.js
│ ├── components
│ ├── AddListItem.js
│ ├── EmptyList.js
│ ├── List.js
│ ├── ListHeader.js
│ ├── ListItem.js
│ ├── ListItemDescription.js
│ └── ShoppingList.js
│ ├── dispatcher
│ └── Dispatcher.js
│ ├── index.js
│ └── stores
│ └── ListItemStore.js
├── update.sh
├── webpack.config.js
├── webpack.production.config.js
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log
3 | *.DS_Store
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Shopping List with React.js and Flux.
2 |
3 | Basic shopping list implemented with React.js (`v15`) and Twitter Bootstrap (`v3`).
4 |
5 | Uses Webpack, [Yarn](https://code.facebook.com/posts/1840075619545360).
6 |
7 | ### Live
8 |
9 | http://fedosejev.github.io/shopping-list-react-flux/
10 |
11 | ## Install
12 |
13 | 1. `npm install -g yarn`
14 | 2. `yarn install`
15 |
16 | #### What is Yarn?
17 | + https://code.facebook.com/posts/1840075619545360
18 | + https://scotch.io/tutorials/yarn-package-manager-an-improvement-over-npm
19 |
20 | ## Run
21 |
22 | 1. `npm start`
23 | 2. Open `http://localhost:8080` in a web browser.
24 |
25 | ## Build
26 |
27 | `npm run build`
28 |
29 | ## Other versions
30 |
31 | + [React.js and ES5](https://github.com/fedosejev/shopping-list-react)
32 | + [React.js and ES2015](https://github.com/fedosejev/shopping-list-react-es2015)
33 | + [React.js, Redux and ES2015](https://github.com/fedosejev/shopping-list-react-redux)
34 |
35 | ## Author
36 |
37 | Artemij Fedosejev
38 | + [Website](http://artemij.com)
39 | + [LinkedIn](https://www.linkedin.com/in/artemij)
40 | + [React.Tips](http://react.tips)
41 |
42 | ## License
43 |
44 | This software is released under the MIT license.
45 |
46 | This software comes with NO WARRANTY, expressed or implied.
47 |
48 |
--------------------------------------------------------------------------------
/build/index.html:
--------------------------------------------------------------------------------
1 | Shopping ListLoading application...
--------------------------------------------------------------------------------
/deploy.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | gulp build-for-production
4 |
5 | git commit -a -m "Update" && git push
6 | git subtree push --prefix build origin gh-pages
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "shopping-list-react",
3 | "version": "1.0.0",
4 | "description": "Basic shopping list implemented with React.js.",
5 | "main": "index.js",
6 | "scripts": {
7 | "start": "webpack-dev-server --hot --inline --progress --colors",
8 | "build": "webpack -p --config ./webpack.production.config.js",
9 | "test": "echo \"Error: no test specified\" && exit 1"
10 | },
11 | "repository": {
12 | "type": "git",
13 | "url": "https://github.com/fedosejev/shopping-list-react.git"
14 | },
15 | "author": "Artemij Fedosejev",
16 | "license": "MIT",
17 | "bugs": {
18 | "url": "https://github.com/fedosejev/shopping-list-react/issues"
19 | },
20 | "homepage": "https://github.com/fedosejev/shopping-list-react",
21 | "devDependencies": {
22 | "babel-core": "^6.17.0",
23 | "babel-loader": "^6.2.5",
24 | "babel-preset-es2015": "^6.16.0",
25 | "babel-preset-react": "^6.16.0",
26 | "html-minify-loader": "^1.1.0",
27 | "html-webpack-plugin": "^2.22.0",
28 | "webpack": "^1.13.2",
29 | "webpack-dev-server": "^1.16.2"
30 | },
31 | "dependencies": {
32 | "flux": "^2.1.1",
33 | "node-uuid": "^1.4.2",
34 | "object-assign": "^4.0.1",
35 | "react": "^15.0",
36 | "react-dom": "^15.0"
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/publish.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | # Build content and static files
4 | npm run build
5 |
6 | # Commit and push
7 | git add .
8 | git commit -m "Update"
9 | git push
10 |
11 | # Deploy on GitHub Pages
12 | git subtree push --prefix build origin gh-pages
--------------------------------------------------------------------------------
/serve.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | # To disable caching, use -c-1.
4 | http-server -c-1 ./build
--------------------------------------------------------------------------------
/source/index.ejs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Shopping List
7 |
8 |
13 |
14 |
15 |
16 |
Loading application...
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/source/js/actions/ListItemActionCreators.js:
--------------------------------------------------------------------------------
1 | var Dispatcher = require('../dispatcher/Dispatcher');
2 |
3 | function addListItem(item) {
4 | var action = {
5 | type: 'add_list_item',
6 | item: item
7 | };
8 |
9 | Dispatcher.dispatch(action);
10 | }
11 |
12 | function removeListItem(itemId) {
13 | var action = {
14 | type: 'remove_list_item',
15 | itemId: itemId
16 | };
17 |
18 | Dispatcher.dispatch(action);
19 | }
20 |
21 | function removeAllListItems() {
22 | var action = {
23 | type: 'remove_all_list_items'
24 | };
25 |
26 | Dispatcher.dispatch(action);
27 | }
28 |
29 | module.exports = {
30 | addListItem: addListItem,
31 | removeListItem: removeListItem,
32 | removeAllListItems: removeAllListItems
33 | };
--------------------------------------------------------------------------------
/source/js/components/AddListItem.js:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 | var uuid = require('node-uuid');
3 | var ListItemActionCreators = require('../actions/ListItemActionCreators');
4 |
5 | var styleRequired = {
6 | color: "#ffaaaa"
7 | };
8 |
9 | var AddListItem = React.createClass({
10 |
11 | handleSubmitEvent: function (event) {
12 | event.preventDefault();
13 |
14 | var item = {
15 | id: uuid.v4(),
16 | date: new Date(),
17 | name: this.refs.name.value.trim(),
18 | description: this.refs.description.value.trim(),
19 | quantity: this.refs.quantity.value
20 | };
21 |
22 | ListItemActionCreators.addListItem(item);
23 | },
24 |
25 | render: function () {
26 | return (
27 |
54 | );
55 | }
56 | });
57 |
58 | module.exports = AddListItem;
59 |
--------------------------------------------------------------------------------
/source/js/components/EmptyList.js:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 |
3 | var EmptyList = React.createClass({
4 | render: function () {
5 | return (
6 |
7 | There are no items in your list.
8 |
9 | );
10 | }
11 | });
12 |
13 | module.exports = EmptyList;
--------------------------------------------------------------------------------
/source/js/components/List.js:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 | var ListItem = require('./ListItem');
3 | var ListHeader = require('./ListHeader');
4 | var EmptyList = require('./EmptyList');
5 | var ListItemStore = require('../stores/ListItemStore');
6 |
7 | var List = React.createClass({
8 |
9 | getInitialState: function () {
10 | return this.getList();
11 | },
12 |
13 | getList: function () {
14 | return {
15 | items: ListItemStore.getAllListItems()
16 | };
17 | },
18 |
19 | updateState: function () {
20 | this.setState(this.getList());
21 | },
22 |
23 | componentDidMount: function () {
24 | ListItemStore.addChangeListener(this.updateState);
25 | },
26 |
27 | componentWillUnmount: function () {
28 | ListItemStore.removeChangeListener(this.updateState);
29 | },
30 |
31 | getListOfItemIds: function (items) {
32 | return Object.keys(items);
33 | },
34 |
35 | getTotalNumberOfListItems: function (items) {
36 | var totalNumberOfItems = 0;
37 | var item;
38 |
39 | this.getListOfItemIds(items).forEach(function (itemId) {
40 | item = items[itemId];
41 | totalNumberOfItems = totalNumberOfItems + parseInt(item.quantity, 10);
42 | });
43 |
44 | return totalNumberOfItems;
45 | },
46 |
47 | createListItemElements: function (items) {
48 | var item;
49 |
50 | return (
51 | this
52 | .getListOfItemIds(items)
53 | .map(function createListItemElement(itemId) {
54 | item = items[itemId];
55 | return ();
56 | }.bind(this))
57 | .reverse()
58 | );
59 | },
60 |
61 | render: function () {
62 | var items = this.state.items;
63 | var listItemElements = this.createListItemElements(items);
64 |
65 | return (
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 | {listItemElements.length > 0 ? listItemElements : }
75 |
76 |
77 |
19 |
20 | {item.quantity} x {item.name}
21 |
22 |
23 | {item.description.length > 0 ?
: ''}
24 |
25 |
26 |
29 |
30 |
7 | {this.props.description}
8 |
9 | );
10 | }
11 | });
12 |
13 | module.exports = ListItemDescription;
--------------------------------------------------------------------------------
/source/js/components/ShoppingList.js:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 | var List = require('./List');
3 | var AddListItem = require('./AddListItem');
4 |
5 | var ShoppingList = React.createClass({
6 | render: function () {
7 | return (
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
20 |
21 |