abhiaiyer91

import { Meteor } from 'meteor/meteor';
import { createContainer } from 'meteor/react-meteor-data';
import { connect }  from 'react-redux';
import React  from 'react';
import reactMixin from 'react-mixin';
import Todos from '../../collection';
import changePage from '../../../imports/client/actions/changePage';
import toggleTodo from '../../../imports/client/actions/toggleTodo';
import Todo from '../../../imports/client/components/Todo';
import TodoPagination from '../../../imports/client/components/TodoPagination';

abhiaiyer91

import React from 'react';
import { connect } from 'react-redux';
import FilterLink from '../import/client/components/FilterLink';

function Footer(props) {
  return (
    <p>
      Show:
      {' '}
      <FilterLink filter='SHOW_ALL' {...props}>

abhiaiyer91

import Link from '../import/client/components/Link';
import setVisibilityFilter from '../import/client/actions/setVisibilityFilter';

export default FilterLink({ dispatch, filter, visibilityFilter, children }) {
  return (
    <Link active={visibilityFilter === filter} onClick={()=> {return dispatch(setVisibilityFilter(filter))}}>
      {children}
    </Link>
  );
};

abhiaiyer91

export default function Link({active,children,onClick}){
  if (active) {
    return <span>{children}</span>;
  }
  return (
    <a href='#'
       onClick={function (e){
         e.preventDefault();
         onClick();
       }}

abhiaiyer91

export default function todoApp(state = initialState, action) {
  switch (action.type) {
    case "SET_VISIBILITY_FILTER":
      // RETURNING A NEW STATE WHAT WHAT!!!
      return Object.assign({}, state, {
        visibilityFilter: action.filter
      })
    default:
      return state
  }

abhiaiyer91

{
  "react-mixin": "3.0.3", // So we can use Mixins with ES6 Classes
  "redux": "3.0.5", // The library this blog post is about
  "react-redux": "4.0.6" // redux bindings for react
  "redux-thunk": "1.0.3", // How we can dispatch actions as funcs
  "redux-logger": "2.3.1", // Logging state changes
  "classnames": "2.2.1", // DOPE conditional css tool
  "externalify": "0.1.0" // specify a custom name for require 
  "react-paginate": "0.5.0"
}

abhiaiyer91

Redux = require('redux');
thunkMiddleware = require('redux-thunk');
createLogger = require('redux-logger');
classNames = require('classnames');
reactMixin = require('react-mixin');
ReactRedux = require('react-redux');
ReactPaginate = require('react-paginate');

abhiaiyer91

{
  "transforms": {
    "externalify": {
      "global": true,
      "external": {
        "react": "Package.react-runtime.React.require"
      }
    }
  }
}

abhiaiyer91

// in imports/collections.js
const Todos = new Mongo.Collection('todos');
export default Todos;

abhiaiyer91

// in server/publications.js
import Todos from '../imports/collection';

Meteor.publish('getTodos', function (filter, pageSkip = 0) {
  switch (filter) {
    case 'SHOW_ALL':
      return Todos.find({}, {skip: pageSkip, limit 10});
    case 'SHOW_COMPLETED':
      return Todos.find({completed: true}, {skip: pageSkip, limit: 10});
    case 'SHOW_ACTIVE':