From e2039b809f7ef396a2fd31de7e89eaa4a2e8ecce Mon Sep 17 00:00:00 2001
From: naoya7076 <naoya7076@gmail.com>
Date: Mon, 18 Mar 2024 21:46:22 +0900
Subject: [PATCH] =?UTF-8?q?supabase=E3=81=8B=E3=82=89hospitals=E3=82=92?=
 =?UTF-8?q?=E5=8F=96=E5=BE=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/routes/hospitals.tsx | 39 +++++++++++++++++++++++++--------------
 1 file changed, 25 insertions(+), 14 deletions(-)

diff --git a/app/routes/hospitals.tsx b/app/routes/hospitals.tsx
index d78d633..2a2394c 100644
--- a/app/routes/hospitals.tsx
+++ b/app/routes/hospitals.tsx
@@ -1,22 +1,33 @@
 import { Hospital } from "@/components/hospital";
-const Hospitals = () => {
-	const hospitals = [
-		{
-			id: 1,
-			name: "医療法人つとむ会 澤田内科医院",
-			postal_code: "530-0001",
-			address: "大阪府大阪市北区梅田１―２―２―２００",
-		},
+import { json } from "@remix-run/cloudflare";
+import { createServerClient } from "@supabase/auth-helpers-remix";
+import type { LoaderFunctionArgs } from "@remix-run/cloudflare";
+import { useLoaderData } from "@remix-run/react";
+export const loader = async ({ request }: LoaderFunctionArgs) => {
+	const response = new Response();
+	const supabaseUrl = process.env.SUPABASE_URL;
+	const supabaseAnonKey = process.env.SUPABASE_ANON_KEY;
+	if (!supabaseUrl || !supabaseAnonKey) {
+		throw new Error("Supabase URL or Supabase Anon Key is missing.");
+	}
+	const supabaseClient = createServerClient(supabaseUrl, supabaseAnonKey, {
+		request,
+		response,
+	});
+
+	const { data } = await supabaseClient.from("hospitals").select("*");
+	return json(
+		{ hospitals: data },
 		{
-			id: 2,
-			name: "医療法人渡辺医学会桜橋渡辺病院",
-			postal_code: "530-0001",
-			address: "大阪府大阪市北区梅田２―４―３２",
+			headers: response.headers,
 		},
-	];
+	);
+};
+const Hospitals = () => {
+	const { hospitals } = useLoaderData<typeof loader>();
 	return (
 		<>
-			{hospitals.map((hospital) => (
+			{hospitals?.map((hospital) => (
 				<Hospital
 					key={hospital.id}
 					name={hospital.name}