UI Updates and Bug Fixes

src/hooks/useCaregivers.ts

@@ -0,0 +1,23 @@
+import { useState, useEffect } from 'react';
+import { Caregiver } from '../types';
+import { CAREGIVERS } from '../constants/mockData';
+
+export const useCaregivers = () => {
+  const [caregivers, setCaregivers] = useState<Caregiver[]>(CAREGIVERS);
+  const [isLoading, setIsLoading] = useState(false);
+
+  return { caregivers, isLoading };
+};
+
+export const useCaregiver = (id: string) => {
+  const [caregiver, setCaregiver] = useState<Caregiver | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const found = CAREGIVERS.find((c) => c.id === id) || null;
+    setCaregiver(found);
+    setIsLoading(false);
+  }, [id]);
+
+  return { caregiver, isLoading };
+};

src/hooks/useFetch.ts

@@ -0,0 +1,47 @@
+import { useState, useEffect, useCallback } from 'react';
+
+interface UseFetchResult<T> {
+  data: T | null;
+  isLoading: boolean;
+  error: Error | null;
+  refetch: () => Promise<void>;
+}
+
+/**
+ * A generic hook for making API calls.
+ * 
+ * @param url The API endpoint to fetch
+ * @param options Optional fetch configuration (headers, method, etc.)
+ * @returns { data, isLoading, error, refetch }
+ */
+export function useFetch<T = any>(url: string, options?: RequestInit): UseFetchResult<T> {
+  const [data, setData] = useState<T | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  const fetchData = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    
+    try {
+      const response = await fetch(url, options);
+      
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      
+      const json = await response.json();
+      setData(json as T);
+    } catch (e) {
+      setError(e instanceof Error ? e : new Error('An unknown error occurred'));
+    } finally {
+      setIsLoading(false);
+    }
+  }, [url, options]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  return { data, isLoading, error, refetch: fetchData };
+}

src/hooks/useResponsiveLayout.ts

@@ -0,0 +1,24 @@
+import { useWindowDimensions, Platform } from 'react-native';
+
+export const useResponsiveLayout = () => {
+  const { width, height } = useWindowDimensions();
+
+  // iPads and large Android tablets are typically 768px or wider
+  const isTablet = width >= 768;
+  const isLandscape = width > height;
+
+  // Responsive padding based on device type
+  const screenPadding = isTablet ? 32 : 16;
+
+  // Function to slightly scale sizes on tablet
+  const scale = (size: number) => (isTablet ? size * 1.25 : size);
+
+  return {
+    width,
+    height,
+    isTablet,
+    isLandscape,
+    screenPadding,
+    scale,
+  };
+};