Code refactoring to improve code readability

Volodymyr Kopytin · Volodymyr Kopytin · commit a9de09173bea · 2020-07-25T15:58:02.000+02:00
diff --git a/src/examples/editor/css/custom.css b/src/examples/editor/css/custom.css
diff --git a/src/examples/editor/css/index.css b/src/examples/editor/css/index.css
@@ -1,13 +1,37 @@
 @import './custom.css';
 
 .html-editor {
-    width: 100%;
+    width: 96%;
     height: 100vh;
 }
 .save {
     position: fixed;
 }
 
+.region {
+    height: 100vh;
+    white-space: initial;
+}
+
+.editor-placeholder {
+    overflow: auto;
+}
+
 .wysiwyg-editor {
-    padding: 10px;
-}
+    margin: 10px;
+    width: 96%;
+}
+
+.row {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 100%;
+}
+  
+.column {
+    display: flex;
+    flex-direction: column;
+    flex-basis: 100%;
+    flex: 1;
+}
diff --git a/src/examples/editor/templates/main.ts b/src/examples/editor/templates/main.ts
@@ -1,13 +1,17 @@
 export const template = data => `
-    <div class="editor-placeholder">
-        <div class="toolbar">
-            <button class="save">Save</button>
-        </div>
-        <div class="editor wysiwyg-editor article cke_editable cke_editable_themed cke_contents_ltr cke_show_borders" contenteditable="true">
+<div class="row">
+    <div class="column editor-placeholder">
+        <div class="region">
+            <div class="toolbar">
+                <button class="save">Save</button>
+            </div>
+            <div class="editor wysiwyg-editor article cke_editable cke_editable_themed cke_contents_ltr cke_show_borders" contenteditable="true">
+            </div>
         </div>
     </div>
-    <div class="html-editor-placeholder">
+    <div class="column html-editor-placeholder region">
         <textarea class="html-editor">
         </textarea>
     </div>
+</div>
 `;
diff --git a/src/examples/reflux-ts/components/main/index.ts b/src/examples/reflux-ts/components/main/index.ts
@@ -1,6 +1,6 @@
 import { declareActions } from '../../declareActions';
 import { map, ofType, pipe, merge, filter, withArg, onAction, onState, onDispatch } from '../../itrx';
-import { ToDoActions, changeItems, queryItems, queryTodos, deleteItem, createItem, ToDoActionTypes } from '../../models/todos';
+import { ToDoActions, whenChangeItems, queryItems, queryTodos, whenDeleteItem, whenCreateItem, whenCreateTodoResult } from '../../models/todos';
 import { pick } from '../../utils';
 
 
@@ -70,6 +70,8 @@ const queryCompleteItems = map(selectCompleteItems);
 const whenUpdateNewTitle = ofType(MainActionTypes.UI_UPDATE_NEW_TITLE);
 const whenCreateTodo = ofType(MainActionTypes.UI_CREATE_TODO);
 const whenToggleAllComplete = ofType(MainActionTypes.UI_TOGGLE_ALL_COMPLETE);
