github workflow issues resolved

Author: VishnuGadekar7

client/src/App.tsx

@@ -6,11 +6,11 @@ import React, { useEffect, useState } from 'react';
 import { useChat } from './context/ChatContext';
 import { SetupOverlay } from './components/SetupOverlay/SetupOverlay';
 import { ChatContainer } from './components/ChatContainer/ChatContainer';
-import { updateUrlHash } from './utils/callTimer';
+import { updateUrlHash } from './utils/urlHash';
 import './styles/global.css';
 
 const AppContent: React.FC = () => {
-  const { initializeChat, joinChannel, channelHash } = useChat();
+  const { initializeChat, joinChannel } = useChat();
   const [showSetup, setShowSetup] = useState(true);
   const [error, setError] = useState<string>('');
 

client/src/components/CallOverlay/CallOverlay.tsx

@@ -11,13 +11,15 @@ import './CallOverlay.css';
 
 export const CallOverlay: React.FC = () => {
   const { callActive, callStatus, endCall } = useChat();
-  const { duration, formatDuration, startTimer } = useCallTimer();
+  const { duration, formatDuration, startTimer, stopTimer } = useCallTimer();
 
   useEffect(() => {
     if (callActive && callStatus === 'Connected') {
       startTimer();
+    } else {
+      stopTimer();
     }
-  }, [callActive, callStatus, startTimer]);
+  }, [callActive, callStatus, startTimer, stopTimer]);
 
   if (!callActive) return null;
 

client/src/components/ChatContainer/ChatContainer.tsx

