From 2b8dae312433f22b35826c85ef2f1969049d193a Mon Sep 17 00:00:00 2001
From: Dan Ott <dan@dtott.com>
Date: Fri, 24 May 2019 16:31:27 -0400
Subject: [PATCH 01/12] Hooks for SelectUsers

---
 src/SelectUsers.js | 101 ++++++++++++++++++++++-----------------------
 1 file changed, 49 insertions(+), 52 deletions(-)

diff --git a/src/SelectUsers.js b/src/SelectUsers.js
index 9eb103c..a8619a3 100644
--- a/src/SelectUsers.js
+++ b/src/SelectUsers.js
@@ -1,61 +1,58 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Select } from 'evergreen-ui';
 
-export default class SelectUsers extends React.Component {
-  constructor(props) {
-    super(props);
+const SelectUsers = ({ isLoading, userId, onChange, users }) => {
+  // const x = useMemo(()=> {return something}, [])
+  const [calculatedUsers, setCalculatedUsers] = useState([]);
 
-    this.state = {
-      calculatedUsers: [],
+  useEffect(() => {
+    const expensiveCalculationOnUsers = () => {
+      if (users) {
+        console.log('OMG this takes forever');
+        return users;
+      }
+      return [];
     };
-  }
 
-  expensiveCalculationOnUsers() {
-    if (this.props.users) {
-      console.log('OMG this takes forever');
-      return this.props.users;
-    }
-    return [];
-  }
+    setCalculatedUsers(expensiveCalculationOnUsers());
+  }, [users]);
 
-  componentDidMount() {
-    this.setState({
-      calculatedUsers: this.expensiveCalculationOnUsers(),
-    });
-  }
+  // componentDidMount() {
+  //   this.setState({
+  //     calculatedUsers: this.expensiveCalculationOnUsers(),
+  //   });
+  // }
 
-  componentDidUpdate(prevProps) {
-    if (prevProps.users !== this.props.users) {
-      this.setState({
-        calculatedUsers: this.expensiveCalculationOnUsers(),
-      });
-    }
-  }
+  // componentDidUpdate(prevProps) {
+  //   if (prevProps.users !== this.props.users) {
+  //     this.setState({
+  //       calculatedUsers: this.expensiveCalculationOnUsers(),
+  //     });
+  //   }
+  // }
 
-  render() {
-    const { isLoading, userId, onChange } = this.props;
+  return (
+    <Select
+      disabled={isLoading || !calculatedUsers.length}
+      onChange={e => onChange(e.currentTarget.name, e.currentTarget.value)}
+      value={userId}
+      name="userId"
+      id="userId"
+    >
+      {isLoading || !calculatedUsers.length ? (
+        <option>Loading users...</option>
+      ) : (
+        <>
+          <option value="">Select User...</option>
+          {calculatedUsers.map(user => (
+            <option key={user.id} value={user.id}>
+              {user.name}
+            </option>
+          ))}
+        </>
+      )}
+    </Select>
+  );
+};
 
-    return (
-      <Select
-        disabled={isLoading || !this.state.calculatedUsers.length}
-        onChange={e => onChange(e.currentTarget.name, e.currentTarget.value)}
-        value={userId}
-        name="userId"
-        id="userId"
-      >
-        {isLoading || !this.state.calculatedUsers.length ? (
-          <option>Loading users...</option>
-        ) : (
-          <>
-            <option value="">Select User...</option>
-            {this.state.calculatedUsers.map(user => (
-              <option key={user.id} value={user.id}>
-                {user.name}
-              </option>
-            ))}
-          </>
-        )}
-      </Select>
-    );
-  }
-}
+export default SelectUsers;

From f08a157cde1e87f9fe1c38bb036c0e19860390da Mon Sep 17 00:00:00 2001
From: Dan Ott <dan@dtott.com>
Date: Fri, 24 May 2019 16:32:02 -0400
Subject: [PATCH 02/12] remove comments

---
 src/SelectUsers.js | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/src/SelectUsers.js b/src/SelectUsers.js
index a8619a3..a7cef84 100644
--- a/src/SelectUsers.js
+++ b/src/SelectUsers.js
@@ -17,20 +17,6 @@ const SelectUsers = ({ isLoading, userId, onChange, users }) => {
     setCalculatedUsers(expensiveCalculationOnUsers());
   }, [users]);
 
