diff --git a/src/client/features/home/components/home-page.tsx b/src/client/features/home/components/home-page.tsx index 87a4037..29419e3 100644 --- a/src/client/features/home/components/home-page.tsx +++ b/src/client/features/home/components/home-page.tsx @@ -1,10 +1,15 @@ +import { UpcomingVotes } from "./upcoming-votes" + export function HomePage() { return ( -
-

Willkommen

-

- Verfolge Abstimmungen im Bundestag und deinem Landtag. -

+
+
+

Willkommen

+

+ Verfolge Abstimmungen im Bundestag und deinem Landtag. +

+
+
) } diff --git a/src/client/features/home/components/upcoming-votes.tsx b/src/client/features/home/components/upcoming-votes.tsx new file mode 100644 index 0000000..b755b32 --- /dev/null +++ b/src/client/features/home/components/upcoming-votes.tsx @@ -0,0 +1,89 @@ +import { useFollows } from "@/shared/hooks/use-follows" +import { BACKEND_URL } from "@/shared/lib/constants" +import { Link } from "@tanstack/react-router" +import { useEffect, useState } from "react" + +interface UpcomingLegislation { + id: number + title: string + beratungsstand: string | null + summary: string | null +} + +export function UpcomingVotes() { + const { follows } = useFollows() + const [items, setItems] = useState([]) + const [loading, setLoading] = useState(true) + + const hasTopics = follows.some((f) => f.type === "topic") + + useEffect(() => { + if (!hasTopics) { + setLoading(false) + return + } + + fetch(`${BACKEND_URL}/legislation/upcoming`) + .then((r) => (r.ok ? r.json() : [])) + .then((data) => setItems(data)) + .catch(() => setItems([])) + .finally(() => setLoading(false)) + }, [hasTopics]) + + if (!hasTopics) { + return ( +
+

Anstehende Abstimmungen

+

+ Folge Themen, um anstehende Abstimmungen zu sehen. +

+
+ ) + } + + if (loading) { + return ( +
+

Anstehende Abstimmungen

+

Laden…

+
+ ) + } + + if (items.length === 0) { + return ( +
+

Anstehende Abstimmungen

+

+ Keine anstehenden Abstimmungen zu deinen Themen. +

+
+ ) + } + + return ( +
+

Anstehende Abstimmungen

+
+ {items.map((item) => ( + +

{item.title}

+ {item.summary && ( +

+ {item.summary} +

+ )} + + Jetzt abstimmen → + + + ))} +
+
+ ) +}