Hides Blockchain community's Challenge Listing from non-registered visitors

the ticket

Author: birdofpreyru

src/shared/components/tc-communities/communities/blockchain/ChallengeListing/RegisterToSee/index.jsx

@@ -0,0 +1,24 @@
+/**
+ * The message to show instead of the challenge listing to visitors, who are
+ * not members of community, when they come to the challenge listing.
+ */
+
+import JoinCommunity from 'containers/tc-communities/JoinCommunity';
+import React from 'react';
+import Section from 'components/tc-communities/Section';
+import style from './style.scss';
+
+export default function RegisterToSee() {
+  return (
+    <Section
+      theme={{
+        content: style.message,
+      }}
+    >
+      <div>
+        Join now to participate in exclusive blockchain challenges!
+        <JoinCommunity />
+      </div>
+    </Section>
+  );
+}

src/shared/components/tc-communities/communities/blockchain/ChallengeListing/RegisterToSee/style.scss

@@ -0,0 +1,9 @@
+@import "~styles/mixins";
+
+.message {
+  color: #394146 !important;
+  font: 15px/160% 'Open Sans' !important;
+  justify-content: center !important;
+  margin-top: 19px !important;
+  opacity: 0.7 !important;
+}

src/shared/containers/tc-communities/Loader.jsx

@@ -65,8 +65,11 @@ class Loader extends React.Component {
       return <LoadingPagePlaceholder />;
     }
 
+    const visitorGroupIds = visitorGroups.map(g => g.id);
+    const member = meta.groupId && visitorGroupIds.includes(meta.groupId);
+
     /* Community does not require authorization. */
