Merge branch 'dev'

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets" : ["es2015", "react"]
+  "presets" : ["es2015", "react", "stage-2", "stage-0"]
 }

app/actions/settings.js

@@ -0,0 +1,20 @@
+export const toggleSettingsPanel = () => {
+  return {
+    type: 'TOGGLE_SETTINGS_PANEL',
+  };
+};
+
+export const changeTime = (timerType, time) => {
+  return {
+    type: 'CHANGE_TIME',
+    timerType,
+    time,
+  };
+};
+
+export const toggleSetting = (settingType) => {
+  return {
+    type: 'TOGGLE_SETTING',
+    settingType,
+  }
+}

app/actions/timer.js

@@ -0,0 +1,31 @@
+export const setTime = (time) => {
+  return {
+    type: 'SET_TIME',
+    time,
+  }
+};
+
+export const complete = (timerType) => {
+  return {
+    type: 'COMPLETE',
+    timerType,
+  };
+};
+
+export const startTimer = () => {
+  return {
+    type: 'START_TIMER',
+  };
+}
+
+export const stopTimer = () => {
+  return {
+    type: 'STOP_TIMER',
+  }
+};
+
+export const notified = () => {
+  return {
+    type: 'NOTIFIED',
+  };
+};

app/actions/todos.js

@@ -0,0 +1,31 @@
+const ADD_TODO = 'ADD_TODO';
+
+let todoID = 0;
+
+export const addTodo = (text) => {
+  return {
+    type: ADD_TODO,
+    id: ++todoID,
+    text: text,
+  }
+};
+
+export const toggleTodo = (id) => {
+  return {
+    type: 'TOGGLE_TODO',
+    id
+  }
+};
+
+export const clearCompletedTodos = () => {
+  return {
+    type: 'CLEAR_COMPLETED_TODOS',
+  }
+}
+
+export const deleteTodo = (id) => {
+  return {
+    type: 'DELETE_TODO',
+    id
+  }
+};

app/components/Timer.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { formatTime } from './../util/index.js';
+
+const Timer = ({
+  time,
+}) => {
+  return (
+    <h1>{formatTime(time)}</h1>
+  )
+};
+
+export default Timer;

app/components/TimerControls.js

@@ -0,0 +1,22 @@
+import React from 'react';
+const btnClass = 'btn btn--pomodoro';
+
+const Timer = ({
+  start,
+  stop,
+  activeTimer,
+  restart,
+}) => {
+  return (
+    <div className="timer-controls__container">
+      {(!activeTimer) ?
+        <button className={btnClass} onClick={start}>start</button> :
+        <button className={btnClass} onClick={stop}>stop</button>
+      }
+      <a className="timer__link" onClick={restart}>restart</a>
+      <span className="timer__hint">spacebar to {(!activeTimer) ? 'start' : 'stop'} timer</span>
+    </div>
+  )
+};
+
+export default Timer;

app/components/TimerInfo.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const TimerInfo = ({
+  count,
+}) => {
+  return (
+    <div className="pomodoro__count">
+      <p>{count} {(count === 1) ? 'pomodoro' : 'pomodoros'} complete</p>
+    </div>
+  );
+};
+
+export default TimerInfo;

app/components/TodoItem.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import classNames from 'classnames';
+
+const TodoItem = ({
+  complete,
+  text,
+  click,
+  deleteTodo,
+}) => {
+  return (
+    <li className={classNames('todo__item', {'is-complete': complete})}>
+      <div className="todo__item-container" onClick={click}>
+        <div className="todo__check">
+        </div>
+        <p className="todo__text">{text}</p>
+      </div>
+      <span className="todo__delete" onClick={deleteTodo}>×</span>
+    </li>
+  );
+};
+
+export default TodoItem;

