oampo

Loading and saving the Trello state

Loading the state

• Import and apply the Redux Thunk middleware

• Add some initial content to the db.json file:

  {

"lists": [{

oampo

Connect the components, dispatch the actions

Rendering the state

• In your ReactDOM.render call, wrap your components in a Provider to provide the store to connected components.
• Connect the Board component, mapping the lists property of the state to the lists prop of the board component.
• Check that your initial state is being rendered at this point.

Adding cards

oampo

Create actions, reducers and a store

• In js/actions/index.js make action creators for the following actions:

  {
      type: 'ADD_CARD',
      // Should be variable
      card: {
          id: 0,                  // The ID of the card
  

oampo

Create stateless Trello components

• Add a main <div> to index.html.
• In the js/components repository, create the four stateless components described below.
• As you complete each component, render them into the <div> by adding a ReactDOM.render line to js/index.js.

Components

<Card />

oampo

var axios = require('axios');


var findPassTime = function(latitude, longitude) {
    return axios.get('http://api.open-notify.org/iss-pass.json', {
            params: {
                lat: latitude,
                lon: longitude
            }
        })

oampo

var Local = function() {
    var path = document.location.pathname.split("/");
    path = path[4];
    var ajax = $.ajax({
        url: "/" + path + "/files"
    });
    ajax.done(this.onGetFiles.bind(this));

    this.data = {
        description: decodeURI(path) + "#no-index #crumbs",

oampo

Joe Turner

Email, GitHub

oampo

<canvas id="canvas"></canvas>

oampo

{
    "/work": "8ad52561445ec13c0d04",
    "/about": "e63b610e2ce53f4d6aba",
    "/local": "f7c18ce5e76151cbaf93"
}

oampo

ul.list {
    list-style-type: none;
    padding: 0;
    font-size: 2em;
    text-align: center;
}