import React, { useState } from 'react'; import { useNetworks } from '../../context/NetworkContext'; import { useAuth } from '../../context/AuthContext'; import { useNavigate } from 'react-router-dom'; import { AnimatePresence, motion } from 'framer-motion'; import { FaEye, FaGlobe, FaLock, FaNetworkWired, FaPlus, FaTimes, FaTrash } from 'react-icons/fa'; const NetworkList: React.FC = () => { const { networks, loading, error, createNetwork, deleteNetwork } = useNetworks(); const { user } = useAuth(); const [showCreateForm, setShowCreateForm] = useState(false); const [newNetworkName, setNewNetworkName] = useState(''); const [newNetworkDescription, setNewNetworkDescription] = useState(''); const [isPublic, setIsPublic] = useState(false); const [formError, setFormError] = useState(null); const [createLoading, setCreateLoading] = useState(false); const navigate = useNavigate(); const handleCreateNetwork = async (e: React.FormEvent) => { e.preventDefault(); setFormError(null); if (!newNetworkName.trim()) { setFormError('Network name is required'); return; } setCreateLoading(true); try { const network = await createNetwork({ name: newNetworkName.trim(), description: newNetworkDescription.trim() || undefined, isPublic, }); // Reset form setNewNetworkName(''); setNewNetworkDescription(''); setIsPublic(false); setShowCreateForm(false); // Navigate to the new network navigate(`/networks/${network._id}`); } catch (err: any) { setFormError(err.response?.data?.message || 'Failed to create network'); } finally { setCreateLoading(false); } }; const handleDeleteNetwork = async (id: string) => { if ( window.confirm('Are you sure you want to delete this network? This action cannot be undone.') ) { try { await deleteNetwork(id); } catch (err: any) { alert(err.response?.data?.message || 'Failed to delete network'); } } }; // Filter networks by ownership const myNetworks = networks.filter(network => { if (!user) return false; const ownerId = typeof network.owner === 'string' ? network.owner : network.owner._id; return ownerId === user.id; }); const publicNetworks = networks.filter(network => { if (!user) return false; const ownerId = typeof network.owner === 'string' ? network.owner : network.owner._id; return ownerId !== user.id; }); if (loading) { return (
); } return (

My Networks

setShowCreateForm(!showCreateForm)} > {showCreateForm ? : } {showCreateForm ? 'Cancel' : 'Create New Network'}
{error && (
{error}
)} {/* Create Network Form */} {showCreateForm && (

Create New Network

{formError && (
{formError}
)}
setNewNetworkName(e.target.value)} required placeholder="Enter network name" />