Merge pull request #77 from topcoder-platform/develop

First version of Join Community

.babelrc

@@ -19,6 +19,10 @@
       "filetypes": {
         ".scss": "postcss-scss"
       }
+    }],
+    ["transform-assets", {
+      "extensions": ["gif", "jpeg", "jpg", "png"],
+      "name": "[hash].[ext]"
     }]
   ]
 }

__tests__/shared/components/Leaderboard/__snapshots__/Podium.jsx.snap

@@ -58,6 +58,9 @@ exports[`Matches shallow shapshot 2`] = `
 <div
   className="src-shared-components-Leaderboard-Podium-___styles__Podium___2rb4T"
 >
-  <LoadingIndicator />
+  <ThemedLoadingIndicator
+    composeTheme="deeply"
+    mapThemrProps={[Function]}
+  />
 </div>
 `;

__tests__/shared/components/__snapshots__/LoadingIndicator.jsx.snap

@@ -1,12 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-<div
-  className="src-shared-components-LoadingIndicator-___styles__root___3fi9o"
->
-  <img
-    alt="Loading data"
-    src="https://raw.githubusercontent.com/appirio-tech/topcoder-app/dev/assets/images/ripple.gif"
-  />
-</div>
+<img
+  alt="Loading..."
+  className="src-shared-components-LoadingIndicator-___styles__style___3RNHL"
+  src="2f402d440d802a10b7672b75897c47a5.gif"
+/>
 `;

__tests__/shared/components/__snapshots__/Modal.jsx.snap

@@ -4,10 +4,12 @@ exports[`Snapshot match 1`] = `
 <div>
   <div
     className="src-shared-components-Modal-___styles__modal-container___2m4KB"
+    onWheel={[Function]}
   />
   <button
     className="src-shared-components-Modal-___styles__bg-overlay___2xty_"
     onClick={[Function]}
+    onWheel={[Function]}
   />
 </div>
 `;

__tests__/shared/components/tc-communities/communities/demo-expert/__snapshots__/Home.jsx.snap

@@ -17,6 +17,7 @@ exports[`Snapshot match 1`] = `
     title="Wipro Crowd"
   />
   <Connect(GroupStatsContainer) />
+  <Connect(JoinCommunity) />
   <ThemedSection
     composeTheme="deeply"
     link={null}

__tests__/shared/components/tc-communities/communities/tc-prod-dev/__snapshots__/Home.jsx.snap

@@ -17,6 +17,7 @@ exports[`Snapshot match 1`] = `
     title="Topcoder Product Development Community"
   />
   <Connect(GroupStatsContainer) />
+  <Connect(JoinCommunity) />
   <ThemedSection
     composeTheme="deeply"
     link={null}

__tests__/shared/components/tc-communities/communities/wipro/__snapshots__/Home.jsx.snap

@@ -17,6 +17,7 @@ exports[`Snapshot match 1`] = `
     title="Wipro Crowd"
   />
   <Connect(GroupStatsContainer) />
+  <Connect(JoinCommunity) />
   <ThemedSection
     composeTheme="deeply"
     link={null}

config/webpack/default.js

