Skip to content

Commit b23b116

Browse files
dedywahyudidedywahyudi
committed
Add Forum option for Task type
1 parent 2cd8f6b commit b23b116

File tree

8 files changed

+388
-17
lines changed

8 files changed

+388
-17
lines changed

‎config/constants/development.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ module.exports = {
3535
QA_TRACK_ID: '36e6a8d0-7e1e-4608-a673-64279d99c115',
3636
CHALLENGE_TYPE_ID: '927abff4-7af9-4145-8ba1-577c16e64e2e',
3737
SEGMENT_API_KEY: 'QBtLgV8vCiuRX1lDikbMjcoe9aCHkF6n',
38-
CREATE_FORUM_TYPE_IDS: ['927abff4-7af9-4145-8ba1-577c16e64e2e', 'dc876fa4-ef2d-4eee-b701-b555fcc6544c'],
38+
CREATE_FORUM_TYPE_IDS: ['927abff4-7af9-4145-8ba1-577c16e64e2e', 'dc876fa4-ef2d-4eee-b701-b555fcc6544c', 'ecd58c69-238f-43a4-a4bb-d172719b9f31'],
3939
FILE_PICKER_API_KEY: process.env.FILE_PICKER_API_KEY,
4040
FILE_PICKER_CONTAINER_NAME: 'tc-challenge-v5-dev',
4141
FILE_PICKER_REGION: 'us-east-1',

‎config/constants/production.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ module.exports = {
3535
QA_TRACK_ID: '36e6a8d0-7e1e-4608-a673-64279d99c115',
3636
CHALLENGE_TYPE_ID: '927abff4-7af9-4145-8ba1-577c16e64e2e',
3737
SEGMENT_API_KEY: 'QSQAW5BWmZfLoKFNRgNKaqHvLDLJoGqF',
38-
CREATE_FORUM_TYPE_IDS: ['927abff4-7af9-4145-8ba1-577c16e64e2e', 'dc876fa4-ef2d-4eee-b701-b555fcc6544c'],
38+
CREATE_FORUM_TYPE_IDS: ['927abff4-7af9-4145-8ba1-577c16e64e2e', 'dc876fa4-ef2d-4eee-b701-b555fcc6544c', 'ecd58c69-238f-43a4-a4bb-d172719b9f31'],
3939
FILE_PICKER_API_KEY: process.env.FILE_PICKER_API_KEY,
4040
FILE_PICKER_CONTAINER_NAME: 'tc-challenge-v5-prod',
4141
FILE_PICKER_REGION: 'us-east-1',

‎src/components/ChallengeEditor/ChallengeViewTabs/index.js

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -85,17 +85,17 @@ const ChallengeViewTabs = ({
8585
<div className={styles.topContainer}>
8686
<div className={styles.leftContainer}>
8787
<div className={styles.title}>{challenge.name}</div>
88-
{!isTask && (
89-
<div
90-
className={cn(
91-
styles.actionButtons,
92-
styles.button,
93-
styles.actionButtonsLeft
94-
)}
95-
>
96-
<LegacyLinks challenge={challenge} challengeView />
97-
</div>
98-
)}
88+
89+
<div
90+
className={cn(
91+
styles.actionButtons,
92+
styles.button,
93+
styles.actionButtonsLeft
94+
)}
95+
>
96+
<LegacyLinks challenge={challenge} challengeView />
97+
</div>
98+
9999
</div>
100100
<div
101101
className={cn(

‎src/components/ChallengeEditor/Discussion-Field/Discussion-Field.module.scss

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
@import '../../../styles/includes';
2+
3+
.row {
4+
box-sizing: border-box;
5+
display: flex;
6+
flex-direction: row;
7+
margin: 30px 30px 0 30px;
8+
align-content: space-between;
9+
justify-content: flex-start;
10+
11+
.fieldTitle {
12+
@include roboto-bold();
13+
font-size: 16px;
14+
line-height: 19px;
15+
font-weight: 500;
16+
color: $tc-gray-80;
17+
margin-right: 10px;
18+
}
19+
20+
.field {
21+
@include upto-sm {
22+
display: block;
23+
padding-bottom: 10px;
24+
}
25+
26+
label {
27+
@include roboto-bold();
28+
29+
font-size: 16px;
30+
line-height: 19px;
31+
font-weight: 500;
32+
color: $tc-gray-80;
33+
}
34+
35+
&.col1 {
36+
max-width: 185px;
37+
min-width: 185px;
38+
margin-right: 14px;
39+
margin-bottom: auto;
40+
margin-top: auto;
41+
padding-top: 10px;
42+
white-space: nowrap;
43+
display: flex;
44+
align-items: center;
45+
46+
span {
47+
color: $tc-red;
48+
}
49+
}
50+
51+
&.col2 {
52+
align-self: flex-end;
53+
width: 80%;
54+
margin-bottom: auto;
55+
margin-top: auto;
56+
display: flex;
57+
flex-direction: row;
58+
max-width: 600px;
59+
min-width: 600px;
60+
}
61+
}
62+
63+
.col1 {
64+
display: flex;
65+
flex-grow: 1;
66+
align-items: center;
67+
max-width: 0;
68+
min-width: 0;
69+
margin-right: 0;
70+
width: auto;
71+
margin-top: 0 !important;
72+
margin-bottom: 0 !important;
73+
padding-top: 0 !important;
74+
}
75+
76+
.col2 {
77+
width: auto;
78+
79+
.subGroup {
80+
width: 100%;
81+
display: flex;
82+
flex-direction: column;
83+
84+
.subRow {
85+
display: flex;
86+
align-items: center;
87+
margin-bottom: 18px;
88+
}
89+
90+
.subRow:last-of-type {
91+
margin-bottom: 0;
92+
}
93+
}
94+
}
95+
96+
.tcRadioButton {
97+
.tc-radioButton-label {
98+
@include roboto-light();
99+
100+
line-height: 17px;
101+
font-weight: 300;
102+
margin-left: 21px;
103+
user-select: none;
104+
cursor: pointer;
105+
width: 195px;
106+
font-size: 14px;
107+
color: #3d3d3d;
108+
}
109+
110+
height: 18px;
111+
width: 80px;
112+
margin: 0;
113+
padding: 0;
114+
vertical-align: bottom;
115+
position: relative;
116+
display: inline-block;
117+
118+
input[type=radio] {
119+
display: none;
120+
}
121+
122+
label {
123+
@include roboto-light();
124+
125+
line-height: 17px;
126+
font-weight: 300;
127+
cursor: pointer;
128+
position: absolute;
129+
display: inline-block;
130+
width: 16px;
131+
height: 16px;
132+
border-radius: 8px;
133+
top: 0;
134+
left: 0;
135+
border: none;
136+
box-shadow: none;
137+
background: $tc-gray-30;
138+
transition: all 0.15s ease-in-out;
139+
140+
&::after {
141+
opacity: 0;
142+
content: '';
143+
position: absolute;
144+
width: 8px;
145+
height: 8px;
146+
background: transparent;
147+
top: 4px;
148+
left: 4px;
149+
border: 4px solid $tc-blue-20;
150+
border-radius: 4px;
151+
transition: all 0.15s ease-in-out;
152+
}
153+
154+
&:hover::after {
155+
opacity: 0.3;
156+
}
157+
158+
div {
159+
margin-left: 24px;
160+
width: 300px;
161+
}
162+
}
163+
164+
input[type=radio]:checked ~ label {
165+
background: $tc-blue-20;
166+
}
167+
168+
input[type=radio]:checked + label::after {
169+
opacity: 1;
170+
border-color: $white;
171+
}
172+
}
173+
174+
&.error {
175+
color: $tc-red;
176+
margin-top: -25px;
177+
}
178+
}

‎src/components/ChallengeEditor/Discussion-Field/index.js

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React from 'react'
2+
import PropTypes from 'prop-types'
3+
import cn from 'classnames'
4+
import styles from './Discussion-Field.module.scss'
5+
6+
const DiscussionField = ({ hasForum, toggleForum, readOnly }) => {
7+
console.log('hasForummm ' + hasForum)
8+
if (readOnly) {
9+
return (
10+
<div className={styles.row}>
11+
<div className={cn(styles.field, styles.col1, styles.fieldTitle)}>Forum Discussion :</div>
12+
<div className={cn(styles.field, styles.col2)}>
13+
{ hasForum ? 'On' : 'Off' }
14+
</div>
15+
</div>
16+
)
17+
}
18+
19+
return (
20+
<div className={styles.row}>
21+
<div className={cn(styles.field, styles.col1, styles.fieldTitle)}>Forum Discussion :</div>
22+
<div className={cn(styles.field, styles.col2)}>
23+
<div className={styles.tcRadioButton}>
24+
<input
25+
name='forum'
26+
type='radio'
27+
id='forum-on'
28+
checked={hasForum}
29+
onChange={toggleForum}
30+
/>
31+
<label className={styles['tc-RadioButton-label']} htmlFor='forum-on'>
32+
<div>On</div>
33+
</label>
34+
</div>
35+
<div className={styles.tcRadioButton}>
36+
<input
37+
name='forum'
38+
type='radio'
39+
id='forum-off'
40+
checked={!hasForum}
41+
onChange={toggleForum}
42+
/>
43+
<label className={styles['tc-RadioButton-label']} htmlFor='forum-off'>
44+
<div>Off</div>
45+
</label>
46+
</div>
47+
</div>
48+
</div>
49+
)
50+
}
51+
52+
DiscussionField.defaultProps = {
53+
readOnly: false
54+
}
55+
56+
DiscussionField.propTypes = {
57+
hasForum: PropTypes.bool,
58+
toggleForum: PropTypes.func,
59+
readOnly: PropTypes.bool
60+
}
61+
62+
export default DiscussionField

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

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
@import "../../../styles/includes";
2+
3+
.row {
4+
box-sizing: border-box;
5+
display: flex;
6+
flex-direction: row;
7+
margin: 30px 30px 0 30px;
8+
align-content: space-between;
9+
justify-content: flex-start;
10+
11+
.field {
12+
@include upto-sm {
13+
display: block;
14+
padding-bottom: 10px;
15+
}
16+
17+
label {
18+
@include roboto-bold();
19+
20+
font-size: 16px;
21+
line-height: 19px;
22+
font-weight: 500;
23+
color: $tc-gray-80;
24+
}
25+
26+
&.col1 {
27+
max-width: 185px;
28+
min-width: 185px;
29+
margin-right: 14px;
30+
white-space: nowrap;
31+
display: flex;
32+
align-items: center;
33+
flex-grow: 1;
34+
35+
span {
36+
color: $tc-red;
37+
}
38+
}
39+
40+
&.col2.error {
41+
color: $tc-red;
42+
margin-top: -25px;
43+
}
44+
&.col2 {
45+
align-self: flex-end;
46+
width: 80%;
47+
margin-bottom: auto;
48+
margin-top: auto;
49+
display: flex;
50+
flex-direction: row;
51+
max-width: 600px;
52+
min-width: 600px;
53+
}
54+
}
55+
}

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

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import React from 'react'
2+
import PropTypes from 'prop-types'
3+
import Select from '../../Select'
4+
import cn from 'classnames'
5+
import styles from './Forum-Field.module.scss'
6+
7+
const ForumField = ({ types, onSelectForum, challenge, hasForum, disabled }) => {
8+
disabled = true
9+
if (challenge.name && challenge.typeId) {
10+
disabled = false
11+
}
12+
return (
13+
<>
14+
<div className={styles.row}>
15+
<div className={cn(styles.field, styles.col1)}>
16+
<label htmlFor='type'>Forum Dicussion :</label>
17+
</div>
18+
<div className={cn(styles.field, styles.col2, { [styles.disabled]: disabled })}>
19+
<Select
20+
name='forum'
21+
options={types.map(type => ({ label: type.name, value: type.id }))}
22+
isClearable={false}
23+
onChange={(e) => onSelectForum(e.value)}
24+
isDisabled={disabled}
25+
value={hasForum ? { label: 'On', value: true } : { label: 'Off', value: false }}
26+
/>
27+
</div>
28+
</div>
29+
</>
30+
)
31+
}
32+
33+
ForumField.defaultProps = {
34+
types: [{ name: 'On', id: true }, { name: 'Off', id: false }],
35+
hasForum: false,
36+
disabled: false
37+
}
38+
39+
ForumField.propTypes = {
40+
// currentType: PropTypes.string.isRequired,
41+
types: PropTypes.arrayOf(PropTypes.shape()),
42+
challenge: PropTypes.shape().isRequired,
43+
onSelectForum: PropTypes.func.isRequired,
44+
hasForum: PropTypes.bool,
45+
disabled: PropTypes.bool
46+
}
47+
48+
export default ForumField

0 commit comments

Comments
 (0)