Merge pull request #58 from patrickry07/unique

Fixed comments bug and purchased button bug

README.md

@@ -1,2 +1,51 @@
-# lead-the-deal
-Lead Generator for Sales
+# Lead the Deal
+
+> Lead the deal is a Business to Business App which helps serve as a marketplace for contact information. A user starts off with 10 points, which he can use to purchase more confact information from the App. After this, this user would need to upload their own contacts in order to access any further contacts from the Lead the Deal App.
+
+We hope to help companies or individuals leverage their existing sales contacts in order to access contact information other individuals or companies have entered into the site.
+
+## Team
+
+  - __Product Owner__: Arnuflo Manriquez
+  - __Scrum Master__: Patrick Ryan 
+  - __Development Team Members__: Arnulfo Manriquez, Patrick Ryan, Winntana Beyenne
+
+## Table of Contents
+
+1. [Usage](#Usage)
+1. [Requirements](#requirements)
+1. [Development](#development)
+    1. [Installing Dependencies](#installing-dependencies)
+1. [Team](#team)
+1. [Contributing](#contributing)
+
+## Usage
+
+> Some usage instructions
+
+## Requirements
+
+- nvm 0.33.11
+- mysql  Ver 14.14 Distrib 5.7.25
+
+
+## Development
+
+### Installing Dependencies
+
+From within the root directory:
+
+```sh
+sudo npm install -g bower
+npm install
+bower install
+```
+
+### Roadmap
+
+View the project roadmap [here](https://github.com/asyncorswim/lead-the-deal/issues)
+
+
+## Contributing
+
+At this time, external pull requests from outside our team are not being considered. Thank you.

client/src/components/ButtonList.jsx

@@ -66,7 +66,7 @@ constructor(props){
           Lead the deal is a Business to Business platform that serves as a marketplace for contact information. A user starts off with 10 points, which you can use to purchase contacts. 
           If you run out of points, you can upload new contacts in order to obtain more points and access any further contacts from the database.
           <h3>Uploaded Contacts</h3>
-          <p>Click to see a list of all the contacts that you have uploaded to the databse. You also have access to a notepad for each different user 
+          <p>Click to see a list of all the contacts that you have uploaded to the database. You also have access to a notepad for each different user 
             that will only be visible to you.
           </p>
           <h3>Purchased Contacts</h3>

client/src/components/DashBody.jsx

@@ -18,7 +18,6 @@ class DashBody extends React.Component {
     super(props);
     this.state = {
       // userId = null,
-      leads: [{ name: 'patrick ryan', company: 'zlien' , id: 1}, { name: 'winntana B.', company: 'Operation Spark' , id:2}, { name: 'arnulfo Man', company: 'guitar' }],
       selectedView: null,
       uploaded: [],
       purchased: [],
@@ -28,8 +27,10 @@ class DashBody extends React.Component {
       contactView: null,
       renderContactList: false,
       commentBodyText: '',
-      comments: [{date: 'Add comments to keep track of your leads!', comment: 'The easiest place to keep track of lead data!'}],
-      username: ''
+      comments: [],
+      username: '',
+      purchaseState: 'Purchase This Contact',
+      purchaseColor: 'white'
     };
     const { classes } = props;
     DashBody.propTypes = {
@@ -118,7 +119,9 @@ selectContact(contactId, list, view){
     const contact = this.state.searchedContacts.filter((contact) => contact.id === contactId)[0]
     this.setState({
       currentLead: contact,
-      contactView: 'limited'
+      contactView: 'limited',
+      purchaseState: "Purchase This Contact",
+      purchaseColor: "white"
     })
   }
 
@@ -178,10 +181,13 @@ if (this.props.points > 0){
   .then((result)=>{
     console.log('i have just purchased this contact',result)
     this.props.getUserPoints();
-    // document.getElementById('purchase-button').innerHTML = 'Contact Purchased';
+    // document.getElementById('purclimitedhase-button').innerHTML = 'Contact Purchased';
     // document.getElementById('purchase-button').style.color = 'grey';
-    event.target.innerHTML = 'Contact Purchased';
-    event.target.style.color = 'grey';
+    // event.target.innerHTML = 'Contact Purchased';
+    this.setState({
+      purchaseState: "Contact Purchased",
+      purchaseColor: 'grey'
+    })
   })
   .catch((err)=>{
     console.log(err)
@@ -253,7 +259,7 @@ render(){
             <LeadInfo currentLead={this.state.currentLead} contactView={this.state.contactView} 
             contactPurchase={this.contactPurchase} commentBody={this.commentBody} 
             handleComment={this.handleComment} comments={this.state.comments}
-            commentBodyText={this.state.commentBodyText}/>
+            commentBodyText={this.state.commentBodyText} purchaseState={this.state.purchaseState} purchaseColor={this.state.purchaseColor}/>
           </Grid>
         </Grid>
       </div>

client/src/components/LeadInfo.jsx

@@ -28,7 +28,7 @@ const styles = {
 
 
 
-const Practice = ({currentLead, contactView, contactPurchase, handleComment, commentBodyText, comments, commentBody}) => {
+const Practice = ({currentLead, contactView, contactPurchase, handleComment, commentBodyText, comments, commentBody, purchaseState, purchaseColor}) => {
   let verified;
   if (contactView === 'access'){
     if (currentLead.verified) {
@@ -86,18 +86,18 @@ const Practice = ({currentLead, contactView, contactPurchase, handleComment, com
           </Card>
         </div>
         <div>
-          {comments.map((comment,index)=>{
-            let year = comment.date.substring(0, 4);
-            let month = comment.date.substring(5,7);
-            let day = comment.date.substring(8,10);
+          {
+            comments.map((comment,index)=>{
+            console.log(comment)
+            let prettyDate;
+            prettyDate = moment(comment.date).format('MMMM Do YYYY, h:mm a')
             return (
               <div key={index} className="comments-card">
               <Card>
                 <CardActionArea>
                   <CardContent>
                     <Typography gutterBottom variant="h6" component="h2">
-                      <div>{moment(comment.date).format('MMMM Do YYYY, h:mm a')
-                      }</div>
+                      <div>{prettyDate}</div>
                     </Typography>
                     <Divider />
                     <div className="contact-info">
@@ -146,8 +146,8 @@ const Practice = ({currentLead, contactView, contactPurchase, handleComment, com
           <div id={currentLead.id}>
 
           <Button size="small" variant="contained" color="primary" onClick={()=>contactPurchase(event, currentLead.id)}>
-           <span  >
-            Purchase This Contact
+           <span style={{color: purchaseColor}}>
+            {purchaseState}
             </span>
           </Button>
                   </div>