Workshop Base Fiddle

by Ayité D'almeida

HTML

<script src="https://npmcdn.com/redux/dist/redux.js"></script>
<script src="https://npmcdn.com/expect/umd/expect.js"></script>
<script src="https://wzrd.in/standalone/deep-freeze@latest"></script>
<script src="https://npmcdn.com/[email protected]/dist/react.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react-dom.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react-redux.js"></script>
<div id="root"></div>

Babel + JSX

/*
 * We want to implement the following components:
 * - `FilterLink` displays a link for a visibility filter.
 * - `Footer` displays three `FilterLink`s.
 * - `Todo` displays a single todo.
 * - `TodoList` displays a list of todos.
 * - `AddTodo` displays an input with a button.
 * - `TodoApp` renders `AddTodo`, `TodoList`, and a `Footer`, and passes functions that dispatch actions as callback props to them.
 * The component structure and their props are outlined below, 
 * but you will write the implementation!
 */

const todo = (state, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        id: action.id,
        text: action.text,
        completed: false
      };
    case 'TOGGLE_TODO':
      if (state.id !== action.id) {
        return state;
      }

      return {
        ...state,
        completed: !state.completed
      };
    default:
      return state;
  }
};

const todos = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        todo(undefined, action)
      ];
    case 'TOGGLE_TODO':
      return state.map(t => todo(t, action));
    default:
      return state;
  }
};

const visibilityFilter = (
  state = 'SHOW_ALL',
  action
) => {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return action.filter;
    default:
      return state;
  }
};

const { combineReducers } = Redux;

const todoApp = combineReducers({
  todos,
  visibilityFilter
});

const { createStore } = Redux;
const store = createStore(todoApp);

const { Component } = React;

const FilterLink = ({
  filter,
  currentFilter,
  children,
  onClick
}) => {
	// If currentFilter is the same as filter,
  // return a span. Otherwise return a link
  // that calls onClick when it's clicked.
  // ?
  if(filter == currentFilter) {
  	return <span>{children}</span>
  }
  return (
		<a
    	href='#'
      conClick={
      	e => {
        	e.preventDefault();
          e.onClick();
        }
      }
...