-  // componentDidMount() {
-  //   this.setState({
-  //     calculatedUsers: this.expensiveCalculationOnUsers(),
-  //   });
-  // }
-
-  // componentDidUpdate(prevProps) {
-  //   if (prevProps.users !== this.props.users) {
-  //     this.setState({
-  //       calculatedUsers: this.expensiveCalculationOnUsers(),
-  //     });
-  //   }
-  // }
-
   return (
     <Select
       disabled={isLoading || !calculatedUsers.length}

From 031ff12ab5aff7e7d691b8013c50451e97649b73 Mon Sep 17 00:00:00 2001
From: Dan Ott <dan@dtott.com>
Date: Tue, 28 May 2019 09:05:58 -0400
Subject: [PATCH 03/12] Split out todos state for clarity

---
 src/App.js   |  96 +++++++++---------------------------
 src/Todos.js | 134 ++++++++++++++++++++++++++++++++++++++-------------
 2 files changed, 123 insertions(+), 107 deletions(-)

diff --git a/src/App.js b/src/App.js
index a439c2d..df2aa42 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Pane, majorScale, Heading, Text } from 'evergreen-ui';
+import { Pane, majorScale, Alert, Text } from 'evergreen-ui';
 import Api from './Api';
 import Todos from './Todos';
 import Filter from './Filter';
@@ -9,24 +9,21 @@ export default class App extends React.Component {
     super(props);
 
     this.onFilterSubmit = this.onFilterSubmit.bind(this);
-    this.fetchTodos = this.fetchTodos.bind(this);
     this.fetchUsers = this.fetchUsers.bind(this);
     this.refreshUsers = this.refreshUsers.bind(this);
   }
 
   state = {
+    // global error
+    globalError: null,
     // fetching users state
     users: null,
     isLoadingUsers: false,
-    error: null,
+    usersError: null,
 
-    // fetching todos state
-    todos: null,
-    isLoadingTodos: false,
+    // filter form state
     selectedUser: null,
     showCompleted: '',
-    todosUpdatedAt: null,
-    todosError: null,
   };
 
   async fetchUsers() {
@@ -38,34 +35,7 @@ export default class App extends React.Component {
         isLoadingUsers: false,
       });
     } catch (error) {
-      return this.setState({ error, isLoadingUsers: false });
-    }
-  }
-
-  async fetchTodos() {
-    this.setState({
-      isLoadingTodos: true,
-    });
-
-    const userId = this.state.selectedUser.id;
-    const showCompleted = this.state.showCompleted;
-    try {
-      const data = await Api.fetchTodosByUser(userId, showCompleted);
-      // if we've changed settings in the background, ignore this update
-      if (
-        userId === this.state.selectedUser.id &&
-        showCompleted === this.state.showCompleted
-      ) {
-        // set our state
-        this.setState({
-          todos: data,
-          isLoadingTodos: false,
-          todosUpdatedAt: new Date(),
-        });
-      }
-    } catch (error) {
-      clearInterval(this.interval);
-      this.setState({ todosError: error, isLoadingTodos: false });
+      return this.setState({ usersError: error, isLoadingUsers: false });
     }
   }
 
@@ -77,48 +47,31 @@ export default class App extends React.Component {
     this.fetchUsers();
   }
 
