` .
+3. Try `npm run deploy again`
+
+### [Heroku](https://www.heroku.com/)
+
+Use the [Heroku Buildpack for Create React App](https://github.com/mars/create-react-app-buildpack).React App
+
+
+
+ You need to enable JavaScript to run this app.
+
+
+
+
+
diff --git a/react/public/manifest.json b/react/public/manifest.json
new file mode 100644
index 0000000..ef19ec2
--- /dev/null
+++ b/react/public/manifest.json
@@ -0,0 +1,15 @@
+{
+ "short_name": "React App",
+ "name": "Create React App Sample",
+ "icons": [
+ {
+ "src": "favicon.ico",
+ "sizes": "64x64 32x32 24x24 16x16",
+ "type": "image/x-icon"
+ }
+ ],
+ "start_url": "./index.html",
+ "display": "standalone",
+ "theme_color": "#000000",
+ "background_color": "#ffffff"
+}
diff --git a/react/src/actions/lists.js b/react/src/actions/lists.js
new file mode 100644
index 0000000..0e5c19e
--- /dev/null
+++ b/react/src/actions/lists.js
@@ -0,0 +1,159 @@
+import { API_ROOT, getToken } from './util';
+
+export const ADD_LIST = 'ADD_LIST';
+export const REMOVE_LIST = 'REMOVE_LIST';
+export const EDIT_LIST_NAME = 'EDIT_LIST_NAME';
+export const RECIEVE_LISTS = 'RECIEVE_LISTS';
+export const REQUEST_LISTS = 'REQUEST_LISTS';
+export const INVALIDATE_LISTS = 'INVALIDATE_LISTS';
+export const VALIDATE_LISTS = 'VALIDATE_LISTS';
+export const CHANGE_LIST = 'CHANGE_LIST';
+export const START_CREATE_LIST = 'START_CREATE_LIST';
+export const START_EDIT_LIST = 'START_EDIT_LIST';
+
+function requestLists() {
+ return { type: REQUEST_LISTS };
+}
+function recieveLists(lists) {
+ return { type: RECIEVE_LISTS, lists };
+}
+
+function invalidateLists() {
+ return { type: INVALIDATE_LISTS };
+}
+function validateLists() {
+ return { type: VALIDATE_LISTS };
+}
+export function changeList(list) {
+ return { type: CHANGE_LIST, list };
+}
+
+export function startCreateList() {
+ return { type: START_CREATE_LIST };
+}
+export function startEditList() {
+ return { type: START_EDIT_LIST };
+}
+function addListToState(list) {
+ return { type: ADD_LIST, list };
+}
+
+export function addList(name) {
+ return async dispatch => {
+ dispatch(invalidateLists());
+ const response = await fetch(`${API_ROOT}/lists`, {
+ body: JSON.stringify({ name }),
+ headers: {
+ Authorization: `Bearer ${getToken()}`,
+ 'content-type': 'application/json',
+ },
+ method: 'POST',
+ });
+ const json = await response.json();
+ const list = json.data;
+ dispatch(addListToState(list));
+ dispatch(changeList(list.id));
+ dispatch(validateLists());
+ };
+}
+
+function removeListFromState(id) {
+ return { type: REMOVE_LIST, id };
+}
+
+export function removeList() {
+ return async (dispatch, getState) => {
+ let state = getState();
+ const { list } = state.lists;
+ dispatch(invalidateLists());
+ const response = await fetch(`${API_ROOT}/lists/${list}`, {
+ headers: {
+ Authorization: `Bearer ${getToken()}`,
+ 'content-type': 'application/json',
+ },
+ method: 'DELETE',
+ });
+ const json = await response.json();
+ if (json.success) {
+ dispatch(removeListFromState(list));
+ state = getState();
+ const newList = state.lists.lists[Object.keys(state.lists.lists)[0]]
+ ? state.lists.lists[Object.keys(state.lists.lists)[0]].id
+ : '';
+ dispatch(changeList(newList));
+ }
+ dispatch(validateLists());
+ };
+}
+
+function editListNameInState(id, name) {
+ return { type: EDIT_LIST_NAME, id, name };
+}
+
+export function editList(name) {
+ return async (dispatch, getState) => {
+ const state = getState();
+ const { list } = state.lists;
+ dispatch(invalidateLists());
+ const response = await fetch(`${API_ROOT}/lists/${list}`, {
+ body: JSON.stringify({ name }),
+ headers: {
+ Authorization: `Bearer ${getToken()}`,
+ 'content-type': 'application/json',
+ },
+ method: 'PATCH',
+ });
+ const json = await response.json();
+ if (json.success) {
+ dispatch(editListNameInState(list, name));
+ }
+ dispatch(validateLists());
+ };
+}
+
+export function fetchLists() {
+ return async dispatch => {
+ dispatch(requestLists());
+ const response = await fetch(`${API_ROOT}/lists`, {
+ headers: {
+ Authorization: `Bearer ${getToken()}`,
+ },
+ });
+ const json = await response.json();
+ const lists = json.data;
+ const listsObj = lists.reduce((obj, list) => {
+ const newObj = { ...obj };
+ newObj[list.id] = {
+ dirty: true,
+ fetching: false,
+ todos: null,
+ editing: false,
+ ...list,
+ };
+ return newObj;
+ }, {});
+
+ dispatch(recieveLists(listsObj));
+ if (lists.length !== 0) {
+ dispatch(changeList(listsObj[Object.keys(listsObj)[0]].id));
+ }
+ localStorage.setItem('lists', JSON.stringify(listsObj));
+ };
+}
+
+export function loadLists() {
+ return async dispatch => {
+ dispatch(requestLists());
+
+ try {
+ const listsJson = localStorage.getTodo('lists');
+ const listsObj = JSON.parse(listsJson);
+ dispatch(recieveLists(listsObj));
+ dispatch(changeList(listsObj[Object.keys(listsObj)[0]].id));
+ } catch (e) {
+ localStorage.removeItem('lists');
+ }
+
+ dispatch(fetchLists());
+ };
+}
diff --git a/react/src/actions/todos.js b/react/src/actions/todos.js
new file mode 100644
index 0000000..9b4dd95
--- /dev/null
+++ b/react/src/actions/todos.js
@@ -0,0 +1,147 @@
+import { API_ROOT, getToken } from './util';
+
+export const ADD_TODO = 'ADD_TODO';
+export const REMOVE_TODO = 'REMOVE_TODO';
+export const TOGGLE_TODO = 'TOGGLE_TODO';
+export const EDIT_TODO = 'EDIT_TODO';
+export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER';
+export const RECIEVE_TODOS = 'RECIEVE_TODOS';
+export const REQUEST_TODOS = 'REQUEST_TODOS';
+export const INVALIDATE_TODOS = 'INVALIDATE_TODOS';
+export const VALIDATE_TODOS = 'VALIDATE_TODOS';
+
+export const VisibilityFilters = {
+ SHOW_ALL: 'SHOW_ALL',
+ SHOW_COMPLETED: 'SHOW_COMPLETED',
+ SHOW_ACTIVE: 'SHOW_ACTIVE',
+};
+
+function toggleTodoInList(id) {
+ return { type: TOGGLE_TODO, id };
+}
+
+export function setVisibilityFilter(filter) {
+ return { type: SET_VISIBILITY_FILTER, filter };
+}
+
+function requestTodos(list) {
+ return { type: REQUEST_TODOS, list };
+}
+function recieveTodos(list, todos) {
+ return { type: RECIEVE_TODOS, list, todos };
+}
+function invalidateTodos() {
+ return { type: INVALIDATE_TODOS };
+}
+function validateTodos() {
+ return { type: VALIDATE_TODOS };
+}
+
+function addTodoToList(todo) {
+ return { type: ADD_TODO, todo };
+}
+
+export function addTodo(text) {
+ return async (dispatch, getState) => {
+ const state = getState();
+ const { list } = state.lists;
+ if (list) {
+ dispatch(invalidateTodos());
+ const response = await fetch(`${API_ROOT}/lists/${list}/todos`, {
+ body: JSON.stringify({ text }),
+ headers: {
+ Authorization: `Bearer ${getToken()}`,
+ 'content-type': 'application/json',
+ },
+ method: 'POST',
+ });
+ const json = await response.json();
+ const todo = json.data;
+ dispatch(addTodoToList(todo));
+ dispatch(validateTodos());
+ }
+ };
+}
+
+function removeTodoFromList(id) {
+ return { type: REMOVE_TODO, id };
+}
+
+export function removeTodo(id) {
+ return async dispatch => {
+ dispatch(invalidateTodos());
+ const response = await fetch(`${API_ROOT}/todos/${id}`, {
+ headers: {
+ Authorization: `Bearer ${getToken()}`,
+ 'content-type': 'application/json',
+ },
+ method: 'DELETE',
+ });
+ const json = await response.json();
+ if (json.success) {
+ dispatch(removeTodoFromList(id));
+ }
+ dispatch(validateTodos());
+ };
+}
+
+export function toggleTodo(id) {
+ return async (dispatch, getState) => {
+ dispatch(invalidateTodos());
+ const state = getState();
+ const listObj = state.lists.lists[state.lists.list];
+ const todoObj = listObj.todos.find(todo => todo.id === id);
+ const completed = !todoObj.completed;
+ const response = await fetch(`${API_ROOT}/todos/${id}`, {
+ body: JSON.stringify({ completed }),
+ headers: {
+ Authorization: `Bearer ${getToken()}`,
+ 'content-type': 'application/json',
+ },
+ method: 'PATCH',
+ });
+ const json = await response.json();
+ if (json.success) {
+ dispatch(toggleTodoInList(id));
+ }
+ dispatch(validateTodos());
+ };
+}
+
+function editTodoInList(id, todo) {
+ return { type: EDIT_TODO, id, todo };
+}
+
+export function editTodo(id, text) {
+ return async dispatch => {
+ dispatch(invalidateTodos());
+ const response = await fetch(`${API_ROOT}/todos/${id}`, {
+ body: JSON.stringify({ text }),
+ headers: {
+ Authorization: `Bearer ${getToken()}`,
+ 'content-type': 'application/json',
+ },
+ method: 'PATCH',
+ });
+ const json = await response.json();
+ if (json.success) {
+ const todo = json.data;
+ dispatch(editTodoInList(id, todo));
+ }
+ dispatch(validateTodos());
+ };
+}
+
+export function fetchTodos(list) {
+ return async dispatch => {
+ dispatch(requestTodos(list));
+ const response = await fetch(`${API_ROOT}/lists/${list.id}/todos`, {
+ headers: {
+ Authorization: `Bearer ${getToken()}`,
+ },
+ });
+ const json = await response.json();
+ const todos = json.data;
+ dispatch(recieveTodos(list, todos));
+ };
+}
diff --git a/react/src/actions/user.js b/react/src/actions/user.js
new file mode 100644
index 0000000..5e3298e
--- /dev/null
+++ b/react/src/actions/user.js
@@ -0,0 +1,107 @@
+import { API_ROOT, getToken } from './util';
+
+export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
+export const LOGIN_FAIL = 'LOGIN_FAIL';
+export const SIGNUP_SUCCESS = 'SIGNUP_SUCCESS';
+export const SIGNUP_FAIL = 'SIGNUP_FAIL';
+export const LOGOUT = 'LOGOUT';
+export const START_LOGIN = 'INVALIDATE_USER';
+export const REQUEST_USER = 'REQUEST_USER';
+export const VALIDATE_USER = 'VALIDATE_USER';
+export const RESET_USER = 'RESET_USER';
+
+function startLogin() {
+ return { type: START_LOGIN };
+}
+
+function loginSuccess(user) {
+ return { type: LOGIN_SUCCESS, user };
+}
+
+function loginFail(error) {
+ return { type: LOGIN_FAIL, error };
+}
+
+function validateUser() {
+ return { type: VALIDATE_USER };
+}
+
+export function loadUser() {
+ return async dispatch => {
+ if (getToken()) {
+ const response = await fetch(`${API_ROOT}/users/user`, {
+ headers: {
+ Authorization: `Bearer ${getToken()}`,
+ 'content-type': 'application/json',
+ },
+ method: 'GET',
+ });
+ const json = await response.json();
+ if (json.success) {
+ localStorage.setItem('jwt', json.data.jwt);
+ dispatch(loginSuccess(json.data));
+ } else {
+ dispatch(loginFail(json.error));
+ }
+ } else {
+ dispatch(validateUser());
+ }
+ };
+}
+
+export function login(user) {
+ return async dispatch => {
+ dispatch(startLogin());
+ const response = await fetch(`${API_ROOT}/users/login`, {
+ body: JSON.stringify(user),
+ headers: {
+ 'content-type': 'application/json',
+ },
+ method: 'POST',
+ });
+ const json = await response.json();
+ if (json.success) {
+ localStorage.setItem('jwt', json.data.jwt);
+ dispatch(loginSuccess(json.data));
+ } else {
+ dispatch(loginFail(json.error));
+ }
+ };
+}
+
+function signupSuccess(user) {
+ return { type: SIGNUP_SUCCESS, user };
+}
+
+function signupFail(error) {
+ return { type: SIGNUP_FAIL, error };
+}
+
+export function signup(user) {
+ return async dispatch => {
+ dispatch(startLogin());
+ const response = await fetch(`${API_ROOT}/users`, {
+ body: JSON.stringify(user),
+ headers: {
+ 'content-type': 'application/json',
+ },
+ method: 'POST',
+ });
+ const json = await response.json();
+ if (json.success) {
+ localStorage.setItem('jwt', json.data.jwt);
+ dispatch(signupSuccess(json.data));
+ } else {
+ dispatch(signupFail(json.error));
+ }
+ };
+}
+
+export function reset() {
+ return { type: RESET_USER };
+}
+
+export function logout() {
+ localStorage.removeItem('jwt');
+ return { type: LOGOUT };
+}
diff --git a/react/src/actions/util.js b/react/src/actions/util.js
new file mode 100644
index 0000000..c3bffd8
--- /dev/null
+++ b/react/src/actions/util.js
@@ -0,0 +1,5 @@
+export const API_ROOT = '/api';
+
+export function getToken() {
+ return localStorage.getItem('jwt');
+}
diff --git a/react/src/components/App.css b/react/src/components/App.css
new file mode 100644
index 0000000..356c579
--- /dev/null
+++ b/react/src/components/App.css
@@ -0,0 +1,183 @@
+#lists-header {
+ display: flex;
+ justify-content: space-between;
+ background-color: #fbfbfb;
+}
+
+#lists {
+ display: flex;
+ flex-direction: row;
+ flex-grow: 0;
+ max-width: 50%;
+}
+
+#listactions {
+ display: flex;
+ flex-direction: column;
+ margin: 0.2rem 0.1rem;
+}
+
+#listactions button {
+ font-size: 0.9rem;
+ color: #555555;
+ background: none;
+ border: none;
+ margin: 0.1rem 0.3rem;
+ padding: 0.3rem 0.7em;
+}
+
+#listactions button:hover {
+ transition: 0.1s ease-in-out;
+ color: #222222;
+}
+
+#filters {
+ margin-right: 0.75rem;
+ align-self: center;
+ flex-shrink: 0;
+}
+
+#inputs {
+ transition: 0.4s ease-in-out;
+ box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1);
+ display: flex;
+ height: 2.5rem;
+}
+
+#input {
+ color: black;
+ background: white;
+ font-family: "Roboto";
+ box-sizing: border-box;
+ font-size: 1rem;
+ flex-grow: 1;
+ margin: 0;
+ padding: 0;
+ padding-left: 1rem;
+ height: 100%;
+ line-height: 100%;
+ border: none;
+}
+
+#add {
+ color: black;
+ font-size: 1rem;
+ font-weight: 500;
+ flex-grow: 1;
+ margin: 0;
+ padding: 0;
+ height: 100%;
+ max-width: 5rem;
+ background-color: white;
+ border: none;
+}
+
+li:first-child .delete,
+li:first-child .edit,
+li:first-child .save,
+li:first-child .todo {
+ border-top: none;
+}
+
+.done {
+ color: rgba(0, 0, 0, 0.6);
+ text-decoration: line-through;
+}
+
+li button {
+ color: black;
+ outline: none;
+ text-align: left;
+ flex-shrink: 0;
+ box-sizing: border-box;
+ padding: 0.5rem;
+ text-align: center;
+ border: none;
+ border-top: 1px solid #f0f0f0;
+ background: none;
+ width: 2rem;
+ font-size: 1rem;
+ transition: 0.4s ease-in-out;
+ overflow: hidden;
+ box-shadow: inset -3px 0 6px -3px rgba(0, 0, 0, 0.3);
+}
+
+li button.todo {
+ box-shadow: none;
+}
+
+.delete {
+ background-color: pink;
+}
+
+.edit {
+ background-color: lightcyan;
+}
+
+.save {
+ background-color: lightgreen;
+}
+
+ul {
+ margin: 0;
+ padding: 0;
+}
+
+li {
+ height: 60px;
+ width: 100%;
+ font-weight: 500;
+ overflow: hidden;
+ font-size: 1rem;
+ display: flex;
+}
+
+.todo {
+ text-align: left;
+ box-sizing: border-box;
+ word-wrap: break-word;
+ width: 100%;
+ padding: 0.5rem;
+ padding-left: 1rem;
+ border-top: 1px solid #f0f0f0;
+ font-weight: 400;
+ flex-grow: 2;
+ flex-shrink: 1;
+ transition: 0.3s ease-in-out;
+}
+
+.todo--input {
+ background: white;
+ color: black;
+ resize: none;
+ border: none;
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ word-wrap: break-word;
+ width: 100%;
+ height: 100%;
+ max-height: 100%;
+ transition: 0.3s ease-in-out;
+}
+
+.disabled {
+ width: 0;
+ padding: 0.5rem 0;
+}
+
+.filter {
+ margin: 0.1rem;
+ padding: 0.5rem;
+ color: #555555;
+ border: none;
+ background: none;
+ transition: 0.1s ease-in-out;
+ font-size: 1rem;
+ font-weight: 300;
+}
+
+.filter--active {
+ font-weight: 400;
+ color: black;
+}
diff --git a/react/src/components/App.js b/react/src/components/App.js
new file mode 100644
index 0000000..8823a46
--- /dev/null
+++ b/react/src/components/App.js
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { BrowserRouter as Router, Route } from 'react-router-dom';
+
+import 'normalize.css';
+import './Container.css';
+import './App.css';
+
+import TodosContainer from '../containers/TodosContainer';
+import LoginForm from '../components/user/LoginForm';
+import SignupForm from '../components/user/SignupForm';
+
+export default class App extends React.Component {
+ componentDidMount() {
+ this.props.loadUser();
+ }
+
+ render() {
+ return (
+
+
+
+
+ );
+ }
+}
+
+App.propTypes = {
+ loadUser: PropTypes.func.isRequired,
+};
diff --git a/react/src/components/Container.css b/react/src/components/Container.css
new file mode 100644
index 0000000..387c75f
--- /dev/null
+++ b/react/src/components/Container.css
@@ -0,0 +1,50 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
+
+body {
+ background: white;
+ color: black;
+ font-family: 'Roboto';
+ user-select: none;
+}
+
+#root {
+ margin-top: 5rem;
+}
+
+#container {
+ overflow: hidden;
+ margin: 0 auto;
+ padding: 0;
+ max-width: 25rem;
+ border: 1px solid #dddddd;
+ border-radius: 7px;
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+}
+
+#user-header {
+ display: flex;
+ height: 2rem;
+ position: relative;
+ z-index: 20;
+ box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1);
+ justify-content: flex-end;
+ align-content: center;
+}
+
+#user-header button {
+ box-sizing: border-box;
+ margin-right: 0.2rem;
+ height: 100%;
+ flex-grow: 0;
+ flex-shrink: 1;
+ color: #888888;
+ border: none;
+ background: none;
+ transition: 0.1s ease-in-out;
+ font-size: 0.8rem;
+ font-weight: 300;
+}
+
+#user-header button:hover {
+ color: #555555;
+}
diff --git a/react/src/components/Form.css b/react/src/components/Form.css
new file mode 100644
index 0000000..84fc72e
--- /dev/null
+++ b/react/src/components/Form.css
@@ -0,0 +1,22 @@
+#form {
+ padding: 2rem 1rem;
+}
+
+input {
+ border: none;
+ border-bottom: 1px solid #999999;
+ margin-left: 1rem;
+ height: 2rem;
+}
+
+.error {
+ margin: 1rem;
+ color: red;
+}
+
+form button {
+ padding: 0.25rem 1rem;
+ background: #f5f5f5;
+ border: 1px solid #f0f0f0;
+ box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1);
+}
diff --git a/react/src/components/Header.js b/react/src/components/Header.js
new file mode 100644
index 0000000..7d4811a
--- /dev/null
+++ b/react/src/components/Header.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import FilterLink from '../containers/FilterLink';
+import LogoutLink from '../containers/LogoutLink';
+import { VisibilityFilters } from '../actions/todos';
+import Lists from '../components/Lists';
+
+export default function Header() {
+ return (
+
+ );
+}
diff --git a/react/src/components/Input.js b/react/src/components/Input.js
new file mode 100644
index 0000000..c5bfb88
--- /dev/null
+++ b/react/src/components/Input.js
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+
+function Input(props) {
+ let input;
+
+ function submit() {
+ if (input.value.trim() !== '') {
+ props.onClick(input.value);
+ }
+ input.value = '';
+ }
+
+ return (
+
+ submit()}>
+ add
+
+
+ );
+}
+
+Input.propTypes = {
+ onClick: PropTypes.func.isRequired,
+};
+
+export default Input;
diff --git a/react/src/components/ListActions.js b/react/src/components/ListActions.js
new file mode 100644
index 0000000..1749eaf
--- /dev/null
+++ b/react/src/components/ListActions.js
@@ -0,0 +1,44 @@
+import { faTrash, faEdit, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default function ListActions({
+ startCreateList,
+ removeList,
+ startEditList,
+ creating,
+ list,
+}) {
+ const editRemoveButtons = list
+ ? [
+ removeList()}>
+ ,
+ startEditList()}>
+ ,
+ ]
+ : null;
+ return (
+
+ startCreateList()}>
+
+ {!list && !creating ? 'add list' : null}
+ {editRemoveButtons}
+
+ );
+}
+
+ListActions.defaultProps = {
+ list: '',
+};
+
+ListActions.propTypes = {
+ startCreateList: PropTypes.func.isRequired,
+ removeList: PropTypes.func.isRequired,
+ startEditList: PropTypes.func.isRequired,
+ creating: PropTypes.bool.isRequired,
+ list: PropTypes.string,
+};
diff --git a/react/src/components/Lists.js b/react/src/components/Lists.js
new file mode 100644
index 0000000..fe2732a
--- /dev/null
+++ b/react/src/components/Lists.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import ListActionsContainer from '../containers/ListActionsContainer';
+import SelectorContainer from '../containers/SelectorContainer';
+
+export default function Lists() {
+ return (
+
+
+ );
+}
diff --git a/react/src/components/Selector.css b/react/src/components/Selector.css
new file mode 100644
index 0000000..36ac573
--- /dev/null
+++ b/react/src/components/Selector.css
@@ -0,0 +1,50 @@
+#listselector {
+ display: flex;
+ margin-left: 0.2rem;
+ overflow: hidden;
+ align-self: center;
+ background-color: #fbfbfb;
+ flex-grow: 1;
+}
+
+#listselector input {
+ padding: 0;
+ color: black;
+ font-size: 1.5rem;
+ font-weight: 400;
+ outline: none;
+ border: none;
+ background-color: #fbfbfb;
+ border-bottom: 1px solid #888888;
+ width: 80%;
+}
+
+#listselector button {
+ width: 20%;
+ font-size: 0.9rem;
+ color: #1b881b;
+ background: none;
+ border: none;
+ margin: 0.1rem 0.3rem;
+ padding: 0.3rem 0.7em;
+}
+
+#listselector select {
+ max-width: 100%;
+ color: black;
+ font-size: 1.5rem;
+ font-weight: 400;
+ outline: none;
+ border: none;
+ background-color: #fbfbfb;
+}
+
+#listselector select option {
+ max-width: 100%;
+ color: black;
+ font-size: 1.5rem;
+ font-weight: 400;
+ outline: none;
+ border: none;
+ background-color: #fbfbfb;
+}
diff --git a/react/src/components/Selector.js b/react/src/components/Selector.js
new file mode 100644
index 0000000..de87083
--- /dev/null
+++ b/react/src/components/Selector.js
@@ -0,0 +1,86 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPlus, faCheck } from '@fortawesome/free-solid-svg-icons';
+
+import './Selector.css';
+
+export default function Selector({
+ lists,
+ list,
+ onChange,
+ editing,
+ creating,
+ addList,
+ editList,
+ dirty,
+}) {
+ if (creating) {
+ let input = null;
+ return (
+
+ addList(input.value)}>
+
+
+ );
+ }
+ if (editing) {
+ let input = null;
+ return (
+
+ editList(input.value)}>
+
+
+ );
+ }
+ if (list === null && dirty) {
+ return loading
;
+ }
+ const listElements = Object.values(lists.lists).map(elem => (
+
+ {elem.name}
+
+ ));
+ if (list) {
+ return (
+
+ onChange(e.target.value)}>
+ {listElements}
+
+
+ );
+ }
+ return null;
+}
+
+Selector.defaultProps = {
+ list: '',
+};
+
+Selector.propTypes = {
+ list: PropTypes.string,
+ editing: PropTypes.bool.isRequired,
+ creating: PropTypes.bool.isRequired,
+ onChange: PropTypes.func.isRequired,
+ editList: PropTypes.func.isRequired,
+ addList: PropTypes.func.isRequired,
+ lists: PropTypes.object.isRequired,
+ dirty: PropTypes.bool.isRequired,
+};
diff --git a/react/src/components/Todo.js b/react/src/components/Todo.js
new file mode 100644
index 0000000..76dc402
--- /dev/null
+++ b/react/src/components/Todo.js
@@ -0,0 +1,129 @@
+import { faTrash, faEdit, faCheck } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { animated } from 'react-spring';
+
+class Todo extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ hover: false,
+ };
+ this.onMouseOver = this.onMouseOver.bind(this);
+ this.onMouseOut = this.onMouseOut.bind(this);
+ this.startEdit = this.startEdit.bind(this);
+ this.stopEdit = this.stopEdit.bind(this);
+ }
+
+ onMouseOver() {
+ this.setState({
+ ...this.state,
+ hover: true,
+ });
+ }
+ onMouseOut() {
+ this.setState({
+ ...this.state,
+ hover: false,
+ });
+ }
+
+ startEdit() {
+ this.setState({
+ ...this.state,
+ editing: true,
+ });
+ }
+ stopEdit(value) {
+ this.props.editTodo(value);
+ this.setState({
+ ...this.state,
+ editing: false,
+ });
+ }
+
+ render() {
+ const deleteClasses = ['delete'];
+ const editClasses = ['edit'];
+ if (!this.state.hover) {
+ deleteClasses.push('disabled');
+ editClasses.push('disabled');
+ }
+
+ const todoClasses = ['todo'];
+ if (this.props.todo.completed) {
+ todoClasses.push('done');
+ }
+
+ let input;
+
+ const text = this.state.editing ? (
+
+