Skip to content

Commit

Permalink
updates:
Browse files Browse the repository at this point in the history
  • Loading branch information
@kai1709
kai1709 committed Nov 7, 2017
2 parents 780ee3e + f706c9e commit 8f58da9
Show file tree
Hide file tree
Showing 4 changed files with 73 additions and 100 deletions.
110 changes: 49 additions & 61 deletions src/components/SurveyForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,32 +34,34 @@ interface ISurveyFormProps {
clearSurvey: () => any;
}

class SurveyForm extends React.Component<ISurveyFormProps,{}> {
class SurveyForm extends React.Component<ISurveyFormProps, {}> {
scrollBars: Scrollbars;
tempLengthArea = 0;
state = {
openConfirmModal: false,
openSuccessModal: false,
currentTab: "question",
completed: false,
actionSave: false, // False: save, True: submit
tempIdState: ""
suveyContents: [],
};

componentDidUpdate() {
const sLen = this.props.surveyContents.length;
if (sLen > this.tempLengthArea) {
this.scrollBars.scrollToBottom();
this.tempLengthArea = sLen;
// 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);
}
}

componentDidMount() {
if (this.props.tempId) {
this.props.getDataFromDbById(this.props.tempId);
if (this.props.surveyContents) {
this.setState(prevState => ({ ...prevState, surveyContents: this.props.surveyContents }));
}
}
handleChangeCurrentTab = (currentTab: any) =>
this.setState(prevState => ({ ...prevState, currentTab }));

handleOpenConfirmModal = (open: boolean, completed: boolean) =>
this.setState(prevState => ({ ...prevState, openConfirmModal: open, actionSave: completed }));
Expand All @@ -68,32 +70,29 @@ class SurveyForm extends React.Component<ISurveyFormProps,{}> {
this.setState(prevState => ({ ...prevState, openSuccessModal: open, openConfirmModal: false }));

renderQuestion = () => {
console.log(this.props.surveyContents[1]);
return this.props.surveyContents.map((content, index) => (
<AddQuestionComponent questionData={content} questionIndex={index} key={`AddQC-${index}`} />
));
}
};
handleSaveFormToDb = (actionSave: boolean) => {
this.props.saveFormToDb(actionSave);
this.handleOpenConfirmModal(false, false);
}
};
render() {
if (this.props.submitStatus === "Success") {
this.props.clearSubmitStatus();
this.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={() => this.handleOpenConfirmModal(false, false)} />,
<FlatButton label="Submit" secondary onClick={() => this.handleSaveFormToDb(this.state.actionSave)} />,
];
const actionsSuccessModal = [
<FlatButton label="Next" primary onClick={ () => this.handleOpenSuccessModal(false)} />,
<Link to="/"><FlatButton label="Back to index" primary onClick={ () => this.handleOpenSuccessModal(false)}/></Link>
];
<FlatButton label="Next" primary onClick={() => this.handleOpenSuccessModal(false)} />,
<Link to="/">
<FlatButton label="Back to index" primary onClick={() => this.handleOpenSuccessModal(false)} />
</Link>,
];
return (
<Scrollbars
id="scroll-survey-form"
Expand Down Expand Up @@ -121,70 +120,59 @@ class SurveyForm extends React.Component<ISurveyFormProps,{}> {
<div className="row survey-form-create">
<div className="container survey-form" style={{ paddingTop: "15px" }}>
<div className="form-create clear-fix">
<Tabs
value={this.state.currentTab}
onChange={this.handleChangeCurrentTab}
>
<Tabs value="question">
<Tab label="Form" value="question">
<SurveyInfo />
{this.renderQuestion()}
</Tab>
</Tabs>
</div>
{this.state.completed ? (
<div />
) : (
<div>
<div className="btn-preview-survey-container">
<Link to="/survey/preview">
<RaisedButton
backgroundColor="#4CAF50"
className="btn-save"
label="Preview"
onClick={() => this.handleOpenConfirmModal(true, false)}
/>
</Link>
</div>
<div className="btn-save-survey-container">
<div>
<div className="btn-preview-survey-container">
<Link to="/survey/preview">
<RaisedButton
backgroundColor="#4CAF50"
className="btn-save"
label="Save"
label="Preview"
onClick={() => this.handleOpenConfirmModal(true, false)}
/>
</div>
<div className="btn-submit-survey-container">
<RaisedButton
backgroundColor="#4CAF50"
className="btn-save"
label="Submit"
onClick={() => this.handleOpenConfirmModal(true, true)}
/>
</div>
</Link>
</div>
)}
<div className="btn-save-survey-container">
<RaisedButton
backgroundColor="#4CAF50"
className="btn-save"
label="Save"
onClick={() => this.handleOpenConfirmModal(true, false)}
/>
</div>
<div className="btn-submit-survey-container">
<RaisedButton
backgroundColor="#4CAF50"
className="btn-save"
label="Submit"
onClick={() => this.handleOpenConfirmModal(true, true)}
/>
</div>
</div>
</div>
</div>
<Settings />
</Scrollbars>
);
}
}
// const SurveyForm: React.SFC<ISurveyForm> = props => {
// const { surveyData, updateInfoSurvey, saveSurvey } = props;

// };

const mapStateToProps = (state: any) => ({
surveyContents: state.surveyContents,
submitStatus: state.stateStatus.submitStatus,
tempId: state.stateStatus.tempId
tempId: state.stateStatus.tempId,
});

const mapDispatchToProps = (dispatch: any) => ({
saveFormToDb: (completed: boolean) => dispatch(saveFormToDb(completed)),
clearSubmitStatus: () => dispatch(clearSubmitStatus()),
getDataFromDbById: (id: string) => dispatch(getDataFromDbById(id))
getDataFromDbById: (id: string) => dispatch(getDataFromDbById(id)),
});

export default connect(mapStateToProps, mapDispatchToProps)(SurveyForm);
43 changes: 19 additions & 24 deletions src/components/questionComponents/AddQuestionComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,32 +37,25 @@ for (const [key, val] of Object.entries(options)) {

class AddQuestionComponent extends React.Component<
{
selectedQuestionType: string;
questionIndex: number;
currentIndex: number;
removeQuestion: (questionIndex: number) => any;
updateCurrentIndex: (currentIndex: number) => any;
updateQuestion: (questionIndex: number, questionData: any) => any;
questionData: any;
currentIndex: number;
},
{ questionType: string }
{}
> {
state = {
questionType: "",
openClosingDialog: false,
questionData: {}
questionData: {},
};

handleOpenClosingDialog = (openClosingDialog: boolean) => this.setState(prevState => ({ ...prevState, openClosingDialog }));
// handleChangeQuestionType = (questionType: string) => this.setState(prevState => ({ ...prevState, questionType }));

handleChangeQuestionType = (questionType: string) => {
const questionData = Templates[questionType];
console.log('aaa')
this.props.updateQuestion(this.props.questionIndex, questionData);
}
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 }} />) ||
Expand All @@ -76,26 +69,30 @@ class AddQuestionComponent extends React.Component<
handleRemoveQuestion = (questionIndex: number) => {
this.props.removeQuestion(questionIndex);
this.handleOpenClosingDialog(false);
}
};