@@ -16,7 +16,7 @@ interface ChatContainerProps {
 
 export const ChatContainer: React.FC<ChatContainerProps> = ({ isHidden }) => {
   const { startCall } = useChat();
-  const [isStartingCall, setIsStartingCall] = useState<boolean>(false);
+  const [, setIsStartingCall] = useState<boolean>(false);
 
   const handleStartCall = async () => {
     try {

client/src/components/ChatContainer/ChatFooter.tsx

@@ -47,7 +47,7 @@ export const ChatFooter: React.FC = () => {
           placeholder="Type a secure message..."
           value={message}
           onChange={(e) => setMessage(e.target.value)}
-          onKeyPress={handleKeyPress}
+          onKeyDown={handleKeyPress}
           disabled={isSending}
         />
         <Button

client/src/components/SetupOverlay/CreateHashView.tsx

@@ -10,15 +10,13 @@ import './CreateHashView.css';
 
 interface CreateHashViewProps {
   hash: string;
-  onHashGenerated: (hash: string) => void;
   onCopyClick: () => void;
   onBack: () => void;
   onNext: () => void;
 }
 
 export const CreateHashView: React.FC<CreateHashViewProps> = ({
   hash,
-  onHashGenerated,
   onCopyClick,
   onBack,
   onNext,

client/src/components/SetupOverlay/SetupOverlay.tsx

@@ -2,7 +2,7 @@
  * Main SetupOverlay component
  */
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { useChat } from '../../context/ChatContext';
 import { InitialActions } from './InitialActions';
 import { CreateHashView } from './CreateHashView';
@@ -22,16 +22,10 @@ export const SetupOverlay: React.FC<SetupOverlayProps> = ({ onSetupComplete, isH
   const [generatedHash, setGeneratedHash] = useState<string>('');
   const [joinHash, setJoinHash] = useState<string>('');
   const [status, setStatus] = useState<string>('');
-  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [, setIsLoading] = useState<boolean>(false);
 
   // Generate hash when entering create view
-  useEffect(() => {
-    if (view === 'create' && !generatedHash) {
-      generateHash();
-    }
-  }, [view]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  const generateHash = async () => {
+  const generateHash = useCallback(async () => {
     try {
       setStatus('Generating secure hash...');
       const hash = await createNewChannel();
@@ -41,7 +35,13 @@ export const SetupOverlay: React.FC<SetupOverlayProps> = ({ onSetupComplete, isH
       setStatus('Failed to generate hash. Please try again.');
       console.error('Hash generation error:', err);
     }
-  };
+  }, [createNewChannel]);
+
+  useEffect(() => {
+    if (view === 'create' && !generatedHash) {
+      generateHash();
+    }
+  }, [view, generatedHash, generateHash]);
 
   const handleCreateClick = () => {
     setView('create');
@@ -112,7 +112,6 @@ export const SetupOverlay: React.FC<SetupOverlayProps> = ({ onSetupComplete, isH
         {view === 'create' && (
           <CreateHashView
             hash={generatedHash}
-            onHashGenerated={setGeneratedHash}
             onCopyClick={handleCopyHash}
             onBack={handleBack}
             onNext={handleCreateNext}

client/src/context/ChatContext.tsx

@@ -3,16 +3,17 @@
  * No modifications to the service itself
  */
 
-import React, { createContext, useContext, ReactNode, useState, useEffect, useCallback } from 'react';
+import React, { createContext, useContext, ReactNode, useState, useCallback } from 'react';
 import { createChatInstance, utils } from '@chat-e2ee/service';
-import { ChatContextType, ChatInstance, Message } from '../types/index';
+import type { IChatE2EE, IE2ECall } from '@chat-e2ee/service';
+import { ChatContextType, Message } from '../types/index';
 import { createMessage } from '../utils/messageHandling';
 import { playBeep } from '../utils/audioNotification';
 
 const ChatContext = createContext<ChatContextType | undefined>(undefined);
 
 export const ChatProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
-  const [chat, setChat] = useState<ChatInstance | null>(null);
+  const [chat, setChat] = useState<IChatE2EE | null>(null);
   const [userId, setUserId] = useState<string>('');
   const [channelHash, setChannelHash] = useState<string>('');
   const [privateKey, setPrivateKey] = useState<string>('');
@@ -60,12 +61,13 @@ export const ChatProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
         const newUserId = (utils as any).generateUUID();
         setUserId(newUserId);
 
-        await chat.setChannel(hash, newUserId);
+        // setChannel returns void but has async operations inside
+        chat.setChannel(hash, newUserId);
         setChannelHash(hash);
         setIsConnected(true);
 
         // Setup listeners
-        setupChatListeners(chat, newUserId);
+        setupChatListeners(chat);
 
         // Check for existing users
         await checkExistingUsers(chat);
@@ -84,7 +86,7 @@ export const ChatProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
       try {
         const message = createMessage(userId, text, 'sent');
         addMessage(message);
-        await chat.encrypt({ text }).send();
+        await chat.encrypt({ text, image: '' }).send();
       } catch (err) {
         console.error('Failed to send message:', err);
         throw err;
@@ -108,17 +110,24 @@ export const ChatProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
 
   // End call
   const endCall = useCallback(async () => {
-    setCallActive(false);
-    setCallDuration(0);
-  }, []);
+    try {
+      if (chat) {
+        chat.endCall();
+      }
+      setCallActive(false);
+      setCallDuration(0);
+    } catch (err) {
+      console.error('Failed to end call:', err);
+    }
+  }, [chat]);
 
   // Add message to state
   const addMessage = useCallback((message: Message) => {
     setMessages((prev) => [...prev, message]);
   }, []);
 
   // Setup chat listeners
-  const setupChatListeners = (chatInstance: ChatInstance, currentUserId: string) => {
+  const setupChatListeners = (chatInstance: IChatE2EE) => {
     chatInstance.on('on-alice-join', () => {
       playBeep();
       setIsConnected(true);
@@ -138,16 +147,17 @@ export const ChatProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
       }
     });
 
-    chatInstance.on('call-added', (call: any) => {
+    chatInstance.on('call-added', (call: IE2ECall) => {
       setCallActive(true);
       setCallStatus('Incoming Call...');
       setupCallListeners(call);
     });
   };
 
   // Setup call listeners
-  const setupCallListeners = (call: any) => {
-    call.on('state-changed', (state: string) => {
+  const setupCallListeners = (call: IE2ECall) => {
+    call.on('state-changed', async () => {
+      const state = call.state;
       setCallStatus(state.charAt(0).toUpperCase() + state.slice(1));
 
       if (state === 'closed' || state === 'failed') {
@@ -159,7 +169,7 @@ export const ChatProvider: React.FC<{ children: ReactNode }> = ({ children }) =>
   };
 
   // Check for existing users
-  const checkExistingUsers = async (chatInstance: ChatInstance) => {
+  const checkExistingUsers = async (chatInstance: IChatE2EE) => {
     try {
       const users = await chatInstance.getUsersInChannel();
       if (users && users.length > 1) {

client/src/hooks/useUrlHash.ts

@@ -3,7 +3,7 @@
  */
 
 import { useEffect, useState } from 'react';
-import { getUrlHash, updateUrlHash, hasValidHash } from '../utils/callTimer';
+import { getUrlHash, updateUrlHash, hasValidHash } from '../utils/urlHash';
 
 export const useUrlHash = () => {
   const [hash, setHash] = useState<string>('');

client/src/types/index.ts

@@ -2,17 +2,7 @@
  * Type definitions for Chat E2EE application
  */
 
-// Chat instance type from @chat-e2ee/service
-export interface ChatInstance {
-  init: () => Promise<void>;
-  getKeyPair: () => { privateKey: string; publicKey: string };
-  getLink: () => Promise<{ hash: string }>;
-  setChannel: (hash: string, userId: string) => Promise<void>;
-  getUsersInChannel: () => Promise<any[]>;
-  startCall: () => Promise<Call>;
-  on: (event: string, callback: Function) => void;
-  encrypt: (data: { text: string }) => { send: () => Promise<void> };
-}
+import type { IChatE2EE } from '@chat-e2ee/service';
 
 // Message type
 export interface Message {
@@ -22,19 +12,12 @@ export interface Message {
   timestamp: Date;
 }
 
-// Call type
-export interface Call {
-  on: (event: string, callback: Function) => void;
-  endCall: () => Promise<void>;
-  state?: string;
-}
-
 // Setup view states
 export type SetupView = 'initial' | 'create' | 'join';
 
 // Chat app state
 export interface AppState {
-  chat: ChatInstance | null;
+  chat: IChatE2EE | null;
   userId: string;
   channelHash: string;
   privateKey: string;
@@ -47,7 +30,7 @@ export interface AppState {
 // Chat context type
 export interface ChatContextType {
   // State
-  chat: ChatInstance | null;
+  chat: IChatE2EE | null;
   userId: string;
   channelHash: string;
   privateKey: string;
@@ -69,16 +52,12 @@ export interface ChatContextType {
 }
 
 // Common component props
-export interface ButtonProps {
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: 'primary' | 'secondary' | 'danger';
-  size?: 'small' | 'large';
-  onClick: () => void;
-  disabled?: boolean;
+  size?: 'tiny' | 'small' | 'medium' | 'large';
   icon?: boolean;
   circle?: boolean;
   children: React.ReactNode;
-  className?: string;
-  title?: string;
 }
 
 export interface InputProps {

client/src/utils/urlHash.ts

@@ -0,0 +1,27 @@
+/**
+ * URL hash handling utilities
+ */
+
+/**
+ * Extract hash from current URL
+ */
+export function getUrlHash(): string {
+  return window.location.hash.replace('#', '');
+}
+
+/**
+ * Update URL with hash
+ */
+export function updateUrlHash(hash: string): void {
+  if (hash) {
+    window.location.hash = hash;
+  }
+}
+
+/**
+ * Check if URL contains a valid hash
+ */
+export function hasValidHash(): boolean {
+  const hash = getUrlHash();
+  return hash.length > 5;
+}