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
This commit is contained in:
kimjaehyeon0101
@ -1,6 +1,4 @@
|
|||||||
import { useState } from "react";
|
|
||||||
import { useQuery } from "@tanstack/react-query";
|
import { useQuery } from "@tanstack/react-query";
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { Card, CardContent } from "@/components/ui/card";
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
import type { MediaOutlet } from "@shared/schema";
|
import type { MediaOutlet } from "@shared/schema";
|
||||||
import { useAuth } from "@/hooks/useAuth";
|
import { useAuth } from "@/hooks/useAuth";
|
||||||
@ -13,23 +11,9 @@ const categories = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
export default function MainContent() {
|
export default function MainContent() {
|
||||||
const [selectedCategory, setSelectedCategory] = useState("People");
|
|
||||||
const { user } = useAuth();
|
const { user } = useAuth();
|
||||||
|
|
||||||
const { data: mediaOutlets = [], isLoading } = useQuery<MediaOutlet[]>({
|
const { data: allOutlets = [], 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[]>({
|
|
||||||
queryKey: ["/api/media-outlets"],
|
queryKey: ["/api/media-outlets"],
|
||||||
queryFn: async () => {
|
queryFn: async () => {
|
||||||
const res = await fetch("/api/media-outlets", {
|
const res = await fetch("/api/media-outlets", {
|
||||||
@ -42,97 +26,111 @@ export default function MainContent() {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// Count outlets by category
|
// Group outlets by category
|
||||||
const getCategoryCount = (category: string) => {
|
const getOutletsByCategory = (category: string) => {
|
||||||
return allOutlets.filter(outlet =>
|
return allOutlets.filter(outlet =>
|
||||||
outlet.category.toLowerCase() === category.toLowerCase()
|
outlet.category.toLowerCase() === category.toLowerCase()
|
||||||
).length;
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const renderOutletCard = (outlet: MediaOutlet) => (
|
||||||
|
<Card
|
||||||
|
key={outlet.id}
|
||||||
|
className="hover:shadow-md transition-shadow cursor-pointer bg-white"
|
||||||
|
data-testid={`card-outlet-${outlet.id}`}
|
||||||
|
>
|
||||||
|
<CardContent className="p-4">
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<div className="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center overflow-hidden">
|
||||||
|
{outlet.imageUrl ? (
|
||||||
|
<img
|
||||||
|
src={outlet.imageUrl}
|
||||||
|
alt={outlet.name}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center">
|
||||||
|
<span className="text-gray-600 text-sm font-medium">
|
||||||
|
{outlet.name.charAt(0)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<h3 className="font-medium text-gray-900 truncate">
|
||||||
|
{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"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gray-50">
|
<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">
|
<div className="max-w-7xl mx-auto px-6 py-8">
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
<div className="space-y-12">
|
||||||
{Array.from({ length: 12 }).map((_, i) => (
|
{categories.map((category) => (
|
||||||
<Card key={i} className="animate-pulse">
|
<div key={category.id}>
|
||||||
<CardContent className="p-4">
|
<h2 className="text-2xl font-bold text-gray-900 mb-6">{category.name}</h2>
|
||||||
<div className="flex items-center space-x-3">
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
||||||
<div className="w-12 h-12 bg-gray-200 rounded-full"></div>
|
{Array.from({ length: 8 }).map((_, i) => (
|
||||||
<div className="flex-1">
|
<Card key={i} className="animate-pulse">
|
||||||
<div className="h-4 bg-gray-200 rounded mb-2"></div>
|
<CardContent className="p-4">
|
||||||
<div className="h-3 bg-gray-200 rounded w-2/3"></div>
|
<div className="flex items-center space-x-3">
|
||||||
</div>
|
<div className="w-12 h-12 bg-gray-200 rounded-full"></div>
|
||||||
</div>
|
<div className="flex-1">
|
||||||
</CardContent>
|
<div className="h-4 bg-gray-200 rounded mb-2"></div>
|
||||||
</Card>
|
<div className="h-3 bg-gray-200 rounded w-2/3"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
<div className="space-y-12">
|
||||||
{mediaOutlets.map((outlet) => (
|
{/* People Section */}
|
||||||
<Card
|
<div data-testid="section-people">
|
||||||
key={outlet.id}
|
<h2 className="text-2xl font-bold text-gray-900 mb-6">
|
||||||
className="hover:shadow-md transition-shadow cursor-pointer bg-white"
|
People
|
||||||
data-testid={`card-outlet-${outlet.id}`}
|
<span className="text-gray-400 text-lg ml-2">({getOutletsByCategory("People").length})</span>
|
||||||
>
|
</h2>
|
||||||
<CardContent className="p-4">
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
||||||
<div className="flex items-center space-x-3">
|
{getOutletsByCategory("People").map(renderOutletCard)}
|
||||||
<div className="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center overflow-hidden">
|
</div>
|
||||||
{outlet.imageUrl ? (
|
</div>
|
||||||
<img
|
|
||||||
src={outlet.imageUrl}
|
{/* Topics Section */}
|
||||||
alt={outlet.name}
|
<div data-testid="section-topics">
|
||||||
className="w-full h-full object-cover"
|
<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>
|
||||||
<div className="w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center">
|
</h2>
|
||||||
<span className="text-gray-600 text-sm font-medium">
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
||||||
{outlet.name.charAt(0)}
|
{getOutletsByCategory("Topics").map(renderOutletCard)}
|
||||||
</span>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
</div>
|
{/* Companies Section */}
|
||||||
<div className="flex-1 min-w-0">
|
<div data-testid="section-companies">
|
||||||
<h3 className="font-medium text-gray-900 truncate">
|
<h2 className="text-2xl font-bold text-gray-900 mb-6">
|
||||||
{outlet.name}
|
Companies
|
||||||
</h3>
|
<span className="text-gray-400 text-lg ml-2">({getOutletsByCategory("Companies").length})</span>
|
||||||
<p className="text-sm text-gray-500 truncate">
|
</h2>
|
||||||
{outlet.category === "people" && "Media Personality"}
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
||||||
{outlet.category === "topics" && "Industry Topic"}
|
{getOutletsByCategory("Companies").map(renderOutletCard)}
|
||||||
{outlet.category === "companies" && "Technology Company"}
|
</div>
|
||||||
</p>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user