merging with yohan's master

client/actions/userDataActions.jsx

@@ -8,4 +8,13 @@ export function currentUserDataRequest() {
       return res.data;
     });
   }
+}
+
+export function userUpdateProfile(userProfileData) {
+  return dispatch => {
+    return axios.post('/api/profileupdate', userProfileData).then(res => {
+      console.log('outcoming data' + res.data);
+        return res.data;
+    });
+  }
 }

client/package.json

@@ -20,14 +20,16 @@
     "material-ui": "^0.19.0",
     "node-sass": "^4.5.3",
     "prop-types": "^15.5.10",
+    "rc-slider": "^8.3.1",
     "react": "^15.6.1",
     "react-bootstrap": "^0.31.2",
     "react-dom": "^15.6.1",
+    "react-popup": "^0.8.0",
+    "react-popupbox": "^2.0.1",
     "react-redux": "^5.0.6",
     "react-router": "^4.1.2",
     "react-router-dom": "^4.1.2",
     "react-swipe-card": "^0.1.4",
-    "react-popupbox":"^2.0.1",
     "react-tap-event-plugin": "^2.0.1",
     "redux": "^3.7.2",
     "redux-devtools-extension": "^2.13.2",

client/src/App.jsx

@@ -8,6 +8,7 @@ import LoginPage from './LoginPage.jsx';
 import ProfilePage from './ProfilePage.jsx';
 import MatchmakerPage from './MainApp/MatchmakerPage.jsx';
 import { connect } from 'react-redux';
+import ProfileForm from './ProfileForm.jsx';
 
 class App extends Component {
   constructor(props) {
@@ -28,12 +29,12 @@ class App extends Component {
         <Route path="/login" component={LoginPage} />
         <Route path="/profile" component={ProfilePage} />
         <Route path="/matchmaker" render={() => ( isAuthenticated ? <MatchmakerPage/> : <Redirect to="/"/> )} />
+        <Route path="/profileupdate" component={ProfileForm} />
       </div>
     );
   }
 }
 
-
 function mapStateToProps(state) {
   return {
     auth: state.auth

client/src/MainApp/MatchmakerEvent.jsx

@@ -1,29 +1,31 @@
 import React, { Component } from 'react';
 import Cards, { Card } from 'react-swipe-card';
-import PopupChat from './PopupChat.jsx';
 
 class MatchmakerEvent extends Component {
   render () {
     // data will be an array of objects(most probably JSON), which each objects will contain the information from a user: username, text description, avatar, etc
     // Each card should have an output for showing username, avatar, text description, and a button to send an invite
-    const data = ['Match #1', 'Match #2', 'Match #3', 'Match #4', 'Match #5', 'Match #6']
+    const data = this.props.compatUsers
+    console.log(data)
     return (
       <div>
-        <PopupChat /> 
         <Cards onEnd={() => console.log('end')} className='master-root'>
-          {data.map(item =>
-            //make card and card border bigger
-            //make sure it's mobile responsive
-            <Card
-              onSwipeLeft={() => console.log('swipe left')}
-              onSwipeRight={() => console.log('swipe right')}>
-              <h2>{item}</h2>
-              <img className="avatar" src="" alt="avatar image"/> 
-              <p>Username</p>
-              <p className="card-text-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae risus risus.</p>
-              <button className="btn-poke">Poke!</button>     
-            </Card>
-            )}
+          { 
+            data.map(item =>
+                                   //make card and card border bigger
+                                   //make sure it's mobile responsive
+                                   <Card
+                                     onSwipeLeft={() => console.log('reject ' + item.username)}
+                                     onSwipeRight={() => {
+                                      console.log('accept ' + item.username);
+                                      this.props.inviteUserB(item);
+                                     }}>
+                                     <h2>{item.username}</h2>
+                                     <img className="avatar" src={item.imageurl} alt="avatar image"/> 
+                                     <p className="card-text-description">{item.tagline}</p>
+                                     <p className="card-text-description">{item.blurb}</p>
+                                   </Card>
+                                   )}
         </Cards>
       </div>
     )