From c078610c4df391d2687841bb164dda26f3fe26ed Mon Sep 17 00:00:00 2001
From: philipredstone <rothstein@prtex.de>
Date: Tue, 15 Apr 2025 14:32:54 +0200
Subject: [PATCH] public networks now display correctly

---
 frontend/src/api/network.ts                   |   7 +-
 .../src/components/networks/NetworkList.tsx   | 143 ++++++++++++++----
 src/controllers/network.controller.ts         |  16 +-
 3 files changed, 129 insertions(+), 37 deletions(-)

diff --git a/frontend/src/api/network.ts b/frontend/src/api/network.ts
index 0fe4de8..73605df 100644
--- a/frontend/src/api/network.ts
+++ b/frontend/src/api/network.ts
@@ -7,11 +7,16 @@ const port = window.location.port;
 const API_URL = protocol + '//' + hostname + (port ? ':' + port : '') + '/api';
 
 // Types
+export interface NetworkOwner {
+    _id: string;
+    username: string;
+}
+
 export interface Network {
     _id: string;
     name: string;
     description?: string;
-    owner: string;
+    owner: string | NetworkOwner; // Can be either string ID or populated object
     isPublic: boolean;
     createdAt: string;
     updatedAt: string;
diff --git a/frontend/src/components/networks/NetworkList.tsx b/frontend/src/components/networks/NetworkList.tsx
index 8e18dd0..4e5c4e1 100644
--- a/frontend/src/components/networks/NetworkList.tsx
+++ b/frontend/src/components/networks/NetworkList.tsx
@@ -1,9 +1,11 @@
 import React, { useState } from 'react';
 import { useNetworks } from '../../context/NetworkContext';
+import { useAuth } from '../../context/AuthContext';
 import { useNavigate } from 'react-router-dom';
 
 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('');
@@ -153,40 +155,117 @@ const NetworkList: React.FC = () => {
                     )}
                 </div>
             ) : (
-                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                    {networks.map((network) => (
-                        <div key={network._id} className="bg-white rounded-lg shadow-md overflow-hidden">
-                            <div className="p-4">
-                                <h2 className="text-xl font-bold mb-2">{network.name}</h2>
-                                {network.description && (
-                                    <p className="text-gray-600 mb-4">{network.description}</p>
-                                )}
-                                <div className="flex items-center mb-4">
-                  <span className={`px-2 py-1 rounded-full text-xs ${network.isPublic ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}>
-                    {network.isPublic ? 'Public' : 'Private'}
-                  </span>
-                                    <span className="text-xs text-gray-500 ml-2">
-                    Created: {new Date(network.createdAt).toLocaleDateString()}
-                  </span>
-                                </div>
-                                <div className="flex space-x-2">
-                                    <button
-                                        className="flex-1 bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded"
-                                        onClick={() => navigate(`/networks/${network._id}`)}
-                                    >
-                                        View
-                                    </button>
-                                    <button
-                                        className="flex-1 bg-red-500 hover:bg-red-700 text-white py-2 px-4 rounded"
-                                        onClick={() => handleDeleteNetwork(network._id)}
-                                    >
-                                        Delete
-                                    </button>
-                                </div>
+                <>
+                    {/* My Networks Section */}
+                    <div className="mb-8">
+                        <h2 className="text-xl font-semibold mb-4">My Networks</h2>
+                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                            {networks
+                                .filter(network => {
+                                    if (!user) return false;
+                                    const ownerId = typeof network.owner === 'string' 
+                                        ? network.owner 
+                                        : network.owner._id;
+                                    return ownerId === user.id;
+                                })
+                                .map((network) => (
+                                    <div key={network._id} className="bg-white rounded-lg shadow-md overflow-hidden">
+                                        <div className="p-4">
+                                            <h2 className="text-xl font-bold mb-2">{network.name}</h2>
+                                            {network.description && (
+                                                <p className="text-gray-600 mb-4">{network.description}</p>
+                                            )}
+                                            <div className="flex items-center mb-4">
+                                                <span className={`px-2 py-1 rounded-full text-xs ${network.isPublic ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}>
+                                                    {network.isPublic ? 'Public' : 'Private'}
+                                                </span>
+                                                <span className="text-xs text-gray-500 ml-2">
+                                                    Created: {new Date(network.createdAt).toLocaleDateString()}
+                                                </span>
+                                            </div>
+                                            <div className="flex space-x-2">
+                                                <button
+                                                    className="flex-1 bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded"
+                                                    onClick={() => navigate(`/networks/${network._id}`)}
+                                                >
+                                                    View
+                                                </button>
+                                                <button
+                                                    className="flex-1 bg-red-500 hover:bg-red-700 text-white py-2 px-4 rounded"
+                                                    onClick={() => handleDeleteNetwork(network._id)}
+                                                >
+                                                    Delete
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                ))}
+                        </div>
+                        {networks.filter(network => {
+                            if (!user) return false;
+                            const ownerId = typeof network.owner === 'string' 
+                                ? network.owner 
+                                : network.owner._id;
+                            return ownerId === user.id;
+                        }).length === 0 && (
+                            <p className="text-gray-600 mb-4">You haven't created any networks yet.</p>
+                        )}
+                    </div>
+
+                    {/* Public Networks Section */}
+                    {networks.some(network => {
+                        if (!user) return false;
+                        const ownerId = typeof network.owner === 'string'
+                            ? network.owner
+                            : network.owner._id;
+                        return ownerId !== user.id;
+                    }) && (
+                        <div>
+                            <h2 className="text-xl font-semibold mb-4">Public Networks From Others</h2>
+                            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                                {networks
+                                    .filter(network => {
+                                        if (!user) return false;
+                                        const ownerId = typeof network.owner === 'string'
+                                            ? network.owner
+                                            : network.owner._id;
+                                        return ownerId !== user.id;
+                                    })
+                                    .map((network) => (
+                                        <div key={network._id} className="bg-white rounded-lg shadow-md overflow-hidden border-l-4 border-green-500">
+                                            <div className="p-4">
+                                                <h2 className="text-xl font-bold mb-2">{network.name}</h2>
+                                                {network.description && (
+                                                    <p className="text-gray-600 mb-4">{network.description}</p>
+                                                )}
+                                                <div className="flex items-center mb-4">
+                                                    <span className="px-2 py-1 rounded-full text-xs bg-green-100 text-green-800">
+                                                        Public
+                                                    </span>
+                                                    <span className="text-xs text-gray-500 ml-2">
+                                                        Created: {new Date(network.createdAt).toLocaleDateString()}
+                                                    </span>
+                                                    <span className="text-xs text-gray-500 ml-2">
+                                                        By: {typeof network.owner === 'string' 
+                                                            ? 'Unknown' 
+                                                            : network.owner.username}
+                                                    </span>
+                                                </div>
+                                                <div className="flex space-x-2">
+                                                    <button
+                                                        className="w-full bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded"
+                                                        onClick={() => navigate(`/networks/${network._id}`)}
+                                                    >
+                                                        View
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    ))}
                             </div>
                         </div>
-                    ))}
-                </div>
+                    )}
+                </>
             )}
         </div>
     );
