microsoft/frontend-bootcamp
1
0
Fork 0
mirror of https://github.com/microsoft/frontend-bootcamp.git synced 2026-01-26 14:56:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

checking in docs for github.io page

Browse Source
This commit is contained in:
Ken
2019-02-19 23:41:11 -08:00
parent e88ba9c448
commit 164db9dd93
194 changed files with 103939 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/step2-06/exercise/index.html Normal file
View File

@@ -0,0 +1,6 @@
<!DOCTYPE html>
<html>
<body>
<div id="app"></div>
<script type="text/javascript" src="../../step2-06/exercise/dist/step2-06/exercise.js"></script><script type="text/javascript" src="../../step2-06/exercise/step2-06/exercise.js"></script></body>
</html>

5
docs/step2-06/exercise/src/actions/index.ts Normal file
View File

@@ -0,0 +1,5 @@
import uuid from 'uuid/v4';
export const actions = {
addTodo: (label: string) => ({ type: 'addTodo', id: uuid(), label })
};

19
docs/step2-06/exercise/src/index.tsx Normal file
View File

@@ -0,0 +1,19 @@
import { reducer } from './reducers';
import { createStore, compose } from 'redux';
import { actions } from './actions';
/* Goop for making the Redux dev tool to work */
declare var window: any;
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
function createStoreWithDevTool(reducer, initialStore) {
return createStore(reducer, initialStore, composeEnhancers());
}
const store = createStoreWithDevTool(reducer, {});
console.log(store.getState());
store.dispatch(actions.addTodo('hello'));
store.dispatch(actions.addTodo('world'));
console.log(store.getState());

27
docs/step2-06/exercise/src/reducers/index.ts Normal file
View File

@@ -0,0 +1,27 @@
import { Store } from '../store';
import { addTodo, remove, complete, clear } from './pureFunctions';
function todoReducer(state: Store['todos'] = {}, action: any): Store['todos'] {
switch (action.type) {
case 'addTodo':
return addTodo(state, action.id, action.label);
case 'remove':
return remove(state, action.id);
case 'clear':
return clear(state);
case 'complete':
return complete(state, action.id);
}
return state;
}
export function reducer(state: Store, action: any): Store {
return {
todos: todoReducer(state.todos, action),
filter: 'all'
};
}

29
docs/step2-06/exercise/src/reducers/pureFunctions.spec.ts Normal file
View File

@@ -0,0 +1,29 @@
import { addTodo, complete } from './pureFunctions';
import { Store } from '../store';
describe('TodoApp reducers', () => {
it('can add an item', () => {
const state = <Store['todos']>{};
const newState = addTodo(state, '0', 'item1');
const keys = Object.keys(newState);
expect(newState).not.toBe(state);
expect(keys.length).toBe(1);
expect(newState[keys[0]].label).toBe('item1');
expect(newState[keys[0]].completed).toBeFalsy();
});
it('can complete an item', () => {
const state = <Store['todos']>{};
let newState = addTodo(state, '0', 'item1');
const key = Object.keys(newState)[0];
newState = complete(newState, key);
expect(newState[key].completed).toBeTruthy();
});
});

36
docs/step2-06/exercise/src/reducers/pureFunctions.ts Normal file
View File

@@ -0,0 +1,36 @@
import { Store, FilterTypes } from '../store';
export function addTodo(state: Store['todos'], id: string, label: string): Store['todos'] {
return { ...state, [id]: { label, completed: false } };
}
export function remove(state: Store['todos'], id: string) {
const newTodos = { ...state };
delete newTodos[id];
return newTodos;
}
export function complete(state: Store['todos'], id: string) {
const newTodos = { ...state };
newTodos[id].completed = !newTodos[id].completed;
return newTodos;
}
export function clear(state: Store['todos']) {
const newTodos = { ...state };
Object.keys(state.todos).forEach(key => {
if (state.todos[key].completed) {
delete newTodos[key];
}
});
return newTodos;
}
export function setFilter(state: Store['filter'], filter: FilterTypes) {
return filter;
}

20
docs/step2-06/exercise/src/reducers/reducer.spec.ts Normal file
View File

@@ -0,0 +1,20 @@
import { createStore } from 'redux';
import { reducer } from '.';
import { actions } from '../actions';
describe('reducers', () => {
it('should add items', () => {
// 1. use Redux's createStore() to create a store with reducer as argument
// along with the initial state
//
// 2. call store.dispatch() with some action messages to indicate the kind of
// action to perform (in this case, addTodo)
//
// 3. assert with expect() on the resultant store.getState().todos
});
// Tests left for you to do:
// - remove
// - clear
// - complete
});

14
docs/step2-06/exercise/src/store/index.ts Normal file
View File

@@ -0,0 +1,14 @@
export type FilterTypes = 'all' | 'active' | 'completed';
export interface TodoItem {
label: string;
completed: boolean;
}
export interface Store {
todos: {
[id: string]: TodoItem;
};
filter: FilterTypes;
}

228
docs/step2-06/exercise/step2-06/exercise.js Normal file
View File

File diff suppressed because one or more lines are too long