+const whenSetActiveFilter = ofType(MainActionTypes.UI_SET_ACTIVE_FILTER);
+const whenClearCompleted = ofType(MainActionTypes.UI_CLEAR_COMPLETED);
 
 const API = {
     markAllItemsCompleted(items: Array<{ id; }>, complete = true) {
@@ -89,40 +91,43 @@ export const main = () => {
         )
     );
     const fromView = merge(
-        pipe(whenCreateTodo,
+        pipe(
+            whenCreateTodo,
             withArg(pipe(onState, queryMain, queryNewTodoTitle)),
             map(([a, newTodoTitle]) => ToDoActions.createTodo(newTodoTitle))
         ),
-        pipe(whenUpdateNewTitle,
+        pipe(
+            whenUpdateNewTitle,
             map(({ payload }) => MainActions.updateNewTodoTitle(payload))
         ),
-        pipe(whenToggleAllComplete,
+        pipe(
+            whenToggleAllComplete,
             withArg(pipe(onState, queryTodos, queryItems), pipe(onState, queryMain, queryToggleAllComplete)),
             map(([, items, isCompleted]) => API.markAllItemsCompleted(items, isCompleted)),
             map(completedItems => completedItems.map(item => ToDoActions.updateTodo(item.id, item)))
         ),
         pipe(
-            ofType(MainActionTypes.UI_SET_ACTIVE_FILTER),
+            whenSetActiveFilter,
             withArg(pipe(onState, queryTodos, queryItems)),
             map(([a, todos]) => MainActions.updateItems(todos))
         ),
         pipe(
-            ofType(MainActionTypes.UI_CLEAR_COMPLETED),
+            whenClearCompleted,
             withArg(pipe(onState, queryTodos, queryItems, queryCompleteItems)),
             map(([a, completeItems = []]) => completeItems.map(item => ToDoActions.deleteTodo(item.id)))
         )
     );
     const fromService = merge(
         pipe(
-            ofType(ToDoActionTypes.CREATE_TODO_RESULT),
+            whenCreateTodoResult,
             map(() => MainActions.updateNewTodoTitle(''))
         ),
         pipe(
-            merge(createItem, deleteItem),
+            merge(whenCreateItem, whenDeleteItem),
             map(() => ToDoActions.fetchItems())
         ),
         pipe(
-            merge(changeItems, createItem, deleteItem),
+            merge(whenChangeItems, whenCreateItem, whenDeleteItem),
             withArg(pipe(onState, queryTodos, queryItems)),
             map(([action, todos]) => {
                 return MainActions.updateItems(todos);
diff --git a/src/examples/reflux-ts/components/main/template.tsx b/src/examples/reflux-ts/components/main/template.tsx
@@ -63,19 +63,23 @@ export const MainView = connect(mapStateToProps, mapDispatchToProps)(({ dispatch
             </button>
             <button className={cn('clear-completed btn pull-right ?hidden', props.showClearCompleted)}
                 onClick={e => props.uiClearCompleted()}
-            >Clear completed</button>
+                >Clear completed</button>
+            <hr/>
             <div className="filters segmented-control">
                 <a className={cn("control-item ?active", !props.activeFilter)} href="#/"
                     onClick={evnt => props.uiSetActiveFilter('all')}
-                >All</a>
+                    >All</a>
+                    &nbsp;•&nbsp;
                 <a className={cn("control-item ?active", props.activeFilter === 'active')} href="#/active"
                     onClick={evnt => props.uiSetActiveFilter('active')}
-                >Active</a>
+                    >Active</a>
+                    &nbsp;•&nbsp;
                 <a className={cn("control-item ?active", props.activeFilter === 'completed')} href="#/completed"
                     onClick={evnt => props.uiSetActiveFilter('complete')}    
-                >Completed</a>
+                    >Completed</a>
             </div>
         </header>
+        <hr/>
         <section className="bar bar-standard bar-header-secondary">
             <form onSubmit={e => e.preventDefault()}>
                 <input className="new-todo" type="search" placeholder="What needs to be done?"
@@ -85,6 +89,7 @@ export const MainView = connect(mapStateToProps, mapDispatchToProps)(({ dispatch
                 />
             </form>
         </section>
+        <hr/>
         <footer className={cn('footer bar bar-standard bar-footer ?hidden', props.hasTodos)}>
             <span className="todo-count title">
                 <strong>{props.activeItems ? props.activeItems.length : 0}</strong>&nbsp;
diff --git a/src/examples/reflux-ts/components/todoItem/index.ts b/src/examples/reflux-ts/components/todoItem/index.ts
@@ -1,6 +1,6 @@
 import { declareActions } from '../../declareActions';
 import { map, ofType, pipe, merge, filter, withArg, onAction, onState, onDispatch } from '../../itrx';
-import { ToDoActions, queryItems, queryTodos, ToDoActionTypes } from '../../models/todos';
+import { ToDoActions, queryItems, queryTodos, whenUpdateTodoResult } from '../../models/todos';
 
 
 export const selectCurrent = ({ current = {} }) => current;
@@ -52,34 +52,39 @@ export const queryTitle = map(selectTitle);
 export const queryComplete = map(selectComplete);
 export const queryId = map(selectId);
 
+const whenSetCurrentItem = ofType(ItemActionTypes.UI_SET_CURRENT_ITEM);
+const whenUpdateTodoTitle = ofType(ItemActionTypes.UI_UPDATE_TODO_TITLE);
+const whenSetComplete = ofType(ItemActionTypes.UI_SET_COMPLETE);
+const whenRemoveItem = ofType(ItemActionTypes.UI_REMOVE_ITEM);
+
 export const currentItem = () => {
 
     const fromView = merge(
         pipe(
-            ofType(ItemActionTypes.UI_SET_CURRENT_ITEM),
+            whenSetCurrentItem,
             withArg(pipe(onState, queryTodos, queryItems)),
             map(([{ payload: id }, items]: [any, any[]]) => {
                 const currentItem = items.find(item => item.id === id);
                 return ItemActions.setCurrent(currentItem);
             })
         ),
         pipe(
-            ofType(ItemActionTypes.UI_UPDATE_TODO_TITLE),
+            whenUpdateTodoTitle,
             withArg(pipe(onState, queryCurrent, queryId), pipe(onState, queryCurrent, queryTitle)),
             map(([a, itemId, editTitle]) => ToDoActions.updateTodo(itemId, { title: editTitle }))
         ),
         pipe(
-            ofType(ItemActionTypes.UI_SET_COMPLETE),
+            whenSetComplete,
             map(({ payload: { id, complete } }) => ToDoActions.updateTodo(id, { complete }))
         ),
         pipe(
-            ofType(ItemActionTypes.UI_REMOVE_ITEM),
+            whenRemoveItem,
             map(({ payload: id }) => ToDoActions.deleteTodo(id))
         )
     );
     const fromService = merge(
         pipe(
-            ofType(ToDoActionTypes.UPDATE_TODO_RESULT),
+            whenUpdateTodoResult,
             map(() => ToDoActions.fetchItems())
         )
     );
diff --git a/src/examples/reflux-ts/components/todoItem/template.tsx b/src/examples/reflux-ts/components/todoItem/template.tsx
@@ -44,6 +44,8 @@ function mapDispatchToProps(dispatch, props) {
     };
 }
 
+// this part should be extracted into the separate file
+// It has kept here just to make easy understand the implementation
 function setCaretAtStartEnd(node, atEnd) {
     const sel = document.getSelection();
     node = node.firstChild;
diff --git a/src/examples/reflux-ts/declareActions.ts b/src/examples/reflux-ts/declareActions.ts
@@ -6,6 +6,7 @@ export function createReducer (initialState) {
     }
 };
 
+// UnionToIntersection was borrowed from https://stackoverflow.com/questions/50374908/transform-union-type-to-intersection-type
 type UnionToIntersection<U> = (U extends any
     ? (k: U) => void
     : any) extends ((k: infer I) => void)
diff --git a/src/examples/reflux-ts/itrx.ts b/src/examples/reflux-ts/itrx.ts
@@ -2,8 +2,8 @@ export const onAction = (...abc) => [abc[0]];
 export const onState = (...abc) => [abc[1]];
 export const onDispatch = (...abc) => [abc[2]];
 
-export const pipe = (...args) => (...abc) => args.reduce((res, fn) => res.length ? fn(...res) : [], abc);
-export const merge = (...args) => (...abc) => args.reduce((res, fn) => [...res, ...fn(...abc)], []);
+export const pipe = (...fn) => (...abc) => fn.reduce((res, curr) => res.length ? curr(...res) : [], abc);
+export const merge = (...fn) => (...abc) => fn.reduce((res, curr) => [...res, ...curr(...abc)], []);
 
 export const map = (fn) => (...abc) => [fn(...abc)];
 export const withArg = (...fn) => (a, ...abc) => [[a, ...merge(...fn)(a, ...abc)], ...abc];
diff --git a/src/examples/reflux-ts/models/todos.ts b/src/examples/reflux-ts/models/todos.ts
@@ -194,6 +194,9 @@ export const selectItems = ({ items = {}, order = [] }) => order.map(id => items
 export const queryTodos = map(selectTodos);
 export const queryItems = map(selectItems);
 
-export const changeItems = ofType(ToDoActionTypes.FETCH_TODOS_RESULT);
-export const createItem = ofType(ToDoActionTypes.CREATE_TODO_RESULT);
-export const deleteItem = ofType(ToDoActionTypes.DELETE_TODO_RESULT);
+export const whenChangeItems = ofType(ToDoActionTypes.FETCH_TODOS_RESULT);
+export const whenCreateItem = ofType(ToDoActionTypes.CREATE_TODO_RESULT);
+export const whenDeleteItem = ofType(ToDoActionTypes.DELETE_TODO_RESULT);
+
+export const whenCreateTodoResult = ofType(ToDoActionTypes.CREATE_TODO_RESULT);
+export const whenUpdateTodoResult = ofType(ToDoActionTypes.UPDATE_TODO_RESULT);
diff --git a/src/examples/reflux-ts/store.ts b/src/examples/reflux-ts/store.ts
@@ -16,6 +16,8 @@ export default function compose(...funcs: Function[]) {
     return funcs.reduce((a, b) => (...args: any) => a(b(...args)))
 }
 
+// Shamelessly stolen from this place: https://github.com/reduxjs/redux/blob/master/src/applyMiddleware.ts
+// and slightly adjusted
 export function applyMiddleware(...middlewares) {
     return function (createStoreFn: typeof createStore) {
         return function (reducer, initialState) {
diff --git a/src/examples/reflux-ts/utils.ts b/src/examples/reflux-ts/utils.ts
@@ -44,3 +44,13 @@ export function pick(obj, fn) {
         return res;
     }, isArray(obj) ? [] : {});
 }
+
+export function arrayMerge(array1, array2) {
+    const array = [].concat(array1);
+    for (let i = 0; i < array2.length; i++) {
+        if (array.indexOf(array2[i]) === -1) {
+            array.push(array2[i]);
+        }
+    }
+    return array;
+}
diff --git a/src/examples/reflux-ts/virtualDom.ts b/src/examples/reflux-ts/virtualDom.ts
@@ -1,4 +1,5 @@
 import { dom } from './dom';
+import { arrayMerge } from './utils'; 
 
 
 export const EVENT_NAMES = {
@@ -25,16 +26,6 @@ export const propConverters = {
     }
 };
 
-function arrayMerge(array1, array2) {
-    const array = [].concat(array1);
-    for (let i = 0; i < array2.length; i++) {
-        if (array.indexOf(array2[i]) === -1) {
-            array.push(array2[i]);
-        }
-    }
-    return array;
-}
-
 export function el(type, attrs = {}, ...children) {
     children = [].concat(...children)
         .filter(a => [undefined, true, false].indexOf(a) === -1)
@@ -49,7 +40,9 @@ export function el(type, attrs = {}, ...children) {
         children
     };
 }
+
 export let currentStore = null;
+
 export function makeVdom(oldDom, store) {
     currentStore = store;
     function createElement(node) {
diff --git a/webpack.dev.config.js b/webpack.dev.config.js
@@ -18,7 +18,7 @@ module.exports = {
         aliasFields: [ 'browser' ],
         alias: {
             // databindjs: path.resolve(__dirname, 'lib/index')
-            databindjs: path.resolve(__dirname, '../src/databindjs/')
+            databindjs: path.resolve(__dirname, 'src/databindjs/')
         }
     },
     module: {

Original file line number	Diff line number	Diff line change
`@@ -44,6 +44,8 @@ function mapDispatchToProps(dispatch, props) {`
`44`	`44`	`};`
`45`	`45`	`}`
`46`	`46`
	`47`	`+// this part should be extracted into the separate file`
	`48`	`+// It has kept here just to make easy understand the implementation`
`47`	`49`	`function setCaretAtStartEnd(node, atEnd) {`
`48`	`50`	`const sel = document.getSelection();`
`49`	`51`	`node = node.firstChild;`
Original file line number	Diff line number	Diff line change
`@@ -6,6 +6,7 @@ export function createReducer (initialState) {`
`6`	`6`	`}`
`7`	`7`	`};`
`8`	`8`
	`9`	`+// UnionToIntersection was borrowed from https://stackoverflow.com/questions/50374908/transform-union-type-to-intersection-type`
`9`	`10`	`type UnionToIntersection<U> = (U extends any`
`10`	`11`	`? (k: U) => void`
`11`	`12`	`: any) extends ((k: infer I) => void)`