React LoudHailer (react-lh) Todo App Demo

Demonstration of inter-component communication through react-lh can be made simple.

by mauris

HTML

<script src="https://unpkg.com/react-lh@1.2.5/dist/react-lh.min.js"></script>
<div id="app"></div>

SCSS

body {
  background: #111;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 2px;
  padding: 15px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

li > label > span.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

li label {
  span {
    margin-right: 5px;
  }
  
  /* remove button for each item */
  button {
    display: none;
    
    font-size: 60%;
    padding: 2px 4px;
    vertical-align: middle;
  }
  
  &:hover button {
    display: inline-block;
  }
}

input[type=checkbox] {
  margin-right: 5px;
}

input[type=text] {
  padding: 5px 8px;
  border: 1px solid #CCC;
  border-radius: 2px;
  margin-right: 10px;
  background: #FAFAFA;
  
  &:focus {
    outline: none;
    border: 1px solid #36F;
    background: #FFF;
  }
}

button {
    border: 1px solid #033249;
    border-radius: 2px;
    cursor: pointer;
    padding: 8px 15px;
    color: #FFF;
    background: #0084c6;
    
    &:hover {
      background: #1d6284;
      border: 1px solid #111;
    }
    
    &:focus {
      outline: none;
      border: 1px solid #ccc;
    }
    
    &:active {
      outline: none;
      border: 1px solid #36F;
    }
  }

.button-set {
  margin-bottom: 20px;
  
  /* buttons in the button set */
  button {
    margin-right: 10px;
  }
}

input[type=text] {
  padding: 8px 15px;
}

.NewItem {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #DDD;
}

React

/*

Demo Todo App using React Loud Hailer (react-lh)
using react-lh version 1.2.5
---
https://www.npmjs.com/package/react-lh
https://github.com/mauris/react-lh
---

Note: The style of JS here is different as some Babel transpiling features are not
		  available in the browser. Instead, a pre-transpiled version of react-lh was used.
      
      -- UMD minfidied react-lh --
      https://unpkg.com/react-lh@1.2.5/dist/react-lh.min.js      

Try out: 
	- [ ] Implement a button to delete all Todo items
  - [ ] Implement a button to toggle Done status of all Todo items (done to undone, and undone to done)
  - [ ] Open two windows of this JSFiddle and try the CrossWindow features. Changes to one should be synchronised to all instances.
 */

/*
TodoList component stores the state of the list of things to do
and exposes its API via Loud Hailer events.
 */
class TodoList extends React.Component {
  constructor(props) {
    super(props);
    
    // the initial state
    this.state = {
    	items: [
      	{ text: "Learn JavaScript", done: false },
        { text: "Learn React", done: false },
        { text: "Play around in JSFiddle", done: true },
        { text: "Build something awesome", done: true }
      ]
    };
  }
  
  componentDidMount() {
    const { channel } = this.props;
    
    /* code block to sync items across windows on start up */
    /* alternatively is to sync via localStorage */
    channel.once('TodoList.crossWindowResponse', (newItems) => {
    	const { items } = this.state;
      if (items === newItems) {
      	return;
      }
    	this.setState({
      	items: newItems,
      });
    });
    
    channel.emit('TodoList.crossWindowRequest', this.state.items);
    
    channel.on('TodoList.crossWindowRequest', (receivedItems) => {
    	const { items } = this.state;
      if (items === receivedItems) {
      	return;
      }
    	channel.emitAsync('TodoList.crossWindowResponse', items);
    });
    /* code block to sync items across windows on...