- Vibe & Tags
+ Etiquetas
{beat.tags && beat.tags.length > 0 ? (
@@ -172,7 +192,7 @@ const BeatDetailPage = () => {
))
) : (
- No tags added.
+ Sin etiquetas.
)}
@@ -185,7 +205,7 @@ const BeatDetailPage = () => {
-
Actions & License
+ Acciones y Licencia
@@ -194,9 +214,8 @@ const BeatDetailPage = () => {
{isOwner && (
{beat.isPublic ? (
@@ -204,7 +223,7 @@ const BeatDetailPage = () => {
)}
- {beat.isPublic ? "Public Beat" : "Private Beat"}
+ {beat.isPublic ? "Beat Público" : "Beat Privado"}
@@ -212,14 +231,36 @@ const BeatDetailPage = () => {
{/* Botón Principal */}
{beat.isDownloadable && !isOwner && (
-
+
+
+
+
+
+
+
+
+ Comprobando tu plan...
+
+
+ Error al verificar tu plan
+
+
)}
@@ -227,7 +268,7 @@ const BeatDetailPage = () => {
MP3 + WAV
- Unlimited
+ Ilimitado
-
Owner Controls
+
Controles del Propietario
+
+ {/* Promote Beat Button */}
+
+
+
+
+
+
+
+
+ Comprobando add-on...
+
+
+ Error al verificar add-on
+
+
+
diff --git a/src/pages/app/beats/BeatFormPage.jsx b/src/pages/app/beats/BeatFormPage.jsx
index fca1b90..0bf1d05 100644
--- a/src/pages/app/beats/BeatFormPage.jsx
+++ b/src/pages/app/beats/BeatFormPage.jsx
@@ -28,8 +28,8 @@ const BeatFormPage = () => {
const beat = await getBeatById(id);
setBeatData(beat);
} catch (err) {
- setError('Error loading beat data');
- console.error(err);
+ const errorMessage = err.response?.data?.message || 'Error al cargar los datos del beat';
+ setError(errorMessage);
} finally {
setLoading(false);
}
@@ -114,8 +114,8 @@ const BeatFormPage = () => {
setShowCreatedModal(true);
}
} catch (err) {
- setError(`Error ${isEditing ? 'updating' : 'creating'} beat. Please try again.`);
- console.error(err);
+ const errorMessage = err.response?.data?.message || `Error al ${isEditing ? 'actualizar' : 'crear'} el beat. Por favor, inténtalo de nuevo.`;
+ setError(errorMessage);
} finally {
setSaving(false);
}
@@ -124,7 +124,7 @@ const BeatFormPage = () => {
if (loading) {
return (
-
Loading beat data...
+
Cargando datos del beat...
);
}
@@ -135,11 +135,11 @@ const BeatFormPage = () => {
- {isEditing ? 'Edit Beat' : 'Create New Beat'}
+ {isEditing ? 'Editar Beat' : 'Crear Nuevo Beat'}
diff --git a/src/pages/app/beats/BeatsListPage.jsx b/src/pages/app/beats/BeatsListPage.jsx
index cffc09e..3af8427 100644
--- a/src/pages/app/beats/BeatsListPage.jsx
+++ b/src/pages/app/beats/BeatsListPage.jsx
@@ -10,18 +10,18 @@ import { getBeats } from "../../../services/beatsService";
import "./BeatsTable.css";
const allColumns = [
- { key: "artist", label: "Artist" },
- { key: "genre", label: "Genre" },
+ { key: "artist", label: "Artista" },
+ { key: "genre", label: "Género" },
{ key: "bpm", label: "BPM" },
- { key: "key", label: "Key" },
- { key: "duration", label: "Duration" },
- { key: "plays", label: "Plays" },
- { key: "downloads", label: "Downloads" },
- { key: "likes", label: "Likes" },
- { key: "comments", label: "Comments" },
- { key: "mood", label: "Mood" },
- { key: "license", label: "License" },
- { key: "createdAt", label: "Upload Date" },
+ { key: "key", label: "Tonalidad" },
+ { key: "duration", label: "Duración" },
+ { key: "plays", label: "Reproducciones" },
+ { key: "downloads", label: "Descargas" },
+ { key: "likes", label: "Me gusta" },
+ { key: "comments", label: "Comentarios" },
+ { key: "mood", label: "Estado de ánimo" },
+ { key: "license", label: "Licencia" },
+ { key: "createdAt", label: "Fecha de subida" },
];
const BeatsListPage = () => {
@@ -90,7 +90,7 @@ const BeatsListPage = () => {
: "-",
formattedLikes: (beat.stats?.likes || 0).toLocaleString(),
formattedComments: (beat.stats?.comments || 0).toLocaleString(),
- formattedDate: beat.createdAt ? new Intl.DateTimeFormat("en-US", {
+ formattedDate: beat.createdAt ? new Intl.DateTimeFormat("es-ES", {
year: "numeric",
month: "short",
day: "numeric",
@@ -98,8 +98,8 @@ const BeatsListPage = () => {
}));
setBeats(formattedBeats);
} catch (err) {
- setError("Error fetching beats. Please try again later.");
- console.error(err);
+ const errorMessage = err.response?.data?.message || "Error al cargar los beats. Por favor, inténtalo más tarde.";
+ setError(errorMessage);
} finally {
setLoading(false);
}
@@ -117,7 +117,7 @@ const BeatsListPage = () => {
if (loading) {
return (
-
Loading beats...
+
Cargando beats...
);
}
@@ -190,31 +190,31 @@ const BeatsListPage = () => {
#
-
Title
+
Título
{visibleColumns.artist && (
-
Artist
+
Artista
)}
- {visibleColumns.genre &&
Genre
}
+ {visibleColumns.genre &&
Género
}
{visibleColumns.bpm &&
BPM
}
- {visibleColumns.key &&
Key
}
+ {visibleColumns.key &&
Tonalidad
}
{visibleColumns.duration && (
-
Duration
+
Duración
)}
- {visibleColumns.price &&
Price
}
- {visibleColumns.plays &&
Plays
}
+ {visibleColumns.price &&
Precio
}
+ {visibleColumns.plays &&
Reproducciones
}
{visibleColumns.downloads && (
-
Downloads
+
Descargas
)}
- {visibleColumns.likes &&
Likes
}
+ {visibleColumns.likes &&
Me gusta
}
{visibleColumns.comments && (
-
Comments
+
Comentarios
)}
- {visibleColumns.mood &&
Mood
}
+ {visibleColumns.mood &&
Estado
}
{visibleColumns.license && (
-
License
+
Licencia
)}
{visibleColumns.createdAt && (
-
Upload Date
+
Fecha de subida
)}
{/*
Cover
*/}
@@ -252,12 +252,12 @@ const BeatsListPage = () => {
{beat.title}
- {beat.createdBy?.username || "Unknown"}
+ {beat.createdBy?.username || "Desconocido"}
{visibleColumns.artist && (
-
{beat.createdBy?.username || "Unknown"}
+
{beat.createdBy?.username || "Desconocido"}
)}
{visibleColumns.genre && (
{beat.genre}
diff --git a/src/pages/app/beats/ColumnSelector.jsx b/src/pages/app/beats/ColumnSelector.jsx
index 6ae1041..ced4842 100644
--- a/src/pages/app/beats/ColumnSelector.jsx
+++ b/src/pages/app/beats/ColumnSelector.jsx
@@ -4,7 +4,7 @@ import './ColumnSelector.css';
const ColumnSelector = ({ columns, visibleColumns, onColumnChange }) => {
return (
-
Customize Columns
+
Personalizar Columnas
{columns.map((column) => (
);
diff --git a/src/pages/app/explore/components/BeatCard.css b/src/pages/app/explore/components/BeatCard.css
index 65f0ecc..abfd816 100644
--- a/src/pages/app/explore/components/BeatCard.css
+++ b/src/pages/app/explore/components/BeatCard.css
@@ -28,10 +28,13 @@
background: rgba(139, 92, 246, 0.3);
}
-/* Carousel variant */
+/* Carousel variant - dentro de explore-beats-grid */
.beat-card-carousel {
- flex-shrink: 0;
- width: 200px;
+ flex: 0 0 200px !important;
+ min-width: 200px !important;
+ max-width: 200px !important;
+ width: 200px !important;
+ flex-shrink: 0 !important;
scroll-snap-align: start;
}
diff --git a/src/pages/app/explore/components/BeatsExploreSection.css b/src/pages/app/explore/components/BeatsExploreSection.css
index 21c03f2..991c32f 100644
--- a/src/pages/app/explore/components/BeatsExploreSection.css
+++ b/src/pages/app/explore/components/BeatsExploreSection.css
@@ -4,6 +4,12 @@
display: flex;
flex-direction: column;
gap: 2rem;
+ /* Limitar al ancho del contenedor padre */
+ width: 100%;
+ max-width: 100%;
+ min-width: 0;
+ box-sizing: border-box;
+ overflow: hidden; /* Contener hijos */
}
/* Section Header */
@@ -30,12 +36,7 @@
font-size: 1rem;
}
-/* Subsections */
-.beats-subsection {
- display: flex;
- flex-direction: column;
- gap: 1rem;
-}
+/* Subsections - eliminado el overflow:hidden para permitir scroll en la regla más abajo */
.subsection-header {
display: flex;
@@ -78,11 +79,63 @@
display: none;
}
-/* Grid Layout */
-.beats-grid {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
- gap: 1.5rem;
+/* Grid Layout - Horizontal Scrollable */
+.beats-subsection {
+ /* Layout de columna para header + grid */
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ /* Contener al ancho del padre */
+ width: 100%;
+ max-width: 100%;
+ min-width: 0;
+ box-sizing: border-box;
+ overflow: hidden; /* Contener el grid */
+}
+
+/* Wrapper para el scroll horizontal */
+.explore-beats-grid {
+ display: flex;
+ flex-wrap: nowrap;
+ gap: 1.25rem;
+ padding: 0.5rem 0 1rem 0;
+ -webkit-overflow-scrolling: touch;
+ /* Scroll horizontal aquí */
+ overflow-x: scroll;
+ overflow-y: visible;
+
+ /* Styled scrollbar */
+ scrollbar-width: thin;
+ scrollbar-color: var(--accent-primary) rgba(255, 255, 255, 0.05);
+}
+
+.explore-beats-grid::-webkit-scrollbar {
+ height: 8px;
+}
+
+.explore-beats-grid::-webkit-scrollbar-track {
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 4px;
+}
+
+.explore-beats-grid::-webkit-scrollbar-thumb {
+ background: var(--accent-primary);
+ border-radius: 4px;
+}
+
+.explore-beats-grid::-webkit-scrollbar-thumb:hover {
+ background: var(--accent-secondary);
+}
+
+/* Asegurar que las cards tengan tamaño fijo - selector más específico */
+.explore-beats-grid > .beat-card,
+.explore-beats-grid > .beat-card-carousel,
+.explore-beats-grid .beat-card {
+ flex: 0 0 200px !important;
+ min-width: 200px !important;
+ max-width: 200px !important;
+ width: 200px !important;
+ flex-shrink: 0 !important;
}
/* Filtered Results */
@@ -217,8 +270,7 @@
/* Responsive */
@media (max-width: 768px) {
- .beats-grid {
- grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+ .explore-beats-grid {
gap: 1rem;
}
@@ -232,8 +284,7 @@
}
@media (max-width: 480px) {
- .beats-grid {
- grid-template-columns: repeat(2, 1fr);
+ .explore-beats-grid {
gap: 0.75rem;
}
}
diff --git a/src/pages/app/explore/components/BeatsExploreSection.jsx b/src/pages/app/explore/components/BeatsExploreSection.jsx
index 7134011..e7e9989 100644
--- a/src/pages/app/explore/components/BeatsExploreSection.jsx
+++ b/src/pages/app/explore/components/BeatsExploreSection.jsx
@@ -236,11 +236,11 @@ export default function BeatsExploreSection({ searchTerm = '', onClearSearch })
{loadingFiltered ? (
-
+
{renderSkeletons(8)}
) : filteredBeats.length > 0 ? (
-
+
{filteredBeats.map((beat) => (
) : mostPlayedBeats.length > 0 ? (
-
+
{mostPlayedBeats.map((beat) => (
{loadingRecent ? (
-
+
{renderSkeletons(8)}
) : recentBeats.length > 0 ? (
-
+
{recentBeats.map((beat) => (
{
+ if (Array.isArray(data)) return data;
+ if (Array.isArray(data?.profiles)) return data.profiles;
+ if (Array.isArray(data?.results)) return data.results;
+ if (Array.isArray(data?.data)) return data.data;
+ return [];
+};
+
+export default function UsersExploreSection({ searchTerm = '', onClearSearch }) {
+ const navigate = useNavigate();
+ const { profile } = useProfileData();
+ const [users, setUsers] = useState([]);
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState('');
+ const [friends, setFriends] = useState(new Set());
+ const [incomingRequests, setIncomingRequests] = useState(new Set());
+ const [sentRequests, setSentRequests] = useState(new Set());
+
+ const trimmedTerm = useMemo(() => searchTerm.trim(), [searchTerm]);
+ const currentUserId = useMemo(
+ () => profile?.userId || profile?._id || profile?.id,
+ [profile]
+ );
+ const currentUsername = useMemo(
+ () => (profile?.username || '').toLowerCase(),
+ [profile]
+ );
+
+ // Cargar estado social (amigos, solicitudes entrantes y enviadas)
+ useEffect(() => {
+ const controller = new AbortController();
+
+ const loadFriendsAndRequests = async () => {
+ try {
+ const [friendsRes, incomingRes, sentRes] = await Promise.all([
+ listFriends({ signal: controller.signal }),
+ listReceivedRequests({ signal: controller.signal }),
+ listSentRequests({ signal: controller.signal })
+ ]);
+
+ const friendIds = new Set(
+ (friendsRes?.friends || []).map((f) => f?.id || f?._id || f?.userId).filter(Boolean)
+ );
+ const incomingIds = new Set(
+ (incomingRes?.requests || []).map((r) => r?.sender?.id || r?.sender?._id || r?.sender?.userId).filter(Boolean)
+ );
+ const sentIds = new Set(sentRes || []);
+
+ setFriends(friendIds);
+ setIncomingRequests(incomingIds);
+ setSentRequests(sentIds);
+ } catch (err) {
+ console.warn('No se pudieron cargar amigos/solicitudes', err?.message || err);
+ }
+ };
+
+ loadFriendsAndRequests();
+
+ return () => controller.abort();
+ }, []);
+
+ const isSelf = useCallback(
+ (u) => {
+ const userId = u?.userId || u?._id || u?.id;
+ const username = (u?.username || u?.userName || u?.handle || '').toLowerCase();
+ if (currentUserId && userId && currentUserId === userId) return true;
+ if (currentUsername && username && currentUsername === username) return true;
+ return false;
+ },
+ [currentUserId, currentUsername]
+ );
+
+ useEffect(() => {
+ let isMounted = true;
+
+ const runSearch = async () => {
+ if (!trimmedTerm || trimmedTerm.length < MIN_SEARCH_LENGTH) {
+ setUsers([]);
+ setError('');
+ setLoading(false);
+ return;
+ }
+
+ try {
+ setLoading(true);
+ setError('');
+ const response = await searchProfiles(trimmedTerm);
+ const normalized = normalizeProfiles(response)
+ .filter((u) => !isSelf(u))
+ .slice(0, 24);
+ if (!isMounted) return;
+ setUsers(normalized);
+ } catch (err) {
+ console.error('Error searching profiles:', err);
+ if (!isMounted) return;
+ setError('No se pudieron cargar usuarios ahora mismo');
+ setUsers([]);
+ } finally {
+ if (isMounted) setLoading(false);
+ }
+ };
+
+ runSearch();
+
+ return () => {
+ isMounted = false;
+ };
+ }, [trimmedTerm, isSelf]);
+
+ const visibleUsers = useMemo(
+ () => users.filter((u) => !isSelf(u)),
+ [users, isSelf]
+ );
+
+ const handleSendRequest = async (userId) => {
+ if (!userId) return;
+ try {
+ await sendFriendRequest(userId);
+ setSentRequests((prev) => new Set([...prev, userId]));
+ } catch (err) {
+ console.error('Error al enviar solicitud:', err);
+ }
+ };
+
+ const handleViewProfile = (username) => {
+ if (!username) return;
+ navigate(`/app/profile/${username}`);
+ };
+
+ const renderSkeletons = (count) =>
+ Array.from({ length: count }).map((_, idx) => (
+
+ ));
+
+ const hasShortTerm = trimmedTerm && trimmedTerm.length < MIN_SEARCH_LENGTH;
+
+ return (
+
+
+
+ 👥
+ Usuarios
+
+
+ Busca creadores y conéctate con ellos
+
+
+ Escribe al menos 2 caracteres para buscar usuarios.
+
+ )}
+
+ {hasShortTerm && (
+
+ Sigue escribiendo... necesitamos 2 o más caracteres.
+
+ )}
+
+ {loading && (
+ {renderSkeletons(6)}
+ )}
+
+ {!loading && error && (
+
+ 🔌 {error}
+ {onClearSearch && (
+
+ )}
+
+ )}
+
+ {!loading && !error && trimmedTerm && visibleUsers.length === 0 && !hasShortTerm && (
+
+
🔍
+
No encontramos usuarios para "{trimmedTerm}"
+ {onClearSearch && (
+
+ )}
+
+ {visibleUsers.map((user) => {
+ const username = user?.username || user?.userName || user?.handle;
+ const fullName =
+ user?.full_name || user?.fullName || user?.name || user?.displayName;
+ const bio = user?.about || user?.bio || user?.description;
+ const avatar = user?.avatar || user?.profilePhoto || user?.photo;
+ const userId = user?.userId || user?.id || user?._id;
+ const isFriend = friends.has(userId);
+ const hasIncoming = incomingRequests.has(userId);
+ const hasSent = sentRequests.has(userId);
+
+ return (
+
+
+
+
+
+ {fullName && {fullName}}
+ {isFriend && ✓ Amigo}
+
+
+
+ {bio &&
{bio}
}
+
+
+
+ {isFriend ? (
+
+ ) : hasIncoming ? (
+ <>
+
+
+ ) : (
+
+ )}
+
+
+ );
+ })}
+
+
+
{/* Hero Section */}
request?.id || request?._id || request;
+
+const getSenderName = (request) => {
+ const sender = request?.sender || request?.requester || request?.from;
+ // Priorizar username, luego name, luego alias
+ // Solo usar ID como último recurso si todo lo anterior es vacío/nulo
+ return (sender?.username?.trim() || sender?.name?.trim() || sender?.alias?.trim() || 'Usuario desconocido');
+};
+
+const getSender = (request) => request?.sender || request?.requester || request?.from;
+
+function RequestRow({ request, onAccept, onReject, isProcessing }) {
+ const requestId = getRequestId(request);
+ const sender = getSender(request);
+ const senderName = getSenderName(request);
+
+ return (
+
+
+
+
+ {senderName}
+ {/* {sender?.full_name && {sender.full_name}} */}
+ {request?.createdAt && (
+
+ {new Date(request.createdAt).toLocaleDateString('es-ES', {
+ day: 'numeric',
+ month: 'short',
+ year: 'numeric'
+ })}
+
+ )}
+
+
+
+
+
+
+ );
+}
+
+function RequestSkeleton() {
+ return (
+
+
+
+
+ );
+}
+
+export default function FriendRequests() {
+ const navigate = useNavigate();
+ const [requests, setRequests] = useState([]);
+ const [isLoading, setIsLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [search, setSearch] = useState('');
+ const [processingId, setProcessingId] = useState(null);
+ const [processingAction, setProcessingAction] = useState(null);
+ const [toast, setToast] = useState(null);
+ const toastTimerRef = useRef(null);
+
+ const showToast = (type, message) => {
+ if (toastTimerRef.current) clearTimeout(toastTimerRef.current);
+ setToast({ type, message });
+ toastTimerRef.current = setTimeout(() => setToast(null), 3200);
+ };
+
+ const loadRequests = async () => {
+ setIsLoading(true);
+ setError(null);
+ try {
+ const data = await listReceivedRequests();
+ // API puede devolver: { value: [...], Count: n } o directamente [...] o { requests: [...] }
+ setRequests(data?.requests || data?.value || data || []);
+ } catch (err) {
+ setError('No se pudieron cargar las solicitudes de amistad.');
+ showToast('error', 'No se pudieron cargar las solicitudes.');
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ loadRequests();
+ }, []);
+
+ const filtered = useMemo(() => {
+ const term = search.trim().toLowerCase();
+ if (!term) return requests;
+ return requests.filter((r) => getSenderName(r)?.toLowerCase().includes(term));
+ }, [requests, search]);
+
+ const handleAccept = async (request) => {
+ const requestId = getRequestId(request);
+ const senderName = getSenderName(request);
+
+ const snapshot = [...requests];
+ setProcessingId(requestId);
+ setProcessingAction('accept');
+ setRequests((prev) => prev.filter((r) => getRequestId(r) !== requestId));
+
+ try {
+ await respondRequest(requestId, 'accept');
+ showToast('success', `¡Ahora eres amigo de ${senderName}!`);
+ } catch (err) {
+ setRequests(snapshot);
+ setError('No se pudo aceptar la solicitud.');
+ showToast('error', 'No se pudo aceptar la solicitud.');
+ } finally {
+ setProcessingId(null);
+ setProcessingAction(null);
+ }
+ };
+
+ const handleReject = async (request) => {
+ const requestId = getRequestId(request);
+ const senderName = getSenderName(request);
+
+ const snapshot = [...requests];
+ setProcessingId(requestId);
+ setProcessingAction('reject');
+ setRequests((prev) => prev.filter((r) => getRequestId(r) !== requestId));
+
+ try {
+ await respondRequest(requestId, 'reject');
+ showToast('success', `Solicitud de ${senderName} rechazada.`);
+ } catch (err) {
+ setRequests(snapshot);
+ setError('No se pudo rechazar la solicitud.');
+ showToast('error', 'No se pudo rechazar la solicitud.');
+ } finally {
+ setProcessingId(null);
+ setProcessingAction(null);
+ }
+ };
+
+ const renderContent = () => {
+ if (isLoading) {
+ return (
+
+ {Array.from({ length: 3 }).map((_, idx) => (
+
+ ))}
+
+ );
+ }
+
+ if (error) {
+ return (
+
+ {error}
+
+
+ );
+ }
+
+ if (!filtered.length) {
+ return (
+
+ {requests.length === 0
+ ? 'No tienes solicitudes de amistad pendientes.'
+ : 'No se encontraron solicitudes con ese nombre.'}
+
+
+
+ );
+ }
+
+ return (
+
+ {filtered.map((request) => {
+ const reqId = getRequestId(request);
+ return (
+
+ );
+ })}
+
+ );
+ };
+
+ return (
+
+
+
+
+ {renderContent()}
+
+
+ {toast && (
+
+ {toast.message}
+
+ )}
+
+
+
+ {name}
+ {/* Si quieres mostrar el nombre completo debajo, descomenta la siguiente línea */}
+ {/* {friend?.full_name && {friend.full_name}} */}
+
+
+
+
+
+ );
+}
+
+function FriendSkeleton() {
+ return (
+
+
+
+
+ );
+}
+
+export default function Friends() {
+ const navigate = useNavigate();
+ const [friends, setFriends] = useState([]);
+ const [pendingCount, setPendingCount] = useState(0);
+ const [isLoading, setIsLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [search, setSearch] = useState('');
+ const [removingId, setRemovingId] = useState(null);
+ const [confirmOpen, setConfirmOpen] = useState(false);
+ const [confirmFriend, setConfirmFriend] = useState(null);
+ const [toast, setToast] = useState(null);
+ const toastTimerRef = useRef(null);
+
+ const showToast = (type, message) => {
+ if (toastTimerRef.current) clearTimeout(toastTimerRef.current);
+ setToast({ type, message });
+ toastTimerRef.current = setTimeout(() => setToast(null), 3200);
+ };
+
+ const closeConfirm = () => {
+ setConfirmOpen(false);
+ setConfirmFriend(null);
+ };
+
+ const loadFriends = async () => {
+ setIsLoading(true);
+ setError(null);
+ try {
+ const data = await listFriends();
+ setFriends(data?.friends || []);
+ } catch (err) {
+ setError('No se pudo cargar la lista de amigos.');
+ showToast('error', 'No se pudo cargar la lista de amigos.');
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ const loadPendingCount = async () => {
+ try {
+ const data = await listReceivedRequests();
+ const requests = data?.requests || data || [];
+ setPendingCount(requests.length);
+ } catch (err) {
+ // Silently fail, just don't show the badge
+ setPendingCount(0);
+ }
+ };
+
+ useEffect(() => {
+ loadFriends();
+ loadPendingCount();
+ }, []);
+
+ const filtered = useMemo(() => {
+ const term = search.trim().toLowerCase();
+ if (!term) return friends;
+ return friends.filter((f) => getFriendName(f)?.toLowerCase().includes(term));
+ }, [friends, search]);
+
+ const handleRemove = (friend) => {
+ setConfirmFriend(friend);
+ setConfirmOpen(true);
+ };
+
+ const confirmRemoveFriend = async () => {
+ if (!confirmFriend) return;
+ const friendId = getFriendId(confirmFriend);
+ const name = getFriendName(confirmFriend);
+
+ const snapshot = [...friends];
+ setRemovingId(friendId);
+ setFriends((prev) => prev.filter((f) => getFriendId(f) !== friendId));
+
+ try {
+ await removeFriend(friendId);
+ showToast('success', `${name} fue eliminado de tus amigos.`);
+ } catch (err) {
+ setFriends(snapshot);
+ setError('No se pudo quitar al amigo.');
+ showToast('error', 'No se pudo quitar al amigo.');
+ } finally {
+ setRemovingId(null);
+ closeConfirm();
+ }
+ };
+
+ const renderContent = () => {
+ if (isLoading) {
+ return (
+
+ {Array.from({ length: 4 }).map((_, idx) => (
+
+ ))}
+
+ );
+ }
+
+ if (error) {
+ return (
+
+ {error}
+
+
+ );
+ }
+
+ if (!filtered.length) {
+ return (
+
+ No tienes amigos aún.
+
+
+ );
+ }
+
+ return (
+
+ {filtered.map((friend) => (
+
+ ))}
+
+ );
+ };
+
+ return (
+
+
+
+
Amigos
+
Gestiona tus amistades y conversa rápido.
+
+
+ setSearch(e.target.value)}
+ fullWidth
+ />
+
+
+
+ {renderContent()}
+
+
+ {toast && (
+
+ {toast.message}
+
+ )}
+
+
+
+
+
+
Buscar Usuarios
+
+ Encuentra y conecta con otros usuarios
+
+
+ setSearchQuery(e.target.value)}
+ className="user-search-input"
+ />
+
+
+ {error && (
+
+ {error}
+
+ )}
+
+ {isSearching && (
+
+ Buscando...
+
+ )}
+
+ {!isSearching && searchQuery && searchResults.length === 0 && !error && (
+
+ No se encontraron usuarios con "{searchQuery}"
+
+ )}
+
+ {searchResults.length > 0 && (
+
+ )}
+
+
+ )}
+