FAQ page with loading from json(local for now)

package.json

@@ -14,6 +14,7 @@
     "d3-timeline-chart": "^1.3.0",
     "htmr": "^0.9.2",
     "interactjs": "^1.10.2",
+    "json-loader": "^0.5.7",
     "pako": "^2.0.4",
     "react": "^17.0.1",
     "react-bootstrap": "^1.4.0",

src/components/AppBar/config.ts

@@ -10,6 +10,7 @@ export const routes = {
   transactions: "Transfers",
   burners: "Top Burners",
   mint: "Mints",
+  faq: "FAQ",
 };
 
 export const css = {

src/components/AppBar/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Link } from "react-router-dom";
 import { AppBar, Button, makeStyles, Toolbar } from "@material-ui/core";
 import joystream from "../../joystream.svg";

src/components/FAQ/faq.json

@@ -0,0 +1,37 @@
+[{
+        "question": "Question 1",
+        "answer": "Answer 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."
+    },
+    {
+        "question": "Question 2",
+        "answer": "Answer 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."
+    },
+    {
+        "question": "Question 3",
+        "answer": "Answer 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."
+    },
+    {
+        "question": "Question 4",
+        "answer": "Answer 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."
+    },
+    {
+        "question": "Question 5",
+        "answer": "Answer 5 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."
+    },
+    {
+        "question": "Question 6",
+        "answer": "Answer 6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."
+    },
+    {
+        "question": "Question 7",
+        "answer": "Answer 7 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."
+    },
+    {
+        "question": "Question 8",
+        "answer": "Answer 8 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."
+    },
+    {
+        "question": "Question 9",
+        "answer": "Answer 9 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."
+    }
+]

src/components/FAQ/index.tsx

@@ -0,0 +1,72 @@
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  createStyles,
+  Grid,
+  makeStyles,
+  Theme,
+  Typography,
+} from "@material-ui/core";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import { useEffect } from "react";
+import { useState } from "react";
+import faq from "./faq.json";
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      textAlign: "center",
+      backgroundColor: "#000",
+      color: "#fff",
+    },
+    acc: {
+      color: "#fff",
+      backgroundColor: "#4138ff",
+    },
+    heading: {
+      fontSize: theme.typography.pxToRem(15),
+      fontWeight: theme.typography.fontWeightRegular,
+    },
+  })
+);
+
+export interface FAQItem {
+  question: string;
+  answer: string;
+}
+
+const FAQ = () => {
+  const [faqItems, setFaqItems] = useState([] as FAQItem[]);
+
+  useEffect(() => {
+    setFaqItems(faq);
+  }, []);
+
+  const classes = useStyles();
+  return (
+    <Grid className={classes.root} item lg={12}>
+      <Typography variant="h2">FAQ</Typography>
+      {faqItems.map((item: FAQItem, index: number) => {
+        return (
+          <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.answer}</Typography>
+            </AccordionDetails>
+          </Accordion>
+        );
+      })}
+    </Grid>
+  );
+};
+
+export default FAQ;

src/components/Routes/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { BrowserRouter, Switch, Route } from "react-router-dom";
 import {
   AppBar,
@@ -21,6 +20,7 @@ import {
   Bounties,
   Burners,
   ValidatorReport,
+  FAQ
 } from "..";
 
 import { IState } from "../../types";
@@ -100,7 +100,7 @@ const Routes = (props: IProps) => {
             <Route
               path="/validator-report"
               render={(routeprops) => (
-                <ValidatorReport {...routeprops} {...props} />
+                <ValidatorReport/>
               )}
             />
             <Route
@@ -121,6 +121,10 @@ const Routes = (props: IProps) => {
               path="/burners"
               render={(routeprops) => <Burners {...routeprops} {...props} />}
             />
+            <Route
+              path="/faq"
+              render={(routeprops) => <FAQ/>}
+            />
             <Route path="/" render={() => <Dashboard {...props} />} />
           </Switch>
         </div>

src/components/Validators/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { Button } from "react-bootstrap";
 import Stats from "./MinMax";
 import Validator from "./Validator";

src/components/index.ts

@@ -23,6 +23,7 @@ export { default as Transactions } from "./Transactions";
 export { default as Burners } from "./Burners";
 export { default as Validators } from "./Validators";
 export { default as ValidatorReport } from "./ValidatorReport";
+export { default as FAQ } from "./FAQ";
 export { default as Timeline } from "./Timeline";
 export { default as TableFromObject } from "./TableFromObject";
 

yarn.lock

@@ -7756,6 +7756,11 @@ jsesc@~0.5.0:
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
   integrity sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=
 
+json-loader@^0.5.7:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/json-loader/-/json-loader-0.5.7.tgz#dca14a70235ff82f0ac9a3abeb60d337a365185d"
+  integrity sha512-QLPs8Dj7lnf3e3QYS1zkCo+4ZwqOiF9d/nZnYozTISxXWCfNs9yuky5rJw4/W34s7POaNlbZmQGaB5NiXCbP4w==
+
 json-parse-better-errors@^1.0.1, json-parse-better-errors@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"