Feature: add bulk functionality

README.md

@@ -4,9 +4,10 @@
 
 - [ ] 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
+- [ ] Fix: bug with clicking just off the label completes wrong todo
+- [x] Feature: Add all bulk functionality: complete all, delete completed (included interesting [debounce-like solution](https://github.com/cerebralideas/todomvc-offline-react-pouchdb/blob/d4022b5730eababf386c315fa8640bfb837600d9/client/state/utilities.ts)) [(#d4022b5)](https://github.com/cerebralideas/todomvc-offline-react-pouchdb/commit/d4022b5730eababf386c315fa8640bfb837600d9)
+- [x] Feature: Add all basic todo functionality: add, complete, delete [(#ddb09fb)](https://github.com/cerebralideas/todomvc-offline-react-pouchdb/commit/ddb09fb84cc21918e22b5dca246ca4e828f29a9e)
+- [x] Get the app to rerender when the PouchDB is updated [(#c242fdb)](https://github.com/cerebralideas/todomvc-offline-react-pouchdb/commit/c242fdbb15df8bc324fb576d30aed464519fbc22)
 - [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)
 

client/events/index.ts

@@ -75,9 +75,52 @@ export function deleteTodo(event, _id: string): void {
 }
 export function completeAll(event, todos): void {
 	// Fire action on db
-	return;
+	const incompleteTodos = [];
+	let hasIncompleteTodos = false;
+
+	for (let i = 0; i < todos.length; i++) {
+		if (todos[i].completed === false) {
+			hasIncompleteTodos = true;
+			break;
+		}
+	}
+	for (let i = 0; i < todos.length; i++) {
+		if (hasIncompleteTodos) {
+			if (todos[i].completed === false) {
+				let todo = {
+					// spread properties to prevent mutation
+					...todos[i],
+					completed: !todos[i].completed
+				};
+				incompleteTodos.push(todo);
+			}
+		} else {
+			let todo = {
+				// spread properties to prevent mutation
+				...todos[i],
+				completed: false
+			};
+			incompleteTodos.push(todo);
+		}
+	}
+	db.bulkDocs(incompleteTodos).then((response) => {
+		console.log('Todos have been completed');
+	});
 }
 export function clearCompleted(event, todos): void {
 	// Fire action on db
-	return;
+	const clearedTodos = [];
+	for (let i = 0; i < todos.length; i++) {
+		if (todos[i].completed === true) {
+			let todo = {
+				// spread properties to prevent mutation
+				...todos[i],
+				_deleted: true
+			};
+			clearedTodos.push(todo);
+		}
+	}
+	db.bulkDocs(clearedTodos).then((response) => {
+		console.log('Completed todos have been cleared');
+	});
 }

client/state/state-mgmt.ts

@@ -1,27 +1,13 @@
 import React, { useEffect, useState } from 'react';
 import db from './store';
-
-export function handleTodoChange(todos, change) {
-	let index = -1;
-	for (let i = 0; i < todos.length; i++) {
-		if (todos[i]._id === change.doc._id) {
-			index = i;
-			break;
-		}
-	}
-	if (index === -1) {
-		return [change.doc, ...todos];
-	} else if (change.deleted) {
-		return [...todos.slice(0, index), ...todos.slice(index + 1)];
-	} else {
-		return [...todos.slice(0, index), change.doc, ...todos.slice(index + 1)];
-	}
-}
+import { delayAndBatch, handleTodoChange } from './utilities';
 
 export function useStateMgmt(state) {
 	const [todos, updateTodos] = useState(state.todos);
 	const [filter, updateFilter] = useState(state.filter);
 
+	let handleBatch = delayAndBatch(updateTodos, todos);
+
 	useEffect(() => {
 		const changes = db
 			.changes({
@@ -32,9 +18,8 @@ export function useStateMgmt(state) {
 				timeout: false
 			})
 			.on('change', (change) => {
-				updateTodos((todos) => {
-					return handleTodoChange(todos, change);
-				});
+				console.log(change);
+				handleBatch(handleTodoChange, change);
 			});
 
 		return () => changes.cancel();

client/state/utilities.ts

@@ -0,0 +1,28 @@
+export function handleTodoChange(todos, change) {
+	let index = -1;
+	for (let i = 0; i < todos.length; i++) {
+		if (todos[i]._id === change.doc._id) {
+			index = i;
+			break;
+		}
+	}
+	if (index === -1) {
+		return [change.doc, ...todos];
+	} else if (change.deleted) {
+		return [...todos.slice(0, index), ...todos.slice(index + 1)];
+	} else {
+		return [...todos.slice(0, index), change.doc, ...todos.slice(index + 1)];
+	}
+}
+
+export function delayAndBatch(dispatch, todos) {
+	let timer;
+	let tempTodos = todos;
+	return (fn, change) => {
+		tempTodos = fn(tempTodos, change);
+		clearTimeout(timer);
+		timer = setTimeout(() => {
+			dispatch(tempTodos);
+		}, 100);
+	};
+}