@@ -54,7 +54,7 @@ module.exports = {
         ],
       },
     }, {
-      test: /\.(jpeg|jpg|png)$/,
+      test: /\.(gif|jpeg|jpg|png)$/,
       include: /src\/assets\/images/,
       loader: 'file-loader',
       options: {

package.json

@@ -40,6 +40,7 @@
     "babel-plugin-module-alias": "^1.6.0",
     "babel-plugin-module-resolver": "^2.5.0",
     "babel-plugin-react-css-modules": "^2.6.0",
+    "babel-plugin-transform-assets": "^0.2.0",
     "babel-preset-env": "^1.2.1",
     "babel-preset-react": "^6.23.0",
     "babel-preset-stage-2": "^6.22.0",

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

@@ -0,0 +1,22 @@
+import _ from 'lodash';
+import { createActions } from 'redux-actions';
+import { getService as getGroupService } from 'services/groups';
+
+/**
+ * Creates the action for joining the group.
+ * @param {String} token Topcoder auth token V3.
+ * @param {String} groupId
+ * @param {String} memberId
+ */
+function joinDone(token, groupId, memberId) {
+  const service = getGroupService(token);
+  return service.addMember(groupId, memberId, 'user');
+}
+
+export default createActions({
+  TC_COMMUNITY: {
+    HIDE_JOIN_BUTTON: _.noop,
+    JOIN_INIT: _.noop,
+    JOIN_DONE: joinDone,
+  },
+});

src/shared/components/LoadingIndicator/index.jsx

@@ -1,12 +1,21 @@
+import PT from 'prop-types';
+import Source from 'assets/images/ripple.gif';
 import React from 'react';
-import './styles.scss';
+import { themr } from 'react-css-themr';
+import style from './styles.scss';
 
-const Loader = 'https://raw.githubusercontent.com/appirio-tech/topcoder-app/dev/assets/images/ripple.gif';
-
-export default function LoadingIndicator() {
+function LoadingIndicator({ theme }) {
   return (
-    <div styleName="root">
-      <img src={Loader} alt="Loading data" />
-    </div>
+    <img
+      alt="Loading..."
+      className={theme.style}
+      src={Source}
+    />
   );
 }
+
+LoadingIndicator.propTypes = {
+  theme: PT.shape().isRequired,
+};
+
+export default themr('LoadingIndicator', style)(LoadingIndicator);

src/shared/components/LoadingIndicator/styles.scss

@@ -1,5 +1,7 @@
 @import '~styles/tc-styles';
 
-.root {
+.style {
+  display: block;
+  margin: 0 auto;
   text-align: center;
 }

src/shared/components/Modal/index.jsx

@@ -14,8 +14,15 @@ import './styles.scss';
 export default function Modal(props) {
   return (
     <div>
-      <div styleName="modal-container">{props.children}</div>
-      <button styleName="bg-overlay" onClick={() => props.onCancel()} />
+      <div
+        onWheel={event => event.preventDefault()}
+        styleName="modal-container"
+      >{props.children}</div>
+      <button
+        onClick={() => props.onCancel()}
+        onWheel={event => event.preventDefault()}
+        styleName="bg-overlay"
+      />
     </div>
   );
 }

src/shared/components/challenge-listing/Tooltips/Tooltip/style.scss

@@ -1,4 +1,4 @@
-@import '~styles/tc-includes';
+@import '~styles/tc-styles';
 
 :global {
   .rc-tooltip {
@@ -9,7 +9,7 @@
   .rc-tooltip-inner {
     border-radius: 3px;
     background: $tc-gray-80;
-    padding: $base-unit * 2 $base-unit * 3;
+    padding: 0;
   }
 
   .rc-tooltip-placement-top .rc-tooltip-arrow,

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

@@ -43,14 +43,14 @@ export default function GroupStats(props) {
       />
     )),
   );
-  return (
+  return icons.length ? (
     <Section
       theme={{
         container: style.container,
         content: style.content,
       }}
     >{icons}</Section>
-  );
+  ) : null;
 }
 
 GroupStats.defaultProps = {

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

@@ -0,0 +1,81 @@
+/**
+ * Join Community component. It includes 'Join Community' button, which is
+ * automatically hidden, when a user is already member of community. Button
+ * text changes to the loading symbol, when the joining is underway. And a
+ * modal is shown on success.
+ */
+
+/* global window */
+
+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 default function JoinCommunity({
+  canJoin,
+  communityName,
+  groupId,
+  hideJoinButton,
+  join,
+  joined,
+  joining,
+  token,
+  userId,
+}) {
+  if (!canJoin) return <div styleName="placeholder" />;
+  return (
+    <div>
+      <button
+        onClick={() => {
+          if (joining || joined) return;
+          if (token) join(token, groupId, userId);
+          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' : ''}`}
+      >
+        { joining ? (
+          <div>
+            <p>Joining...</p>
+            <LoadingIndicator theme={{ style: style.loadingIndicator }} />
+          </div>
+        ) : 'Join Community'}
+      </button>
+      { joined ? (
+        <Modal onCancel={hideJoinButton}>
+          <h1 styleName="modalTitle">Congratulations!</h1>
+          <p styleName="modalMsg">You have joined {communityName}!</p>
+          <button
+            onClick={hideJoinButton}
+            styleName="done"
+          >Return to the Community</button>
+        </Modal>
+      ) : null}
+    </div>
+  );
+}
+
+JoinCommunity.defaultProps = {
+  groupId: null,
+  token: null,
+  userId: null,
+};
+
+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,
+  token: PT.string,
+  userId: PT.string,
+};

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

@@ -0,0 +1,88 @@
+@import "~styles/tc-styles";
+
+.done {
+  color: $tc-light-blue;
+  display: block;
+  background: $tc-white;
+  border: 1px solid $tc-light-blue;
+  border-radius: 20px;
+  font: 700 14px/40px 'Open Sans';
+  margin: 0 auto;
+  height: 40px;
+  text-align: center;
+  text-transform: uppercase;
+  width: 300px;
+
+  &:hover,
+  &:active,
+  &:focus,
+  &:visited {
+    color: $tc-light-blue;
+    outline: none;
+    text-decoration: none;
+  }
+
+  &:hover {
+    background: $tc-light-blue-10;
+  }
+}
+
+.link {
+  color: $tc-green;
+  display: block;
+  background: $tc-white;
+  border: 1px solid $tc-green;
+  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: $tc-green;
+    outline: none;
+    text-decoration: none;
+  }
+
+  &:hover {
+    background: $tc-green-10;
+  }
+
+  &.joining:hover {
+    background: $tc-white;
+    cursor: default;
+  }
+
+  &.joining div p {
+    display: inline-block;
+    margin-right: 12px;
+    vertical-align: top;
+  }
+}
+
+.loadingIndicator {
+  display: inline-block;
+  height: 32px;
+  padding-top: 4px;
+  width: 32px;
+}
+
+.modalTitle {
+  text-align: center;
+}
+
+.modalMsg {
+  @include tc-body;
+
+  margin: 24px 0;
+  text-align: center;
+}
+
+.placeholder {
+  height: 24px;
+}

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

@@ -1,6 +1,7 @@
 @import '~styles/tc-styles';
 
 .container {
+  padding: 35px 0;
   padding-bottom: 70px;
 
   @include xxs-to-sm {