From ddb09fb84cc21918e22b5dca246ca4e828f29a9e Mon Sep 17 00:00:00 2001 From: cerebrl Date: Tue, 13 Aug 2019 18:52:39 -0500 Subject: [PATCH] Feature: add basic functionality --- README.md | 20 +- client/actions/index.ts | 13 - client/components/footer.tsx | 14 +- client/components/header.tsx | 2 +- client/components/todo-item.tsx | 12 +- client/components/todo-list.tsx | 6 +- client/components/todo-text-input.tsx | 6 +- client/components/toggle-all.tsx | 13 +- .../constants/{todo-filters.ts => index.ts} | 0 client/events/client-events.ts | 50 -- client/events/index.ts | 83 +++ client/index.tsx | 11 +- client/interfaces/index.ts | 11 +- client/reducers/filter.ts | 13 - client/reducers/index.ts | 10 - client/reducers/todos.test.ts | 59 -- client/reducers/todos.ts | 46 -- client/routes/index.ts | 11 + client/routes/routes.client.ts | 14 - client/state/state-mgmt.ts | 46 ++ client/{store => state}/store.ts | 0 client/store/state-mgmt.ts | 17 - client/views/app.tsx | 6 +- public/main.js | 632 +----------------- 24 files changed, 224 insertions(+), 871 deletions(-) delete mode 100644 client/actions/index.ts rename client/constants/{todo-filters.ts => index.ts} (100%) delete mode 100644 client/events/client-events.ts create mode 100644 client/events/index.ts delete mode 100644 client/reducers/filter.ts delete mode 100644 client/reducers/index.ts delete mode 100644 client/reducers/todos.test.ts delete mode 100644 client/reducers/todos.ts create mode 100644 client/routes/index.ts delete mode 100644 client/routes/routes.client.ts create mode 100644 client/state/state-mgmt.ts rename client/{store => state}/store.ts (100%) delete mode 100644 client/store/state-mgmt.ts diff --git a/README.md b/README.md index d747c99..ba0ac96 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,27 @@ # "Offline-First" TodoMVC Example +## Progress + +- [ ] Feature: Add routing capability +- [ ] Feature: Add edit capability +- [ ] Feature: Add all bulk functionality: complete all, delete completed +- [x] Feature: Add all basic todo functionality: add, complete, delete +- [x] Get the app to rerender when the PouchDB is updated +- [x] Get the TodoMVC app to render todos stored within IndexedDB using PouchDB +- [x] Initialize the application from [this previous TodoMVC application](https://github.com/cerebralideas/todomvc-universal-react-pouchdb) + + ## Up and Running 1. Install the dependencies found in the `package.json` 2. Compile the TypeScript to JavaScript -3. Run the server ``` npm install npm run build ``` -4. Open `public/index.html` in your browser. +3. Open `public/index.html` in your browser. ## What's an "offline-first" application? @@ -92,9 +102,3 @@ _If you have other helpful links to share, or find any of the links above no lon ## How it works Coming soon ... - -## TODO - -- [ ] Get the app to rerender when the PouchDB is updated -- [x] Get the TodoMVC app to render todos stored within IndexedDB using PouchDB -- [x] Initialize the application from [this previous TodoMVC application](https://github.com/cerebralideas/todomvc-universal-react-pouchdb) diff --git a/client/actions/index.ts b/client/actions/index.ts deleted file mode 100644 index 644f7ab..0000000 --- a/client/actions/index.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { createAction } from 'redux-actions'; - -export const addTodo = createAction('ADD_TODO', (title): { title: string } => ({ title })); -export const deleteTodo = createAction('DELETE_TODO', (id): { id: number } => ({ id })); -export const editTodo = createAction('EDIT_TODO', (id, title): { id: number; title: string } => ({ id, title })); -export const completeTodo = createAction('COMPLETE_TODO', (id): { id: number } => ({ id })); -export const completeAll = createAction('COMPLETE_ALL', (): {} => ({})); -export const clearCompleted = createAction('CLEAR_COMPLETED', (): {} => ({})); -export const showAll = createAction('SHOW_ALL', (): { filter: string } => ({ filter: 'show_all' })); -export const showActive = createAction('SHOW_ACTIVE', (): { filter: string } => ({ filter: 'show_active' })); -export const showCompleted = createAction('SHOW_COMPLETED', (): { filter: string } => ({ - filter: 'show_completed' -})); diff --git a/client/components/footer.tsx b/client/components/footer.tsx index 0ecdb7c..e7d91eb 100644 --- a/client/components/footer.tsx +++ b/client/components/footer.tsx @@ -1,9 +1,9 @@ import React from 'react'; -import { AppContext } from '../store/state-mgmt'; -import { completeAll, clearCompleted } from '../events/client-events'; -import { SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE } from '../constants/todo-filters'; +import { AppContext } from '../state/state-mgmt'; +import { completeAll, clearCompleted } from '../events'; +import { SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE } from '../constants'; -import { State } from '../interfaces'; +import { State, Todo } from '../interfaces'; let FILTER_TITLES = { [SHOW_ALL]: 'All', @@ -16,9 +16,10 @@ interface Props { count?: number; filter?: string; active?: number; + todos?: Todo[] } -function Footer({ filter, count, completed, active }: Props) { +function Footer({ filter, count, completed, active, todos }: Props) { if (count) { function RenderTodoCount() { @@ -48,7 +49,7 @@ function Footer({ filter, count, completed, active }: Props) { if (completed > 0) { return ( ); @@ -93,6 +94,7 @@ export default function () { count={ count } completed={ completed } active={ active } + todos={ todos } /> ); }} diff --git a/client/components/header.tsx b/client/components/header.tsx index 6fdea58..8a3cb4c 100644 --- a/client/components/header.tsx +++ b/client/components/header.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { AppContext } from '../store/state-mgmt'; +import { AppContext } from '../state/state-mgmt'; import TodoTextInput from './todo-text-input'; import { State } from '../interfaces'; diff --git a/client/components/todo-item.tsx b/client/components/todo-item.tsx index 9079ed0..4f0d1c3 100644 --- a/client/components/todo-item.tsx +++ b/client/components/todo-item.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import TodoTextInput from './todo-text-input'; -import { deleteTodo, completeTodo } from '../events/client-events'; +import { deleteTodo, completeTodo } from '../events'; import { Todo } from '../interfaces'; @@ -45,16 +45,16 @@ export default function TodoItem ({ todo, filter }: Prop) { // save
+ action={ `/todos/${ todo._id }?type=COMPLETE_TODO&filter=${ filter }` }> completeTodo(event, todo.id) } /> + onChange={ (event) => completeTodo(event, todo._id) } />