Convert setUser to useReducer

src/App.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useReducer } from 'react'
 import PostList from './post/PostList'
 import CreatePost from './post/CreatePost'
 import UserBar from './user/UserBar'
@@ -16,13 +16,25 @@ const defaultPosts = [
   },
 ]
 
+function userReducer (state, action) {
+  switch (action.type) {
+    case 'LOGIN':
+    case 'REGISTER':
+      return action.username
+    case 'LOGOUT':
+      return ''
+    default:
+      throw new Error('')
+  }
+}
+
 export default function App () {
-  const [ user, setUser ] = useState('')
+  const [ user, dispatchUser ] = useReducer(userReducer, '')
   const [ posts, setPosts ] = useState(defaultPosts)
 
   return (
     <div style={{ padding: 8 }}>
-      <UserBar user={user} setUser={setUser} />
+      <UserBar user={user} dispatch={dispatchUser} />
       <br />
       {user && <CreatePost user={user} posts={posts} setPosts={setPosts} />}
       <br />

src/user/Login.js

@@ -1,14 +1,14 @@
 import React, { useState } from 'react'
 
-export default function Login ({ setUser }) {
+export default function Login ({ dispatch }) {
   const [ username, setUsername ] = useState('')
 
   function handleUsername (evt) {
     setUsername(evt.target.value)
   }
 
   return (
-    <form onSubmit={e => {e.preventDefault();setUser(username)}}>
+    <form onSubmit={e => {e.preventDefault();dispatch({type: 'LOGIN', username})}}>
       <label htmlFor="login-username">Username:</label>
       <input type="text"
         value={username}

src/user/Logout.js

@@ -1,8 +1,8 @@
 import React from 'react'
 
-export default function Logout ({ user, setUser }) {
+export default function Logout ({ user, dispatch }) {
   return (
-    <form onSubmit={e => {e.preventDefault(); setUser('')}}>
+    <form onSubmit={e => {e.preventDefault(); dispatch({type: 'LOGOUT'})}}>
       Logged in as: <b>{user}</b>
       <input type="submit" value="Logout" />
     </form>

src/user/Register.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 
-export default function Register ({ setUser }) {
+export default function Register ({ dispatch }) {
   const [ username, setUsername ] = useState('')
   const [ password, setPassword ] = useState('')
   const [ passwordRepeat, setPasswordRepeat ] = useState('')
@@ -18,7 +18,7 @@ export default function Register ({ setUser }) {
   }
 
   return (
-    <form onSubmit={e => {e.preventDefault(); setUser(username)}}>
+    <form onSubmit={e => {e.preventDefault(); dispatch({type: 'REGISTER', username})}}>
       <label htmlFor="register-username">Username:</label>
       <input
         type="text"

src/user/UserBar.js

@@ -4,14 +4,14 @@ import Login from './Login'
 import Logout from './Logout'
 import Register from './Register'
 
-export default function UserBar ({ user, setUser }) {
+export default function UserBar ({ user, dispatch }) {
   if (user) {
-    return <Logout user={user} setUser={setUser} />
+    return <Logout user={user} dispatch={dispatch} />
   } else {
     return (
       <React.Fragment>
-        <Login setUser={setUser} />
-        <Register setUser={setUser} />
+        <Login dispatch={dispatch} />
+        <Register dispatch={dispatch} />
       </React.Fragment>
     )
   }