From 9084075482c6bca95a0a8a51128e21a63198df66 Mon Sep 17 00:00:00 2001
From: imeepos <imeepos@sker.com>
Date: Wed, 21 Jan 2026 11:31:25 +0800
Subject: [PATCH] feat: add reusable ErrorState component with TDD

Add minimal ErrorState component for displaying error messages with optional retry functionality. Supports light/dark themes via TailwindCSS and follows project patterns. All 6 tests passing.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 components/ErrorState.test.tsx | 44 ++++++++++++++++++++++++++++++++++
 components/ErrorState.tsx      | 21 ++++++++++++++++
 2 files changed, 65 insertions(+)
 create mode 100644 components/ErrorState.test.tsx
 create mode 100644 components/ErrorState.tsx

diff --git a/components/ErrorState.test.tsx b/components/ErrorState.test.tsx
new file mode 100644
index 0000000..dc8c503
--- /dev/null
+++ b/components/ErrorState.test.tsx
@@ -0,0 +1,44 @@
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react-native'
+import ErrorState from './ErrorState'
+
+describe('ErrorState Component', () => {
+  describe('Basic Rendering', () => {
+    it('should render error message', () => {
+      const { getByText } = render(<ErrorState message="Something went wrong" />)
+      expect(getByText('Something went wrong')).toBeTruthy()
+    })
+
+    it('should render with default message when not provided', () => {
+      const { getByText } = render(<ErrorState />)
+      expect(getByText('An error occurred')).toBeTruthy()
+    })
+  })
+
+  describe('Retry Functionality', () => {
+    it('should render retry button when onRetry is provided', () => {
+      const onRetry = jest.fn()
+      const { getByText } = render(<ErrorState message="Error" onRetry={onRetry} />)
+      expect(getByText('Retry')).toBeTruthy()
+    })
+
+    it('should not render retry button when onRetry is not provided', () => {
+      const { queryByText } = render(<ErrorState message="Error" />)
+      expect(queryByText('Retry')).toBeNull()
+    })
+
+    it('should call onRetry when retry button is pressed', () => {
+      const onRetry = jest.fn()
+      const { getByText } = render(<ErrorState message="Error" onRetry={onRetry} />)
+      fireEvent.press(getByText('Retry'))
+      expect(onRetry).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('Props', () => {
+    it('should accept testID prop', () => {
+      const { getByTestId } = render(<ErrorState testID="error-test" />)
+      expect(getByTestId('error-test')).toBeTruthy()
+    })
+  })
+})
diff --git a/components/ErrorState.tsx b/components/ErrorState.tsx
new file mode 100644
index 0000000..e032432
--- /dev/null
+++ b/components/ErrorState.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { View, TouchableOpacity, ViewProps } from 'react-native'
+import Text from './ui/Text'
+
+interface ErrorStateProps extends ViewProps {
+  message?: string
+  onRetry?: () => void
+}
+
+export default function ErrorState({ message = 'An error occurred', onRetry, testID, ...props }: ErrorStateProps) {
+  return (
+    <View testID={testID} className="flex-1 items-center justify-center px-4" {...props}>
+      <Text className="text-center text-gray-600 dark:text-gray-400">{message}</Text>
+      {onRetry && (
+        <TouchableOpacity onPress={onRetry} className="mt-4 px-6 py-2 bg-blue-500 rounded-lg">
+          <Text className="text-white">Retry</Text>
+        </TouchableOpacity>
+      )}
+    </View>
+  )
+}