Update the platform to display people, topics, and companies directly on the home page

Replaces the previous navigation bar with a direct display of People, Topics, and Companies on the homepage. Refetches and updates the media outlet data with the provided lists, replacing the previous dataset.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 069d4324-6c40-4355-955e-c714a50de1ea
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/069d4324-6c40-4355-955e-c714a50de1ea/LZrXNFV

client/src/components/MainContent.tsx

@@ -1,6 +1,4 @@
-import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
-import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import type { MediaOutlet } from "@shared/schema";
 import { useAuth } from "@/hooks/useAuth";
@@ -13,23 +11,9 @@ const categories = [
 ];
 
 export default function MainContent() {
-  const [selectedCategory, setSelectedCategory] = useState("People");
   const { user } = useAuth();
 
-  const { data: mediaOutlets = [], isLoading } = useQuery<MediaOutlet[]>({
-    queryKey: ["/api/media-outlets", selectedCategory],
-    queryFn: async () => {
-      const res = await fetch(`/api/media-outlets?category=${selectedCategory}`, {
-        credentials: "include",
-      });
-      if (!res.ok) {
-        throw new Error(`${res.status}: ${res.statusText}`);
-      }
-      return res.json();
-    },
-  });
-
-  const { data: allOutlets = [] } = useQuery<MediaOutlet[]>({
+  const { data: allOutlets = [], isLoading } = useQuery<MediaOutlet[]>({
     queryKey: ["/api/media-outlets"],
     queryFn: async () => {
       const res = await fetch("/api/media-outlets", {
@@ -42,61 +26,14 @@ export default function MainContent() {
     },
   });
 
-  // Count outlets by category
-  const getCategoryCount = (category: string) => {
+  // Group outlets by category
+  const getOutletsByCategory = (category: string) => {
     return allOutlets.filter(outlet => 
       outlet.category.toLowerCase() === category.toLowerCase()
-    ).length;
+    );
   };
 
-  return (
-    <div className="min-h-screen bg-gray-50">
-      {/* Category Tabs */}
-      <div className="bg-white border-b">
-        <div className="max-w-7xl mx-auto px-6">
-          <div className="flex space-x-0">
-            {categories.map((category) => (
-              <button
-                key={category.id}
-                onClick={() => setSelectedCategory(category.key)}
-                className={`px-8 py-4 text-sm font-medium border-b-2 transition-colors ${
-                  selectedCategory === category.key
-                    ? "border-blue-500 text-blue-600"
-                    : "border-transparent text-gray-500 hover:text-gray-700"
-                }`}
-                data-testid={`tab-${category.id}`}
-              >
-                {category.name} 
-                <span className="ml-2 text-gray-400">
-                  {getCategoryCount(category.key)}
-                </span>
-              </button>
-            ))}
-          </div>
-        </div>
-      </div>
-
-      {/* Media Outlets Grid */}
-      <div className="max-w-7xl mx-auto px-6 py-8">
-        {isLoading ? (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            {Array.from({ length: 12 }).map((_, i) => (
-              <Card key={i} className="animate-pulse">
-                <CardContent className="p-4">
-                  <div className="flex items-center space-x-3">
-                    <div className="w-12 h-12 bg-gray-200 rounded-full"></div>
-                    <div className="flex-1">
-                      <div className="h-4 bg-gray-200 rounded mb-2"></div>
-                      <div className="h-3 bg-gray-200 rounded w-2/3"></div>
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-            ))}
-          </div>
-        ) : (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            {mediaOutlets.map((outlet) => (
+  const renderOutletCard = (outlet: MediaOutlet) => (
     <Card 
       key={outlet.id} 
       className="hover:shadow-md transition-shadow cursor-pointer bg-white"
@@ -124,16 +61,77 @@ export default function MainContent() {
               {outlet.name}
             </h3>
             <p className="text-sm text-gray-500 truncate">
-                        {outlet.category === "people" && "Media Personality"}
-                        {outlet.category === "topics" && "Industry Topic"}  
-                        {outlet.category === "companies" && "Technology Company"}
+              {outlet.category === "People" && "Media Personality"}
+              {outlet.category === "Topics" && "Industry Topic"}  
+              {outlet.category === "Companies" && "Technology Company"}
             </p>
           </div>
         </div>
       </CardContent>
     </Card>
+  );
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="max-w-7xl mx-auto px-6 py-8">
+        {isLoading ? (
+          <div className="space-y-12">
+            {categories.map((category) => (
+              <div key={category.id}>
+                <h2 className="text-2xl font-bold text-gray-900 mb-6">{category.name}</h2>
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+                  {Array.from({ length: 8 }).map((_, i) => (
+                    <Card key={i} className="animate-pulse">
+                      <CardContent className="p-4">
+                        <div className="flex items-center space-x-3">
+                          <div className="w-12 h-12 bg-gray-200 rounded-full"></div>
+                          <div className="flex-1">
+                            <div className="h-4 bg-gray-200 rounded mb-2"></div>
+                            <div className="h-3 bg-gray-200 rounded w-2/3"></div>
+                          </div>
+                        </div>
+                      </CardContent>
+                    </Card>
                   ))}
                 </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="space-y-12">
+            {/* People Section */}
+            <div data-testid="section-people">
+              <h2 className="text-2xl font-bold text-gray-900 mb-6">
+                People 
+                <span className="text-gray-400 text-lg ml-2">({getOutletsByCategory("People").length})</span>
+              </h2>
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+                {getOutletsByCategory("People").map(renderOutletCard)}
+              </div>
+            </div>
+
+            {/* Topics Section */}
+            <div data-testid="section-topics">
+              <h2 className="text-2xl font-bold text-gray-900 mb-6">
+                Topics 
+                <span className="text-gray-400 text-lg ml-2">({getOutletsByCategory("Topics").length})</span>
+              </h2>
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+                {getOutletsByCategory("Topics").map(renderOutletCard)}
+              </div>
+            </div>
+
+            {/* Companies Section */}
+            <div data-testid="section-companies">
+              <h2 className="text-2xl font-bold text-gray-900 mb-6">
+                Companies 
+                <span className="text-gray-400 text-lg ml-2">({getOutletsByCategory("Companies").length})</span>
+              </h2>
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+                {getOutletsByCategory("Companies").map(renderOutletCard)}
+              </div>
+            </div>
+          </div>
         )}
       </div>