From f343fe5da8d9a578a2190aaac65acfc0b622fcac Mon Sep 17 00:00:00 2001
From: Ryo Ichiki <ryichk@gmail.com>
Date: Sat, 4 Jan 2025 23:32:37 +0900
Subject: [PATCH] Change the domain of the backend API called by the frontend
 to an environment variable

---
 client/app/components/todo-form.tsx | 3 ++-
 client/app/components/ui/label.tsx  | 2 --
 client/app/constants.ts             | 1 +
 client/app/hooks/use-toast.ts       | 2 --
 client/app/root.tsx                 | 2 +-
 client/app/routes/_index.tsx        | 3 ++-
 6 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/client/app/components/todo-form.tsx b/client/app/components/todo-form.tsx
index fbfd4b5..a38e60a 100644
--- a/client/app/components/todo-form.tsx
+++ b/client/app/components/todo-form.tsx
@@ -8,6 +8,7 @@ import { Input } from "./ui/input";
 import { Textarea } from "./ui/textarea";
 import { Dispatch, SetStateAction } from "react";
 import { Todo } from "~/types";
+import { API_DOMAIN } from "~/constants";
 
 const formSchema = z.object({
   title: z.string().min(2, {
@@ -34,7 +35,7 @@ export default function TodoForm({ accessToken, setTodos }: Props) {
 
   const createTodo = async (values: z.infer<typeof formSchema>) => {
     try {
-      const res = await fetch('http://localhost:8080/todos', {
+      const res = await fetch(`${API_DOMAIN}/todos`, {
         method: 'POST',
         headers: {
           "Content-Type": "application/json",
diff --git a/client/app/components/ui/label.tsx b/client/app/components/ui/label.tsx
index 8f40738..dbefb85 100644
--- a/client/app/components/ui/label.tsx
+++ b/client/app/components/ui/label.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 import * as LabelPrimitive from "@radix-ui/react-label"
 import { cva, type VariantProps } from "class-variance-authority"
diff --git a/client/app/constants.ts b/client/app/constants.ts
index d19dd5e..eaa9fa7 100644
--- a/client/app/constants.ts
+++ b/client/app/constants.ts
@@ -3,3 +3,4 @@ export const COGNITO_USER_POOL_ID = import.meta.env.VITE_COGNITO_USER_POOL_ID;
 export const COGNITO_CLIENT_ID = import.meta.env.VITE_COGNITO_CLIENT_ID;
 export const COGNITO_REDIRECT_URI = import.meta.env.VITE_COGNITO_REDIRECT_URI;
 export const COGNITO_DOMAIN = import.meta.env.VITE_COGNITO_DOMAIN;
+export const API_DOMAIN= import.meta.env.VITE_API_DOMAIN;
diff --git a/client/app/hooks/use-toast.ts b/client/app/hooks/use-toast.ts
index d6698ef..7daac9f 100644
--- a/client/app/hooks/use-toast.ts
+++ b/client/app/hooks/use-toast.ts
@@ -1,5 +1,3 @@
-"use client"
-
 // Inspired by react-hot-toast library
 import * as React from "react"
 
diff --git a/client/app/root.tsx b/client/app/root.tsx
index 47e608e..7d81797 100644
--- a/client/app/root.tsx
+++ b/client/app/root.tsx
@@ -69,5 +69,5 @@ export default function App() {
 }
 
 export function HydrateFallback() {
-  return <p>Loading...</p>;
+  return <p>ローディング中...</p>;
 }
diff --git a/client/app/routes/_index.tsx b/client/app/routes/_index.tsx
index 6635b1c..9476468 100644
--- a/client/app/routes/_index.tsx
+++ b/client/app/routes/_index.tsx
@@ -3,6 +3,7 @@ import { useCallback, useEffect, useState } from "react";
 import { useAuth } from "react-oidc-context";
 import TodoForm from "~/components/todo-form";
 import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
+import { API_DOMAIN } from "~/constants";
 import { useToast } from "~/hooks/use-toast";
 import { Todo } from "~/types";
 
@@ -21,7 +22,7 @@ export default function Index() {
   const token = auth.user?.access_token ?? '';
   const fetchTodos = useCallback(async () => {
     try {
-      const res = await fetch('http://localhost:8080/todos', {
+      const res = await fetch(`${API_DOMAIN}/todos`, {
         headers: {
           Authorization: `Bearer ${token}`,
         },