app/components/TodoList.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import TodoItem from './TodoItem.js';
+
+const TodoList = ({
+  todos,
+  todoClick,
+  todoDelete,
+}) => {
+  return (
+    <div className="todo-list__container">
+      <ul className="todo__list">
+        {todos.map((todo) => {
+          return <TodoItem
+            key={todo.id}
+            text={todo.text}
+            complete={todo.completed}
+            click={() => {
+              todoClick(todo.id);
+              }
+            }
+            deleteTodo={() => {
+              todoDelete(todo.id);
+            }}
+            />;
+        }
+        )}
+      </ul>
+    </div>
+  );
+};
+
+export default TodoList;

app/components/Toggle.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const Toggle = ({
+  label,
+  onToggle,
+  checked,
+}) => {
+  return (
+    <div className="toggle__container">
+      <p className="toggle__label">{label}</p>
+      <div className="toggle">
+        <input type="checkbox" className="toggle__checkbox" checked={checked} onChange={onToggle}/>
+        <b className="toggle__switch"></b>
+        <b className="toggle__track"></b>
+      </div>
+    </div>
+  );
+};
+
+export default Toggle;

app/containers/AddTodo.js

@@ -0,0 +1,36 @@
+import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { addTodo } from './../actions/todos.js';
+
+let AddTodo = ({
+  dispatch
+}) => {
+  let input;
+
+  return (
+    <form onSubmit={e => {
+      e.preventDefault();
+      let val = input.value.trim();
+
+      if(!val) {
+        return;
+      }
+
+      dispatch(addTodo(val));
+      input.value = '';
+    }}>
+      <input
+        type="text"
+        className="todo__input"
+        placeholder="Enter todo"
+        ref={node => {
+          input = node
+        }}
+      />
+    </form>
+  );
+};
+
+AddTodo = connect()(AddTodo);
+
+export default AddTodo;

app/containers/App.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import TimerContainer from './TimerContainer.js';
+import SettingsContainer from './SettingsContainer.js';
+import TodoContainer from './TodoContainer.js';
+import Notifier from './Notifier.js';
+import Favicon from './Favicon.js';
+import classNames from 'classnames';
+import { connect } from 'react-redux';
+import TimerInfo from './../components/TimerInfo.js';
+
+let App = ({
+  timerType,
+  pomodoroCount,
+}) => {
+
+  let pomodoroClassnames = classNames('pomodoro__container', 'pomodoro__container--' + timerType);
+
+  return (
+    <div className={pomodoroClassnames}>
+      <Favicon
+        activeicon="https://httpete.com/pomodoro/active.ico"
+        breakicon="https://httpete.com/pomodoro/break.ico"
+      />
+      <Notifier />
+      <TodoContainer />
+      <TimerContainer />
+      <SettingsContainer />
+      <TimerInfo count={pomodoroCount} />
+    </div>
+  )
+};
+
+const mapStateToProps = (state) => {
+  return {
+    timerType: state.timer.timerType,
+    pomodoroCount: state.timer.count,
+  };
+}
+
+App = connect(mapStateToProps)(App);
+
+export default App;

app/containers/Favicon.js

@@ -0,0 +1,42 @@
+import React, { PropTypes } from 'react';
+import { connect } from 'react-redux';
+
+class Favicon extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  static propTypes : {
+    activeicon: PropTypes.string.isRequired,
+    breakicon: PropTypes.string.isRequired,
+    timerType: PropTypes.string.isRequired,
+  }
+
+  componentDidMount() {
+    this.favicon = document.getElementById('favicon');
+    this.favicon.href = this.faviconType();
+  }
+
+  componentDidUpdate() {
+    this.favicon.href = this.faviconType();
+  }
+
+  faviconType() {
+    return (this.props.timerType === 'active') ? this.props.activeicon : this.props.breakicon;
+  }
+
+  render() {
+    return null;
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+    timerType: state.timer.timerType,
+  };
+};
+
+Favicon = connect(mapStateToProps)(Favicon);
+
+export default Favicon;