shopping list app completed

app/actions/LaneActions.js

@@ -0,0 +1,6 @@
+import alt from '../libs/alt';
+
+export default alt.generateActions(
+  'create', 'update', 'delete',
+  'attachToLane', 'detachFromLane'
+);

app/actions/NoteActions.js

@@ -0,0 +1,3 @@
+import alt from '../libs/alt';
+
+export default alt.generateActions('create', 'update', 'delete');

app/components/App.jsx

@@ -1,8 +1,32 @@
+import AltContainer from 'alt-container';
 import React from 'react';
-import Note from './Note.jsx';
+import Lanes from './Lanes.jsx';
+import LaneActions from '../actions/LaneActions';
+import LaneStore from '../stores/LaneStore';
+
+export default class APP extends React.Component {
 
-export default class App extends React.Component {
   render() {
-    return <Note />;
+
+    return (
+      <div>
+        <button className="add-lane" onClick={this.addLane}>
+          + Create New List
+        </button>
+
+        <AltContainer
+          stores={[LaneStore]}
+          inject={{
+            lanes: () => LaneStore.getState().lanes || []
+          }}
+        >
+          <Lanes />
+        </AltContainer>  
+      </div>
+    );
+  }
+
+  addLane() {
+    LaneActions.create({name: 'New List'});
   }
-}
+}

app/components/Editable.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+export default class Editable extends React.Component {
+
+  render() {
+    const {value, onEdit, onValueClick, editing, ...props} = this.props;
+
+    return (
+      <div {...props}>
+        {editing ? this.renderEdit() : this.renderValue()}
+      </div>
+    );
+  }
+
+  renderEdit = () => {
+    return <input type="text"
+      ref={
+        (e) => e ? e.selectionStart = this.props.value.length : null
+      }
+      autoFocus={true}
+      defaultValue={this.props.value}
+      onBlur={this.finishEdit}
+      onKeyPress={this.checkEnter} />;
+  };
+
+  renderValue = () => {
+    const onDelete = this.props.onDelete;
+
+    return (
+      <div onClick={this.props.onValueClick}>
+        <span className="value">{this.props.value}</span>
+        {onDelete ? this.renderDelete() : null }
+      </div>
+    );
+  };
+
+  renderDelete = () => {
+    return <button
+      className="delete"
+      onClick={this.props.onDelete}>X</button>;
+  };
+
+  checkEnter = (e) => {
+    if(e.key === 'Enter') {
+      this.finishEdit(e);
+    }
+  };
+
+  finishEdit = (e) => {
+    const value = e.target.value;
+
+    if(this.props.onEdit) {
+      this.props.onEdit(value);
+    }
+  };
+}

app/components/Lane.jsx

@@ -0,0 +1,107 @@
+import AltContainer from 'alt-container';
+import React from 'react';
+import Notes from './Notes.jsx';
+import NoteActions from '../actions/NoteActions';
+import NoteStore from '../stores/NoteStore';
+import LaneActions from '../actions/LaneActions';
+import Editable from './Editable.jsx';
+
+export default class Lane extends React.Component {
+  render() {
+    const {lane, ...props} = this.props;
+
+    return (
+      <div {...props}>
+        <div className="lane-header" onClick={this.activateLaneEdit}>
+          <div className="lane-add-note">
+            <button onClick={this.addNote}>+ Add Item</button>
+          </div>
+          <Editable className="lane-name" editing={lane.editing}
+            value={lane.name} onEdit={this.editName} />
+          <div className="lane-delete">
+            <button onClick={this.deleteLane}>X</button>
+          </div>  
+        </div>
+        <AltContainer
+          stores={[NoteStore]}
+          inject={{
+            notes: () => NoteStore.getNotesByIds(lane.notes)
+          }}
+        >
+          <Notes
+            onValueClick={this.activateNoteEdit}
+            onEdit={this.editNote}
+            onDelete={this.deleteNote} />
+        </AltContainer>
+      </div>
+    )
+  }
+
+  editNote(id, item, sku, price) {
+    // Don't modify if trying set an empty value
+    if(!item.trim()) {
+      NoteActions.update({id, editing: false});
+      return;
+    }
+    // if(!sku.trim()) {
+    //   NoteActions.update({id, editing: false});
+    //   return;
+    // }
+    // if(!price.trim()) {
+    //   NoteActions.update({id, editing: false});
+    //   return;
+    // }
+
+    NoteActions.update({id, item, sku, price, editing: false});
+  }
+
+  addNote = (e) => {
+    e.stopPropagation();
+
+    const laneId = this.props.lane.id;
+    const note = NoteActions.create({item: 'New item', sku: 'SKU#233', price: '$1.99'});
+
+    LaneActions.attachToLane({
+      noteId: note.id,
+      laneId
+    });
+  };
+
+  deleteNote = (noteId, e) => {
+    e.stopPropagation();
+
+    const laneId = this.props.lane.id;
+
+    LaneActions.detachFromLane({laneId, noteId});
+    NoteActions.delete(noteId);
+  };
+
+  editName = (name) => {
+    const laneId = this.props.lane.id;
+
+    // Don't modify if trying set an empty value
+    if(!name.trim()) {
+      LaneActions.update({id: laneId, editing: false});
+
+      return;
+    }
+
+    LaneActions.update({id: laneId, name, editing: false});
+  };
+
+  deleteLane = () => {
+    const laneId = this.props.lane.id;
+
+    LaneActions.delete(laneId);
+  };
+
+  activateLaneEdit = () => {
+    const laneId = this.props.lane.id;
+
+    LaneActions.update({id: laneId, editing: true});
+  };
+
+  activateNoteEdit(id) {
+    NoteActions.update({id, editing: true});
+  }
+}