render() {
const {
handleCreateQuestion,
handleChangeQuestionType,
handleOpenClosingDialog,
handleRemoveQuestion,
props: { questionIndex, selectedQuestionType, questionData,updateCurrentIndex },
state: { openClosingDialog },
props: { questionIndex, updateCurrentIndex },
state: { openClosingDialog, questionType },
} = this;
const questionType = questionData.questionType;
let activeQuestiton = "component-question ";
activeQuestiton += this.props.currentIndex === questionIndex ? "active-area" : "";
const actionsClosingDialog = [
<FlatButton label="Cancel" primary onClick={() => handleOpenClosingDialog(false)}/>,
<FlatButton label="Cancel" primary onClick={() => handleOpenClosingDialog(false)} />,
<FlatButton label="Submit" secondary onClick={() => handleRemoveQuestion(questionIndex)} />,
];
return (
<div className={ activeQuestiton } id={`${questionIndex}`} style={{ paddingBottom: "40px" }} onClick={ e => updateCurrentIndex(questionIndex) }>
<div
className={activeQuestiton}
id={`${questionIndex}`}
style={{ paddingBottom: "40px" }}
onClick={e => updateCurrentIndex(questionIndex)}
>
<Dialog actions={actionsClosingDialog} open={openClosingDialog} onRequestClose={() => handleOpenClosingDialog(false)}>
Are you sure to delete this question?
</Dialog>
Expand All @@ -108,27 +105,25 @@ class AddQuestionComponent extends React.Component<
<ContentClear />
</IconButton>
<div className="padding-25">
<SelectField fullWidth onChange={(e, i, p) => handleChangeQuestionType(p)} value={ questionType }>
<SelectField fullWidth onChange={(e, i, p) => handleChangeQuestionType(p)} value={questionType}>
{selectOptionsArr.map((e, i) => <MenuItem key={`questionOption-${i}`} value={questionTypeArr[i]} primaryText={e} />)}
</SelectField>
</div>
<div >
{handleCreateQuestion(questionType || selectedQuestionType, questionIndex)}
</div>
<div>{handleCreateQuestion(questionType, questionIndex)}</div>
</div>
);
}
}

const mapStateToProps = (state: any) => ({
selectedQuestionType: state.stateStatus.selectedQuestionType,
currentIndex: state.stateStatus.currentIndex
currentIndex: state.stateStatus.currentIndex,
});

const mapDispatchToProps = (dispatch: any) => ({
removeQuestion: (questionIndex: number) => dispatch(removeQuestion(questionIndex)),
updateCurrentIndex: (currentIndex: number) => dispatch(updateCurrentIndex(currentIndex)),
updateQuestion: (questionIndex: number, questionData: any) => dispatch(updateQuestion(questionIndex, questionData))
updateQuestion: (questionIndex: number, questionData: any) => dispatch(updateQuestion(questionIndex, questionData)),
});

export default connect(mapStateToProps, mapDispatchToProps)(AddQuestionComponent);
16 changes: 3 additions & 13 deletions src/components/redux/actionCreators.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,22 +31,12 @@ export const setSearchTerm = (searchTerm: string) => ({

export const addNewQuestion = () => (dispatch: any, getState: any) => {
const { selectedQuestionType, currentIndex } = getState().stateStatus;
const template = {
questionType: "multipleChoices",
question: "",
description: "",
answers: [{
correct: false,
answer: ""
}]
};
dispatch({
template,
currentIndex,
questionType: selectedQuestionType,
type: ADD_NEW_QUESTION
})
}
type: ADD_NEW_QUESTION,
});
};

export const removeQuestion = (questionIndex: number) => ({
questionIndex,
Expand Down
4 changes: 2 additions & 2 deletions src/components/redux/reducers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,10 +131,10 @@ export const rootReducer = combineReducers({

function addNewQuestionReducer(state: any, currentIndex: any, template: any) {
console.log(`index: ${currentIndex} state: ${JSON.stringify(state)}`);
const newTemplate = {...template};
const newState = [...state];
newState.splice(currentIndex + 1 || newState.length, 0, template);
console.log(newState);
// console.log(newState); // tslint:disable-lineư
console.log(newState); // tslint:disable-line
return newState;
}

Expand Down

0 comments on commit 8f58da9

Please sign in to comment.