#11 Display list of questions

redaktions-app/src/components/AddCard.tsx

@@ -0,0 +1,33 @@
+import {Card, CardActionArea, CardContent} from "@material-ui/core";
+import React from "react";
+import {makeStyles} from "@material-ui/core/styles";
+import AddIcon from '@material-ui/icons/Add';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    width: '100%',
+    marginBottom: theme.spacing(1),
+  },
+  addCardContent: {
+    padding: 0,
+  },
+  addCardIcon: {
+    display: 'block',
+    margin: 'auto',
+    padding: 12,
+  },
+}));
+
+export default function AddCard() {
+  const classes = useStyles();
+
+  return (
+    <Card className={classes.root}>
+      <CardActionArea>
+        <CardContent color={"textSecondary"} className={classes.addCardContent}>
+            <AddIcon className={classes.addCardIcon}/>
+        </CardContent>
+      </CardActionArea>
+    </Card>
+  )
+}

redaktions-app/src/components/Main.tsx

@@ -1,9 +1,9 @@
 import CustomAppBar from "./CustomAppBar";
-import {Container, Paper} from "@material-ui/core";
+import {Container} from "@material-ui/core";
 import React from "react";
-import clsx from "clsx";
 import {makeStyles} from "@material-ui/core/styles";
 import {Copyright} from "./Copyright";
+import QuestionList from "./QuestionList";
 
 const useStyles = makeStyles((theme) => ({
   appBarSpacer: theme.mixins.toolbar,
@@ -24,26 +24,18 @@ const useStyles = makeStyles((theme) => ({
     overflow: 'auto',
     flexDirection: 'column',
   },
-  fixedHeight: {
-    height: 240,
-  },
 }));
 
 function Main() {
   const classes = useStyles();
-  const fixedHeightPaper = clsx(classes.paper, classes.fixedHeight);
   return (
     <div>
       <CustomAppBar/>
       <main className={classes.content}>
         <div className={classes.appBarSpacer}/>
         <Container maxWidth="lg" className={classes.container}>
-          <Paper className={fixedHeightPaper}>
-            blablablubb
-          </Paper>
-          <Paper className={fixedHeightPaper}>
-            blablaj
-          </Paper>
+          <QuestionList/>
+          <div className={classes.appBarSpacer} />
           <Copyright/>
         </Container>
       </main>

redaktions-app/src/components/Question.test.tsx

@@ -5,7 +5,7 @@ import Question from "./Question";
 
 describe('The Question component', () => {
   test('displays title, category and description', () => {
-    const {queryByText} = render(<Question title={"Test Title"} category={"Test Category"}
+    const {queryByText} = render(<Question key={"test"} title={"Test Title"} category={"Test Category"}
                                          description="Test Description"/>);
     expect(queryByText(/Test Title/)?.textContent).toBe("Test Title");
     expect(queryByText(/Test Category/)?.textContent).toBe("Test Category");

redaktions-app/src/components/Question.tsx

@@ -32,6 +32,7 @@ const useStyles = makeStyles((theme: Theme) =>
 );
 
 interface QuestionProps {
+  key: string,
   title: string,
   description: string,
   category: string

redaktions-app/src/components/QuestionList.tsx

@@ -0,0 +1,61 @@
+import {Paper, Typography} from "@material-ui/core";
+import React from "react";
+import {makeStyles} from "@material-ui/core/styles";
+import Question from "./Question";
+import {gql, useQuery} from "@apollo/client";
+import AddCard from "./AddCard";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    width: '100%',
+    padding: theme.spacing(1),
+  },
+}));
+
+export default function QuestionList() {
+  const {data} = useQuery<AllQuestionsQueryResponse, null>(allQuestionsQuery);
+  const classes = useStyles();
+
+  return (
+    <Paper className={classes.root}>
+      <Typography component={"h2"} variant="h6" color="primary" gutterBottom>Fragen</Typography>
+      {data?.allQuestions.nodes.map(question => <Question
+        key={question.id.toString()}
+        title={question.text}
+        category={question.categoryByCategoryId.title}
+        description={question.description}/>
+      )}
+      <AddCard/>
+    </Paper>
+  )
+}
+
+const allQuestionsQuery = gql`
+  query AllQuestions {
+    allQuestions {
+      nodes {
+        id
+        text
+        description
+        categoryByCategoryId {
+          title
+        }
+      }
+    }
+  }
+`
+
+interface AllQuestionsQueryResponse {
+  allQuestions: {
+    nodes: Array<AllQuestionsQueryNodes>
+  }
+}
+
+interface AllQuestionsQueryNodes {
+  id: number,
+  text: string,
+  description: string,
+  categoryByCategoryId: {
+    title: string
+  }
+}