- Add React Query provider and client - Create reusable UI components (Loading, Error, Empty) - Implement custom hooks with fallback data - Integrate hooks into Resources and Community screens - Add pull-to-refresh support - Configure EAS Build profiles and environment variables
49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
import { useQuery } from '@tanstack/react-query';
|
|
|
|
export interface Resource {
|
|
id: string;
|
|
title: string;
|
|
description: string;
|
|
category: string;
|
|
imageUrl?: string;
|
|
}
|
|
|
|
const FALLBACK_RESOURCES: Resource[] = [
|
|
{
|
|
id: '1',
|
|
title: 'Understanding Anxiety',
|
|
description: 'Learn about the symptoms and coping mechanisms for anxiety.',
|
|
category: 'Mental Health',
|
|
},
|
|
{
|
|
id: '2',
|
|
title: 'Meditation Basics',
|
|
description: 'A beginner guide to meditation and mindfulness.',
|
|
category: 'Wellness',
|
|
},
|
|
{
|
|
id: '3',
|
|
title: 'Healthy Sleep Habits',
|
|
description: 'Tips for improving your sleep quality and hygiene.',
|
|
category: 'Lifestyle',
|
|
},
|
|
];
|
|
|
|
async function fetchResources(): Promise<Resource[]> {
|
|
// Simulate API call
|
|
// const response = await fetch(`${process.env.EXPO_PUBLIC_API_URL}/resources`);
|
|
// if (!response.ok) throw new Error('Failed to fetch resources');
|
|
// return response.json();
|
|
|
|
// Return fallback data for now
|
|
return new Promise((resolve) => {
|
|
setTimeout(() => resolve(FALLBACK_RESOURCES), 1000);
|
|
});
|
|
}
|
|
|
|
export function useResources() {
|
|
return useQuery({
|
|
queryKey: ['resources'],
|
|
queryFn: fetchResources,
|
|
});
|
|
}
|