|
@@ -1,145 +1,161 @@
|
|
|
import React from 'react';
|
|
|
-import { Field, reduxForm } from 'redux-form';
|
|
|
+import { Field, reduxForm, formValueSelector } from 'redux-form';
|
|
|
import formInput from '../../common/formInput';
|
|
|
-
|
|
|
-
|
|
|
+import { connect } from 'react-redux';
|
|
|
+import validate from '../../../configs/validate'
|
|
|
|
|
|
class CreateTopic extends React.Component {
|
|
|
|
|
|
- state ={
|
|
|
- click:false,
|
|
|
- klick:["1"],
|
|
|
- array:[],
|
|
|
- simple:false
|
|
|
-
|
|
|
+ state = {
|
|
|
+ click: false,
|
|
|
+ arrayAnswers: [],
|
|
|
+ array: [],
|
|
|
+ simple: false,
|
|
|
+ click_2: false,
|
|
|
+ click_3: false
|
|
|
+
|
|
|
}
|
|
|
|
|
|
- submit=({name, description })=>{
|
|
|
- const {actions:{createTopicsRequest}, token, categoryId} = this.props;
|
|
|
+ submit = () => {
|
|
|
+ const { actions: { createTopicsRequest }, categoryId, formValues: { name, description } } = this.props;
|
|
|
+ console.log(name, description)
|
|
|
createTopicsRequest({
|
|
|
name,
|
|
|
- description,
|
|
|
+ description,
|
|
|
categoryId,
|
|
|
- token
|
|
|
|
|
|
})
|
|
|
}
|
|
|
- qestionAnswerSubmit = ({questions, correct }) =>{
|
|
|
- const {simple, array} = this.state
|
|
|
-console.log(this.state)
|
|
|
- const {topic:{data:{topic:{_id}}}, actions:{createTestRequest}, token} =this.props;
|
|
|
- console.log("topicId",_id,questions, correct)
|
|
|
+ qestionAnswerSubmit = () => {
|
|
|
+ const { simple, array } = this.state
|
|
|
+ const { topic: { _id } , actions: { createTestRequest }, formValues: { questions } } = this.props;
|
|
|
+ console.log(questions)
|
|
|
createTestRequest({
|
|
|
questions,
|
|
|
simple,
|
|
|
_id,
|
|
|
- array,
|
|
|
- token
|
|
|
-
|
|
|
+ array
|
|
|
})
|
|
|
- this.setState({array: []})
|
|
|
- const {ansversInput} =this.refs
|
|
|
- // ansversInput.value = " "
|
|
|
-
|
|
|
- console.log(this.state, ansversInput.value)
|
|
|
+ this.setState({ arrayAnswers:[] })
|
|
|
+ this.setState({ array:[] })
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
|
|
|
}
|
|
|
- handelClick =()=>{
|
|
|
- this.setState((prevState) => ({klick:prevState.klick.push("1")}))
|
|
|
- }
|
|
|
- handelChange=(event)=>{
|
|
|
- const target = event.target;
|
|
|
- const value = target.type === 'checkbox' ? target.checked : target.value;
|
|
|
- const name = target.name;
|
|
|
-
|
|
|
- this.setState({
|
|
|
- [name]: value
|
|
|
- });
|
|
|
+
|
|
|
+ handelChange = () => { this.setState((prevState) => ({ simple: !prevState.simple })) }
|
|
|
+
|
|
|
+ handelClick = () => { this.setState((prevState) => ({ click: !prevState.click })) }
|
|
|
+
|
|
|
+ handleClick_3 = () => {
|
|
|
+ this.setState((prevState) => ({ click_2: !prevState.click_2 }))
|
|
|
+ this.setState({ click_3:true })
|
|
|
+ this.setState((prevState) => ({ arrayAnswers: prevState.arrayAnswers.concat(prevState.arrayAnswers.length + 1) }))
|
|
|
+
|
|
|
}
|
|
|
+ handelClick_2 =()=>{
|
|
|
+ this.setState((prevState) => ({ click_3: !prevState.click_3 }))
|
|
|
|
|
|
- onClick =() =>{
|
|
|
- this.setState((prevState) => ({ click: !prevState.click }));
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
- formSubmitinput =({answer, price,correct})=>{
|
|
|
- console.log(answer, correct, price);
|
|
|
- const values ={
|
|
|
- answer:answer,
|
|
|
- price:+price,
|
|
|
- correct:correct
|
|
|
+ formSubmitinput = (event) => {
|
|
|
+ const currentId = this.state.arrayAnswers.length;
|
|
|
+
|
|
|
+ const values = {
|
|
|
+ answer: event[`answers${currentId}`],
|
|
|
+ price: Number(event[`price${currentId}`]),
|
|
|
+ correct: event[`correct${currentId}`] || false
|
|
|
}
|
|
|
-
|
|
|
- this.setState((prevState) =>({array:prevState.array.push(values), klick:prevState.klick.push("1")},console.log(prevState.array) ))
|
|
|
- console.log(this.state)
|
|
|
-
|
|
|
+ console.log(values)
|
|
|
+ this.setState((prevState) => ({ array: prevState.array.push(values) }, console.log(prevState.array)))
|
|
|
+ this.setState((prevState) => ({ click_2: !prevState.click_2 }))
|
|
|
+
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-
|
|
|
|
|
|
render() {
|
|
|
- const { handleSubmit} =this.props;
|
|
|
- const {simple, price, correct, click, array, klick} =this.state;
|
|
|
- const {handelChange, submit, onClick, handelClick, formSubmitinput,qestionAnswerSubmit} = this;
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
+ const { handleSubmit} = this.props;
|
|
|
+ const { simple, price, correct, click, array, arrayAnswers, click_2, click_3 } = this.state;
|
|
|
+ const { handelChange, submit, handelClick, formSubmitinput, qestionAnswerSubmit, handelClick_2, handleClick_3 } = this;
|
|
|
+console.log(this.state)
|
|
|
return (
|
|
|
<div>
|
|
|
- <form>
|
|
|
- <h4 className ="text-white font-ci"> Enter topic </h4>
|
|
|
- <Field className ="bg-mist bg-mist-op text-white mt-3 mb-3 border rounded w-100 " name="name" type="name" placeholder="Create Name Topic" component={formInput} />
|
|
|
- <h4 className ="text-white font-ci"> Enter description </h4>
|
|
|
- <Field className ="bg-mist bg-mist-op text-white mt-3 mb-3 border rounded w-100 " name ="description" type = "textarea" placeholder = "Create Descriptions" component = {formInput} />
|
|
|
- {
|
|
|
- !click
|
|
|
- ?
|
|
|
- <button onClick = {()=>{
|
|
|
- onClick()
|
|
|
- handleSubmit(submit)()
|
|
|
- }}> Create questions</button>
|
|
|
- :
|
|
|
- <div>
|
|
|
- <h4 className ="text-white font-ci"> Enter question and set the difficulty level</h4>
|
|
|
- <div className ="d-flex w-100 ">
|
|
|
- <Field className="bg-mist bg-mist-op text-white mt-3 mb-3 border rounded w-100 " name ="questions" type = "questions" placeholder = "Create Qestions" component = {formInput} />
|
|
|
- <Field className="bg-mist bg-mist-op text-white mt-4 pb-1 border rounded w-25 flex-row align-items-end check" name ="simple" type = "checkbox" checked ={simple} onChange ={handelChange} component = {formInput} />
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <Field className = "bg-mist bg-mist-op text-white mt-3 mb-3 border rounded" name ="answer" type = "name" placeholder ="Add anwer" ref ='ansversInput' component = {formInput} />
|
|
|
- <Field className = "bg-mist bg-mist-op text-white mt-3 mb-3 border rounded" name ="price" type = "number" value ={price} component = {formInput} />
|
|
|
- <Field className ="bg-mist bg-mist-op text-white mt-3 mb-3 border rounded" name ="correct" type = "checkbox" checked ={correct} component = {formInput} />
|
|
|
- </div>)
|
|
|
+ <form onSubmit={handleSubmit(qestionAnswerSubmit)}>
|
|
|
+ <h4 className="text-white font-ci"> Enter topic </h4>
|
|
|
+ <Field className="bg-mist bg-mist-op text-white mt-3 mb-3 border rounded w-100 " name="name" type="name" placeholder="Create Name Topic" component={formInput} />
|
|
|
+ <h4 className="text-white font-ci"> Enter description </h4>
|
|
|
+ <Field className="bg-mist bg-mist-op text-white mt-3 mb-3 border rounded w-100 " name="description" type="textarea" placeholder="Create Descriptions" component={formInput} />
|
|
|
+ {
|
|
|
+ !click
|
|
|
+ ?
|
|
|
+ <button className= "btn btn-outline-light bg-stone"
|
|
|
+ onClick={() => {
|
|
|
+ handelClick()
|
|
|
+ submit()
|
|
|
+ }}>
|
|
|
+ Create questions
|
|
|
+ </button>
|
|
|
+ :
|
|
|
+ <div>
|
|
|
+ <h4 className="text-white font-ci"> Enter question and set the difficulty level</h4>
|
|
|
+ <div className="d-flex w-100 ">
|
|
|
+ <Field className="bg-stone bg-mist-op text-white mt-3 mb-3 border rounded w-100 " name="questions" type="questions" placeholder="Create Qestions" component={formInput} />
|
|
|
+ <Field className="bg-mist bg-mist-op text-white mt-4 pb-1 border rounded w-25 flex-row align-items-end check" name="simple" type="checkbox" checked={simple} onChange={handelChange} component={formInput} />
|
|
|
+ </div>
|
|
|
+ {
|
|
|
+ click_3
|
|
|
+ ?
|
|
|
+
|
|
|
+ arrayAnswers.map(el =>
|
|
|
+ <div key={el} id={el}>
|
|
|
+ <Field className="bg-mist bg-mist-op text-white mt-3 mb-3 border rounded" name={`answers${el}`} type="name" placeholder="Add anwer" ref='ansversInput' component={formInput} />
|
|
|
+ <Field className="bg-mist bg-mist-op text-white mt-3 mb-3 border rounded" name={`price${el}`} type="number" value={price} component={formInput} />
|
|
|
+ <Field className="bg-mist bg-mist-op text-white mt-3 mb-3 border rounded" name={`correct${el}`} type="checkbox" checked={correct} component={formInput} />
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ :
|
|
|
+ null
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ <React.Fragment>
|
|
|
{
|
|
|
- array.map(el=>
|
|
|
- <div>
|
|
|
- <Field className = "bg-mist bg-mist-op text-white mt-3 mb-3 border rounded" name ="answer" type = "name" placeholder ="Add anwer" ref ='ansversInput' component = {formInput} />
|
|
|
- <Field className = "bg-mist bg-mist-op text-white mt-3 mb-3 border rounded" name ="price" type = "number" value ={price} component = {formInput} />
|
|
|
- <Field className ="bg-mist bg-mist-op text-white mt-3 mb-3 border rounded" name ="correct" type = "checkbox" checked ={correct} component = {formInput} />
|
|
|
- </div>)
|
|
|
- }
|
|
|
-
|
|
|
- <button onClick={
|
|
|
- handleSubmit(formSubmitinput)}></button>
|
|
|
- <button className="form__submit-button form__submit-button--reset" onClick = {()=>
|
|
|
- {
|
|
|
- handleSubmit(qestionAnswerSubmit)()}}></button>
|
|
|
-
|
|
|
-
|
|
|
- </div>
|
|
|
- }
|
|
|
-
|
|
|
- </form>
|
|
|
+ click_2
|
|
|
+ ?
|
|
|
+ <button type="button" onClick={handleSubmit(formSubmitinput)}>Add answer</button>
|
|
|
+ :
|
|
|
+ <React.Fragment>
|
|
|
+ <button className= "btn btn-outline-light bg-stone m-3" type="button " onClick={handleClick_3}>Create answers</button>
|
|
|
+ <button className= "btn btn-outline-light bg-stone m-3" onClick ={handelClick_2} >Create Questions</button>
|
|
|
+ </React.Fragment>
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </React.Fragment>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+ }
|
|
|
+
|
|
|
+ </form>
|
|
|
</div>
|
|
|
- )
|
|
|
-
|
|
|
-}
|
|
|
+ )
|
|
|
+
|
|
|
+ }
|
|
|
|
|
|
}
|
|
|
|
|
|
+const selector = formValueSelector('createTopicForm');
|
|
|
+
|
|
|
+const mapStateToProps = state => ({
|
|
|
|
|
|
+ formValues: selector(state, 'name', 'description', 'questions', 'simple', 'answer', 'price', 'correct')
|
|
|
+})
|
|
|
|
|
|
-export default reduxForm({
|
|
|
- form: "createTopicForm"
|
|
|
-})(CreateTopic);
|
|
|
+export default connect(mapStateToProps, null)(reduxForm({
|
|
|
+ form: "createTopicForm",
|
|
|
+ validate
|
|
|
+})(CreateTopic));
|