From 39cfb2b29aa478233f6e8e704c2a468a42248667 Mon Sep 17 00:00:00 2001
From: Chetna Pannu <chetna.pannu@gmail.com>
Date: Mon, 16 Jul 2018 13:16:44 -0400
Subject: [PATCH] #6 - Added user profile component with stubbed state

---
 src/App.js         |  2 ++
 src/UserProfile.js | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 35 insertions(+)
 create mode 100644 src/UserProfile.js

diff --git a/src/App.js b/src/App.js
index 203067e..e331c20 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
+import UserProfile from './UserProfile';
 
 class App extends Component {
   render() {
@@ -13,6 +14,7 @@ class App extends Component {
         <p className="App-intro">
           To get started, edit <code>src/App.js</code> and save to reload.
         </p>
+        <UserProfile />
       </div>
     );
   }
diff --git a/src/UserProfile.js b/src/UserProfile.js
new file mode 100644
index 0000000..5eae3c5
--- /dev/null
+++ b/src/UserProfile.js
@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+
+class UserProfile extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      username: 'Jane Doe',
+      createdDate: '2015-06-31',
+      description: 'Amazing user',
+      numOfStories: 5,
+    };
+  }
+
+  render() {
+    let stories;
+    if (this.state.numOfStories > 0) {
+      stories = 'Number of stories submitted: ' + this.state.numOfStories;
+    } else {
+      stories = 'No stories submitted yet'
+    }
+
+    return (
+      <div className="UserProfile">
+        <p>Username: {this.state.username}</p>
+        <p>Created Date: {this.state.createdDate}</p>
+        <p>Description: {this.state.description}</p>
+        <p>{stories}</p>
+      </div>
+    );
+  }
+}
+
+export default UserProfile;