fix dead click on homepage

willyogo · Jan 18, 2025 · 8dfbd57 · 8dfbd57
1 parent 8e084b0
commit 8dfbd57
Show file tree

Hide file tree

Showing 20 changed files with 341 additions and 189 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/dist/assets/browser-Cl8KuOHV.js → dist/assets/browser-BIVCoTGd.js b/dist/assets/browser-Cl8KuOHV.js → dist/assets/browser-BIVCoTGd.js
diff --git a/dist/assets/ccip-CRKWcS4C.js → dist/assets/ccip-vR6lDjN0.js b/dist/assets/ccip-CRKWcS4C.js → dist/assets/ccip-vR6lDjN0.js
diff --git a/dist/assets/index-8Hgc3IGr.js → dist/assets/index--IzDW4VH.js b/dist/assets/index-8Hgc3IGr.js → dist/assets/index--IzDW4VH.js
diff --git a/dist/assets/index-CYeWWSTo.js → dist/assets/index-BWM6VT11.js b/dist/assets/index-CYeWWSTo.js → dist/assets/index-BWM6VT11.js
diff --git a/dist/assets/index-DJElApqy.js → dist/assets/index-ClL5f3IO.js b/dist/assets/index-DJElApqy.js → dist/assets/index-ClL5f3IO.js
diff --git a/dist/index.html b/dist/index.html
@@ -5,7 +5,7 @@
     <link rel="icon" type="image/png" href="https://images.emojiterra.com/google/android-11/256px/1f4ac.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Chat Fidget</title>
-    <script type="module" crossorigin src="/assets/index-CYeWWSTo.js"></script>
+    <script type="module" crossorigin src="/assets/index-BWM6VT11.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-C4wSE-Z4.css">
   </head>
   <body>

diff --git a/src/.DS_Store b/src/.DS_Store
diff --git a/src/App.tsx b/src/App.tsx
@@ -4,18 +4,24 @@ import { RoomProvider } from './components/room';
 import { ChatRoom } from './components/chat';
 import { HomePage } from './components/home/HomePage';
 import { useSearchParams } from './components/room/useSearchParams';
