import React, { useEffect, useState, useRef } from "react"; import ReactDOM from "react-dom/client"; // 1) Dynamically load Supabase from CDN const loadSupabase = async () => { if (!window.supabase) { await new Promise((resolve) => { const script = document.createElement("script"); script.src = "https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"; script.onload = resolve; document.head.appendChild(script); }); } return window.supabase.createClient( "https://cxjykmmehjanssnikoda.supabase.co", "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImN4anlrbW1laGphbnNzbmlrb2RhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MzgxMzE2NDIsImV4cCI6MjA1MzcwNzY0Mn0.UFAvUl_DeezDM_N2XZvE5NHFpmHtE6CE-gfI8Ip3yhk" ); }; // 2) Utility: random emojis for avatars const EMOJIS = [ "😀","😎","🤖","😇","😈","👻","🤡","💩","🦊","🐸", "🐵","🐱","🦁","🐯","🐴","🐷","🐰","🐹","🐻","🐼", "🦄","👾","🎃","👽","🤠","☠️","🤓","🐙","🦑","🦉" ]; function getRandomEmoji() { return EMOJIS[Math.floor(Math.random() * EMOJIS.length)]; } // 3) Main ChatApp const ChatApp = () => { const [supabase, setSupabase] = useState(null); // "Join" flow const [joined, setJoined] = useState(false); const [userName, setUserName] = useState(""); const [userIcon, setUserIcon] = useState(""); // Chat data const [messages, setMessages] = useState([]); const [inputValue, setInputValue] = useState(""); const messagesEndRef = useRef(null); ////////////////////////////////////////////// // A) Load Supabase and fetch messages once ////////////////////////////////////////////// useEffect(() => { const initSupabase = async () => { const client = await loadSupabase(); setSupabase(client); // fetch existing messages const { data, error } = await client .from("messages") .select("*") .order("created_at", { ascending: true }); if (!error && data) { setMessages(data); } // subscribe to real-time client .channel("realtime-messages") .on( "postgres_changes", { event: "INSERT", schema: "public", table: "messages" }, (payload) => { setMessages((prev) => [...prev, payload.new]); } ) .subscribe(); }; initSupabase(); }, []); ////////////////////////////////////////////// // B) Auto-scroll ////////////////////////////////////////////// useEffect(() => { if (messagesEndRef.current) { messagesEndRef.current.scrollIntoView({ behavior: "smooth" }); } }, [messages]); ////////////////////////////////////////////// // C) Join / "Login" ////////////////////////////////////////////// const handleJoin = () => { if (!userName.trim()) return; setUserIcon(getRandomEmoji()); setJoined(true); }; ////////////////////////////////////////////// // D) Sending a message ////////////////////////////////////////////// const handleSendMessage = async () => { if (!inputValue.trim() || !supabase) return; await supabase.from("messages").insert({ senderName: userName, senderIcon: userIcon, text: inputValue }); setInputValue(""); }; const handleKeyDown = (e) => { if (e.key === "Enter") { e.preventDefault(); handleSendMessage(); } }; ////////////////////////////////////////////// // E) Render ////////////////////////////////////////////// // If user hasn't joined yet, show a dark "join" screen if (!joined) { return (

Enter Your Name

setUserName(e.target.value)} />

); } // Show the chat UI return (

{userIcon}

{userName}

{messages.map((msg) => { const isMine = msg.senderName === userName && msg.senderIcon === userIcon; return (

{msg.senderIcon} {msg.senderName}

{msg.text}

); })}

Other games like this

About Full-Stack Chat App