Skip to content

Logic to call contact button #235

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Malayt04 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Logic to call contact button #235

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7324aaa
\"feat: implement logic to call contact button\"
Malayt04 Aug 10, 2025
92490a0
\"chore: apply requested changes\"
Malayt04 Aug 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 0 additions & 18 deletions COMMIT_MSG.tmp
View file
Open in desktop

This file was deleted.

32 changes: 32 additions & 0 deletions apps/web/components/app/section/_components/create-call-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,11 @@ interface Contact {
export function CreateCallModal({
onClose,
onCallCreated,
selectedContact
}: {
onClose?: () => void;
onCallCreated?: (callId: string) => void;
selectedContact?: string
}) {
const [meetingName, setMeetingName] = useState("");
const [contacts, setContacts] = useState<Contact[]>([]);
Expand All @@ -29,10 +31,40 @@ export function CreateCallModal({
const [mounted, setMounted] = useState(false);
const router = useRouter();

useEffect(() => {
const fetchContacts = async () => {
try {
const res = await fetch(`${process.env.NEXT_PUBLIC_BACKEND_URL}/api/contacts`, {
credentials: "include",
});
if (!res.ok) {
console.error("Failed to fetch contacts");
return;
};
const data = await res.json();
setContacts(data.contacts || []);
} catch (err) {
console.error("Failed to fetch contacts", err);
}
};
fetchContacts();
}, []);

useEffect(() => {
setMounted(true);
}, []);

useEffect(() => {
if (selectedContact) {
setSelectedMembers((prev) => {
if (prev.includes(selectedContact)) {
return prev;
}
return [...prev, selectedContact];
});
}
}, [selectedContact]);

const handleMemberToggle = (email: string) => {
setSelectedMembers((prev) =>
prev.includes(email) ? prev.filter((e) => e !== email) : [...prev, email]
Expand Down
5 changes: 4 additions & 1 deletion apps/web/components/app/section/contacts-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
} from "@call/ui/components/dropdown-menu";
import { useModal } from "@/hooks/use-modal";

interface Contact {
id: string;
Expand All @@ -42,6 +43,7 @@ export default function ContactsList({ onAddContact }: ContactsListProps) {
const [deletingContact, setDeletingContact] = useState<string | null>(null);
const [searchQuery, setSearchQuery] = useState("");


const fetchContacts = async () => {
setLoading(true);
setError(null);
Expand Down Expand Up @@ -223,6 +225,7 @@ interface ContactCardProps {
}

const ContactCard = ({ contact, onDeleteContact, isDeleting }: ContactCardProps) => {
const { onOpen } = useModal();
return (
<div className="bg-inset-accent flex flex-col gap-3 rounded-xl border p-4">
<div className="flex items-center justify-between">
Expand All @@ -236,7 +239,7 @@ const ContactCard = ({ contact, onDeleteContact, isDeleting }: ContactCardProps)
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem>
<DropdownMenuItem onClick={() => onOpen("start-call", { selectedContact: contact.email })}>
Copy link

@coderabbitai coderabbitai bot Aug 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Pre-filling selected contact is correct; consider email normalization

The onOpen("start-call", { selectedContact: contact.email }) flow is correct. To avoid case-related duplicates in selections, consider normalizing emails (e.g., lowercasing) consistently across the app.

Run a quick scan to see if email normalization is already in place for selections:

🏁 Script executed:

#!/bin/bash
rg -n --no-heading --pretty $'toLowerCase\\(\\).*email|selectedContacts' || true

Length of output: 2810

Normalize emails to lowercase before storing and comparing

I didn’t find any .toLowerCase() usage around contact emails in the selection flows (contacts-list.tsx, contact-selector.tsx, start-call.tsx). To prevent case‐related duplicates, normalize email values (e.g. email.trim().toLowerCase()) when invoking onOpen, adding to selectedContacts, and when checking for membership.

Places to update:

  • apps/web/components/app/section/contacts-list.tsx (line 242)
  • apps/web/components/modal/contact-selector.tsx (lines 37 & 93)

Example change:

- onOpen("start-call", { selectedContact: contact.email })
+ onOpen("start-call", {
+   selectedContact: contact.email.trim().toLowerCase()
+ })

Ensure you apply the same normalization in your setSelectedContacts calls and in any selectedContacts.includes(...) checks.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<DropdownMenuItem onClick={() => onOpen("start-call", { selectedContact: contact.email })}>
<DropdownMenuItem onClick={() => onOpen("start-call", {
selectedContact: contact.email.trim().toLowerCase()
})}>
🤖 Prompt for AI Agents 
In apps/web/components/app/section/contacts-list.tsx at line 242, the email
passed to onOpen is not normalized, which can cause case-related duplicates. Fix
this by applying email normalization using trim() and toLowerCase() before
passing the email, and ensure similar normalization is applied in all places
where emails are stored or compared, including setSelectedContacts calls and
membership checks.

<Phone className="mr-2 h-4 w-4" />
Call Contact
</DropdownMenuItem>
Expand Down
26 changes: 21 additions & 5 deletions apps/web/components/modal/start-call.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { LoadingButton } from "@call/ui/components/loading-button";
import { zodResolver } from "@hookform/resolvers/zod";
import { useMutation } from "@tanstack/react-query";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { toast } from "sonner";
import { z } from "zod";
Expand All @@ -24,17 +24,31 @@ const formSchema = z.object({
});

export const StartCall = () => {
const { isOpen, onClose, type } = useModal();
const { isOpen, onClose, type, data } = useModal();
const { selectedContact } = data;
const router = useRouter();
const [selectedContacts, setSelectedContacts] = useState<string[]>([]);
const { user } = useSession();

useEffect(() => {
if (selectedContact) {
setSelectedContacts((prev) => {
if (prev.includes(selectedContact)) {
return prev;
}
return [...prev, selectedContact];
});
}
}, [selectedContact]);

const { mutate: createCall, isPending } = useMutation({
mutationFn: CALLS_QUERY.createCall,
onSuccess: (data) => {
if (selectedContacts.length > 0) {
toast.success(
`Invitations sent to ${selectedContacts.length} contact${selectedContacts.length !== 1 ? "s" : ""}`
`Invitations sent to ${selectedContacts.length} contact${
selectedContacts.length !== 1 ? "s" : ""
}`
);
}
onClose();
Expand Down Expand Up @@ -103,11 +117,13 @@ export const StartCall = () => {
disabled={isPending}
>
{selectedContacts.length > 0
? `Start with ${selectedContacts.length} contact${selectedContacts.length !== 1 ? "s" : ""}`
? `Start with ${selectedContacts.length} contact${
selectedContacts.length !== 1 ? "s" : ""
}`
: "Start call"}
</LoadingButton>
</form>
</DialogContent>
</Dialog>
);
};
};
7 changes: 4 additions & 3 deletions apps/web/hooks/use-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ interface ModalData {
team?: Team;
participants?: Participant[];
callInfo?: CallInfo;
selectedContact?: string;
}

interface ModalStore {
Expand All @@ -33,6 +34,6 @@ export const useModal = create<ModalStore>((set) => ({
type: null,
isOpen: false,
data: {},
onOpen: (type, data?: ModalData) => set({ type, isOpen: true, data }),
onClose: () => set({ type: null, isOpen: false }),
}));
onOpen: (type, data = {}) => set({ isOpen: true, type, data }),
onClose: () => set({ type: null, isOpen: false, data: {} }),
}));