Merge pull request #78 from topcoder-platform/develop

Adds confirm modal to Join Community button

Author: ajefts

src/assets/themes/wipro/wipro-logo.png

@@ -20,7 +20,7 @@
   }],
   "leaderboardApiUrl": "https://api.topcoder.com/v4/looks/0/run/json/",
   "logos": [
-    "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Wipro_Logo_RGB.png/480px-Wipro_Logo_RGB.png",
+    "/themes/wipro/wipro-logo.png",
     "/themes/wipro/logo_topcoder_with_name.svg"
   ],
   "menuItems": [

src/server/tc-communities/wipro/metadata.json

@@ -18,5 +18,7 @@ export default createActions({
     HIDE_JOIN_BUTTON: _.noop,
     JOIN_INIT: _.noop,
     JOIN_DONE: joinDone,
+    RESET_JOIN_BUTTON: _.noop,
+    SHOW_JOIN_CONFIRM_MODAL: _.noop,
   },
 });

src/shared/actions/tc-communities/index.js

@@ -7,48 +7,62 @@
 
 /* global window */
 
+import _ from 'lodash';
 import config from 'utils/config';
 import LoadingIndicator from 'components/LoadingIndicator';
 import Modal from 'components/Modal';
 import PT from 'prop-types';
 import React from 'react';
 import style from './style.scss';
 
