adding some redux steps

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
   "prettier.printWidth": 140,
+  "prettier.tabWidth": 2,
   "prettier.singleQuote": true,
   "editor.formatOnSave": true
 }

index.html

@@ -86,6 +86,30 @@
             UI Fabric: Theming and Styling
           </a>
         </li>
+        <li class="Tile">
+          <a target="_blank" href="/step2-04/" class="Tile-link">
+            Step 4<br />
+            UI Fabric: Theming and Styling
+          </a>
+        </li>
+        <li class="Tile">
+          <a target="_blank" href="/step2-05/" class="Tile-link">
+            Step 5<br />
+            Redux 1: Reducers
+          </a>
+        </li>
+        <li class="Tile">
+          <a target="_blank" href="/step2-06/" class="Tile-link">
+            Step 6<br />
+            Redux 2: Dispatch Actions
+          </a>
+        </li>
+        <li class="Tile">
+          <a target="_blank" href="/step2-07/" class="Tile-link">
+            Step 7<br />
+            Redux 3: Connect to UI
+          </a>
+        </li>
       </ul>
     </div>
     <div class="Container">

prettier.config.js

@@ -1,4 +1,5 @@
 module.exports = {
   singleQuote: true,
+  tabWidth: 2,
   printWidth: 140
 };

step2-05/README.md

@@ -1,9 +1,3 @@
-# Step 2.2
+# Step 2.5
 
-Integrates Fabric
-
-Learn about Basic Components
-
-- Stack
-- Text
-- Show case some components
+Actions and Reducers

step2-05/src/components/TodoApp.tsx

@@ -1,95 +0,0 @@
-import React from 'react';
-import { Stack, Customizer, mergeStyles, getTheme } from 'office-ui-fabric-react';
-import { TodoFooter } from './TodoFooter';
-import { TodoHeader } from './TodoHeader';
-import { TodoList } from './TodoList';
-import { Store } from '../store';
-import { FluentCustomizations } from '@uifabric/fluent-theme';
-
-let index = 0;
-
-const className = mergeStyles({
-  padding: 25,
-  ...getTheme().effects.elevation4
-});
-
-export class TodoApp extends React.Component<any, Store> {
-  constructor(props) {
-    super(props);
-    this.state = {
-      todos: {},
-      filter: 'all'
-    };
-  }
-  render() {
-    const { filter, todos } = this.state;
-    return (
-      <Customizer {...FluentCustomizations}>
-        <Stack horizontalAlign="center">
-          <Stack style={{ width: 400 }} gap={25} className={className}>
-            <TodoHeader addTodo={this._addTodo} setFilter={this._setFilter} filter={filter} />
-            <TodoList complete={this._complete} todos={todos} filter={filter} remove={this._remove} edit={this._edit} />
-            <TodoFooter clear={this._clear} todos={todos} />
-          </Stack>
-        </Stack>
-      </Customizer>
-    );
-  }
-
-  private _addTodo = label => {
-    const { todos } = this.state;
-    const id = index++;
-
-    this.setState({
-      todos: { ...todos, [id]: { label } }
-    });
-  };
-
-  private _remove = id => {
-    const newTodos = { ...this.state.todos };
-    delete newTodos[id];
-
-    this.setState({
-      todos: newTodos
-    });
-  };
-
-  private _complete = id => {
-    const newTodos = { ...this.state.todos };
-    newTodos[id].completed = !newTodos[id].completed;
-
-    this.setState({
-      todos: newTodos
-    });
-  };
-
-  private _edit = (id, label) => {
-    const newTodos = { ...this.state.todos };
-    newTodos[id] = { ...newTodos[id], label };
-
-    this.setState({
-      todos: newTodos
-    });
-  };
-
-  private _clear = () => {
-    const { todos } = this.state;
-    const newTodos = {};
-
-    Object.keys(this.state.todos).forEach(id => {
-      if (!todos[id].completed) {
-        newTodos[id] = todos[id];
-      }
-    });
-
-    this.setState({
-      todos: newTodos
-    });
-  };
-
-  private _setFilter = filter => {
-    this.setState({
-      filter: filter
-    });
-  };
-}

step2-05/src/components/TodoFooter.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { Text } from '@uifabric/experiments';
-import { Stack } from 'office-ui-fabric-react';
-import { Store } from '../store';
-import { DefaultButton } from 'office-ui-fabric-react';
-
-interface TodoFooterProps {
-  clear: () => void;
-  todos: Store['todos'];
-}
-
-export const TodoFooter = (props: TodoFooterProps) => {
-  const itemCount = Object.keys(props.todos).filter(id => !props.todos[id].completed).length;
-
-  return (
-    <Stack horizontal horizontalAlign="space-between">
-      <Text>
-        {itemCount} item{itemCount > 1 ? 's' : ''} left
-      </Text>
-      <DefaultButton onClick={() => props.clear()}>Clear Completed</DefaultButton>
-    </Stack>
-  );
-};

