Skip to content
This repository has been archived by the owner on Sep 9, 2019. It is now read-only.

Commit

Permalink
Implement survey types
Browse files Browse the repository at this point in the history
  • Loading branch information
lukasbischof committed Apr 12, 2019
1 parent cd7ab60 commit b6614d4
Show file tree
Hide file tree
Showing 7 changed files with 116 additions and 4 deletions.
4 changes: 2 additions & 2 deletions frontend/src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -181,10 +181,10 @@ export enum UserFeedbackQuestionType {
}

export interface UserFeedbackQuestion {
id?: number;
id: number;
question: string;
page: number;
type: number;
type: UserFeedbackQuestionType;
custom_info: string;
options: string[];
}
Expand Down
26 changes: 24 additions & 2 deletions frontend/src/views/users/mission_feedback/FeedbackPage.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,33 @@
import { inject } from 'mobx-react';
import * as React from 'react';
import { UserFeedbackQuestionStore } from '../../../stores/userFeedbackQuestionStore';
import { UserFeedbackQuestion } from '../../../types';
import FeedbackQuestion from './questions/FeedbackQuestion';

interface FeedbackPageProps {
page: number;
userFeedbackQuestionStore?: UserFeedbackQuestionStore;
}

export class FeedbackPage extends React.Component<FeedbackPageProps> {
interface FeedbackPageState {
currentQuestions: UserFeedbackQuestion[];
}

@inject('userFeedbackQuestionStore')
export class FeedbackPage extends React.Component<FeedbackPageProps, FeedbackPageState> {
constructor(props: FeedbackPageProps) {
super(props);

this.state = {
currentQuestions: props.userFeedbackQuestionStore!.pages[props.page - 1],
};
}

render() {
return <div>Page {this.props.page}</div>;
return (
<div>
{this.state.currentQuestions.map(question => <FeedbackQuestion question={question} key={question.id} />)}
</div>
);
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import * as React from 'react';
import { UserFeedbackQuestionType } from '../../../../types';
import { FeedbackQuestionProps } from './FeedbackQuestionProps';
import LikertScale from './types/LikertScale';
import MultipleChoice from './types/MultipleChoice';
import SectionTitle from './types/SectionTitle';

export default (props: FeedbackQuestionProps) => {
switch (props.question.type) {
case UserFeedbackQuestionType.SectionTitle:
return <SectionTitle {...props}/>;
case UserFeedbackQuestionType.LikertScale:
return <LikertScale {...props}/>;
case UserFeedbackQuestionType.MultipleChoice:
return <MultipleChoice {...props}/>;
default:
return <></>;
}
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { UserFeedbackQuestion } from '../../../../types';

export interface FeedbackQuestionProps {
question: UserFeedbackQuestion;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { useState } from 'react';
import * as React from 'react';
import { Button, ButtonGroup } from 'reactstrap';
import { FeedbackQuestionProps } from '../FeedbackQuestionProps';

function renderButton(index: number, activeIndex: number, setActiveIndex: React.Dispatch<React.SetStateAction<number>>) {
return (
<Button
color="primary"
key={index}
active={activeIndex === index}
onClick={() => setActiveIndex(index)}
>
{index + 1}
</Button>
);
}

export default ({ question }: FeedbackQuestionProps) => {
const [activeIndex, setActiveIndex] = useState(0);

return (
<div>
<p>{question.question}</p>
<ButtonGroup>
{
[...(Array(4).keys() as any)]
.map(index => renderButton(index, activeIndex, setActiveIndex))
}
</ButtonGroup>
</div>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import * as React from 'react';
import { Form, FormGroup, Label } from 'reactstrap';
import { FeedbackQuestionProps } from '../FeedbackQuestionProps';

function renderOption(option: any) {
const optionId = `opt-${option.value}`;

return (
<div key={option.value}>
<input type={'radio'} id={optionId}/>
<Label for={optionId}>{option.text}</Label>
</div>
);
}

export default ({ question }: FeedbackQuestionProps) => {
const options = JSON.parse(question.custom_info).choices;

return (
<div>
<p>{question.question}</p>
<Form>
<FormGroup>
{options.map((option: any) => renderOption(option))}
</FormGroup>
</Form>
</div>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import * as React from 'react';
import { FeedbackQuestionProps } from '../FeedbackQuestionProps';

export default ({ question }: FeedbackQuestionProps) => <h4>{question.question}</h4>;

0 comments on commit b6614d4

Please sign in to comment.