Change the domain of the backend API called by the frontend to an env…

…ironment variable

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",

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"

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;

client/app/hooks/use-toast.ts

@@ -1,5 +1,3 @@
-"use client"
-
 // Inspired by react-hot-toast library
 import * as React from "react"
 

client/app/root.tsx

@@ -69,5 +69,5 @@ export default function App() {
 }
 
 export function HydrateFallback() {
-  return <p>Loading...</p>;
+  return <p>ローディング中...</p>;
 }

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}`,
         },