-  componentWillUnmount() {
-    clearInterval(this.interval);
-  }
-
   onFilterSubmit(formData) {
-    this.setState(
-      {
-        selectedUser: this.state.users.find(
-          u => u.id === parseInt(formData.userId, 10)
-        ),
-        showCompleted: formData.showCompleted,
-        todos: null,
-        todosError: null,
-      },
-      () => {
-        this.fetchTodos();
-        clearInterval(this.interval);
-        this.interval = setInterval(() => {
-          this.fetchTodos();
-        }, 6000);
-      }
-    );
+    this.setState({
+      selectedUser: this.state.users.find(
+        u => u.id === parseInt(formData.userId, 10)
+      ),
+      showCompleted: formData.showCompleted,
+    });
   }
 
   componentDidCatch(error, info) {
     console.log({ error, info });
-    this.setState({ error });
+    this.setState({ globalError: error });
   }
 
   render() {
     const {
       isLoadingUsers,
       users,
+      globalError,
+      usersError,
       selectedUser,
-      todosUpdatedAt,
-      isLoadingTodos,
-      todos,
-      error,
-      todosError,
+      showCompleted,
     } = this.state;
 
-    if (error) {
+    if (globalError || usersError) {
       return (
         <Pane
           maxWidth={800}
@@ -126,10 +79,11 @@ export default class App extends React.Component {
           marginX="auto"
           marginY={majorScale(2)}
           padding={majorScale(2)}
-          display="flex"
         >
-          <Heading>There was an error:</Heading>
-          <Text>{error.message}</Text>
+          <Alert intent="danger" title="There was an error:">
+            {globalError && <Text>{globalError.message}</Text>}
+            {usersError && <Text>{usersError.message}</Text>}
+          </Alert>
         </Pane>
       );
     }
@@ -149,13 +103,7 @@ export default class App extends React.Component {
           />
         </Pane>
         <Pane flex={3} padding={majorScale(2)}>
-          <Todos
-            user={selectedUser}
-            updatedAt={todosUpdatedAt}
-            todos={todos}
-            isLoading={isLoadingTodos}
-            error={todosError}
-          />
+          <Todos user={selectedUser} showCompleted={showCompleted} />
         </Pane>
       </Pane>
     );
diff --git a/src/Todos.js b/src/Todos.js
index 1ffa6b8..8d7cece 100644
--- a/src/Todos.js
+++ b/src/Todos.js
@@ -1,44 +1,112 @@
 import React from 'react';
+import Api from './Api';
 import Todo from './Todo';
 import { Pane, Text, Heading, Spinner, majorScale } from 'evergreen-ui';
 import { Paragraph } from 'evergreen-ui/commonjs/typography';
 
-const Todos = ({ isLoading, todos, user, updatedAt, error }) => {
-  if (error) {
-    return <div>{error.message}</div>;
+export default class Todos extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.fetchTodos = this.fetchTodos.bind(this);
+  }
+
+  state = {
+    todos: null,
+    isLoading: false,
+    updatedAt: null,
+    error: null,
+  };
+
+  async fetchTodos() {
+    this.setState({
+      isLoading: true,
+    });
+
+    const userId = this.props.user.id;
+    const showCompleted = this.props.showCompleted;
+    try {
+      const data = await Api.fetchTodosByUser(userId, showCompleted);
+      // if we've changed settings in the background, ignore this update
+      if (
+        userId === this.props.user.id &&
+        showCompleted === this.props.showCompleted
+      ) {
+        // set our state
+        this.setState({
+          todos: data,
+          isLoading: false,
+          updatedAt: new Date(),
+        });
+      }
+    } catch (error) {
+      clearInterval(this.interval);
+      this.setState({ error: error, isLoading: false });
+    }
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval);
   }
-  if (!todos && isLoading) {
-    return <Spinner size={majorScale(4)} />;
+
+  componentDidUpdate(prevProps) {
+    if (
+      prevProps.user !== this.props.user ||
+      prevProps.showCompleted !== this.props.showCompleted
+    ) {
+      this.setState({
+        todos: null,
+      });
+
+      if (this.props.user && this.props.showCompleted) {
+        this.fetchTodos();
+        clearInterval(this.interval);
+        this.interval = setInterval(() => {
+          this.fetchTodos();
+        }, 6000);
+      } else {
+        clearInterval(this.interval);
+      }
+    }
   }
 
-  if (!user || !todos) {
+  render() {
+    const { user } = this.props;
+    const { isLoading, todos, updatedAt, error } = this.state;
+    if (error) {
+      return <div>{error.message}</div>;
+    }
+    if (!todos && isLoading) {
+      return <Spinner size={majorScale(4)} />;
+    }
+
+    if (!user || !todos) {
+      return (
+        <Pane>
+          <Text color="muted" is="em">
+            Select a user to get started...
+          </Text>
+        </Pane>
+      );
+    }
+
     return (
-      <Pane>
-        <Text color="muted" is="em">
-          Select a user to get started...
-        </Text>
-      </Pane>
+      <>
+        <Pane display="flex" alignItems="center">
+          <Heading flex={1} size={700}>
+            Todos for {user.name}
+          </Heading>
+          {isLoading && <Spinner size={majorScale(2)} />}
+        </Pane>
+        <Paragraph marginBottom="2em">
+          <Text is="em" color="muted">
+            Updated at {updatedAt.toDateString()} {updatedAt.toTimeString()}
+          </Text>
+        </Paragraph>
+        {todos.map(todo => (
+          <Todo key={todo.id} todo={todo} />
+        ))}
+      </>
     );
   }
-
-  return (
-    <>
-      <Pane display="flex" alignItems="center">
-        <Heading flex={1} size={700}>
-          Todos for {user.name}
-        </Heading>
-        {isLoading && <Spinner size={majorScale(2)} />}
-      </Pane>
-      <Paragraph marginBottom="2em">
-        <Text is="em" color="muted">
-          Updated at {updatedAt.toDateString()} {updatedAt.toTimeString()}
-        </Text>
-      </Paragraph>
-      {todos.map(todo => (
-        <Todo key={todo.id} todo={todo} />
-      ))}
-    </>
-  );
-};
-
-export default Todos;
+}

From 7ae3a83d0cd2c2d094809e4db7b4a00e9e6c99ce Mon Sep 17 00:00:00 2001
From: Dan Ott <dan@dtott.com>
Date: Tue, 28 May 2019 09:05:58 -0400
Subject: [PATCH 04/12] Split out todos state for clarity

---
 src/App.js   |  96 +++++++++---------------------------
 src/Todos.js | 134 ++++++++++++++++++++++++++++++++++++++-------------
 2 files changed, 123 insertions(+), 107 deletions(-)

diff --git a/src/App.js b/src/App.js
index a439c2d..df2aa42 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Pane, majorScale, Heading, Text } from 'evergreen-ui';
+import { Pane, majorScale, Alert, Text } from 'evergreen-ui';
 import Api from './Api';
 import Todos from './Todos';
 import Filter from './Filter';
@@ -9,24 +9,21 @@ export default class App extends React.Component {
     super(props);
 
     this.onFilterSubmit = this.onFilterSubmit.bind(this);
-    this.fetchTodos = this.fetchTodos.bind(this);
     this.fetchUsers = this.fetchUsers.bind(this);
     this.refreshUsers = this.refreshUsers.bind(this);
   }
 
   state = {
+    // global error
+    globalError: null,
     // fetching users state
     users: null,
     isLoadingUsers: false,
-    error: null,
+    usersError: null,
 
-    // fetching todos state
-    todos: null,
-    isLoadingTodos: false,
+    // filter form state
     selectedUser: null,
     showCompleted: '',
-    todosUpdatedAt: null,
-    todosError: null,
   };
 
   async fetchUsers() {
@@ -38,34 +35,7 @@ export default class App extends React.Component {
         isLoadingUsers: false,
       });
     } catch (error) {
-      return this.setState({ error, isLoadingUsers: false });
-    }
-  }
-
-  async fetchTodos() {
-    this.setState({
-      isLoadingTodos: true,
-    });
-
-    const userId = this.state.selectedUser.id;
-    const showCompleted = this.state.showCompleted;
-    try {
-      const data = await Api.fetchTodosByUser(userId, showCompleted);
-      // if we've changed settings in the background, ignore this update
-      if (
-        userId === this.state.selectedUser.id &&
-        showCompleted === this.state.showCompleted
-      ) {
-        // set our state
-        this.setState({
-          todos: data,
-          isLoadingTodos: false,
-          todosUpdatedAt: new Date(),
-        });
-      }
-    } catch (error) {
-      clearInterval(this.interval);
-      this.setState({ todosError: error, isLoadingTodos: false });
+      return this.setState({ usersError: error, isLoadingUsers: false });
     }
   }
 
