Abhi Aiyer abhiaiyer91

abhiaiyer91 / profilecomponent.jsx

Last active December 21, 2015 04:35

	// Profile Picture Class
	// in this example we're assuming you know the distinction
	// between high order and presentational components

	const ProfilePictureContainer = class ProfilePictureContainer extends React.Component {
	constructor() {
	super();
	}
	// Use get meteor data to put our reactive data
	// in one spot

abhiaiyer91 / profilecomponent.jsx

Created December 21, 2015 04:04

	const ProfileAvatarComponent = ({profilePhoto, role}) => {
	return (
	<div className="img-circle">
	<div className="grey-outline">
	<img src={profilePhoto} className="img-responsive"/>
	</div>
	</div>
	)
	}

abhiaiyer91 / profilecomponentrole.jsx

Created December 21, 2015 04:13

	const ProfileAvatarComponent = ({profilePhoto, role}) => {
	const roleClass = role === 'Admin' ? 'blue-outline' : 'grey-outline';
	return (
	<div className="img-circle">
	<div className={roleClass}>
	<img src={profilePhoto} className="img-responsive"/>
	</div>
	</div>
	)
	}

abhiaiyer91 / profilecomp.jsx

Created December 21, 2015 04:23

	const ProfileAvatarComponent = ({profilePhoto, role}) => {
	const roleClass = roleOutline(role);
	return (
	<div className="img-circle">
	<div className={roleClass}>
	<img src={profilePhoto} className="img-responsive"/>
	</div>
	</div>
	)
	}

abhiaiyer91 / index.html

Created January 11, 2016 06:23

Index

abhiaiyer91 / rootComponent.jsx

Last active April 5, 2016 04:32

Root

	// in client/components/rootComponent.jsx
	import React from 'react';
	import ReactDOM from 'react-dom';
	import { Provider } from 'react-redux';
	import Store from '../imports/client/store/store';
	import TodoApp from '../imports/client/components/TodoApp';

	function TodoAppRoot() {
	return (
	<div className="todo-container">

abhiaiyer91 / app.jsx

Last active April 5, 2016 04:33

App

	// in client/components/app.jsx
	import AddTodo from '../imports/client/components/AddTodo';
	import TodoList from '../imports/client/components/TodoList';
	import Footer from '../imports/client/components/Footer';

	export default function TodoApp() {
	<div>
	<AddTodo/>
	<TodoList/>
	<Footer/>

abhiaiyer91 / AddTodo.jsx

Last active April 5, 2016 04:35

Add Todo

	// in imports/client/components/AddTodo.jsx

	import { connect } from 'react-redux';
	import addTodo from '../imports/client/actions/addTodo';

	function AddTodo({ dispatch }) {
	let input;

	return (
	<div>

abhiaiyer91 / Todo.jsx

Last active April 5, 2016 04:36

Todo Item

	import React from 'react';

	export default function Todo({onClick,completed,text}) {
	<li
	onClick={onClick}
	style={{
	textDecoration: completed ? 'line-through' : 'none'
	}}
	>
	{text}

abhiaiyer91 / Pagination.jsx

Last active April 5, 2016 18:40

Pagination

	// in client/components/pagination.jsx
	import ReactPaginate from 'react-paginate';

	export default TodoPagination({handlePageClick, pageCount}) {
	return (
	<div className="paginate">
	<ReactPaginate
	previousLabel={"previous"}
	nextLabel={"next"}
	breakLabel={<li className="break"><a href="">...</a></li>