#11 Added Categories list to main page

For that the Question.tsx component was refactored to be reusable
for categories.

redaktions-app/src/components/AccordionWithEdit.tsx

@@ -35,10 +35,10 @@ interface QuestionProps {
   key: string,
   title: string,
   description: string,
-  category: string
+  subTitle?: string,
 }
 
-export default function Question(props: QuestionProps) {
+export default function AccordionWithEdit(props: QuestionProps) {
   const classes = useStyles();
 
   return (
@@ -53,7 +53,7 @@ export default function Question(props: QuestionProps) {
             <Typography>{props.title}</Typography>
           </div>
           <div className={classes.secondaryHeading}>
-            <Typography>{props.category}</Typography>
+            <Typography>{props.subTitle}</Typography>
           </div>
         </AccordionSummary>
         <AccordionDetails className={classes.details}>
@@ -64,13 +64,13 @@ export default function Question(props: QuestionProps) {
         <Divider/>
         <AccordionActions>
           <IconButton size={"small"} aria-label="edit">
-            <EditIcon />
+            <EditIcon/>
           </IconButton>
           <IconButton size={"small"} aria-label="delete">
-            <DeleteIcon />
+            <DeleteIcon/>
           </IconButton>
         </AccordionActions>
       </Accordion>
     </div>
-  );
+  )
 }

redaktions-app/src/components/CategoryList.tsx

@@ -0,0 +1,55 @@
+import {Paper, Typography} from "@material-ui/core";
+import React from "react";
+import {makeStyles} from "@material-ui/core/styles";
+import {gql, useQuery} from "@apollo/client";
+import AddCard from "./AddCard";
+import AccordionWithEdit from "./AccordionWithEdit";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    width: '100%',
+    padding: theme.spacing(1),
+    marginBottom: theme.spacing(3),
+  },
+}));
+
+export default function CategoryList() {
+  const {data} = useQuery<AllCategoriesQueryResponse, null>(allCategoriesQuery);
+  const classes = useStyles();
+
+  return (
+    <Paper className={classes.root}>
+      <Typography component={"h2"} variant="h6" color="primary" gutterBottom>Kategorien</Typography>
+      {data?.allCategories.nodes.map(category => <AccordionWithEdit
+        key={category.id.toString()}
+        title={category.title}
+        description={category.description}/>
+      )}
+      <AddCard/>
+    </Paper>
+  )
+}
+
+const allCategoriesQuery = gql`
+  query AllQuestions {
+    allCategories {
+      nodes {
+        id
+        title
+        description
+      }
+    }
+  }
+`
+
+interface AllCategoriesQueryResponse {
+  allCategories: {
+    nodes: Array<AllCategoriesQueryNodes>
+  }
+}
+
+interface AllCategoriesQueryNodes {
+  id: number,
+  title: string,
+  description: string,
+}

redaktions-app/src/components/Main.tsx

@@ -4,6 +4,7 @@ import React from "react";
 import {makeStyles} from "@material-ui/core/styles";
 import {Copyright} from "./Copyright";
 import QuestionList from "./QuestionList";
+import CategoryList from "./CategoryList";
 
 const useStyles = makeStyles((theme) => ({
   appBarSpacer: theme.mixins.toolbar,
@@ -35,7 +36,7 @@ function Main() {
         <div className={classes.appBarSpacer}/>
         <Container maxWidth="lg" className={classes.container}>
           <QuestionList/>
-          <div className={classes.appBarSpacer} />
+          <CategoryList/>
           <Copyright/>
         </Container>
       </main>

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

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

redaktions-app/src/components/QuestionList.tsx

@@ -1,14 +1,15 @@
 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";
+import AccordionWithEdit from "./AccordionWithEdit";
 
 const useStyles = makeStyles((theme) => ({
   root: {
     width: '100%',
     padding: theme.spacing(1),
+    marginBottom: theme.spacing(3),
   },
 }));
 
@@ -19,10 +20,10 @@ export default function QuestionList() {
   return (
     <Paper className={classes.root}>
       <Typography component={"h2"} variant="h6" color="primary" gutterBottom>Fragen</Typography>
-      {data?.allQuestions.nodes.map(question => <Question
+      {data?.allQuestions.nodes.map(question => <AccordionWithEdit
         key={question.id.toString()}
         title={question.text}
-        category={question.categoryByCategoryId.title}
+        subTitle={question.categoryByCategoryId.title}
         description={question.description}/>
       )}
       <AddCard/>