diff --git a/src/controllers/network.controller.ts b/src/controllers/network.controller.ts
index 7b63746..ef825af 100644
--- a/src/controllers/network.controller.ts
+++ b/src/controllers/network.controller.ts
@@ -3,7 +3,7 @@ import Network from '../models/network.model';
 import { UserRequest } from '../types/express';
 import { validationResult } from 'express-validator';
 
-// Get all networks for current user
+// Get all networks for current user and all public networks
 export const getUserNetworks = async (req: UserRequest, res: Response): Promise<void> => {
     try {
         if (!req.user) {
@@ -11,7 +11,15 @@ export const getUserNetworks = async (req: UserRequest, res: Response): Promise<
             return;
         }
 
-        const networks = await Network.find({ owner: req.user._id });
+        // Find networks that either:
+        // 1. Belong to the current user, OR
+        // 2. Are public networks (created by any user)
+        const networks = await Network.find({
+            $or: [
+                { owner: req.user._id },
+                { isPublic: true }
+            ]
+        }).populate('owner', 'username _id'); // Populate owner field with username
 
         res.json({ success: true, data: networks });
     } catch (error) {
@@ -63,7 +71,7 @@ export const getNetwork = async (req: UserRequest, res: Response): Promise<void>
             return;
         }
 
-        const network = await Network.findById(networkId);
+        const network = await Network.findById(networkId).populate('owner', 'username _id');
 
         if (!network) {
             res.status(404).json({ message: 'Network not found' });
@@ -71,7 +79,7 @@ export const getNetwork = async (req: UserRequest, res: Response): Promise<void>
         }
 
         // Check if user is owner or network is public
-        if (network.owner.toString() !== req.user._id.toString() && !network.isPublic) {
+        if (network.owner._id.toString() !== req.user._id.toString() && !network.isPublic) {
             res.status(403).json({ message: 'You do not have permission to access this network' });
             return;
         }