Merge pull request #5123 from topcoder-platform/issue-5082-gets0ul

fix: #5082 blank page on clicking challenges tab from stats history page

Author: luizrrodrigues

__tests__/shared/components/ChallengeTile/__snapshots__/index.jsx.snap

@@ -241,9 +241,6 @@ exports[`renders marathon 1`] = `
             </p>
           </div>
         </div>
-        <p
-          className="src-shared-components-ChallengeTile-___style__roles___1V-WA"
-        />
       </div>
     </div>
   </div>

src/shared/components/ChallengeTile/index.jsx

@@ -2,6 +2,7 @@
  * Challenge tile.
  */
 /* eslint-env browser */
+import _ from 'lodash';
 import React from 'react';
 import PT from 'prop-types';
 import { Link } from 'react-router-dom';
@@ -74,6 +75,7 @@ class ChallengeTile extends React.Component {
     } = this.props;
 
     const { track, type } = challenge;
+    const roles = _.get(challenge, 'userDetails.roles');
 
     const outStyleName = `challenge tile-view ${track.replace(' ', '-').toLowerCase()}`;
     const extraStyle = {
@@ -307,19 +309,22 @@ class ChallengeTile extends React.Component {
                 ) }
               </div>
 
-              <p styleName="roles">
-                { track !== COMPETITION_TRACKS.DS
+              { !_.isEmpty(roles)
+                && (
+                <p styleName="roles">
+                  { track !== COMPETITION_TRACKS.DS
                   && (
                   <span>
                     <span>
                       Role: &nbsp;
                     </span>
                     <span>
-                      { listRoles(challenge.userDetails.roles) }
+                      { listRoles(roles) }
                     </span>
                   </span>
                   ) }
-              </p>
+                </p>
+                ) }
             </div>
           </div>
         </div>