diff --git a/web/src/components/UserSearch.tsx b/web/src/components/UserSearch.tsx deleted file mode 100644 index 553d826..0000000 --- a/web/src/components/UserSearch.tsx +++ /dev/null @@ -1,198 +0,0 @@ -import React, { useState, useMemo } from "react"; -import { useQuery } from "@tanstack/react-query"; -import { listMembers } from "../api/members"; - -interface UserSearchProps { - onSelect: (user: { id: string; display_name: string; email: string }, bandId: string) => void; - bandId: string; - currentMemberId: string; - excludedIds?: string[]; -} - -interface User { - id: string; - display_name: string; - email: string; -} - -/** - * Component for searching and selecting users to invite to a band - * - Search by name or email - * - Show existing band members marked - * - Handles selection - */ -export function UserSearch({ onSelect, bandId, currentMemberId, excludedIds = [] }: UserSearchProps) { - const [searchTerm, setSearchTerm] = useState(""); - - // Fetch all members for searching - const { data: allMembers, isLoading, isError } = useQuery({ - queryKey: ["members"], - queryFn: () => listMembers(bandId), - }); - - // Filter members based on search - const filteredMembers = useMemo(() => { - if (!allMembers) return []; - - const lowerSearch = searchTerm.toLowerCase(); - return allMembers.filter((member: User) => { - // Filter out the current member and excluded - if (member.id === currentMemberId) return false; - if (excludedIds.includes(member.id)) return false; - - // Search by display name or email - return ( - member.display_name?.toLowerCase().includes(lowerSearch) || - member.email?.toLowerCase().includes(lowerSearch) - ); - }); - }, [allMembers, searchTerm, currentMemberId, excludedIds]); - - if (isLoading) { - return ( -
-

Loading members...

-
- ); - } - - if (isError) { - return ( -
-

Error loading members

-
- ); - } - - return ( -
-
- -
- setSearchTerm(e.target.value)} - style={styles.searchInput} - /> -
-
- -
- {filteredMembers.length === 0 ? ( -

- {searchTerm ? "No users found. Try a different search." : "No members found."} -

- ) : ( - - )} -
- - {searchTerm && ( -
- Found {filteredMembers.length} user(s) matching "{searchTerm}" -
- )} -
- ); -} - -const styles: Record = { - container: { - background: "white", - borderRadius: "8px", - padding: "20px", - marginBottom: "20px", - boxShadow: "0 2px 4px rgba(0,0,0,0.1)", - }, - header: { - marginBottom: "16px", - }, - label: { - display: "block", - fontSize: "14px", - fontWeight: "500" as const, - marginBottom: "8px", - }, - searchContainer: { - marginTop: "8px", - }, - searchInput: { - width: "100%", - padding: "8px 12px", - border: "1px solid #d1d5db", - borderRadius: "4px", - fontSize: "14px", - outline: "none", - }, - results: { - marginTop: "16px", - }, - empty: { - color: "#6b7280", - textAlign: "center" as const, - padding: "16px", - }, - userList: { - listStyle: "none", - padding: "0", - margin: "0", - }, - userItem: { - display: "flex", - justifyContent: "space-between", - alignItems: "center", - padding: "12px", - borderBottom: "1px solid #e5e7eb", - }, - userInfo: { - display: "flex", - flexDirection: "column" as const, - }, - displayName: { - fontSize: "14px", - fontWeight: "500", - }, - email: { - fontSize: "12px", - color: "#6b7280", - }, - inviteButton: { - padding: "6px 12px", - borderRadius: "4px", - fontSize: "12px", - background: "#10b981", - color: "white", - border: "none", - cursor: "pointer", - }, - note: { - marginTop: "12px", - fontSize: "12px", - color: "#6b7280", - textAlign: "center" as const, - }, - error: { - color: "#dc2626", - fontSize: "14px", - }, -};