+import { useRoomStore } from './lib/store/room';
 
 export default function App() {
   const { roomName } = useSearchParams();
+  const resetRoom = useRoomStore((state) => state.reset);
 
-  // Force room state refresh when URL changes
+  // Reset room state and force re-mount of RoomProvider when URL changes
   useEffect(() => {
-    // Component will re-render when roomName changes
-  }, [roomName]);
+    console.log('Room name changed:', roomName);
+    resetRoom();
+  }, [roomName, resetRoom]);
+
+  // Force a clean remount of components when room changes
+  const key = roomName ? `room-${roomName}` : 'home';
 
   return (
     <PrivyProvider>
-      <RoomProvider>
+      <RoomProvider key={key}>
         <div className={roomName ? 'chat-room' : ''}>
           {roomName ? <ChatRoom /> : <HomePage />}
         </div>

diff --git a/src/components/.DS_Store b/src/components/.DS_Store
diff --git a/src/components/home/HomePage.tsx b/src/components/home/HomePage.tsx
@@ -1,13 +1,27 @@
 import { useNavigate } from 'react-router-dom';
 import { SearchInput } from './SearchInput';
 import { PopularRooms } from './PopularRooms';
+import { useRoomStore } from '../../lib/store/room';
+import { useEffect } from 'react';
 
 export function HomePage() {
   const navigate = useNavigate();
+  const reset = useRoomStore((state) => state.reset);
+
+  // Reset room state when homepage mounts
+  useEffect(() => {
+    reset();
+  }, [reset]);
 
   const handleRoomSubmit = (roomName: string) => {
-    const encodedRoomName = encodeURIComponent(roomName.trim());
-    navigate(`/?room=${encodedRoomName}`);
+    if (!roomName.trim()) return;
+
+    // Reset room state before navigation
+    reset();
+
+    const encodedRoomName = encodeURIComponent(roomName.trim().toLowerCase());
+    // Force a full navigation by using window.location
+    window.location.href = `/?room=${encodedRoomName}`;
   };
 
   return (

diff --git a/src/components/home/SearchInput.tsx b/src/components/home/SearchInput.tsx
@@ -13,6 +13,7 @@ export function SearchInput({ onSubmit }: SearchInputProps) {
     if (roomName.trim()) {
       // Convert to lowercase before submitting
       onSubmit(roomName.trim().toLowerCase());
+      setRoomName(''); // Clear input after submission
     }
   };
 
@@ -29,7 +30,8 @@ export function SearchInput({ onSubmit }: SearchInputProps) {
         <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
         <button
           type="submit"
-          className="absolute right-2 top-1/2 -translate-y-1/2 px-4 py-1.5 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition-colors"
+          disabled={!roomName.trim()}
+          className="absolute right-2 top-1/2 -translate-y-1/2 px-4 py-1.5 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
         >
           Join/Create Room
         </button>

diff --git a/src/components/room/RoomProvider.tsx b/src/components/room/RoomProvider.tsx
@@ -1,4 +1,4 @@
-import { createContext, useEffect, useState } from 'react';
+import { createContext, useEffect, useState, useCallback } from 'react';
 import { useSearchParams } from './useSearchParams';
 import { useRoom } from '../../lib/hooks/useRoom';
 import { useRoomStore } from '../../lib/store/room';
@@ -20,45 +20,55 @@ export function RoomProvider({ children }: { children: React.ReactNode }) {
   const { roomName } = useSearchParams();
   const [manualOwnerAddress, setManualOwnerAddress] = useState<string | null>(null);
   const { room, isLoading, error, needsOwnerInput } = useRoom(roomName, manualOwnerAddress);
-  const { setRoom, setLoading, setError, subscribeToRoom } = useRoomStore();
+  const { setRoom, setLoading, setError, subscribeToRoom, reset } = useRoomStore();
 
-  // Sync room loading state
-  useEffect(() => {
-    setLoading(isLoading);
-  }, [isLoading, setLoading]);
+  // Memoize the setOwnerAddress callback
+  const handleSetOwnerAddress = useCallback((address: string) => {
+    console.log('Setting manual owner address:', address);
+    setManualOwnerAddress(address);
+  }, []);
 
-  // Sync room error state
+  // Reset state when component unmounts or room name changes
   useEffect(() => {
-    setError(error);
-  }, [error, setError]);
+    console.log('Room name changed, resetting state:', roomName);
+    setManualOwnerAddress(null);
+    return () => {
+      console.log('RoomProvider unmounting, cleaning up');
+      reset();
+    };
+  }, [roomName, reset]);
 
-  // Sync room data
+  // Set up room subscription when we have a valid room
   useEffect(() => {
-    if (room) {
-      setRoom(room);
+    if (!roomName) {
+      console.log('No room name, skipping subscription');
+      return;
     }
-  }, [room, setRoom]);
-
-  // Subscribe to room updates
-  useEffect(() => {
-    if (!roomName) return;
 
+    console.log('Setting up room subscription for:', roomName);
     const unsubscribe = subscribeToRoom(roomName);
-    return () => unsubscribe();
+
+    return () => {
+      console.log('Cleaning up room subscription for:', roomName);
+      unsubscribe();
+    };
   }, [roomName, subscribeToRoom]);
 
-  // Use room data from store
-  const roomData = useRoomStore((state) => ({
-    room: state.room,
-    isLoading: state.isLoading,
-    error: state.error,
-  }));
+  // Sync room state
+  useEffect(() => {
+    console.log('Syncing room state:', { room, isLoading, error });
+    setRoom(room);
+    setLoading(isLoading);
+    setError(error);
+  }, [room, isLoading, error, setRoom, setLoading, setError]);
 
   return (
     <RoomContext.Provider value={{
-      ...roomData,
+      room,
+      isLoading,
+      error,
       needsOwnerInput,
-      setOwnerAddress: setManualOwnerAddress
+      setOwnerAddress: handleSetOwnerAddress
     }}>
       {children}
     </RoomContext.Provider>

diff --git a/src/components/room/TokenGateInfo.tsx b/src/components/room/TokenGateInfo.tsx
@@ -1,7 +1,9 @@
 import { Shield } from 'lucide-react';
 import { useTokenSymbol } from '../../lib/hooks/useTokenSymbol';
 import { useTokenGate } from '../../lib/hooks/useTokenGate';
-import { useAuth } from '../auth/useAuth';
+import { useAuth } from '../../components/auth/useAuth';
+import { useRoomStore } from '../../lib/store/room';
+import { useEffect } from 'react';
 
 type TokenGateInfoProps = {
   tokenAddress: string | null;
@@ -11,15 +13,32 @@ type TokenGateInfoProps = {
 };
 
 export function TokenGateInfo({ 
-  tokenAddress, 
-  requiredTokens, 
+  tokenAddress: initialTokenAddress, 
+  requiredTokens: initialRequiredTokens, 
   isOwner,
   onManageGate 
 }: TokenGateInfoProps) {
   const { address } = useAuth();
+  const room = useRoomStore(state => state.room);
+  const version = useRoomStore(state => state.version); // Subscribe to version changes
+
+  // Use room store values, falling back to props
+  const tokenAddress = room?.token_address ?? initialTokenAddress;
+  const requiredTokens = room?.required_tokens ?? initialRequiredTokens;
+
   const { symbol, isLoading } = useTokenSymbol(tokenAddress);
   const { hasAccess } = useTokenGate(tokenAddress, requiredTokens, address);
 
+  // Debug logging
+  useEffect(() => {
+    console.log('TokenGateInfo re-render:', {
+      version,
+      tokenAddress,
+      requiredTokens,
+      roomState: room
+    });
+  }, [version, tokenAddress, requiredTokens, room]);
+
   if (!tokenAddress) {
     if (isOwner && onManageGate) {
       return (

diff --git a/src/components/room/TokenGateModal.tsx b/src/components/room/TokenGateModal.tsx
@@ -2,7 +2,8 @@ import { useState } from 'react';
 import { X } from 'lucide-react';
 import { isAddress } from 'viem';
 import { supabase } from '../../lib/auth/supabase';
-import { useAuth } from '../auth/useAuth';
+import { useAuth } from '../../components/auth/useAuth';
+import { useRoomStore } from '../../lib/store/room';
 
 type TokenGateModalProps = {
   roomName: string;
@@ -22,6 +23,7 @@ export function TokenGateModal({
   const [requiredTokens, setRequiredTokens] = useState(currentRequiredTokens);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const setRoom = useRoomStore(state => state.setRoom);
 
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
@@ -40,6 +42,7 @@ export function TokenGateModal({
       }
 
       const normalizedAddress = address.toLowerCase();
+      const normalizedRoomName = roomName.toLowerCase();
 
       // Get current auth status
       const { data: { session } } = await supabase.auth.getSession();
@@ -56,9 +59,10 @@ export function TokenGateModal({
           token_address: tokenAddress || null,
           required_tokens: tokenAddress ? requiredTokens : 0,
         })
-        .eq('name', roomName)
+        .eq('name', normalizedRoomName)
         .eq('owner_address', normalizedAddress)
-        .select();
+        .select('*')
+        .single();
 
       if (updateError) {
         console.error('Update error:', updateError);
@@ -67,10 +71,15 @@ export function TokenGateModal({
 
       console.log('Update response:', {
         success: true,
-        affected_rows: data?.length || 0,
         updated_data: data
       });
 
+      // Immediately update the room state to ensure UI updates
+      if (data) {
+        console.log('Updating room state with:', data);
+        setRoom(data);
+      }
+
       onClose();
     } catch (err) {
       const error = err as Error;

diff --git a/src/components/room/TokenGateTooltip.tsx b/src/components/room/TokenGateTooltip.tsx
@@ -2,7 +2,8 @@ import { useState, useRef, useEffect } from 'react';
 import { Shield } from 'lucide-react';
 import { useTokenSymbol } from '../../lib/hooks/useTokenSymbol';
 import { useTokenGate } from '../../lib/hooks/useTokenGate';
-import { useAuth } from '../auth/useAuth';
+import { useAuth } from '../../components/auth/useAuth';
+import { useRoomStore } from '../../lib/store/room';
 
 type TokenGateTooltipProps = {
   tokenAddress: string | null;
@@ -12,18 +13,35 @@ type TokenGateTooltipProps = {
 };
 
 export function TokenGateTooltip({ 
-  tokenAddress, 
-  requiredTokens, 
+  tokenAddress: initialTokenAddress, 
+  requiredTokens: initialRequiredTokens, 
   isOwner,
   onManageGate 
 }: TokenGateTooltipProps) {
   const { address } = useAuth();
-  const { symbol, isLoading } = useTokenSymbol(tokenAddress);
-  const { hasAccess } = useTokenGate(tokenAddress, requiredTokens, address);
+  const room = useRoomStore(state => state.room);
+  const version = useRoomStore(state => state.version); // Subscribe to version changes
   const [showTooltip, setShowTooltip] = useState(false);
   const tooltipRef = useRef<HTMLDivElement>(null);
   const timeoutRef = useRef<number>();
 
+  // Use room store values, falling back to props
+  const tokenAddress = room?.token_address ?? initialTokenAddress;
+  const requiredTokens = room?.required_tokens ?? initialRequiredTokens;
+
+  const { symbol, isLoading } = useTokenSymbol(tokenAddress);
+  const { hasAccess } = useTokenGate(tokenAddress, requiredTokens, address);
+
+  // Debug logging
+  useEffect(() => {
+    console.log('TokenGateTooltip re-render:', {
+      version,
+      tokenAddress,
+      requiredTokens,
+      roomState: room
+    });
+  }, [version, tokenAddress, requiredTokens, room]);
+
   useEffect(() => {
     return () => {
       if (timeoutRef.current) {
@@ -43,12 +61,10 @@ export function TokenGateTooltip({
     const tooltipEl = tooltipRef.current;
     const relatedTarget = e.relatedTarget as HTMLElement;
 
-    // Don't hide if moving to the tooltip content
     if (tooltipEl?.contains(relatedTarget)) {
       return;
     }
 
-    // Add a small delay before hiding
     timeoutRef.current = window.setTimeout(() => {
       setShowTooltip(false);
     }, 100);

diff --git a/src/components/room/useSearchParams.ts b/src/components/room/useSearchParams.ts
@@ -5,13 +5,18 @@ export function useSearchParams() {
 
   useEffect(() => {
     function handleUrlChange() {
-      setParams(new URLSearchParams(window.location.search));
+      const newParams = new URLSearchParams(window.location.search);
+      setParams(newParams);
+      console.log('URL params changed:', Object.fromEntries(newParams.entries()));
     }
 
     // Listen for both popstate and pushstate events
     window.addEventListener('popstate', handleUrlChange);
     window.addEventListener('pushstate', handleUrlChange);
 
+    // Initial check
+    handleUrlChange();
+
     return () => {
       window.removeEventListener('popstate', handleUrlChange);
       window.removeEventListener('pushstate', handleUrlChange);
@@ -21,7 +26,11 @@ export function useSearchParams() {
   // Add a helper function to update URL params
   const updateParams = useCallback((key: string, value: string) => {
     const newParams = new URLSearchParams(window.location.search);
-    newParams.set(key, value);
+    if (value) {
+      newParams.set(key, value);
+    } else {
+      newParams.delete(key);
+    }
     window.history.pushState({}, '', `?${newParams.toString()}`);
     setParams(newParams);
   }, []);

diff --git a/src/lib/.DS_Store b/src/lib/.DS_Store