@@ -77,48 +47,31 @@ export default class App extends React.Component {
     this.fetchUsers();
   }
 
-  componentWillUnmount() {
-    clearInterval(this.interval);
-  }
-
   onFilterSubmit(formData) {
-    this.setState(
-      {
-        selectedUser: this.state.users.find(
-          u => u.id === parseInt(formData.userId, 10)
-        ),
-        showCompleted: formData.showCompleted,
-        todos: null,
-        todosError: null,
-      },
-      () => {
-        this.fetchTodos();
-        clearInterval(this.interval);
-        this.interval = setInterval(() => {
-          this.fetchTodos();
-        }, 6000);
-      }
-    );
+    this.setState({
+      selectedUser: this.state.users.find(
+        u => u.id === parseInt(formData.userId, 10)
+      ),
+      showCompleted: formData.showCompleted,
+    });
   }
 
   componentDidCatch(error, info) {
     console.log({ error, info });
-    this.setState({ error });
+    this.setState({ globalError: error });
   }
 
   render() {
     const {
       isLoadingUsers,
       users,
+      globalError,
+      usersError,
       selectedUser,
-      todosUpdatedAt,
-      isLoadingTodos,
-      todos,
-      error,
-      todosError,
+      showCompleted,
     } = this.state;
 
-    if (error) {
+    if (globalError || usersError) {
       return (
         <Pane
           maxWidth={800}
@@ -126,10 +79,11 @@ export default class App extends React.Component {
           marginX="auto"
           marginY={majorScale(2)}
           padding={majorScale(2)}
-          display="flex"
         >
-          <Heading>There was an error:</Heading>
-          <Text>{error.message}</Text>
+          <Alert intent="danger" title="There was an error:">
+            {globalError && <Text>{globalError.message}</Text>}
+            {usersError && <Text>{usersError.message}</Text>}
+          </Alert>
         </Pane>
       );
     }
@@ -149,13 +103,7 @@ export default class App extends React.Component {
           />
         </Pane>
         <Pane flex={3} padding={majorScale(2)}>
-          <Todos
-            user={selectedUser}
-            updatedAt={todosUpdatedAt}
-            todos={todos}
-            isLoading={isLoadingTodos}
-            error={todosError}
-          />
+          <Todos user={selectedUser} showCompleted={showCompleted} />
         </Pane>
       </Pane>
     );
diff --git a/src/Todos.js b/src/Todos.js
index 1ffa6b8..8d7cece 100644
--- a/src/Todos.js
+++ b/src/Todos.js
@@ -1,44 +1,112 @@
 import React from 'react';
+import Api from './Api';
 import Todo from './Todo';
 import { Pane, Text, Heading, Spinner, majorScale } from 'evergreen-ui';
 import { Paragraph } from 'evergreen-ui/commonjs/typography';
 
-const Todos = ({ isLoading, todos, user, updatedAt, error }) => {
-  if (error) {
-    return <div>{error.message}</div>;
+export default class Todos extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.fetchTodos = this.fetchTodos.bind(this);
+  }
+
+  state = {
+    todos: null,
+    isLoading: false,
+    updatedAt: null,
+    error: null,
+  };
+
+  async fetchTodos() {
+    this.setState({
+      isLoading: true,
+    });
+
+    const userId = this.props.user.id;
+    const showCompleted = this.props.showCompleted;
+    try {
+      const data = await Api.fetchTodosByUser(userId, showCompleted);
+      // if we've changed settings in the background, ignore this update
+      if (
+        userId === this.props.user.id &&
+        showCompleted === this.props.showCompleted
+      ) {
+        // set our state
+        this.setState({
+          todos: data,
+          isLoading: false,
+          updatedAt: new Date(),
+        });
+      }
+    } catch (error) {
+      clearInterval(this.interval);
+      this.setState({ error: error, isLoading: false });
+    }
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval);
   }
-  if (!todos && isLoading) {
-    return <Spinner size={majorScale(4)} />;
+
+  componentDidUpdate(prevProps) {
+    if (
+      prevProps.user !== this.props.user ||
+      prevProps.showCompleted !== this.props.showCompleted
+    ) {
+      this.setState({
+        todos: null,
+      });
+
+      if (this.props.user && this.props.showCompleted) {
+        this.fetchTodos();
+        clearInterval(this.interval);
+        this.interval = setInterval(() => {
+          this.fetchTodos();
+        }, 6000);
+      } else {
+        clearInterval(this.interval);
+      }
+    }
   }
 
-  if (!user || !todos) {
+  render() {
+    const { user } = this.props;
+    const { isLoading, todos, updatedAt, error } = this.state;
+    if (error) {
+      return <div>{error.message}</div>;
+    }
+    if (!todos && isLoading) {
+      return <Spinner size={majorScale(4)} />;
+    }
+
+    if (!user || !todos) {
+      return (
+        <Pane>
+          <Text color="muted" is="em">
+            Select a user to get started...
+          </Text>
+        </Pane>
+      );
+    }
+
     return (
-      <Pane>
-        <Text color="muted" is="em">
-          Select a user to get started...
-        </Text>
-      </Pane>
+      <>
+        <Pane display="flex" alignItems="center">
+          <Heading flex={1} size={700}>
+            Todos for {user.name}
+          </Heading>
+          {isLoading && <Spinner size={majorScale(2)} />}
+        </Pane>
+        <Paragraph marginBottom="2em">
+          <Text is="em" color="muted">
+            Updated at {updatedAt.toDateString()} {updatedAt.toTimeString()}
+          </Text>
+        </Paragraph>
+        {todos.map(todo => (
+          <Todo key={todo.id} todo={todo} />
+        ))}
+      </>
     );
   }
-
-  return (
-    <>
-      <Pane display="flex" alignItems="center">
-        <Heading flex={1} size={700}>
-          Todos for {user.name}
-        </Heading>
-        {isLoading && <Spinner size={majorScale(2)} />}
-      </Pane>
-      <Paragraph marginBottom="2em">
-        <Text is="em" color="muted">
-          Updated at {updatedAt.toDateString()} {updatedAt.toTimeString()}
-        </Text>
-      </Paragraph>
-      {todos.map(todo => (
-        <Todo key={todo.id} todo={todo} />
-      ))}
-    </>
-  );
-};
-
-export default Todos;
+}

From 142763886f0b878d506eab6d3644ad47934d3086 Mon Sep 17 00:00:00 2001
From: Dan Ott <dan@dtott.com>
Date: Tue, 28 May 2019 09:53:28 -0400
Subject: [PATCH 05/12] fix sleep

---
 src/Api.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Api.js b/src/Api.js
index fd3c74a..657268d 100644
--- a/src/Api.js
+++ b/src/Api.js
@@ -1,11 +1,11 @@
 export class Api {
-  sleep(ms) {
+  static sleep(ms) {
     return new Promise(resolve => setTimeout(resolve, ms));
   }
 
   async fetchUsers() {
     // throw new Error('we messed up');
-    await this.sleep(500);
+    await Api.sleep(500);
     const response = await fetch(`https://jsonplaceholder.typicode.com/users`);
     return await response.json();
   }
@@ -19,7 +19,7 @@ export class Api {
         : ''
     }`;
 
-    await this.sleep(1000);
+    await Api.sleep(1000);
     if (userId === 10) {
       throw new Error('User not found.');
     }

From 207a0349ebb13b40adb99f514605c11bd0d5a3e7 Mon Sep 17 00:00:00 2001
From: Dan Ott <dan@dtott.com>
Date: Tue, 28 May 2019 09:55:18 -0400
Subject: [PATCH 06/12] fix api sleep

---
 src/Api.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Api.js b/src/Api.js
index fd3c74a..657268d 100644
--- a/src/Api.js
+++ b/src/Api.js
@@ -1,11 +1,11 @@
 export class Api {
-  sleep(ms) {
+  static sleep(ms) {
     return new Promise(resolve => setTimeout(resolve, ms));
   }
 
   async fetchUsers() {
     // throw new Error('we messed up');
-    await this.sleep(500);
+    await Api.sleep(500);
     const response = await fetch(`https://jsonplaceholder.typicode.com/users`);
     return await response.json();
   }
@@ -19,7 +19,7 @@ export class Api {
         : ''
     }`;
 
-    await this.sleep(1000);
+    await Api.sleep(1000);
     if (userId === 10) {
       throw new Error('User not found.');
     }

From 98e20280ae763032ded32f1d4adf0a5f99068716 Mon Sep 17 00:00:00 2001
From: Dan Ott <dan@dtott.com>
Date: Wed, 29 May 2019 15:22:53 -0400
Subject: [PATCH 07/12] tweak settings for hijackEffects

---
 src/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.js b/src/index.js
index e21dc64..e31014a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,7 +4,7 @@ import App from './App';
 import { hijackEffects } from 'stop-runaway-react-effects';
 
 if (process.env.NODE_ENV !== 'production') {
-  hijackEffects();
+  hijackEffects({ callCount: 30, timeLimit: 4000 });
 }
 
 const rootElement = document.getElementById('root');

From 35f6cdad120dc33caf6cea01555f6dbc98697667 Mon Sep 17 00:00:00 2001
From: Dan Ott <dan@dtott.com>
Date: Wed, 29 May 2019 15:23:13 -0400
Subject: [PATCH 08/12] tweak settings for hijack effects

---
 src/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.js b/src/index.js
index e31014a..a4666ac 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,7 +4,7 @@ import App from './App';
 import { hijackEffects } from 'stop-runaway-react-effects';
 
 if (process.env.NODE_ENV !== 'production') {
-  hijackEffects({ callCount: 30, timeLimit: 4000 });
+  hijackEffects({ callCount: 30, timeLimit: 6000 });
 }
 
 const rootElement = document.getElementById('root');

From cb7c3daa619cd0f5fd5e560ac439d64d105c14e6 Mon Sep 17 00:00:00 2001
From: Dan Ott <dan@dtott.com>
Date: Fri, 24 May 2019 16:31:05 -0400
Subject: [PATCH 09/12] hooks for Filter

---
 src/Filter.js | 228 +++++++++++++++++++++++++-------------------------
 1 file changed, 115 insertions(+), 113 deletions(-)

diff --git a/src/Filter.js b/src/Filter.js
index 2901a6d..dc989ec 100644
--- a/src/Filter.js
+++ b/src/Filter.js
@@ -1,127 +1,129 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import SelectUsers from './SelectUsers';
 import { Heading, Pane, Button, Card, FormField, Radio } from 'evergreen-ui';
 
-export default class Filter extends React.Component {
-  constructor(props) {
-    super(props);
+const Filter = ({
+  isLoadingUsers,
+  users,
+  updateUserSettings,
+  refreshUsers,
+}) => {
+  const [formData, setFormData] = useState({
+    userId: '',
+    showCompleted: 'All',
+  });
+  const [isValid, setIsValid] = useState(false);
+
+  function updateFormInput(name, value) {
+    setFormData({
+      ...formData,
+      [name]: value,
+    });
 
-    this.updateFormInput = this.updateFormInput.bind(this);
+    setIsValid(false);
   }
 
-  state = {
-    userId: '',
-    showCompleted: 'All',
-    isValid: false,
-  };
+  useEffect(() => {
+    let isCurrent = true;
 
-  updateFormInput(name, value) {
-    this.setState(
-      {
-        [name]: value,
-      },
-      () => {
-        this.validate();
+    const validate = async function() {
+      // console.log('Validation started');
+      await new Promise(resolve => setTimeout(resolve, 250));
+      if (isCurrent) {
+        setIsValid(!!(formData.userId && formData.showCompleted));
+        // console.log('Validation completed');
+      } else {
+        // console.log('Validation cancelled');
       }
-    );
-  }
+    };
 
-  validate() {
-    this.setState({
-      isValid: !!(this.state.userId && this.state.showCompleted),
-    });
-  }
+    validate();
 
-  render() {
-    const {
-      isLoadingUsers,
-      users,
-      updateUserSettings,
-      refreshUsers,
-    } = this.props;
+    return () => {
+      isCurrent = false;
+    };
+  }, [formData]);
 
-    return (
-      <Card
-        is="form"
-        border="default"
-        padding=".5em"
-        background="blueTint"
-        data-testid="filtersform"
-        onSubmit={e => {
-          e.preventDefault();
-          updateUserSettings({
-            userId: this.state.userId,
-            showCompleted: this.state.showCompleted,
-          });
-        }}
+  return (
+    <Card
+      is="form"
+      border="default"
+      padding=".5em"
+      background="blueTint"
+      data-testid="filtersform"
+      onSubmit={e => {
+        e.preventDefault();
+        updateUserSettings({
+          userId: formData.userId,
+          showCompleted: formData.showCompleted,
+        });
+      }}
+    >
+      <Heading
+        is="legend"
+        marginX="-.5em"
+        paddingX=".5em"
+        marginTop="-.5em"
+        paddingY=".5em"
+        marginBottom=".5em"
+        borderBottom="1px solid #E4E7EB"
+        size={300}
       >
-        <Heading
-          is="legend"
-          marginX="-.5em"
-          paddingX=".5em"
-          marginTop="-.5em"
-          paddingY=".5em"
-          marginBottom=".5em"
-          borderBottom="1px solid #E4E7EB"
-          size={300}
+        Filter Todos:
+      </Heading>
+      <FormField label="User:" labelFor="userId" paddingY="1em">
+        <SelectUsers
+          isLoading={isLoadingUsers}
+          users={users}
+          userId={formData.userId}
+          onChange={updateFormInput}
+        />
+      </FormField>
+      <Pane marginBottom="1em">
+        <Button
+          appearance="minimal"
+          onClick={refreshUsers}
+          type="button"
+          height={24}
+          paddingX={0}
         >
-          Filter Todos:
-        </Heading>
-        <FormField label="User:" labelFor="userId" paddingY="1em">
-          <SelectUsers
-            isLoading={isLoadingUsers}
-            users={users}
-            userId={this.state.userId}
-            onChange={this.updateFormInput}
-          />
-        </FormField>
-        <Pane marginBottom="1em">
-          <Button
-            appearance="minimal"
-            onClick={refreshUsers}
-            type="button"
-            height={24}
-            paddingX={0}
-          >
-            Refresh Users...
-          </Button>
-        </Pane>
-        <FormField label="Show:">
-          <Radio
-            name="showCompleted"
-            value="All"
-            label="All"
-            checked={this.state.showCompleted === 'All'}
-            onChange={() => this.updateFormInput('showCompleted', 'All')}
-          />
-          <Radio
-            name="showCompleted"
-            value="Completed"
-            label="Completed"
-            checked={this.state.showCompleted === 'Completed'}
-            onChange={() => this.updateFormInput('showCompleted', 'Completed')}
-          />
-          <Radio
-            name="showCompleted"
-            value="Not Completed"
-            label="Not Completed"
-            checked={this.state.showCompleted === 'Not Completed'}
-            onChange={() =>
-              this.updateFormInput('showCompleted', 'Not Completed')
-            }
-          />
-        </FormField>
+          Refresh Users...
+        </Button>
+      </Pane>
+      <FormField label="Show:">
+        <Radio
+          name="showCompleted"
+          value="All"
+          label="All"
+          checked={formData.showCompleted === 'All'}
+          onChange={() => updateFormInput('showCompleted', 'All')}
+        />
+        <Radio
+          name="showCompleted"
+          value="Completed"
+          label="Completed"
+          checked={formData.showCompleted === 'Completed'}
+          onChange={() => updateFormInput('showCompleted', 'Completed')}
+        />
+        <Radio
+          name="showCompleted"
+          value="Not Completed"
+          label="Not Completed"
+          checked={formData.showCompleted === 'Not Completed'}
+          onChange={() => updateFormInput('showCompleted', 'Not Completed')}
+        />
+      </FormField>
 
-        <Pane textAlign="right">
-          <Button
-            type="submit"
-            disabled={isLoadingUsers || !this.state.isValid}
-            appearance="primary"
-          >
-            Submit
-          </Button>
-        </Pane>
-      </Card>
-    );
-  }
-}
+      <Pane textAlign="right">
+        <Button
+          type="submit"
+          disabled={isLoadingUsers || !isValid}
+          appearance="primary"
+        >
+          Submit
+        </Button>
+      </Pane>
+    </Card>
+  );
+};
+export default Filter;

From 0d3c62826409d885925853d74c568d401ed562d1 Mon Sep 17 00:00:00 2001
From: Dan Ott <dan@dtott.com>
Date: Tue, 28 May 2019 09:55:04 -0400
Subject: [PATCH 10/12] fix api sleep

---
 src/Filter.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/Filter.js b/src/Filter.js
index dc989ec..e8ffb8d 100644
--- a/src/Filter.js
+++ b/src/Filter.js
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import SelectUsers from './SelectUsers';
 import { Heading, Pane, Button, Card, FormField, Radio } from 'evergreen-ui';
+import { Api } from './Api';
 
 const Filter = ({
   isLoadingUsers,
@@ -28,7 +29,7 @@ const Filter = ({
 
     const validate = async function() {
       // console.log('Validation started');
-      await new Promise(resolve => setTimeout(resolve, 250));
+      await Api.sleep(250);
       if (isCurrent) {
         setIsValid(!!(formData.userId && formData.showCompleted));
         // console.log('Validation completed');

From 18c3d0285056635d67aa1e608926bd687e58fa26 Mon Sep 17 00:00:00 2001
From: Dan Ott <dan@dtott.com>
Date: Fri, 24 May 2019 16:31:27 -0400
Subject: [PATCH 11/12] Hooks for SelectUsers

---
 src/SelectUsers.js | 101 ++++++++++++++++++++++-----------------------
 1 file changed, 49 insertions(+), 52 deletions(-)

diff --git a/src/SelectUsers.js b/src/SelectUsers.js
index 9eb103c..a8619a3 100644
--- a/src/SelectUsers.js
+++ b/src/SelectUsers.js
@@ -1,61 +1,58 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Select } from 'evergreen-ui';
 
-export default class SelectUsers extends React.Component {
-  constructor(props) {
-    super(props);
+const SelectUsers = ({ isLoading, userId, onChange, users }) => {
+  // const x = useMemo(()=> {return something}, [])
+  const [calculatedUsers, setCalculatedUsers] = useState([]);
 
-    this.state = {
-      calculatedUsers: [],
+  useEffect(() => {
+    const expensiveCalculationOnUsers = () => {
+      if (users) {
+        console.log('OMG this takes forever');
+        return users;
+      }
+      return [];
     };
-  }
 
-  expensiveCalculationOnUsers() {
-    if (this.props.users) {
-      console.log('OMG this takes forever');
-      return this.props.users;
-    }
-    return [];
-  }
+    setCalculatedUsers(expensiveCalculationOnUsers());
+  }, [users]);
 
-  componentDidMount() {
-    this.setState({
-      calculatedUsers: this.expensiveCalculationOnUsers(),
-    });
-  }
+  // componentDidMount() {
+  //   this.setState({
+  //     calculatedUsers: this.expensiveCalculationOnUsers(),
+  //   });
+  // }
 
-  componentDidUpdate(prevProps) {
-    if (prevProps.users !== this.props.users) {
-      this.setState({
-        calculatedUsers: this.expensiveCalculationOnUsers(),
-      });
-    }
-  }
+  // componentDidUpdate(prevProps) {
+  //   if (prevProps.users !== this.props.users) {
+  //     this.setState({
+  //       calculatedUsers: this.expensiveCalculationOnUsers(),
+  //     });
+  //   }
+  // }
 
-  render() {
-    const { isLoading, userId, onChange } = this.props;
+  return (
+    <Select
+      disabled={isLoading || !calculatedUsers.length}
+      onChange={e => onChange(e.currentTarget.name, e.currentTarget.value)}
+      value={userId}
+      name="userId"
+      id="userId"
+    >
+      {isLoading || !calculatedUsers.length ? (
+        <option>Loading users...</option>
+      ) : (
+        <>
+          <option value="">Select User...</option>
+          {calculatedUsers.map(user => (
+            <option key={user.id} value={user.id}>
+              {user.name}
+            </option>
+          ))}
+        </>
+      )}
+    </Select>
+  );
+};
 
-    return (
-      <Select
-        disabled={isLoading || !this.state.calculatedUsers.length}
-        onChange={e => onChange(e.currentTarget.name, e.currentTarget.value)}
-        value={userId}
-        name="userId"
-        id="userId"
-      >
-        {isLoading || !this.state.calculatedUsers.length ? (
-          <option>Loading users...</option>
-        ) : (
-          <>
-            <option value="">Select User...</option>
-            {this.state.calculatedUsers.map(user => (
-              <option key={user.id} value={user.id}>
-                {user.name}
-              </option>
-            ))}
-          </>
-        )}
-      </Select>
-    );
-  }
-}
+export default SelectUsers;

From a84b67ad66fb99d5edf3e93dcf4a0d24ba4f2ecb Mon Sep 17 00:00:00 2001
From: Dan Ott <dan@dtott.com>
Date: Fri, 24 May 2019 16:32:02 -0400
Subject: [PATCH 12/12] remove comments

---
 src/SelectUsers.js | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/src/SelectUsers.js b/src/SelectUsers.js
index a8619a3..a7cef84 100644
--- a/src/SelectUsers.js
+++ b/src/SelectUsers.js
@@ -17,20 +17,6 @@ const SelectUsers = ({ isLoading, userId, onChange, users }) => {
     setCalculatedUsers(expensiveCalculationOnUsers());
   }, [users]);
 
-  // componentDidMount() {
-  //   this.setState({
-  //     calculatedUsers: this.expensiveCalculationOnUsers(),
-  //   });
-  // }
-
-  // componentDidUpdate(prevProps) {
-  //   if (prevProps.users !== this.props.users) {
-  //     this.setState({
-  //       calculatedUsers: this.expensiveCalculationOnUsers(),
-  //     });
-  //   }
-  // }
-
   return (
     <Select
       disabled={isLoading || !calculatedUsers.length}