Finished adjusting todo logic

Author: Volodymyr Kopytin

src/examples/reflux-ts/components/main/index.ts

@@ -12,7 +12,6 @@ export const selectCompleteItems = (items = []) => pick(items, item => selectIte
 export const selectNewTodoTitle = ({ newTodoTitle = '' }) => newTodoTitle;
 export const selectToggleAllComplete = ({ toggleAllComplete }) => toggleAllComplete;
 
-
 export const [MainActions, MainActionTypes, mainReducer] = declareActions({
     UI_CREATE_TODO: {
         uiCreateTodo: (type, payload) => ({ type, payload })
@@ -109,7 +108,7 @@ export const main = () => {
         ),
         pipe(
             ofType(MainActionTypes.UI_CLEAR_COMPLETED),
-            withArg(pipe(onState, queryMain, queryItems, queryCompleteItems)),
+            withArg(pipe(onState, queryTodos, queryItems, queryCompleteItems)),
             map(([a, completeItems = []]) => completeItems.map(item => ToDoActions.deleteTodo(item.id)))
         )
     );
@@ -120,7 +119,7 @@ export const main = () => {
         ),
         pipe(
             merge(createItem, deleteItem),
-            map(() => [ToDoActions.fetchItems()])
+            map(() => ToDoActions.fetchItems())
         ),
         pipe(
             merge(changeItems, createItem, deleteItem),

src/examples/reflux-ts/components/main/template.tsx

@@ -52,9 +52,6 @@ function mapDispatchToProps(dispatch, props) {
 export const MainView = connect(mapStateToProps, mapDispatchToProps)(({ dispatch, ...props } = {
 
 } as ReturnType<typeof mapDispatchToProps> & ReturnType<typeof mapStateToProps>) => <main>
-    <TodoListView items={props.errors}>
-    </TodoListView>
-    <TodoListView items={props}>{(item, key) => <div><span>{key}</span>:<span>{JSON.stringify(item)}</span></div>}</TodoListView>
     <section className="todoapp device-content">
         <header className="bar bar-nav">
             <button className={cn('btn pull-left ?active', props.toggleAllComplete)}>
@@ -90,13 +87,13 @@ export const MainView = connect(mapStateToProps, mapDispatchToProps)(({ dispatch
         </section>
         <footer className={cn('footer bar bar-standard bar-footer ?hidden', props.hasTodos)}>
             <span className="todo-count title">
-                <strong>{props.todoCount}</strong>&nbsp;
-            {props.manyTasks
+                <strong>{props.activeItems ? props.activeItems.length : 0}</strong>&nbsp;
+            {!(props.activeItems && props.activeItems.length === 1)
                     ? <span className="items-word">items</span>
                     : <span className="item-word">item</span>
                 }
             &nbsp;left from&nbsp;
-            <span className="total">{props.totalText}</span>
+            <span className="total">{props.items ? props.items.length : 0}</span>
             </span>
         </footer>
         <section className={cn('content ?hidden', props.hasTodos)}>

src/examples/reflux-ts/components/todoItem/template.tsx

@@ -44,6 +44,24 @@ function mapDispatchToProps(dispatch, props) {
     };
 }
 
+function setCaretAtStartEnd(node, atEnd) {
+    const sel = document.getSelection();
+    node = node.firstChild;
+  
+    if (sel.rangeCount) {
+        ['Start', 'End'].forEach(pos =>
+            sel.getRangeAt(0)["set" + pos](node, atEnd ? node.length : 0)
+        )
+    }
+}
+
+function focusEditbox(el) {
+    el.focus();
+    if (el.textContent) {
+        setCaretAtStartEnd(el, true);
+    }
+}
+
 export const TodoListViewItem = connect(mapStateToProps, mapDispatchToProps)(({ dispatch, ...props } = {
 
 } as ReturnType<typeof mapDispatchToProps> & ReturnType<typeof mapStateToProps>) => <div className={cn(
@@ -56,13 +74,13 @@ export const TodoListViewItem = connect(mapStateToProps, mapDispatchToProps)(({
                 onChange={e => props.uiSetComplete(props.id, e.target['checked'])}
             />
         </span>
-        <span>{`${props.id}`}</span>&nbsp;-&nbsp;
         <span className="input-group" style={"display: inline-block; width: 70%;" as any}>
             {(props.current && props.current.id === props.id) || <label className="view input" style={"padding: 1px 1px 1px 1px;" as any}
                 onClick={e => props.uiSetCurrentItem(props.id)}
             >{props.title}</label>}
             {(props.current && props.current.id === props.id) && <div className="edit" style={"border: 1px solid grey;outline: none;" as any}
                 contentEditable={true}
+                ref={el => focusEditbox(el)}
                 onInput={e => props.uiUpdateCurrentTitle(e.target['innerText'])}
                 onKeyPress={e => props.updateOnEnter(e, props.current.id)}
                 onKeyUp={e => props.revertOnEscape(e)}

src/examples/reflux-ts/models/todos.ts

@@ -64,7 +64,8 @@ export const [ToDoActions, ToDoActionTypes, toDoReducer] = declareActions({
                 items: {
                     ...selectItems(state),
                     [payload.id]: payload
-                }
+                },
+                order: [payload.id, ...selectOrder(state)]
             };
         }
     },
@@ -146,11 +147,12 @@ export const [ToDoActions, ToDoActionTypes, toDoReducer] = declareActions({
     },
     DELETE_TODO_RESULT: {
         deleteTodoResult: (type, payload) => ({ type, payload }),
-        reducer: ({ loading, ...state }: any = {}, { type, payload: { id } }) => {
-            const { [id]: removed, ...items } = selectItems(state) as any;
+        reducer: ({ loading, ...state }: any = {}, { type, payload: id }) => {
+            const { [id]: removed, ...items } = selectItemsInternal(state) as any;
             return {
                 ...state,
-                items
+                items,
+                order: selectOrder(state).filter(pos => pos !== id)
             };
         }
     },
@@ -160,7 +162,7 @@ export const [ToDoActions, ToDoActionTypes, toDoReducer] = declareActions({
             (async () => {
                 try {
                     const item = await adapter.deleteTodo(id);
-                    dispatch(ToDoActions.deleteTodoResult(item));
+                    dispatch(ToDoActions.deleteTodoResult(id));
                 } catch (ex) {
                     dispatch(ToDoActions.deleteTodoError(ex));
                 }
@@ -184,8 +186,9 @@ const selectItemsById = (items = []) => items.reduce((res, item) => ({
     [item.id]: item
 }), {});
 const selectItemsOrder = (items = []) => items.map(({ id }) => id);
+const selectOrder = ({ order }) => order;
 export const selectTodos = ({ todos }) => todos;
-export const selectItemsInternal = ({ items = [] }) => items;
+export const selectItemsInternal = ({ items = {} }) => items;
 export const selectItems = ({ items = {}, order = [] }) => order.map(id => items[id]);
 
 export const queryTodos = map(selectTodos);

src/examples/reflux-ts/utils.ts

@@ -19,15 +19,28 @@ export function className(str: string, ...args) {
     return res.join(' ');
 }
 
+function isArray(input) {
+    if (input instanceof Array || Object.prototype.toString.call(input) === '[object Array]') {
+        return true;
+    } else return false;
+}
+
 export function pick(obj, fn) {
     const keys = Object.keys(obj);
-    return keys.reduce((res, key) => {
+    return keys.reduce((res: any, key) => {
         if (fn(obj[key])) {
-            return {
-                ...res,
-                [key]: obj[key]
-            };
+            if (isArray(obj)) {
+                return [
+                    ...res,
+                    obj[key]
+                ];
+            } else {
+                return {
+                    ...res,
+                    [key]: obj[key]
+                };
+            }
         }
         return res;
-    }, {});
+    }, isArray(obj) ? [] : {});
 }

src/examples/reflux-ts/virtualDom.ts

@@ -36,7 +36,9 @@ function arrayMerge(array1, array2) {
 }
 
 export function el(type, attrs = {}, ...children) {
-    children = [].concat(...children).filter(a => [undefined, true, false].indexOf(a) === -1);
+    children = [].concat(...children)
+        .filter(a => [undefined, true, false].indexOf(a) === -1)
+        .map(item => (['object', 'function'].indexOf(typeof item) === -1 ? '' + item : item));
     if (typeof type === 'function') {
         return type({ ...attrs, store: currentStore, children: children.length > 1 ? children : children[0] }, children);
     }
@@ -54,7 +56,7 @@ export function makeVdom(oldDom, store) {
         if (node === undefined) {
             return document.createTextNode('');
         }
-        if (typeof node === 'string') {
+        if (['object', 'function'].indexOf(typeof node) === -1) {
             return document.createTextNode(node);
         }
         if (typeof node.type === 'function') {
@@ -65,14 +67,16 @@ export function makeVdom(oldDom, store) {
             return $el;
         }
         const { type, attrs = {}, children } = node;
-        return dom.el(type, attrs, ...[].concat(children).map(child => createElement(child)));
+        const { ref, ...attributes } = (attrs || {});
+        const el = dom.el(type, attributes, ...[].concat(children).map(child => createElement(child)));
+        return el;
     }
 
     function compare($el, newNode, oldNode) {
         if (typeof newNode !== typeof oldNode) {
             return true;
         }
-        if (typeof newNode === 'string') {
+        if (['object', 'function'].indexOf(typeof newNode) === -1) {
             if (newNode !== oldNode) {
                 const oldValue = $el.textContent;
                 if (oldValue !== newNode) {
@@ -179,6 +183,9 @@ export function makeVdom(oldDom, store) {
                     )];
             }
         }
+        if (newNode && newNode.attrs && newNode.attrs.ref) {
+            newNode.attrs.ref($parent.childNodes[index]);
+        }
         return nodesToRemove;
     }