Merge branch 'son-dev' of github.com:geart891/surveyapp into son-dev

src/components/SurveyForm.tsx

@@ -41,25 +41,17 @@ class SurveyForm extends React.Component<ISurveyFormProps, {}> {
     openConfirmModal: false,
     openSuccessModal: false,
     actionSave: false, // False: save, True: submit
-    suveyContents: [],
+    surveyContents: [],
   };
 
-  // componentDidUpdate() {
-  //   const sLen = this.props.surveyContents.length;
-  //   if (sLen > this.tempLengthArea) {
-  //     this.scrollBars.scrollToBottom();
-  //     this.tempLengthArea = sLen;
-  //   }
-  // }
-  componentWillMount() {
-    if (this.props.tempId) {
-      this.props.getDataFromDbById(this.props.tempId);
+  componentWillReceiveProps() {
+    if (this.props.surveyContents) {
+      this.setState(prevState => ({ ...prevState, surveyContents: this.props.surveyContents }));
     }
   }
-
   componentDidMount() {
-    if (this.props.surveyContents) {
-      this.setState(prevState => ({ ...prevState, surveyContents: this.props.surveyContents }));
+    if (this.props.tempId) {
+      this.props.getDataFromDbById(this.props.tempId);
     }
   }
 
@@ -70,7 +62,7 @@ class SurveyForm extends React.Component<ISurveyFormProps, {}> {
     this.setState(prevState => ({ ...prevState, openSuccessModal: open, openConfirmModal: false }));
 
   renderQuestion = () => {
-    return this.props.surveyContents.map((content, index) => (
+    return this.state.surveyContents.map((content, index) => (
       <AddQuestionComponent questionData={content} questionIndex={index} key={`AddQC-${index}`} />
     ));
   };
@@ -79,18 +71,26 @@ class SurveyForm extends React.Component<ISurveyFormProps, {}> {
     this.handleOpenConfirmModal(false, false);
   };
   render() {
-    if (this.props.submitStatus === "Success") {
-      this.props.clearSubmitStatus();
-      this.handleOpenSuccessModal(true);
+    const {
+      handleOpenConfirmModal,
+      handleOpenSuccessModal,
+      handleSaveFormToDb,
+      props: { submitStatus, tempId, clearSubmitStatus },
+      state: { surveyContents, openConfirmModal, openSuccessModal, actionSave },
+    } = this;
+
+    if (submitStatus === "Success") {
+      clearSubmitStatus();
+      handleOpenSuccessModal(true);
     }
     const actionsConfirmModal = [
-      <FlatButton label="Cancel" primary onClick={() => this.handleOpenConfirmModal(false, false)} />,
-      <FlatButton label="Submit" secondary onClick={() => this.handleSaveFormToDb(this.state.actionSave)} />,
+      <FlatButton label="Cancel" primary onClick={() => handleOpenConfirmModal(false, false)} />,
+      <FlatButton label="Submit" secondary onClick={() => handleSaveFormToDb(actionSave)} />,
     ];
     const actionsSuccessModal = [
-      <FlatButton label="Next" primary onClick={() => this.handleOpenSuccessModal(false)} />,
+      <FlatButton label="Next" primary onClick={() => handleOpenSuccessModal(false)} />,
       <Link to="/">
-        <FlatButton label="Back to index" primary onClick={() => this.handleOpenSuccessModal(false)} />
+        <FlatButton label="Back to index" primary onClick={() => handleOpenSuccessModal(false)} />
       </Link>,
     ];
     return (
@@ -102,21 +102,12 @@ class SurveyForm extends React.Component<ISurveyFormProps, {}> {
         style={{ height: "calc(100vh - 65px)", width: "100%" }}
         autoHide
       >
-        <Dialog
-          actions={actionsConfirmModal}
-          open={this.state.openConfirmModal}
-          onRequestClose={() => this.handleOpenConfirmModal(false, false)}
-        >
+        <Dialog actions={actionsConfirmModal} open={openConfirmModal} onRequestClose={() => handleOpenConfirmModal(false, false)}>
           Are you sure you want to create this survey?
         </Dialog>
-        <Dialog
-          actions={actionsSuccessModal}
-          open={this.state.openSuccessModal}
-          onRequestClose={() => this.handleOpenSuccessModal(false)}
-        >
+        <Dialog actions={actionsSuccessModal} open={openSuccessModal} onRequestClose={() => handleOpenSuccessModal(false)}>
           Create survey successfully.
         </Dialog>
-
         <div className="row survey-form-create">
           <div className="container survey-form" style={{ paddingTop: "15px" }}>
             <div className="form-create clear-fix">
@@ -134,7 +125,7 @@ class SurveyForm extends React.Component<ISurveyFormProps, {}> {
                     backgroundColor="#4CAF50"
                     className="btn-save"
                     label="Preview"
-                    onClick={() => this.handleOpenConfirmModal(true, false)}
+                    onClick={() => handleOpenConfirmModal(true, false)}
                   />
                 </Link>
               </div>
@@ -143,15 +134,15 @@ class SurveyForm extends React.Component<ISurveyFormProps, {}> {
                   backgroundColor="#4CAF50"
                   className="btn-save"
                   label="Save"
-                  onClick={() => this.handleOpenConfirmModal(true, false)}
+                  onClick={() => handleOpenConfirmModal(true, false)}
                 />
               </div>
               <div className="btn-submit-survey-container">
                 <RaisedButton
                   backgroundColor="#4CAF50"
                   className="btn-save"
                   label="Submit"
-                  onClick={() => this.handleOpenConfirmModal(true, true)}
+                  onClick={() => handleOpenConfirmModal(true, true)}
                 />
               </div>
             </div>

src/components/questionComponents/AddQuestionComponent.tsx

@@ -39,6 +39,8 @@ class AddQuestionComponent extends React.Component<
   {
     questionIndex: number;
     currentIndex: number;
+    selectedQuestionType: string;
+    questionData: any;
     removeQuestion: (questionIndex: number) => any;
     updateCurrentIndex: (currentIndex: number) => any;
     updateQuestion: (questionIndex: number, questionData: any) => any;
@@ -56,6 +58,7 @@ class AddQuestionComponent extends React.Component<
   handleChangeQuestionType = (questionType: string) => this.setState(prevState => ({ ...prevState, questionType }));
 
   handleCreateQuestion = (questionType: string, questionIndex: number) => {
+    const {questionData} = this.props;
     return (
       (questionType === "longQuestion" && <LongQuestion {...{ questionIndex, questionData }} />) ||
       (questionType === "shortQuestion" && <ShortQuestion {...{ questionIndex, questionData }} />) ||

src/components/questionComponents/ShortQuestion.tsx

@@ -5,119 +5,85 @@ import { connect } from "react-redux";
 import TextField from "material-ui/TextField";
 
 class ShortQuestion extends React.Component<
-    {
-        questionData: any;
-        questionIndex: number;
-        removeQuestion: (questionIndex: number) => any;
-        updateQuestion: (questionIndex: number, questionData: any) => any;
-    },
-    IShortQuestion
+  {
+    questionData: any;
+    questionIndex: number;
+    removeQuestion: (questionIndex: number) => any;
+    updateQuestion: (questionIndex: number, questionData: any) => any;
+  },
+  IShortQuestion
 > {
-    state: IShortQuestion = {
-        questionType: "shortQuestion",
-        question: "",
-        description: "",
-        answers: [""],
-        completed: false
-    };
+  state: IShortQuestion = {
+    questionType: "shortQuestion",
+    question: "",
+    description: "",
+    answers: [""],
+    completed: false,
+  };
 
-    constructor(props: any) {
-        super(props);
-    }
-    handleChangeQuestion = (newQuestion: string) => this.setState(prevState => ({ ...prevState, question: newQuestion }));
+  constructor(props: any) {
+    super(props);
+  }
+  handleChangeQuestion = (newQuestion: string) => this.setState(prevState => ({ ...prevState, question: newQuestion }));
 
-    handleChangeDescription = (newDescription: string) =>
-        this.setState(prevState => ({ ...prevState, description: newDescription }));
+  handleChangeDescription = (newDescription: string) =>
+    this.setState(prevState => ({ ...prevState, description: newDescription }));
 
-    handleUpdateAnswer = (newAnswer: string) => this.setState(prevState => ({ ...prevState, answers: newAnswer.split("\n") }));
+  handleUpdateAnswer = (newAnswer: string) => this.setState(prevState => ({ ...prevState, answers: newAnswer.split("\n") }));
 
-    getAnswerString(answers: string[]) {
-        return answers.join("\n");
-    }
-
-    renderClientForm() {
-        return (
-            <div className="input-option-create">
-                <div className="question-info">
-                    <div className="question">{this.state.question}</div>
-                    <div className="description">{this.state.description}</div>
-                </div>
-                <div className="">
-                    <TextField
-                        name="answerText"
-                        hintText="Put your answer here"
-                        multiLine
-                        fullWidth
-                        rows={2}
-                        value={this.getAnswerString(this.state.answers)}
-                        onChange={(e: any) => this.handleUpdateAnswer(e.target.value)}
-                        floatingLabelText="Answer"
-                    />
-                </div>
-            </div>
-        )
-    }
-
-    renderFromCreate() {
-        const {
-            props: { removeQuestion, questionIndex, questionData },
-            handleChangeQuestion,
-            handleChangeDescription,
-            handleUpdateAnswer,
-            getAnswerString,
-        } = this;
-        const { question, answers, description } = questionData;
-        return (
-            <div className="input-option-create">
-                <div className="">
-                    <TextField
-                        name="questionText"
-                        hintText="Short question"
-                        multiLine
-                        fullWidth
-                        value={question}
-                        onChange={(e: any) => handleChangeQuestion(e.target.value)}
-                        floatingLabelText={`Question ${questionIndex + 1}`}
-                    />
-                    <TextField
-                        name="questionDescription"
-                        hintText="Extra Description"
-                        multiLine
-                        fullWidth
-                        value={description}
-                        onChange={(e: any) => handleChangeDescription(e.target.value)}
-                        floatingLabelText={"Question description"}
-                    />
-                </div>
-
-            </div>
-        )
-    }
-    render() {
-
-        return (
-            <div className="question-component">
-                {
-                    this.state.completed === false ? (
-                        this.renderFromCreate()
-                    ) : (
-                        this.renderClientForm()
-                    )
-                }
-            </div>
-        );
-    }
-    componentDidUpdate() {
-        console.log(this.state);
-        console.log(this.props.questionIndex)
-        return this.props.updateQuestion(this.props.questionIndex, this.state);
-    }
+  getAnswerString(answers: string[]) {
+    return answers.join("\n");
+  }
 
+  renderFormCreate = (questionIndex: number, questionData: any) => {
+    const { question, answers, description } = questionData;
+    return (
+      <div className="input-option-create">
+        <div className="">
+          <TextField
+            name="questionText"
+            hintText="Short question"
+            multiLine
+            fullWidth
+            value={question}
+            onChange={(e: any) => this.handleChangeQuestion(e.target.value)}
+            floatingLabelText={`Question ${questionIndex + 1}`}
+          />
+          <TextField
+            name="questionDescription"
+            hintText="Extra Description"
+            multiLine
+            fullWidth
+            value={description}
+            onChange={(e: any) => this.handleChangeDescription(e.target.value)}
+            floatingLabelText={"Question description"}
+          />
+        </div>
+      </div>
+    );
+  };
+  render() {
+    const {
+      props: { removeQuestion, questionIndex, questionData },
+      state: { completed },
+      handleChangeQuestion,
+      handleChangeDescription,
+      handleUpdateAnswer,
+      getAnswerString,
+      renderFormCreate,
+    } = this;
+    return <div className="question-component">{renderFormCreate(questionIndex, questionData)}</div>;
+  }
+  componentDidUpdate() {
+    // console.log(this.state);
+    // console.log(this.props.questionIndex);
+    return this.props.updateQuestion(this.props.questionIndex, this.state);
+  }
 }
 
 const mapDispatchToProps = (dispatch: any) => ({
-    removeQuestion: (questionIndex: number) => dispatch(removeQuestion(questionIndex)),
-    updateQuestion: (questionIndex: number, questionData: any) => dispatch(updateQuestion(questionIndex, questionData)),
+  removeQuestion: (questionIndex: number) => dispatch(removeQuestion(questionIndex)),
+  updateQuestion: (questionIndex: number, questionData: any) => dispatch(updateQuestion(questionIndex, questionData)),
 });
 
 export default connect(null, mapDispatchToProps)(ShortQuestion);

src/components/redux/actionCreators.tsx

@@ -33,7 +33,7 @@ export const addNewQuestion = () => (dispatch: any, getState: any) => {
   const { selectedQuestionType, currentIndex } = getState().stateStatus;
   dispatch({
     currentIndex,
-    questionType: selectedQuestionType,
+    questionType: selectedQuestionType || "shortQuestion",
     type: ADD_NEW_QUESTION,
   });
 };