Fixes for readonly access

Author: jmgasper

src/components/ChallengesComponent/ChallengeList/index.js

@@ -43,8 +43,7 @@ class ChallengeList extends Component {
       challengeProjectOption: this.props.filterProjectOption,
       challengeStatus: this.props.status,
       challengeType: this.props.filterChallengeType,
-      challengeDate: this.props.filterDate,
-      loginUserRoleInProject: ''
+      challengeDate: this.props.filterDate
     }
     this.directUpdateSearchParam = this.updateSearchParam.bind(this) // update search param without debounce
     this.handlePageChange = this.handlePageChange.bind(this) // update search param without debounce
@@ -58,20 +57,6 @@ class ChallengeList extends Component {
     this.resetFilter = this.resetFilter.bind(this)
   }
 
-  componentWillReceiveProps (nextProps) {
-    const { activeProject, auth } = nextProps
-    if (activeProject && auth && auth.user) {
-      const loggedInUser = auth.user
-      const projectMembers = activeProject.members
-      const loginUserProjectInfo = _.find(projectMembers, { userId: loggedInUser.userId })
-      if (loginUserProjectInfo && this.state.loginUserRoleInProject !== loginUserProjectInfo.role) {
-        this.setState({
-          loginUserRoleInProject: loginUserProjectInfo.role
-        })
-      }
-    }
-  }
-
   /**
    * Update filter for getting project
    * @param {String} searchText search text
@@ -361,8 +346,7 @@ class ChallengeList extends Component {
       challengeProjectOption,
       challengeStatus,
       challengeType,
-      challengeDate,
-      loginUserRoleInProject
+      challengeDate
     } = this.state
 
     const {
@@ -385,7 +369,8 @@ class ChallengeList extends Component {
       isBillingAccountLoadingFailed,
       isBillingAccountLoading,
       selfService,
-      challengeTypes
+      challengeTypes,
+      loginUserRoleInProject
     } = this.props
     if (warnMessage) {
       return <Message warnMessage={warnMessage} />
@@ -837,7 +822,8 @@ class ChallengeList extends Component {
 }
 
 ChallengeList.defaultProps = {
-  isLoading: false
+  isLoading: false,
+  loginUserRoleInProject: ''
 }
 
 ChallengeList.propTypes = {
@@ -872,7 +858,8 @@ ChallengeList.propTypes = {
   dashboard: PropTypes.bool,
   selfService: PropTypes.bool,
   auth: PropTypes.object.isRequired,
-  challengeTypes: PropTypes.arrayOf(PropTypes.shape()).isRequired
+  challengeTypes: PropTypes.arrayOf(PropTypes.shape()).isRequired,
+  loginUserRoleInProject: PropTypes.string
 }
 
 export default ChallengeList

src/components/ChallengesComponent/index.js

@@ -1,11 +1,12 @@
 /**
  * Component to render Challenges page
  */
-import React from 'react'
+import React, { useState, useEffect } from 'react'
+import _ from 'lodash'
 import PropTypes from 'prop-types'
 import { Helmet } from 'react-helmet'
 import { Link } from 'react-router-dom'
-import { CONNECT_APP_URL } from '../../config/constants'
+import { CONNECT_APP_URL, PROJECT_ROLES } from '../../config/constants'
 import { PrimaryButton } from '../Buttons'
 import ChallengeList from './ChallengeList'
 import styles from './ChallengesComponent.module.scss'
@@ -43,7 +44,17 @@ const ChallengesComponent = ({
   auth,
   challengeTypes
 }) => {
-  const isReadOnly = checkReadOnlyRoles(auth.token)
+  const [loginUserRoleInProject, setLoginUserRoleInProject] = useState('')
+  const isReadOnly = checkReadOnlyRoles(auth.token) || loginUserRoleInProject === PROJECT_ROLES.READ
+
+  useEffect(() => {
+    const loggedInUser = auth.user
+    const projectMembers = activeProject.members
+    const loginUserProjectInfo = _.find(projectMembers, { userId: loggedInUser.userId })
+    if (loginUserProjectInfo && loginUserRoleInProject !== loginUserProjectInfo.role) {
+      setLoginUserRoleInProject(loginUserProjectInfo.role)
+    }
+  }, [activeProject, auth])
 
   return (
     <div>
@@ -112,6 +123,7 @@ const ChallengesComponent = ({
           selfService={selfService}
           auth={auth}
           challengeTypes={challengeTypes}
+          loginUserRoleInProject={loginUserRoleInProject}
         />
       </div>
     </div>

src/components/TopcoderFooter/index.js

@@ -1,5 +1,6 @@
 /* global tcUniNav */
 import React, { useEffect, useRef, useState } from 'react'
+import styles from './styles.module.scss'
 
 let uniqueId = 0
 
@@ -25,5 +26,11 @@ export default function TopcoderFooter () {
     })
   }, [footerId])
 
-  return <div id={`footerNav-${footerId}`} ref={footerRef} />
+  return (
+    <div
+      id={`footerNav-${footerId}`}
+      className={styles.container}
+      ref={footerRef}
+    />
+  )
 }

src/components/TopcoderFooter/styles.module.scss

@@ -0,0 +1,5 @@
+@import '../../styles/includes';
+
+.container {
+  margin-top: auto;
+}

src/components/TwoRowsLayout/TwoRowsLayout.module.scss

@@ -13,7 +13,7 @@
 }
 
 .content {
-  max-height: 100vh;
+  height: 100vh;
   display: flex;
   position: relative;
   flex-direction: column;