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

adding a step 9 to call services

Browse Source
This commit is contained in:
Ken
2019-02-18 11:48:34 -08:00
parent 279a43fb35
commit a709417642
39 changed files with 737 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
step2-08/src/actions/index.ts
View File

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

2
step2-08/src/components/TodoFooter.tsx
View File

@@ -4,7 +4,7 @@ import { Stack } from 'office-ui-fabric-react';
import { Store } from '../store';
import { DefaultButton } from 'office-ui-fabric-react';
import { connect } from 'react-redux';
import * as actions from '../actions';
import { actions } from '../actions';
interface TodoFooterProps {
clear: () => void;

2
step2-08/src/components/TodoHeader.tsx
View File

@@ -3,7 +3,7 @@ import { Text } from '@uifabric/experiments';
import { Stack } from 'office-ui-fabric-react';
import { Pivot, PivotItem, TextField, PrimaryButton } from 'office-ui-fabric-react';
import { FilterTypes, Store } from '../store';
import * as actions from '../actions';
import { actions } from '../actions';
import { connect } from 'react-redux';
interface TodoHeaderProps {

1
step2-08/src/components/TodoList.tsx
View File

@@ -3,7 +3,6 @@ import { Stack } from 'office-ui-fabric-react';
import { TodoListItem } from './TodoListItem';
import { Store, FilterTypes } from '../store';
import { connect } from 'react-redux';
import * as actions from '../actions';
interface TodoListProps {
todos: Store['todos'];

4
step2-08/src/components/TodoListItem.tsx
View File

@@ -1,8 +1,8 @@
import React from 'react';
import { Stack, Checkbox, IconButton, TextField, DefaultButton } from 'office-ui-fabric-react';
import { Stack, Checkbox, IconButton } from 'office-ui-fabric-react';
import { Store } from '../store';
import { connect } from 'react-redux';
import * as actions from '../actions';
import { actions } from '../actions';
interface TodoListItemProps {
id: string;

6
step2-08/src/index.tsx
View File

@@ -4,7 +4,7 @@ import { reducer } from './reducers';
import { createStore, compose } from 'redux';
import { Provider } from 'react-redux';
import { TodoApp } from './components/TodoApp';
import { addTodo } from './actions';
import { actions } from './actions';
import { initializeIcons } from '@uifabric/icons';
import { Store } from './store';
@@ -17,8 +17,8 @@ function createStoreWithDevTool(reducer, initialStore?: Store) {
const store = createStoreWithDevTool(reducer);
store.dispatch(addTodo('hello'));
store.dispatch(addTodo('world'));
store.dispatch(actions.addTodo('hello'));
store.dispatch(actions.addTodo('world'));
initializeIcons();

2
step2-08/src/reducers/index.ts
View File

@@ -5,7 +5,7 @@ import { combineReducers } from 'redux';
function todoReducer(state: Store['todos'] = {}, action: any): Store['todos'] {
switch (action.type) {
case 'addTodo':
return addTodo(state, action.label);
return addTodo(state, action.id, action.label);
case 'remove':
return remove(state, action.id);

29
step2-08/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();
});
});

5
step2-08/src/reducers/pureFunctions.ts
View File

@@ -1,9 +1,6 @@
import { Store, FilterTypes } from '../store';
let index = 0;
export function addTodo(state: Store['todos'], label: string): Store['todos'] {
const id = index++;
export function addTodo(state: Store['todos'], id: string, label: string): Store['todos'] {
return { ...state, [id]: { label, completed: false } };
}