Survey

src/components/AppBar/config.ts

@@ -11,6 +11,7 @@ export const routes = {
   burners: "Top Burners",
   mint: "Mints",
   faq: "FAQ",
+  survey: "Survey",
 };
 
 export const css = {

src/components/Routes/index.tsx

@@ -24,6 +24,7 @@ const Bounties = React.lazy(() => import("../Bounties"));
 const Burners = React.lazy(() => import("../Burners"));
 const ValidatorReport = React.lazy(() => import("../ValidatorReport"));
 const FAQ = React.lazy(() => import("../FAQ"));
+const Survey = React.lazy(() => import("../Survey"));
 
 interface IProps extends IState {
   toggleStar: (a: string) => void;
@@ -130,6 +131,7 @@ const Routes = (props: IProps) => {
                 render={(routeprops) => <Burners {...routeprops} {...props} />}
               />
               <Route path="/faq" render={(routeprops) => <FAQ faq={faq} />} />
+              <Route path="/survey" render={(routeprops) => <Survey />} />
 
               <Route path="/" render={() => <Dashboard {...props} />} />
             </Switch>

src/components/Survey/Summary.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import {  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Typography,
+} from "@material-ui/core";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+
+const Summary = (props: {
+  classes;
+  answers: number[];
+  survey: SurveyItem[];
+}) => {
+  const { classes, answers, survey } = props;
+  return (
+    <div>
+      <h2>Thank you very much!</h2>
+      {survey.map((item: SurvayItem, index: number) => (
+        <Accordion className={classes.acc} key={index}>
+          <AccordionSummary
+            expandIcon={<ExpandMoreIcon style={{ color: "#fff" }} />}
+            aria-controls={`${index}-content`}
+            id={`${index}-header`}
+          >
+            <Typography className={classes.heading}>{item.question}</Typography>
+          </AccordionSummary>
+          <AccordionDetails>
+            <Typography>{item.answers[answers[index]]}</Typography>
+          </AccordionDetails>
+        </Accordion>
+      ))}
+    </div>
+  );
+};
+
+export default Summary

src/components/Survey/index.tsx

@@ -0,0 +1,124 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Grid, withStyles, Theme, Typography } from "@material-ui/core";
+import { Button } from "react-bootstrap";
+import Summary from "./Summary";
+import { SurveyItem } from "../../types";
+import axios from "axios";
+
+interface IState {
+  loading: boolean;
+  started: boolean;
+  survey: SurveyItem[];
+  answers: number[];
+}
+
+const styles = (theme: Theme) => ({
+  root: {
+    textAlign: "center",
+    backgroundColor: "#000",
+    color: "#fff",
+  },
+  acc: {
+    color: "#fff",
+    backgroundColor: "#4138ff",
+  },
+  heading: {
+    fontSize: theme.typography.pxToRem(15),
+    fontWeight: theme.typography.fontWeightRegular,
+  },
+});
+
+class Survey extends React.Component<IProps, IState> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: false,
+      started: false,
+      survey: [],
+      answers: [],
+    };
+
+    this.loadSurvey = this.loadSurvey.bind(this);
+    this.startSurvey = this.startSurvey.bind(this);
+    this.saveAnswer = this.saveAnswer.bind(this);
+  }
+  componentDidMount() {
+    this.loadSurvey();
+  }
+
+  async loadSurvey() {
+    this.setState({ loading: true });
+    const { data } = await axios.get(
+      `https://joystreamstats.live/static/survey.json`
+    );
+    if (!data || data.error) return console.error(`failed to fetch Survey`);
+    try {
+      console.debug(`survey`, data);
+      this.setState({ survey: data.survey });
+    } catch (e) {
+      console.log(`Failed to load survey: `, e);
+    }
+    this.setState({ loading: false });
+  }
+
+  startSurvey() {
+    this.setState({ started: true });
+  }
+  saveAnswer(event) {
+    this.setState({ answers: this.state.answers.concat(+event.target.name) });
+  }
+
+  render() {
+    const { classes } = this.props;
+    const { loading, answers, started, survey } = this.state;
+
+    return (
+      <Grid className={classes.root} item lg={12}>
+        <Typography variant="h2" className="mb-3">
+          Survey
+        </Typography>
+        {!started ? (
+          <div>
+            {survey.length ? (
+              <Button disabled={!survey.length} onClick={this.startSurvey}>
+                Start Survey
+              </Button>
+            ) : (
+              <Button disabled={loading} onClick={this.loadSurvey}>
+                Load Survey
+              </Button>
+            )}
+          </div>
+        ) : answers.length === survey.length ? (
+          <Summary classes={classes} answers={answers} survey={survey} />
+        ) : (
+          <div>
+            <Typography className={classes.heading}>
+              {survey[answers.length].question}
+            </Typography>
+
+            <div className="d-flex flex-column m-1">
+              {survey[answers.length]?.answers.map((answer, index: number) => (
+                <Button
+                  key={index}
+                  name={index}
+                  onClick={this.saveAnswer}
+                  className="btn-sm m-1 p-1"
+                >
+                  {answer}
+                </Button>
+              ))}
+            </div>
+          </div>
+        )}
+      </Grid>
+    );
+  }
+}
+
+export default withStyles(styles)(Survey);
+
+Survey.propTypes = {
+  classes: PropTypes.object.isRequired,
+};