step2-05/src/components/TodoHeader.tsx

@@ -1,58 +0,0 @@
-import React from 'react';
-import { Text } from '@uifabric/experiments';
-import { Stack } from 'office-ui-fabric-react';
-import { Pivot, PivotItem, TextField, PrimaryButton } from 'office-ui-fabric-react';
-import { FilterTypes } from '../store';
-
-interface TodoHeaderProps {
-  addTodo: (label: string) => void;
-  setFilter: (filter: FilterTypes) => void;
-  filter: string;
-}
-
-interface TodoHeaderState {
-  labelInput: string;
-}
-
-export class TodoHeader extends React.Component<TodoHeaderProps, TodoHeaderState> {
-  constructor(props: TodoHeaderProps) {
-    super(props);
-    this.state = { labelInput: undefined };
-  }
-
-  render() {
-    return (
-      <Stack gap={10}>
-        <Stack horizontal horizontalAlign="center">
-          <Text variant="xxLarge">todos</Text>
-        </Stack>
-
-        <Stack horizontal gap={10}>
-          <Stack.Item grow>
-            <TextField placeholder="What needs to be done?" value={this.state.labelInput} onChange={this.onChange} />
-          </Stack.Item>
-          <PrimaryButton onClick={this.onAdd}>Add</PrimaryButton>
-        </Stack>
-
-        <Pivot onLinkClick={this.onFilter}>
-          <PivotItem headerText="all" />
-          <PivotItem headerText="active" />
-          <PivotItem headerText="completed" />
-        </Pivot>
-      </Stack>
-    );
-  }
-
-  private onAdd = () => {
-    this.props.addTodo(this.state.labelInput);
-    this.setState({ labelInput: undefined });
-  };
-
-  private onChange = (evt: React.FormEvent<HTMLInputElement>, newValue: string) => {
-    this.setState({ labelInput: newValue });
-  };
-
-  private onFilter = (item: PivotItem) => {
-    this.props.setFilter(item.props.headerText as FilterTypes);
-  };
-}

step2-05/src/components/TodoList.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import { Stack } from 'office-ui-fabric-react';
-import { TodoListItem } from './TodoListItem';
-import { Store, FilterTypes } from '../store';
-
-interface TodoListProps {
-  complete: (id: string) => void;
-  remove: (id: string) => void;
-  todos: Store['todos'];
-  filter: FilterTypes;
-  edit: (id: string, label: string) => void;
-}
-
-export const TodoList = (props: TodoListProps) => {
-  const { filter, todos, complete, remove, edit } = props;
-  const filteredTodos = Object.keys(todos).filter(id => {
-    return filter === 'all' || (filter === 'completed' && todos[id].completed) || (filter === 'active' && !todos[id].completed);
-  });
-
-  return (
-    <Stack gap={10}>
-      {filteredTodos.map(id => (
-        <TodoListItem key={id} id={id} todos={todos} complete={complete} remove={remove} edit={edit} />
-      ))}
-    </Stack>
-  );
-};

step2-05/src/components/TodoListItem.tsx

@@ -1,75 +0,0 @@
-import React from 'react';
-import { Stack, Checkbox, IconButton, TextField, DefaultButton } from 'office-ui-fabric-react';
-import { Store } from '../store';
-
-interface TodoListItemProps {
-  id: string;
-  todos: Store['todos'];
-  remove: (id: string) => void;
-  complete: (id: string) => void;
-  edit: (id: string, label: string) => void;
-}
-
-interface TodoListItemState {
-  editing: boolean;
-  editLabel: string;
-}
-
-export class TodoListItem extends React.Component<TodoListItemProps, TodoListItemState> {
-  constructor(props: TodoListItemProps) {
-    super(props);
-    this.state = { editing: false, editLabel: undefined };
-  }
-
-  render() {
-    const { todos, id, complete, remove } = this.props;
-    const item = todos[id];
-
-    return (
-      <Stack horizontal verticalAlign="center" horizontalAlign="space-between">
-        {!this.state.editing && (
-          <>
-            <Checkbox label={item.label} checked={item.completed} onChange={() => complete(id)} />
-            <div>
-              <IconButton iconProps={{ iconName: 'Edit' }} onClick={this.onEdit} />
-              <IconButton iconProps={{ iconName: 'Cancel' }} onClick={() => remove(id)} />
-            </div>
-          </>
-        )}
-
-        {this.state.editing && (
-          <Stack.Item grow>
-            <Stack horizontal gap={10}>
-              <Stack.Item grow>
-                <TextField value={this.state.editLabel} onChange={this.onChange} />
-              </Stack.Item>
-              <DefaultButton onClick={this.onDoneEdit}>Save</DefaultButton>
-            </Stack>
-          </Stack.Item>
-        )}
-      </Stack>
-    );
-  }
-
-  private onEdit = () => {
-    const { todos, id } = this.props;
-    const { label } = todos[id];
-
-    this.setState({
-      editing: true,
-      editLabel: this.state.editLabel || label
-    });
-  };
-
-  private onDoneEdit = () => {
-    this.props.edit(this.props.id, this.state.editLabel);
-    this.setState({
-      editing: false,
-      editLabel: undefined
-    });
-  };
-
-  private onChange = (evt: React.FormEvent<HTMLInputElement>, newValue: string) => {
-    this.setState({ editLabel: newValue });
-  };
-}