app/components/Lanes.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import Lane from './Lane.jsx';
+
+export default ({lanes}) => {
+  return (
+    <div className="lanes">{lanes.map(lane =>
+      <Lane className="lane" key={lane.id} lane={lane} />
+    )}</div>
+  );
+}

app/components/Note.jsx

@@ -1,3 +1,79 @@
 import React from 'react';
 
-export default () => <div>Learn React and Webpack!</div>;
+export default class Note extends React.Component {
+  constructor(props) {
+    super(props);
+
+    // Keeps track of "editing" state.
+    this.state = {
+      editing: false
+    };
+  }
+
+  render() {
+    // Rendering the component differently based on state.
+    if(this.state.editing) {
+      return this.renderEdit();
+    }
+    return this.renderNote();
+  }
+
+  renderEdit = () => {
+    return (
+      <input type="text"
+      ref={
+        (e) => e ? e.selectionStart = this.props.item.length : null
+      }
+      autoFocus={true}
+      defaultValue={this.props.item}
+      onBlur={this.finishEdit}
+      onKeyPress={this.checkEnter} />;
+  };
+
+  renderNote = () => {
+    // When user clicks a normal item, it triggers editing logic.
+    const onDelete = this.props.onDelete;
+
+    return (
+      <div onClick={this.edit}>
+        <span className="item">{this.props.item}</span>
+        <span>SKU# {this.props.sku}</span>
+        <span>Price {this.props.price}</span>
+        {onDelete ? this.renderDelete() : null }
+      </div>
+    );
+  };
+
+  renderDelete = () => {
+    return <button
+      className="delete-note"
+      onClick={this.props.onDelete}>remove</button>;
+  };
+
+  // Enter edit mode.
+  edit = () => {
+    this.setState({
+      editing: true
+    });
+  };
+
+  checkEnter = (e) => {
+    // When user hits "enter", it finishes up.
+    if(e.key === 'Enter') {
+      this.finishEdit(e);
+    }
+  };
+
+  finishEdit = (e) => {
+    const value = e.target.value;
+
+    if(this.props.onEdit) {
+      this.props.onEdit(value);
+
+      // Exit edit mode.
+      this.setState({
+        editing: false
+      });
+    }
+  };
+}

app/components/Notes.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import Editable from './Editable.jsx';
+
+export default ({notes, onValueClick, onEdit, onDelete}) => {
+  return (
+    <ul className="notes">{notes.map(note =>
+      <li className="note" key={note.id}>
+        <Editable
+          editing={note.editing}
+          // Modified value to show sku and price.
+          value={[note.item, note.sku, note.price]}
+          onValueClick={onValueClick.bind(null, note.id)}
+          onEdit={onEdit.bind(null, note.id)}
+          onDelete={onDelete.bind(null, note.id)} />
+      </li>
+    )}</ul>
+  );
+}

app/index.jsx

@@ -1,7 +1,12 @@
 import './main.css';
-
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './components/App.jsx';
+import alt from './libs/alt';
+import storage from './libs/storage';
+import persist from './libs/persist';
+
+persist(alt, storage, 'app');
 
 ReactDOM.render(<App />, document.getElementById('app'));
+

app/libs/alt.js

@@ -0,0 +1,7 @@
+import Alt from 'alt';
+//import chromeDebug from 'alt-utils/lib/chromeDebug';
+
+const alt = new Alt();
+//chromeDebug(alt);
+
+export default alt;

app/libs/persist.js

@@ -0,0 +1,18 @@
+import makeFinalStore from 'alt-utils/lib/makeFinalStore';
+
+export default function(alt, storage, storeName) {
+  const finalStore = makeFinalStore(alt);
+
+  try {
+    alt.bootstrap(storage.get(storeName));
+  }
+  catch(e) {
+    console.error('Failed to bootstrap data', e);
+  }
+
+  finalStore.listen(() => {
+    if(!storage.get('debug')) {
+      storage.set(storeName, alt.takeSnapshot());
+    }
+  });
+}

app/libs/storage.js

@@ -0,0 +1,13 @@
+export default {
+  get(k) {
+    try {
+      return JSON.parse(localStorage.getItem(k));
+    }
+    catch(e) {
+      return null;
+    }
+  },
+  set(k, v) {
+    localStorage.setItem(k, JSON.stringify(v));
+  }
+};