Merge pull request #33 from jdunk/add-unmatch-button

Adds an "Unmatch" button (and fixes many eslint errors)

Author: Paul Xu

app/components/Button/styles.css

@@ -4,7 +4,7 @@
   color: white;
   font-size: 10px;
   margin:5px;
-  }
+}
 
 .locationToggle {
   composes: button;
@@ -32,6 +32,7 @@
 
 .buttonMatch {
   composes: button;
+  cursor: pointer;
   height: 50px;
   width: 50px;
   font-weight: 600;
@@ -60,7 +61,6 @@
   border-color: #5cc3e8;
 }
 
-
 .superlike:hover{
   color: white;
   background-color: #5cc3e8;
@@ -79,7 +79,8 @@
   transition: 0.25s;
 }
 
-.fetchMatches {
+.fetchMatches, .unmatch {
+  cursor: pointer;
   font-size: 12px;
   max-height: 30px;
   padding: 5px 15px;
@@ -97,7 +98,7 @@
   color: #e95f5c;
 }
 
-.fetchMatches:hover {
+.fetchMatches:hover, .unmatch:hover {
   background-color: transparent;
   color: #e95f5c;
   transition: 0.25s;
@@ -109,8 +110,6 @@
   transition: 0.25s;
 }
 
-
-
 .accountSettings {
   flex: 1;
   background: white;

app/components/DetailView/index.js

@@ -9,10 +9,6 @@ import Icon from 'components/Icon';
 import Text from 'components/Text';
 import Button from 'components/Button';
 
-const buttonMapping = [
-  'pass', 'superlike', 'like',
-];
-
 class DetailView extends React.Component {
   componentWillReceiveProps(nextProps) {
     if (nextProps.imageData.length === 0) {
@@ -41,15 +37,6 @@ class DetailView extends React.Component {
     }
   }
 
-
-  renderButtons({ _id, content_hash, name }, onClickButton) {
-    return (
-      <div className={styles.detailViewContainerButtons}>
-      {buttonMapping.map((each) => <Button key={each} type={each} details={{ name }} onClick={onClickButton} id={_id} hash={content_hash}></Button>)}
-      </div>
-    );
-  }
-
   render() {
     const age = getAge(this.props.data.birth_date);
     const jobs = this.props.data.jobs && this.props.data.jobs[0];
@@ -85,6 +72,7 @@ class DetailView extends React.Component {
           <Text type="school">{schools && schools.name}</Text>
           <Text type="jobs">{(jobs && jobs.title) && jobs.title.name}{(jobs && jobs.title) && jobs.company ? ' at ' : null}{jobs && jobs.company && <a href={jobs.company.id} target="_blank">{jobs.company.name}</a>}</Text>
           <Text type="bio">{this.props.data.bio}</Text>
+          {this.props.unmatch ? <Button type="unmatch" onClick={() => this.props.unmatch(this.props.matchId)}>Unmatch</Button> : null}
 
           {this.props.data.common_connections && this.props.data.common_connections.length > 0 ?
             <div>
@@ -136,7 +124,8 @@ DetailView.propTypes = {
   isFetching: PropTypes.bool,
   isPotentialLike: PropTypes.bool,
   recommendationView: PropTypes.bool,
+  unmatch: PropTypes.func,
+  matchId: PropTypes.string,
 };
 
-
 export default DetailView;

app/containers/Messages/actions.js

@@ -9,6 +9,9 @@ import {
   SEND_MESSAGE,
   SEND_MESSAGE_SUCCESS,
   SEND_MESSAGE_ERROR,
+  UNMATCH,
+  UNMATCH_SUCCESS,
+  UNMATCH_ERROR,
   ALL_DATA_FETCHED,
   UPDATE_POINTER,
   FETCH_MATCHES_DATA,
@@ -107,6 +110,28 @@ export function sendMessageError(error) {
   };
 }
 
+export function unmatch(id) {
+  return {
+    type: UNMATCH,
+    payload: {
+      id,
+    },
+  };
+}
+
+export function unmatchSuccess() {
+  return {
+    type: UNMATCH_SUCCESS,
+  };
+}
+
+export function unmatchError(error) {
+  return {
+    type: UNMATCH_ERROR,
+    payload: error,
+  };
+}
+
 export function updatePointer() {
   return {
     type: UPDATE_POINTER,

app/containers/Messages/constants.js

@@ -8,6 +8,9 @@ export const SELECT_PERSON = 'SELECT_PERSON';
 export const SEND_MESSAGE = 'SEND_MESSAGE';
 export const SEND_MESSAGE_SUCCESS = 'SEND_MESSAGE_SUCCESS';
 export const SEND_MESSAGE_ERROR = 'SEND_MESSAGE_ERROR';
+export const UNMATCH = 'UNMATCH';
+export const UNMATCH_SUCCESS = 'UNMATCH_SUCCESS';
+export const UNMATCH_ERROR = 'UNMATCH_ERROR';
 export const UPDATE_POINTER = 'UPDATE_POINTER';
 export const ALL_DATA_FETCHED = 'ALL_DATA_FETCHED';
 export const FETCH_MATCHES_DATA = 'FETCH_MATCHES_DATA';

app/containers/Messages/index.js

@@ -29,6 +29,7 @@ import { createStructuredSelector } from 'reselect';
 import {
   selectPersonAction,
   sendMessage,
+  unmatch,
   fetchMatchData,
   fetchMatchDataLocally,
   dumpAllInit,
@@ -63,35 +64,39 @@ export class Messages extends React.Component { // eslint-disable-line react/pre
   }
 
   mapMatches() {
-    return this.props.selectMatches && this.props.selectMatches.map((each) => {
-      return (<MessengerCard
+    return this.props.selectMatches && this.props.selectMatches.map((each) =>
+      <MessengerCard
         onClick={this.props.selectPerson}
         key={each._id}
         data={each}
         isReply={each.messages.length !== 0 && each.messages.slice(-1)[0].from === this.props.currentUserId}
         isNew={each.person && each.person._id && this.props.newMatches.indexOf(each.person._id) !== -1}
-      />);
-    });
+      />
+    );
   }
 
   mapMessages() {
-    return this.props.matchMessages.map((each) => {
-      return (<MessageBubble
+    return this.props.matchMessages.map((each) =>
+      <MessageBubble
         key={each.payload._id}
         from={each.from}
         date={each.payload.sent_date}
       >
         {each.payload.message}
-      </MessageBubble>);
-    })
+      </MessageBubble>
+    )
     .concat(this.props.selectOptimistic.map((each) => {
-      if (each.id === this.props.currentPerson.id) {
-        return (<MessageBubble
-        key={each.message}
-        from="you">
+      if (each.id !== this.props.currentPerson.id) {
+        return null;
+      }
+
+      return (
+        <MessageBubble
+          key={each.message}
+          from="you"
+        >
           {each.message}
         </MessageBubble>);
-      }
     }));
   }
 
@@ -102,7 +107,8 @@ export class Messages extends React.Component { // eslint-disable-line react/pre
     if (this.props.selectMatches) {
       return <FormattedMessage {...messages.whenLoadedData} />;
     }
-      return <FormattedMessage {...messages.whenNoDataisFound} />;
+
+    return <FormattedMessage {...messages.whenNoDataisFound} />;
   }
 
   render() {
@@ -154,6 +160,8 @@ export class Messages extends React.Component { // eslint-disable-line react/pre
                   <DetailView
                     data={this.props.currentPerson.person}
                     imageData={this.props.matchDetailImages}
+                    unmatch={this.props.onUnmatch}
+                    matchId={this.props.currentPerson && this.props.currentPerson._id}
                   /> :
                   <Panel hasMatches targetGender={this.props.targetGender} />}
               </div>
@@ -169,6 +177,7 @@ function mapDispatchToProps(dispatch) {
   return {
     selectPerson: (id) => dispatch(selectPersonAction(id)),
     onSendMessage: (id, message) => dispatch(sendMessage(id, message)),
+    onUnmatch: (id) => dispatch(unmatch(id)),
     fetchHistory: () => dispatch(fetchMatchData()),
     fetchHistoryLocally: () => dispatch(fetchMatchDataLocally()),
     dumpAll: () => dispatch(dumpAllInit()),
@@ -199,6 +208,7 @@ Messages.propTypes = {
   matchMessages: PropTypes.array,
   matchDetailImages: PropTypes.array,
   onSendMessage: PropTypes.func,
+  onUnmatch: PropTypes.func,
   fetchHistory: PropTypes.func,
   selectOptimisticUI: PropTypes.func,
   selectOptimistic: PropTypes.array,

app/containers/Messages/reducer.js

@@ -10,6 +10,7 @@ import {
   SEND_MESSAGE,
   SEND_MESSAGE_ERROR,
   SEND_MESSAGE_SUCCESS,
+  UNMATCH,
   UPDATE_POINTER,
   ALL_DATA_FETCHED,
   FETCH_MATCHES_DATA,
@@ -60,10 +61,15 @@ function messagesReducer(state = initialState, action) {
       return state
         .set('isSending', true)
         .set('optimisticUI', action.payload.message.match(/gif/) ? state.get('optimisticUI') : state.get('optimisticUI').concat(action.payload));
-    case SEND_MESSAGE_ERROR:
-      return state.set('isSending', false);
     case SEND_MESSAGE_SUCCESS:
       return state.set('isSending', false);
+    case SEND_MESSAGE_ERROR:
+      return state.set('isSending', false);
+    case UNMATCH:
+      return state
+        .set('isFetching', true)
+        .set('optimisticUI', [])
+        .set('currentPerson', null);
     case UPDATE_POINTER:
       return state.set('pointer', state.get('pointer') + 1);
     case ALL_DATA_FETCHED:
@@ -75,7 +81,7 @@ function messagesReducer(state = initialState, action) {
     case LOCATION_CHANGE:
       return state
       .set('optimisticUI', [])
-      .set('currentPerson', '');
+      .set('currentPerson', null);
     case RELOAD_DATA_PLEASE:
       return state
       .set('optimisticUI', []);

app/containers/Messages/sagas.js

@@ -9,6 +9,7 @@ import { selectAuthToken } from 'containers/Auth/selectors';
 
 import {
   SEND_MESSAGE,
+  UNMATCH,
   FETCH_MATCHES_LOCALLY,
   DUMP_ALL_SUCCESS,
   DUMP_ALL_INIT,
@@ -19,6 +20,8 @@ import { selectPointer, selectMatches } from './selectors';
 import {
   sendMessageSuccess,
   sendMessageError,
+  unmatchSuccess,
+  unmatchError,
   updatePointer,
   allDataFetched,
   fetchMatchData,
@@ -109,6 +112,40 @@ export function* loadLocalData(additionalFunction = false) {
 }
 
 // Individual exports for testing
+export function* doUnmatch(payload) {
+  const userToken = yield select(selectAuthToken());
+  const { id } = payload;
+  const postURL = `${AUTH_URL}/tinder/unmatch/${id}`;
+  try {
+    const result = yield call(postRequest, postURL, { userToken });
+    if (result.status === 200) {
+      yield put(unmatchSuccess());
+
+      const unmatchedId = result.data.id;
+
+      const userID = yield select(selectUserID());
+      const matchesList = yield getToken(`matchesList_${userID}`);
+
+      yield storeToken(`matchesList_${userID}`, matchesList.filter((each) => each !== unmatchedId));
+
+      yield call(loadLocalData, reloadDataPlease);
+    }
+  } catch (error) {
+    yield put(unmatchError(error));
+    yield put(newNotification(error));
+    yield put(newNotificationAdded());
+  }
+}
+
+function* unmatchWatcher() {
+  const unmatchWatch = yield actionChannel(UNMATCH);
+
+  while (true) {
+    const { payload } = yield take(unmatchWatch);
+    yield doUnmatch(payload);
+  }
+}
+
 export function* sendMessageData(payload) {
   const userToken = yield select(selectAuthToken());
   const { id } = payload;
@@ -144,7 +181,6 @@ export function* sendMessageData(payload) {
   }
 }
 
-
 function* sendMessageWatcher() {
   const messageWatch = yield actionChannel(SEND_MESSAGE);
 
@@ -175,13 +211,15 @@ export function* reloadWatcher() {
 
 export function* messageSaga() {
   const messageWatcher = yield fork(sendMessageWatcher);
+  const unmatchWatch = yield fork(unmatchWatcher);
   const reloadWatch = yield fork(reloadWatcher);
   const dataDumpWatch = yield fork(dumpDataWatcher);
   const dataLoadLocalWatch = yield fork(dataLoadLocalWatcher);
 
   yield take(LOCATION_CHANGE);
   yield cancel(reloadWatch);
   yield cancel(messageWatcher);
+  yield cancel(unmatchWatch);
   yield cancel(dataLoadLocalWatch);
   yield take(DUMP_ALL_SUCCESS);
   yield cancel(dataDumpWatch);

server/api/api.js

@@ -178,6 +178,15 @@ router.post('/tinder/message/:id', (req, res) => {
   .catch((error) => res.status(400).json(error));
 });
 
+router.post('/tinder/unmatch/:id', (req, res) => {
+  const client = new tinder.TinderClient();
+  const { userToken } = req.body;
+  const id = req.params.id;
+  client.setAuthToken(userToken);
+  tinderPromise.unmatch(client, id)
+    .then(() => res.status(200).json({ id }))
+    .catch((error) => res.status(400).json(error));
+});
 
 router.post('/tinder/update/profile', (req, res) => {
   const client = new tinder.TinderClient();