-    if (!meta.authorizedGroupIds) return Community({ meta });
+    if (!meta.authorizedGroupIds) return Community({ member, meta });
 
     /* Visitor is not authenticated. */
     if (!visitorGroups) {
@@ -81,9 +84,8 @@ class Loader extends React.Component {
 
     /* Visitor belongs to at least one of the groups authorized to access this
      * community. */
-    const visitorGroupIds = visitorGroups.map(g => g.id);
     if (_.intersection(visitorGroupIds, meta.authorizedGroupIds).length) {
-      return Community({ meta });
+      return Community({ member, meta });
     }
 
     /* Visitor is not authorized to access this community. */

src/shared/routes/Communities/Blockchain/Routes.jsx

@@ -2,8 +2,13 @@
  * Routing of Wipro Community.
  */
 
+/* TODO: This assembly of custom challenge listing page should be split out into
+ * a separate component. But, it is good enough for now. */
 import ChallengeListingTopBanner from
   'components/tc-communities/communities/blockchain/ChallengeListing/TopBanner';
+import ChallengeListingRegisterToSee from
+  'components/tc-communities/communities/blockchain/ChallengeListing/RegisterToSee';
+
 import Error404 from 'components/Error404';
 import Footer from 'containers/tc-communities/Footer';
 import Header from 'containers/tc-communities/Header';
@@ -16,7 +21,7 @@ import { Route, Switch } from 'react-router-dom';
 import ChallengeListing from '../ChallengeListing';
 import Leaderboard from '../Leaderboard';
 
-export default function Routes({ base, meta }) {
+export default function Routes({ base, member, meta }) {
   return (
     <Route
       component={({ match }) => (
@@ -27,7 +32,9 @@ export default function Routes({ base, meta }) {
               component={() => (
                 <div>
                   <ChallengeListingTopBanner />
-                  <ChallengeListing listingOnly meta={meta} />
+                  { member ? (
+                    <ChallengeListing listingOnly meta={meta} />
+                  ) : <ChallengeListingRegisterToSee /> }
                 </div>
               )}
               exact
@@ -69,5 +76,6 @@ Routes.defaultProps = {
 
 Routes.propTypes = {
   base: PT.string,
+  member: PT.bool.isRequired,
   meta: PT.shape().isRequired,
 };

src/shared/routes/Communities/Blockchain/index.jsx

@@ -9,7 +9,7 @@ import React from 'react';
 import { StaticRouter } from 'react-router-dom';
 import { requireWeak, resolveWeak, SplitRoute } from 'utils/router';
 
-export default function ChunkLoader({ base, meta }) {
+export default function ChunkLoader({ base, member, meta }) {
   return (
     <SplitRoute
       cacheCss
@@ -18,7 +18,9 @@ export default function ChunkLoader({ base, meta }) {
         import(
           /* webpackChunkName: "blockchain-community" */
           './Routes',
-        ).then(({ default: Routes }) => <Routes base={base} meta={meta} />)
+        ).then(({ default: Routes }) => (
+          <Routes base={base} member={member} meta={meta} />
+        ))
       }
       renderPlaceholder={() => <LoadingIndicator />}
       renderServer={(routeProps) => {
@@ -28,7 +30,7 @@ export default function ChunkLoader({ base, meta }) {
           <StaticRouter
             context={routeProps.staticContext}
             location={routeProps.location.pathname}
-          ><Routes base={base} meta={meta} /></StaticRouter>
+          ><Routes base={base} member={member} meta={meta} /></StaticRouter>
         );
       }}
     />
@@ -37,5 +39,6 @@ export default function ChunkLoader({ base, meta }) {
 
 ChunkLoader.propTypes = {
   base: PT.string.isRequired,
+  member: PT.bool.isRequired,
   meta: PT.shape().isRequired,
 };

src/shared/routes/Communities/Routes.jsx

@@ -15,9 +15,10 @@ import TcProdDev from './TcProdDev';
 import Veterans from './Veterans';
 import Wipro from './Wipro';
 
-export default function Communities({ base, communityId, meta }) {
+export default function Communities({ base, communityId, member, meta }) {
   switch (communityId) {
-    case 'blockchain': return <Blockchain base={base} meta={meta} />;
+    case 'blockchain':
+      return <Blockchain base={base} member={member} meta={meta} />;
     case 'community-2': return <Community2 base={base} meta={meta} />;
     case 'demo-expert': return <DemoExpert base={base} meta={meta} />;
     case 'qa': return <QA base={base} meta={meta} />;
@@ -37,5 +38,6 @@ Communities.defaultProps = {
 Communities.propTypes = {
   base: PT.string,
   communityId: PT.string.isRequired,
+  member: PT.bool.isRequired,
   meta: PT.shape().isRequired,
 };

src/shared/routes/Communities/index.jsx

@@ -9,7 +9,7 @@ import React from 'react';
 import { StaticRouter } from 'react-router-dom';
 import { requireWeak, resolveWeak, SplitRoute } from 'utils/router';
 
-export default function ChunkLoader({ base, communityId, meta }) {
+export default function ChunkLoader({ base, communityId, member, meta }) {
   return (
     <SplitRoute
       chunkName="communities"
@@ -18,7 +18,12 @@ export default function ChunkLoader({ base, communityId, meta }) {
           /* webpackChunkName: "communities" */
           './Routes',
         ).then(({ default: Routes }) => (
-          <Routes base={base} communityId={communityId} meta={meta} />
+          <Routes
+            base={base}
+            communityId={communityId}
+            member={member}
+            meta={meta}
+          />
         ))
       }
       renderPlaceholder={() => <LoadingIndicator />}
@@ -33,6 +38,7 @@ export default function ChunkLoader({ base, communityId, meta }) {
             <Routes
               base={base}
               communityId={communityId}
+              member={member}
               meta={meta}
             />
           </StaticRouter>
@@ -45,5 +51,6 @@ export default function ChunkLoader({ base, communityId, meta }) {
 ChunkLoader.propTypes = {
   base: PT.string.isRequired,
   communityId: PT.string.isRequired,
+  member: PT.bool.isRequired,
   meta: PT.shape().isRequired,
 };

src/shared/routes/index.jsx

@@ -31,8 +31,12 @@ function Routes({ subdomains }) {
   if (communityId) {
     return (
       <CommunityLoader
-        communityComponent={({ meta }) => (
-          <Communities communityId={communityId} meta={meta} />
+        communityComponent={({ member, meta }) => (
+          <Communities
+            communityId={communityId}
+            member={member}
+            meta={meta}
+          />
         )}
         communityId={communityId}
       />
@@ -45,13 +49,14 @@ function Routes({ subdomains }) {
       <Route
         render={({ match }) => (
           <CommunityLoader
-            communityComponent={({ meta }) => {
+            communityComponent={({ member, meta }) => {
               let base = match.url;
               while (base.endsWith('/')) base = base.slice(0, -1);
               return (
                 <Communities
                   base={base}
                   communityId={match.params.communityId}
+                  member={member}
                   meta={meta}
                 />
               );