add Profile

src/App.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { About, Tasks, Navbar } from './components'
+import { About, Tasks, Profile, Navbar } from './components'
 
 const defaultState = { user: {}, loading: true, tasks: [], search: '', newTask: '' }
 
@@ -65,6 +65,9 @@ class App extends React.Component {
   renderError() {
     return <div>Something went wrong. Please try again.</div>
   }
+  renderProfile() {
+    return <Profile {...this.state} />
+  }
   renderAbout() {
     return <About {...this.state} />
   }
@@ -80,6 +83,7 @@ class App extends React.Component {
     const renderComponent = () => this.state.loading ? this.renderLoading()
        : this.state.component === 'tasks' ? this.renderTasks(filtered, completed)
        : this.state.component === 'about' ? this.renderAbout()
+       : this.state.component === 'profile' ? this.renderProfile()
        : this.renderError()
 
 	return (<div>

src/components/index.js

@@ -4,5 +4,6 @@
 export { default as Navbar } from './navbar'
 export { default as About } from './about'
 export { default as Tasks } from './tasks'
+export { default as Profile } from './profile'
 // export {default as CreateASign} from ./create-a-sign.js
 // etc

src/components/navbar.js

@@ -12,7 +12,7 @@ function Navbar(props) {
 
 	  <div className={`nav-item mr-3 ${ props.component === 'about' ? "active" : 'disable'}`} onClick={() => props.navigate("about") }>About</div>
 
-          <div className="ml-auto">
+            <div className="ml-auto>" onClick={() => props.navigate("profile") }>
             <img className="rounded-circle mr-1" alt={props.user.name}
               width="16px" height="16px" src="/img/default-user-image.png" />
 	    {`Hello, ${props.user.name}!`}

src/components/profile.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function Profile(props) {
+    return (
+	<div>You are { props.user.name }.</div>
+    )
+}
+
+export default Profile