Webseite mit Begleit-Infos zum Städte Quartett zur BTW 2021 https://www.gruenes-quartett.de
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

75 lines
2.0 KiB

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;