+export const STATE = {
+  CONFIRM_JOIN: 'confirm-join',
+  DEFAULT: 'default',
+  HIDDEN: 'hidden',
+  JOINED: 'joined',
+  JOINING: 'joining',
+};
+
 export default function JoinCommunity({
-  canJoin,
   communityName,
   groupId,
   hideJoinButton,
   join,
-  joined,
-  joining,
+  resetJoinButton,
+  showJoinConfirmModal,
+  state,
   token,
   userId,
 }) {
-  if (!canJoin) return <div styleName="placeholder" />;
+  if (state === STATE.HIDDEN) return <div styleName="placeholder" />;
   return (
     <div>
       <button
         onClick={() => {
-          if (joining || joined) return;
-          if (token) join(token, groupId, userId);
+          switch (state) {
+            case STATE.JOINED:
+            case STATE.JOINING:
+              return;
+            default:
+          }
+          if (token) showJoinConfirmModal();
           else {
             /* If our visitor is not authenticated, the button redirects to
              * login page, with return URL set back to this page. */
             const url = encodeURIComponent(window.location.href);
             window.location = `${config.URL.AUTH}?retUrl=${url}`;
           }
         }}
-        styleName={`link ${joining ? 'joining' : ''}`}
+        styleName={`link ${state === STATE.JOINING ? 'joining' : ''}`}
       >
-        { joining ? (
+        { state === STATE.JOINING ? (
           <div>
             <p>Joining...</p>
             <LoadingIndicator theme={{ style: style.loadingIndicator }} />
           </div>
         ) : 'Join Community'}
       </button>
-      { joined ? (
+      { state === STATE.JOINED ? (
         <Modal onCancel={hideJoinButton}>
           <h1 styleName="modalTitle">Congratulations!</h1>
           <p styleName="modalMsg">You have joined {communityName}!</p>
@@ -58,6 +72,23 @@ export default function JoinCommunity({
           >Return to the Community</button>
         </Modal>
       ) : null}
+      { state === STATE.CONFIRM_JOIN ? (
+        <Modal onCancel={resetJoinButton}>
+          <p styleName="confirmMsg">
+            Are you sure you want to join {communityName}?
+          </p>
+          <div styleName="buttons">
+            <button
+              onClick={() => join(token, groupId, userId)}
+              styleName="btnConfirm"
+            >Join</button>
+            <button
+              onClick={resetJoinButton}
+              styleName="btnCancel"
+            >Cancel</button>
+          </div>
+        </Modal>
+      ) : null}
     </div>
   );
 }
@@ -69,13 +100,13 @@ JoinCommunity.defaultProps = {
 };
 
 JoinCommunity.propTypes = {
-  canJoin: PT.bool.isRequired,
   communityName: PT.string.isRequired,
   groupId: PT.string,
   hideJoinButton: PT.func.isRequired,
   join: PT.func.isRequired,
-  joined: PT.bool.isRequired,
-  joining: PT.bool.isRequired,
+  resetJoinButton: PT.func.isRequired,
+  showJoinConfirmModal: PT.func.isRequired,
+  state: PT.oneOf(_.values(STATE)).isRequired,
   token: PT.string,
   userId: PT.string,
 };

src/shared/components/tc-communities/JoinCommunity/index.jsx

@@ -1,5 +1,58 @@
 @import "~styles/tc-styles";
 
+@mixin button($color, $highlight-color) {
+  color: $color;
+  display: block;
+  background: $tc-white;
+  border: 1px solid $color;
+  border-radius: 20px;
+  font: 700 14px/40px 'Open Sans';
+  margin: 24px auto;
+  height: 40px;
+  text-align: center;
+  text-transform: uppercase;
+  width: 171px;
+
+  &:hover,
+  &:active,
+  &:focus,
+  &:visited {
+    color: $color;
+    outline: none;
+    text-decoration: none;
+  }
+
+  &:hover {
+    background: $highlight-color;
+  }
+}
+
+.confirmMsg {
+  @include tc-body;
+
+  text-align: center;
+}
+
+.btnCancel {
+  @include button($tc-light-blue, $tc-light-blue-10);
+
+  display: inline-block;
+  margin: 24px 0 0 12px;
+  width: 100px;
+}
+
+.btnConfirm {
+  @include button($tc-green, $tc-green-10);
+
+  display: inline-block;
+  margin: 24px 12px 0 0;
+  width: 100px;
+}
+
+.buttons {
+  text-align: center;
+}
+
 .done {
   color: $tc-light-blue;
   display: block;

src/shared/components/tc-communities/JoinCommunity/style.scss

@@ -1,6 +1,8 @@
 import _ from 'lodash';
 import actions from 'actions/tc-communities';
-import JoinCommunity from 'components/tc-communities/JoinCommunity';
+import JoinCommunity, {
+  STATE as JOIN_COMMUNITY,
+} from 'components/tc-communities/JoinCommunity';
 import { connect } from 'react-redux';
 
 function mapStateToProps(state) {
@@ -11,13 +13,14 @@ function mapStateToProps(state) {
     item.id === state.tcCommunities.meta.challengeGroupId);
   if (state.tcCommunities.hideJoinButton) canJoin = false;
 
+  if (canJoin) canJoin = state.tcCommunities.joinCommunityButton;
+  else canJoin = JOIN_COMMUNITY.HIDDEN;
+
   return {
-    canJoin,
     communityName: state.tcCommunities.meta.communityName,
     groupId: state.tcCommunities.meta.challengeGroupId,
-    joined: state.tcCommunities.joined,
-    joining: state.tcCommunities.joining,
     token: state.auth.tokenV3,
+    state: canJoin,
     userId: _.get(state.auth.user, 'userId'),
   };
 }
@@ -30,6 +33,8 @@ function mapDispatchToProps(dispatch) {
       dispatch(a.joinInit());
       dispatch(a.joinDone(...args));
     },
+    resetJoinButton: () => dispatch(a.resetJoinButton()),
+    showJoinConfirmModal: () => dispatch(a.showJoinConfirmModal()),
   };
 }
 

src/shared/containers/tc-communities/JoinCommunity.js

@@ -9,6 +9,7 @@ import actions from 'actions/tc-communities';
 import logger from 'utils/logger';
 import { handleActions } from 'redux-actions';
 import { combine, resolveReducers } from 'utils/redux';
+import { STATE as JOIN_COMMUNITY } from 'components/tc-communities/JoinCommunity';
 
 import { factory as metaFactory } from './meta';
 import { factory as newsFactory } from './news';
@@ -22,21 +23,29 @@ function onJoinDone(state, action) {
      * to see it normally. */
     alert('Failed to join the group!'); // eslint-disable-line no-alert
 
-    return { ...state, joined: false, joining: false };
+    return { ...state, joinCommunityButton: JOIN_COMMUNITY.DEFAULT };
   }
-  return { ...state, joined: true };
+  return { ...state, joinCommunityButton: JOIN_COMMUNITY.JOINED };
 }
 
 function create(initialState = {}) {
   const a = actions.tcCommunity;
   return handleActions({
-    [a.hideJoinButton]: state => ({ ...state, hideJoinButton: true }),
-    [a.joinInit]: state => ({ ...state, joining: true }),
+    [a.hideJoinButton]: state => ({
+      ...state, joinCommunityButton: JOIN_COMMUNITY.HIDDEN,
+    }),
+    [a.joinInit]: state => ({
+      ...state, joinCommunityButton: JOIN_COMMUNITY.JOINING,
+    }),
     [a.joinDone]: onJoinDone,
+    [a.resetJoinButton]: state => ({
+      ...state, joinCommunityButton: JOIN_COMMUNITY.DEFAULT,
+    }),
+    [a.showJoinConfirmModal]: state => ({
+      ...state, joinCommunityButton: JOIN_COMMUNITY.CONFIRM_JOIN,
+    }),
   }, _.defaults(_.clone(initialState), {
-    hideJoinButton: false,
-    joined: false,
-    joining: false,
+    joinCommunityButton: JOIN_COMMUNITY.DEFAULT,
   }));
 }