fixes based on feedback

Author: dedywahyudi

src/components/ChallengeEditor/ChallengeViewTabs/index.js

@@ -10,6 +10,7 @@ import _ from 'lodash'
 import ChallengeViewComponent from '../ChallengeView'
 import { PrimaryButton } from '../../Buttons'
 import LegacyLinks from '../../LegacyLinks'
+import ForumLink from '../../ForumLink'
 import Registrants from '../Registrants'
 import Submissions from '../Submissions'
 import { getResourceRoleByName } from '../../../util/tc'
@@ -93,7 +94,9 @@ const ChallengeViewTabs = ({
               styles.actionButtonsLeft
             )}
           >
-            <LegacyLinks challenge={challenge} challengeView />
+            { isTask ? (<ForumLink challenge={challenge} />)
+              : (<LegacyLinks challenge={challenge} challengeView />)
+            }
           </div>
 
         </div>

src/components/ChallengeEditor/Forum-Field/Forum-Field.module.scss

@@ -138,8 +138,6 @@ class ChallengeEditor extends Component {
     this.onDeleteChallenge = this.onDeleteChallenge.bind(this)
     this.deleteModalLaunch = this.deleteModalLaunch.bind(this)
     this.toggleForumOnCreate = this.toggleForumOnCreate.bind(this)
-    this.onSelectForum = this.onSelectForum.bind(this)
-    this.toggleForumOnCreate = this.toggleForumOnCreate.bind(this)
   }
 
   componentDidMount () {
@@ -593,10 +591,6 @@ class ChallengeEditor extends Component {
     this.setState({ hasForum: !hasForum })
   }
 
-  onSelectForum (hasForum) {
-    this.setState({ hasForum })
-  }
-
   toggleAdvanceSettings () {
     const { isOpenAdvanceSettings } = this.state
     this.setState({ isOpenAdvanceSettings: !isOpenAdvanceSettings })
@@ -929,14 +923,7 @@ class ChallengeEditor extends Component {
     if (projectDetail.groups) {
       newChallenge.groups.push(...projectDetail.groups)
     }
-    if (isTask) {
-      if (this.state.hasForum) {
-        const discussions = this.getDiscussionsConfig(newChallenge)
-        if (discussions) {
-          newChallenge.discussions = discussions
-        }
-      }
-    } else {
+    if (!isTask || this.state.hasForum) {
       const discussions = this.getDiscussionsConfig(newChallenge)
       if (discussions) {
         newChallenge.discussions = discussions
@@ -1461,7 +1448,7 @@ class ChallengeEditor extends Component {
         )
       }
     </React.Fragment>
-    const useTask = _.find(metadata.challengeTypes, { id: challenge.typeId, isTask: true })
+    // const useTask = _.find(metadata.challengeTypes, { id: challenge.typeId, isTask: true })
     const selectedType = _.find(metadata.challengeTypes, { id: challenge.typeId })
     const challengeTrack = _.find(metadata.challengeTracks, { id: challenge.trackId })
     const selectedMilestone = _.find(projectPhases,
@@ -1481,7 +1468,7 @@ class ChallengeEditor extends Component {
             <TypeField types={metadata.challengeTypes} onUpdateSelect={this.onUpdateSelect} challenge={challenge} />
             <ChallengeNameField challenge={challenge} onUpdateInput={this.onUpdateInput} />
             {projectDetail.version === 'v4' && <MilestoneField milestones={activeProjectMilestones} onUpdateSelect={this.onUpdateSelect} projectId={projectDetail.id} selectedMilestoneId={selectedMilestoneId} />}
-            { useTask && (<DiscussionField hasForum={hasForum} toggleForum={this.toggleForumOnCreate} />) }
+            { isTask && (<DiscussionField hasForum={hasForum} toggleForum={this.toggleForumOnCreate} />) }
           </div>
           {showDesignChallengeWarningModel && designChallengeModal}
           { errorContainer }

src/components/ChallengeEditor/Forum-Field/index.js

@@ -0,0 +1,34 @@
+@import "../../styles/includes";
+.container {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+
+  > a {
+    margin: 0 5px;
+  }
+
+  .row {
+    margin-bottom: 0;
+
+    &.topRow {
+      flex-wrap: wrap;
+    }
+  }
+
+  .col {
+    margin-right: 20px;
+    display: flex;
+    align-items: center;
+
+    .fieldTitle {
+      @include roboto-bold();
+
+      font-size: 16px;
+      line-height: 19px;
+      font-weight: 500;
+      color: $tc-gray-80;
+      margin-right: 10px;
+    }
+  }
+}

src/components/ChallengeEditor/index.js

@@ -0,0 +1,29 @@
+/**
+ * Component to render ForumLink of the app
+ */
+import React from 'react'
+import PropTypes from 'prop-types'
+import cn from 'classnames'
+import styles from './ForumLink.module.scss'
+
+const ForumLink = ({ challenge }) => {
+  return (
+    <div className={styles.container}>
+      <div>
+        { challenge.discussions && challenge.discussions.map(d => (
+          <div key={d.id} className={cn(styles.row, styles.topRow)}>
+            <div className={styles.col} >
+              <span><span className={styles.fieldTitle}><a href={d.url} target='_blank' rel='noopener noreferrer'>Forum</a></span></span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+ForumLink.propTypes = {
+  challenge: PropTypes.object
+}
+
+export default ForumLink