gruenes-quartett/src/components/Categories/Categories.tsx

import React, { ReactElement, useEffect, useState } from "react";
import "./Categories.scss";
import { url } from "../../variables";
import { Link } from "react-router-dom";
import ReactMarkdown from "react-markdown";
import CategoryLink from "../CategoryLink/CategoryLink";
import { useMatomo } from "@datapunt/matomo-tracker-react";

function Categories() {
  const [{ title, content }, setContent] = useState({
    title: "",
    content: "",
  });

  const [categories, setCategories] = useState([]);
  const { trackPageView } = useMatomo();

  interface HomeProps {
    title: string;
    content: string;
  }
  interface CategoriesProps {
    id: number;
    title: string;
    content: string;
    url: string;
  }

  useEffect(() => {
    const getContent = async (): Promise<HomeProps> => {
      const response = await fetch(`${url}/category-intro`);
      const data = await response.json();
      setContent(data);
      return data;
    };
    const getCategories = async (): Promise<CategoriesProps> => {
      const response = await fetch(`${url}/categories`);
      const data = await response.json();
      setCategories(data);
      return data;
    };

    getContent().then();
    getCategories().then();

    trackPageView({ documentTitle: "Kategorien" });
  }, [trackPageView]);
  return (
    <div className="Categories">
      <h1 className="categories-title">{title}</h1>
      <div className="categories-content">
        <ReactMarkdown>{content}</ReactMarkdown>
      </div>
      <div className="categories-list">
        {categories.map((t: CategoriesProps): ReactElement => {
          return (
            <CategoryLink
              key={t.id}
              url={t.url}
              title={t.title}
              content={t.content}
            />
          );
        })}
        <Link to="/beteiligte">
          <button type="button" className="categories-button">
            Zu den Beteiligten
          </button>
        </Link>
      </div>
    </div>
  );
}

export default Categories;