Implement navigation

frontend/src/views/users/mission_feedback/FeedbackPage.tsx

@@ -1,33 +1,35 @@
 import { inject } from 'mobx-react';
 import * as React from 'react';
+import { Link } from 'react-router-dom';
+import { Button, ButtonGroup, Container } from 'reactstrap';
 import { UserFeedbackQuestionStore } from '../../../stores/userFeedbackQuestionStore';
-import { UserFeedbackQuestion } from '../../../types';
 import FeedbackQuestion from './questions/FeedbackQuestion';
 
 interface FeedbackPageProps {
   page: number;
+  missionId: number;
   userFeedbackQuestionStore?: UserFeedbackQuestionStore;
 }
 
-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],
-    };
+export class FeedbackPage extends React.Component<FeedbackPageProps> {
+  get currentQuestions() {
+    return this.props.userFeedbackQuestionStore!.pages[this.props.page - 1]
   }
 
   render() {
     return (
-      <div>
-        {this.state.currentQuestions.map(question => <FeedbackQuestion question={question} key={question.id} />)}
-      </div>
+      <Container fluid>
+        {this.currentQuestions.map(question => <FeedbackQuestion question={question} key={question.id}/>)}
+        <ButtonGroup className="mt-3">
+          <Link to={`/mission/${this.props.missionId}/feedback/${this.props.page - 1}`}>
+            <Button color="primary">Zurück</Button>
+          </Link>
+          <Link to={`/mission/${this.props.missionId}/feedback/${this.props.page + 1}`}>
+            <Button color="primary">Vorwärts</Button>
+          </Link>
+        </ButtonGroup>
+      </Container>
     );
   }
 }

frontend/src/views/users/mission_feedback/MissionFeedback.tsx

@@ -20,6 +20,10 @@ export class MissionFeedback extends React.Component<MissionFeedbackProps, Missi
     return parseInt(this.props.match.params.page, 10);
   }
 
+  get missionId() {
+    return parseInt(this.props.match.params.id, 10);
+  }
+
   constructor(props: MissionFeedbackProps) {
     super(props);
 
@@ -45,7 +49,7 @@ export class MissionFeedback extends React.Component<MissionFeedbackProps, Missi
           <Progress max={this.props.userFeedbackQuestionStore!.pages.length} value={this.currentPage} className={'mt-3'}/>
         </div>
 
-        <FeedbackPage page={this.currentPage}/>
+        <FeedbackPage page={this.currentPage} missionId={this.missionId}/>
       </IziviContent>
     );
   }

frontend/src/views/users/mission_feedback/questions/FeedbackQuestionContainer.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import Row from 'reactstrap/lib/Row';
+
+export default ({ children }: { children: React.ReactNode }) => {
+  return (
+    <Row className="mt-3">
+      {children}
+    </Row>
+  );
+};

frontend/src/views/users/mission_feedback/questions/types/LikertScale.tsx

@@ -1,14 +1,17 @@
-import { useState } from 'react';
 import * as React from 'react';
 import { Button, ButtonGroup } from 'reactstrap';
+import Col from 'reactstrap/lib/Col';
+import FeedbackQuestionContainer from '../FeedbackQuestionContainer';
 import { FeedbackQuestionProps } from '../FeedbackQuestionProps';
 
 function renderButton(index: number, activeIndex: number, setActiveIndex: React.Dispatch<React.SetStateAction<number>>) {
+  const isActive = activeIndex === index;
+
   return (
     <Button
-      color="primary"
+      color={isActive ? 'primary' : 'secondary'}
       key={index}
-      active={activeIndex === index}
+      active={isActive}
       onClick={() => setActiveIndex(index)}
     >
       {index + 1}
@@ -17,17 +20,21 @@ function renderButton(index: number, activeIndex: number, setActiveIndex: React.
 }
 
 export default ({ question }: FeedbackQuestionProps) => {
-  const [activeIndex, setActiveIndex] = useState(0);
+  const [activeIndex, setActiveIndex] = React.useState(0);
 
   return (
-    <div>
-      <p>{question.question}</p>
-      <ButtonGroup>
-        {
-          [...(Array(4).keys() as any)]
-            .map(index => renderButton(index, activeIndex, setActiveIndex))
-        }
-      </ButtonGroup>
-    </div>
+    <FeedbackQuestionContainer>
+      <Col>
+        <h6>{question.question}</h6>
+      </Col>
+      <Col>
+        <ButtonGroup>
+          {
+            [...(Array(4).keys() as any)]
+              .map(index => renderButton(index, activeIndex, setActiveIndex))
+          }
+        </ButtonGroup>
+      </Col>
+    </FeedbackQuestionContainer>
   );
 };

frontend/src/views/users/mission_feedback/questions/types/MultipleChoice.tsx

@@ -1,29 +1,49 @@
 import * as React from 'react';
 import { Form, FormGroup, Label } from 'reactstrap';
+import Col from 'reactstrap/lib/Col';
+import { UserFeedbackQuestion } from '../../../../../types';
+import FeedbackQuestionContainer from '../FeedbackQuestionContainer';
 import { FeedbackQuestionProps } from '../FeedbackQuestionProps';
 
-function renderOption(option: any) {
+interface Choice {
+  value: string;
+  text: string;
+}
+
+interface JSONResponse {
+  choices: Choice[];
+}
+
+function renderOption(option: Choice, name: string) {
   const optionId = `opt-${option.value}`;
 
   return (
     <div key={option.value}>
-      <input type={'radio'} id={optionId}/>
-      <Label for={optionId}>{option.text}</Label>
+      <input type={'radio'} id={optionId} name={`multiple-choice-${name}`}/>
+      <Label for={optionId} className="ml-2">{option.text}</Label>
     </div>
   );
 }
 
+function parseCustomInfo(question: UserFeedbackQuestion) {
+  return JSON.parse(question.custom_info) as JSONResponse;
+}
+
 export default ({ question }: FeedbackQuestionProps) => {
-  const options = JSON.parse(question.custom_info).choices;
+  const options = parseCustomInfo(question).choices;
 
   return (
-    <div>
-      <p>{question.question}</p>
-      <Form>
-        <FormGroup>
-          {options.map((option: any) => renderOption(option))}
-        </FormGroup>
-      </Form>
-    </div>
+    <FeedbackQuestionContainer>
+      <Col>
+        <h6>{question.question}</h6>
+      </Col>
+      <Col>
+        <Form>
+          <FormGroup>
+            {options.map(choice => renderOption(choice, question.id.toString()))}
+          </FormGroup>
+        </Form>
+      </Col>
+    </FeedbackQuestionContainer>
   );
 };

frontend/src/views/users/mission_feedback/questions/types/SectionTitle.tsx

@@ -1,4 +1,15 @@
 import * as React from 'react';
+import Col from 'reactstrap/lib/Col';
+import FeedbackQuestionContainer from '../FeedbackQuestionContainer';
 import { FeedbackQuestionProps } from '../FeedbackQuestionProps';
 
-export default ({ question }: FeedbackQuestionProps) => <h4>{question.question}</h4>;
+export default ({ question }: FeedbackQuestionProps) => (
+  <FeedbackQuestionContainer>
+    <Col>
+      <h4>{question.question}</h4>
+    </Col>
+    <Col>
+      <p>{question.options[0]} - {question.options[1]}</p>
+    </Col>
+  </FeedbackQuestionContainer>
+);