ChatGPTを使ってサマーウォーズの自動翻訳機能を実現する

// yarn
yarn create next-app auto-translate-chat-app --typescript

// npm
npx create-next-app auto-translate-chat-app --typescript

// yarn
yarn add @supabase/supabase-js

// npm
npm install @supabase/supabase-js

import { createClient } from "@supabase/supabase-js";
import { Database } from "@/types/supabase.types";

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;

export const supabase = createClient<Database>(supabaseUrl, supabaseAnonKey);

export type Database = {};

  // Email signUp
  const signUp = async (email: string, password: string) => {
    const { data, error } = await supabase.auth.signUp({ email, password });
    if (error) {
      setError(error);
    }
+   await supabase.from(USERS_TABLE).insert([{ id: data.user.id, name: "guest", language: "ja" }]);
    return data;
  };

import { useCallback, useEffect, useState } from "react";
import { supabase } from "@/lib/supabase";
import { useAuth } from "@/hooks/useAuth";
import { Database } from "@/types/database.types";

type User = Database["public"]["Tables"]["users"]["Row"];

export const useUser = () => {
  const [user, setUser] = useState<User | null>(null);
  const { session } = useAuth();
  const sessionUser = session?.user;

  const fetchUser = useCallback(async () => {
    if (!sessionUser) return;
    const { data, error } = await supabase
      .from("users")
      .select("*")
      .eq("id", sessionUser.id)
      .single();

    if (error) {
      throw error;
    }
    setUser(data);

    return data;
  }, [sessionUser]);

  useEffect(() => {
    try {
      fetchUser();
    } catch (error) {
      console.error(error);
    }
  }, [fetchUser]);

  return { user, fetchUser };
};

type User = Database["public"]["Tables"]["users"]["Row"];

supabase start

supabase db diff -f [ファイル名]

supabase db push -p [Database Password]

supabase db push

// 省略

const createRoom = async (name: Room["name"]) => {
    if (!user || !name) return;
    const { data, error } = await supabase
      .from(ROOM_TABLE)
      .insert({ name, create_user_id: user.id })
      .select();
    if (error) {
      throw error;
    }
    if (!data) return;
    const userRoom = { user_id: user.id, room_id: data[0].id };
    const { error: userRoomError } = await supabase.from(USER_ROOM_TABLE).insert([userRoom]);
    if (userRoomError) {
      throw userRoomError;
    }
    return data;
  };

// 省略

  const fetchUserRooms = async (userId: string) => {
    const { data, error } = await supabase
      .from(USER_ROOM_TABLE)
      .select("id, rooms (id, name, create_user_id)")
      .eq("user_id", userId);

    if (error) {
      throw error;
    }
    return data;
  };

const { data, error } = await supabase
      .from(USER_ROOM_TABLE)
      .select("id, rooms (id, name, create_user_id)")
      .eq("user_id", userId);

// 省略

  useEffect(() => {
    (async () => {
      if (!user?.id) return;
      const data = await fetchUserRooms(user.id);
      if (data) {
        setRooms(data.map((value) => value.rooms) as Rooms); // FIXME: 型安全じゃないのどうにかしたい
      }
    })();
  }, [user?.id]);

// 省略

    <>
      <h1>Rooms</h1>
      <button onClick={() => createRoom("test")}>Create room</button>
      <p>{user?.name}が参加しているROOM</p>
      {rooms.map((room) => (
        <Link href={`/room/${room.id}`} key={room.id}>
          <p>{room.name}</p>
        </Link>
      ))}
    </>

// 省略

  const fetchMessages = async (roomId: Message["room_id"]) => {
    const { data, error } = await supabase
      .from("messages")
      .select("*")
      .eq("room_id", roomId)
      .order("created_at", { ascending: true });

    if (error) {
      throw error;
    }
    setMessages(data);
    return data;
  };

// 省略

const postMessage = async (
    roomId: NonNullable<Message["room_id"]>,
    message: NonNullable<Message["message"]>
  ) => {
    const { data, error } = await supabase.from(MESSAGE_TABLE).insert([
      {
        user_id: user?.id,
        room_id: roomId,
        message,
        language: user?.language,
      },
    ]);

    if (error) {
      throw error;
    }
    return data;
  };

// 省略

  const observeMessages = async (roomId: Message["room_id"]) => {
    try {
      supabase
        .channel("messages:room_id=eq." + roomId)
        .on(
          "postgres_changes", // 固定
          {
            event: "*",
            schema: "public",
            table: MESSAGE_TABLE,
          },
          (payload) => {
            if (payload.eventType === "INSERT") {
              console.log("payload: ", payload);
              setMessages((prev) => [...prev, payload.new as Message]);
            }
          }
        )
        .subscribe();

      return () => supabase.channel("messages:room_id=eq." + roomId).unsubscribe();
    } catch (error) {
      console.error(error);
    }
  };

// 省略

  useEffect(() => {
    if (!roomId) return;
    fetchMessages();
    observeMessages();
  }, [roomId]);

const ChatPage: NextPage<ChatPageProps> = () => {
  const [room, setRoom] = useState<Room | null>(null);
  const [value, setValue] = useState<string>("");
  const router = useRouter();
  const { roomId } = router.query;
  const { fetchRoom } = useRooms();
  const { messages, postMessage } = useMessages(roomId as string);

  useEffect(() => {
    if (!roomId) return;
    (async () => {
      const data = await fetchRoom(roomId as string);
      if (!data) return;
      setRoom(data[0]);
    })();
  }, [roomId]);

  const handleSendMessage = () => {
    if (!roomId) return;
    postMessage(roomId as string, value);
    setValue("");
  };

  return (
    <>
      <h2>{room?.name}</h2>
      <p>room ID : {roomId}</p>
      <ul>
        {messages?.map((message) => (
          <li key={message.id}>{message.message}</li>
        ))}
      </ul>

      <form onSubmit={(e) => e.preventDefault()}>
        <input type="text" value={value} onChange={(e) => setValue(e.target.value)} />
        <button onClick={() => handleSendMessage()}>Send</button>
      </form>
    </>
  );
};