Refactor procedures list handling and improve error/retry states with new components

src/api/apollo/index.tsx

@@ -13,6 +13,7 @@ import {
 import { typePolicies } from "./TypePolicies";
 import { NativeModules } from "react-native";
 import { applicationIdLinkMiddleware } from "./ApplicationId";
+import { RetryLink } from "@apollo/client/link/retry";
 
 const cache = new InMemoryCache({
   typePolicies,
@@ -60,11 +61,46 @@ const errorLink = onError(({ graphQLErrors, networkError, operation }) => {
   }
 });
 
+const retryLink = new RetryLink({
+  delay: {
+    initial: 500,
+    max: 5000,
+    jitter: true,
+  },
+  attempts: (count, operation, error) => {
+    if (count >= 5) {
+      return false;
+    }
+
+    if (!error) {
+      return false;
+    }
+
+    if (error instanceof Error && !("statusCode" in (error as object))) {
+      // Network-level failures from fetch (e.g., offline)
+      return true;
+    }
+
+    const statusCode = (error as { statusCode?: number }).statusCode;
+
+    if (!statusCode) {
+      return false;
+    }
+
+    if (statusCode >= 500 && statusCode < 600) {
+      return true;
+    }
+
+    return false;
+  },
+});
+
 const restLink = new RestLink({
   uri: "https://democracy-deutschland.de/api.php", // ?call=donation_status
 });
 
 const link = ApolloLink.from([
+  retryLink,
   errorLink,
   versionLinkMiddleware,
   applicationIdLinkMiddleware,

src/screens/Bundestag/List/Components/ErrorState.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import styled from "styled-components/native";
+
+import { Button } from "../../../../components/Button";
+import { Centered } from "../../../../components/Centered";
+
+interface ErrorStateProps {
+  onRetry: () => void;
+}
+
+export const ErrorState: React.FC<ErrorStateProps> = ({ onRetry }) => (
+  <Centered>
+    <Title>Server nicht erreichbar</Title>
+    <Description>
+      Wir konnten keine Verbindung zu DEMOCRACY herstellen. Prüfe deine
+      Internetverbindung oder versuche es in ein paar Sekunden erneut.
+    </Description>
+    <Button
+      onPress={onRetry}
+      text="Nochmal versuchen"
+      textColor="blue"
+      backgroundColor="transparent"
+    />
+  </Centered>
+);
+
+const Title = styled.Text`
+  margin-bottom: 8px;
+  text-align: center;
+  color: ${({ theme }) => theme.colors.text.primary};
+  font-weight: 600;
+`;
+
+const Description = styled.Text`
+  margin-bottom: 16px;
+  text-align: center;
+  color: ${({ theme }) => theme.colors.text.secondary};
+`;

src/screens/Bundestag/List/Components/RetryState.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import styled from "styled-components/native";
+
+import { Centered } from "../../../../components/Centered";
+import { ListLoading } from "../../../../components/ListLoading";
+
+interface RetryStateProps {
+  remainingAttempts: number;
+  nextRetryInSeconds: number | null;
+}
+
+export const RetryState: React.FC<RetryStateProps> = ({
+  remainingAttempts,
+  nextRetryInSeconds,
+}) => {
+  const countdownSeconds =
+    typeof nextRetryInSeconds === "number"
+      ? Math.max(nextRetryInSeconds, 1)
+      : null;
+  const countdownCopy =
+    countdownSeconds !== null
+      ? `Nächster Versuch in ${countdownSeconds}s.`
+      : "Nächster Versuch in Kürze.";
+
+  return (
+    <Centered>
+      <ListLoading />
+      <RetryMessage>Verbindung wird wiederhergestellt…</RetryMessage>
+      <RetryHint>
+        {countdownCopy} Verbleibende{" "}
+        {remainingAttempts === 1 ? "Versuch" : "Versuche"}: {remainingAttempts}
+      </RetryHint>
+    </Centered>
+  );
+};
+
+const RetryMessage = styled.Text`
+  margin-top: 16px;
+  text-align: center;
+  color: ${({ theme }) => theme.colors.text.primary};
+`;
+
+const RetryHint = styled.Text`
+  margin-top: 4px;
+  text-align: center;
+  color: ${({ theme }) => theme.colors.text.secondary};
+  font-size: 12px;
+`;