Added Homepage components

src/hooks/useAPI.ts

@@ -0,0 +1,37 @@
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+
+export function useQueryAPI({ endpoint }: { endpoint: string }) {
+	const queryClient = useQueryClient();
+	const callEndpoint = async (endpoint: string) => {
+		const url = `http://localhost:5000/trigger/${endpoint}`;
+		const options: object = {
+			method: 'GET',
+			headers: {
+				'Content-Type': 'application/json',
+				'Access-Control-Allow-Origin': '*',
+				'Access-Control-Allow-Headers': '*',
+				'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',
+				'Access-Control-Allow-Credentials': true,
+				'Sec-Fetch-Mode': 'no-cors',
+				'Sec-Fetch-Site': 'same-site',
+			},
+		};
+		const response = await fetch(url, options);
+		if (!response.ok) {
+			throw new Error(`${response.status} ${response.statusText}`);
+		}
+		const responseData = await response.json();
+		return responseData;
+	};
+
+	return useQuery({
+		queryKey: ['GET', endpoint],
+		queryFn: () => callEndpoint(endpoint),
+		retry: false,
+		refetchOnWindowFocus: false,
+		refetchOnMount: false,
+		refetchOnReconnect: false,
+		staleTime: 30 * (60 * 1000), // 30 minutes
+		// cacheTime: 60 * (60 * 1000), // 60 minutes
+	});
+}