step2-05/src/index.tsx

@@ -1,10 +1,9 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { TodoApp } from './components/TodoApp';
-import { initializeIcons } from '@uifabric/icons';
+import { reducer } from './reducers';
+import { createStore, compose } from 'redux';
 
-// Initializes the UI Fabric icons that we can use
-// Choose one from this list: https://developer.microsoft.com/en-us/fabric#/styles/icons
-initializeIcons();
+declare var window: any;
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 
-ReactDOM.render(<TodoApp />, document.getElementById('app'));
+const store = createStore(reducer, {}, composeEnhancers());
+
+console.log(store.getState());

step2-05/src/reducers/index.ts

@@ -0,0 +1,19 @@
+import { Store } from '../store';
+import { addTodo, remove, complete } from './pureFunctions';
+
+let index = 0;
+
+export function reducer(state: Store, payload: any): Store {
+  switch (payload.type) {
+    case 'addTodo':
+      return addTodo(state, payload.label);
+
+    case 'remove':
+      return remove(state, payload.id);
+
+    case 'complete':
+      return complete(state, payload.id);
+  }
+
+  return state;
+}

step2-05/src/reducers/pureFunctions.spec.ts

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

step2-05/src/reducers/pureFunctions.ts

@@ -0,0 +1,34 @@
+import { Store } from '../store';
+
+let index = 0;
+
+export function addTodo(state: Store, label: string): Store {
+  const { todos } = state;
+  const id = index++;
+
+  return {
+    ...state,
+    todos: { ...todos, [id]: { label, completed: false } }
+  };
+}
+
+export function remove(state: Store, id: string) {
+  const newTodos = { ...state.todos };
+
+  delete newTodos[id];
+
+  return {
+    ...state,
+    todos: newTodos
+  };
+}
+
+export function complete(state: Store, id: string) {
+  const newTodos = { ...this.state.todos };
+  newTodos[id].completed = !newTodos[id].completed;
+
+  return {
+    ...state,
+    todos: newTodos
+  };
+}

step2-06/README.md

@@ -0,0 +1,3 @@
+# Step 2.6
+
+Dispatching Actions and Examining State

step2-06/index.html

@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

step2-06/src/actions/index.ts

@@ -0,0 +1,3 @@
+export const addTodo = (label: string) => ({ type: 'addTodo', label });
+export const remove = (id: string) => ({ type: 'remove', id });
+export const complete = (id: string) => ({ type: 'complete', id });

step2-06/src/index.tsx

@@ -0,0 +1,15 @@
+import { reducer } from './reducers';
+import { createStore, compose } from 'redux';
+import { addTodo } from './actions';
+
+declare var window: any;
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+
+const store = createStore(reducer, {}, composeEnhancers());
+
+console.log(store.getState());
+
+store.dispatch(addTodo('hello'));
+store.dispatch(addTodo('world'));
+
+console.log(store.getState());

step2-06/src/reducers/index.ts

@@ -0,0 +1,19 @@
+import { Store } from '../store';
+import { addTodo, remove, complete } from './pureFunctions';
+
+let index = 0;
+
+export function reducer(state: Store, payload: any): Store {
+  switch (payload.type) {
+    case 'addTodo':
+      return addTodo(state, payload.label);
+
+    case 'remove':
+      return remove(state, payload.id);
+
+    case 'complete':
+      return complete(state, payload.id);
+  }
+
+  return state;
+}

step2-06/src/reducers/pureFunctions.spec.ts

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

step2-06/src/reducers/pureFunctions.ts

@@ -0,0 +1,34 @@
+import { Store } from '../store';
+
+let index = 0;
+
+export function addTodo(state: Store, label: string): Store {
+  const { todos } = state;
+  const id = index++;
+
+  return {
+    ...state,
+    todos: { ...todos, [id]: { label, completed: false } }
+  };
+}
+
+export function remove(state: Store, id: string) {
+  const newTodos = { ...state.todos };
+
+  delete newTodos[id];
+
+  return {
+    ...state,
+    todos: newTodos
+  };
+}
+
+export function complete(state: Store, id: string) {
+  const newTodos = { ...this.state.todos };
+  newTodos[id].completed = !newTodos[id].completed;
+
+  return {
+    ...state,
+    todos: newTodos
+  };
+}

step2-06/src/store/index.ts

@@ -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;
+}