Added functionality to buttons

client/components/BystanderTicketBox.jsx

@@ -10,31 +10,49 @@
  */
 
 import React, { Component } from 'react';
-
+import { Form, Button } from 'react-bootstrap';
+let buttons;
 class BystanderTicketBox extends Component {
   constructor(props) {
     super(props);
   }
+
   render () {
-  // if (this.props.activeTickets[i].status === 'active') {
-  //   //ticket published by another user but has not been pick up yet
-  //   //Accept button will be active but Cancel button will not and mentee is anonymous
-  // } else if (this.props.userId !== this.props.activeTickets[i].mentorId && this.props.activeTickets[i].status === 'pending') {
-  //   //this is when the ticket has been picked up by another mentor already
-  //   //Both button will not be active and mentee is anonymous
-  // } else if (this.props.userId === this.props.activeTickets[i].mentorId && this.props.activeTickets[i].status === 'pending') {
-  //   //user is the mentor
-  //   //Cancel button is active but Accept is not. mentee userName is active
-  // }
+    if (this.props.ticket.status === 'active') {
+      //ticket published by another user but has not been pick up yet
+      //Accept button will be active but Cancel button will not and mentee is anonymous
+      buttons = (
+        <span>
+          <Button onClick={() => this.props.acceptTicket(this.props.messageId)}type="button" className="btn btn-success">Accept</Button>
+          <Button disabled={true} type="button" className="btn btn-warning">Cancel</Button>
+       </span>
+        )
+    } else if (this.props.ticket.userId !== this.props.ticket.mentorId && this.props.ticket.status === 'pending') {
+       //this is when the ticket has been picked up by another mentor already
+      //Both button will not be active and mentee is anonymous
+      buttons = (
+        <span>
+          <Button disabled={true} type="button" className="btn btn-success">Accept</Button>
+          <Button disabled={true} type="button" className="btn btn-warning">Cancel</Button>
+       </span>
+        )
+    } else if (this.props.ticket.userId === this.props.ticket.mentorId && this.props.ticket.status === 'pending') {
+       //user is the mentor
+      //Cancel button is active but Accept is not. mentee userName is active
+      buttons = (
+        <span>
+          <Button disabled={true} type="button" className="btn btn-success">Accept</Button>
+          <Button onClick={() => this.props.cancelAccept(this.props.messageId)} type="button" className="btn btn-warning">Cancel - not active</Button>
+       </span>
+        )
+    }
 
     return (
 
       <div className="BystanderTicketBox">
-      <h1>Hey from the BystanderTicketBox</h1>
-      {/* <span>
-      <button>ACCEPT</button>
-      <button>CANCEL</button>
-      </span> */}
+        <p>Request: {this.props.messageInput}</p>
+        <p>Expected Snaps: {this.props.messageRating}</p>
+        {buttons}
       </div>
     )
   }

client/components/MenteeTicketBox.jsx

@@ -11,7 +11,7 @@
 
 import React, { Component } from 'react';
 import { Form, Button } from 'react-bootstrap';
-
+let buttons;
 class MenteeTicketBox extends Component {
   constructor(props) {
     super(props);
@@ -24,14 +24,27 @@ class MenteeTicketBox extends Component {
       //   //your ticket has been picked up. 
       //   //Resolve is active but Delete is not
       // }
+      console.log(this.props.ticket)
+    if (this.props.ticket.status === 'active') {
+      buttons = (
+        <span>
+          <Button disabled={true} type="button" className="btn btn-success">Resolve</Button>
+          <Button onClick={() => this.props.deleteTicket(this.props.ticket.messageId)} type="button" className="btn btn-warning">Delete</Button>
+        </span>
+      )
+    } else {
+      buttons = (
+        <span>
+          <Button onClick={() => this.props.resolveTicket(this.props.ticket.messageId)}type="button" className="btn btn-success">Resolve</Button>
+          <Button disabled={true} type="button" className="btn btn-warning">Delete</Button>
+        </span>
+      )
+    }
     return (
     <div className="MenteeTicketBox">
       <p>Request: {this.props.messageInput}</p>
       <p>Expected Snaps: {this.props.messageRating}</p>
-      <span>
-        <button onClick={() => this.props.resolveTicket(this.props.messageId)}type="button" class="btn btn-success">Resolve</button>
-        <button onClick={() => this.props.deleteTicket(this.props.messageId)} type="button" class="btn btn-warning">Delete</button>
-      </span>
+      {buttons}
     </div>
     )
   }

client/containers/FeedContainer.jsx

@@ -58,30 +58,34 @@ class FeedContainer extends Component {
     } else {
       activeTickets = [];
       for (let i = 0; i < this.props.activeTickets.length; i++) {
-        activeTickets.push(
-          /*
-          if (this.props.userId !== this.props.activeTickets[i].userId) {
-            //ticket should render bystanderticketbox
+        let ticketBox;
+        if (this.props.userId !== this.props.activeTickets[i].menteeId) {
+          //ticket should render bystanderticketbox
+          ticketBox = (
             <BystanderTicketBox 
-            cancelTicket={this.props.cancelTicket}
+            cancelAccept={this.props.cancelAccept}
             acceptTicket={this.props.acceptTicket}
             messageInput={this.props.activeTickets[i].messageInput}
             messageRating={this.props.activeTickets[i].messageRating}
-            messageId={this.props.activeTickets[i].messageId}
+            ticket={this.props.activeTickets[i]}
             key={this.props.activeTickets[i].messageId}
             />
+            )
+          } else {
+            ticketBox = (
+              <MenteeTicketBox
+              deleteTicket={this.props.deleteTicket}
+              resolveTicket={this.props.resolveTicket}
+              messageInput={this.props.activeTickets[i].messageInput}
+              messageRating={this.props.activeTickets[i].messageRating}
+              ticket={this.props.activeTickets[i]}
+              key={this.props.activeTickets[i].messageId}
+              />
+              )
           }
 
-          */
-          <MenteeTicketBox
-          deleteTicket={this.props.deleteTicket}
-          resolveTicket={this.props.resolveTicket}
-          messageInput={this.props.activeTickets[i].messageInput}
-          messageRating={this.props.activeTickets[i].messageRating}
-          messageId={this.props.activeTickets[i].messageId}
-          key={this.props.activeTickets[i].messageId}
-          />
-          );
+
+          activeTickets.push(ticketBox);
         }
       }
 

client/reducers/ticketsReducer.js

@@ -20,6 +20,7 @@ const ticketState = {
 };
 
 const ticketsReducer = (state = ticketState, action) => {
+  let idx;
   switch (action.type) {
     // case types.USER_LOGIN:
     //   console.log(action);
@@ -64,33 +65,30 @@ const ticketsReducer = (state = ticketState, action) => {
       return { ...state };
 
     case types.DELETE_TICKET:
-        let idx;
         updatedTickets = state.activeTickets.map((ticket, index) => {
           if (ticket.messageId === action.payload) {
             idx = index
-            return ticket;
+            return ticket
           }
           return ticket;
         })
         updatedTickets.splice(idx, 1)
-
+        console.log(updatedTickets)
       return { 
         ...state,
         activeTickets: updatedTickets,
         ticketsCount: state.ticketsCount - 1
       };
 
     case types.RESOLVE_TICKET:
-        idx;
         updatedTickets = state.activeTickets.map((ticket, index) => {
           if (ticket.messageId === action.payload) {
             idx = index
-            return ticket;
+            return ticket
           }
           return ticket;
-        })
+        })    
         updatedTickets.splice(idx, 1)
-
       return { 
         ...state,
         activeTickets: updatedTickets,