Update article page to display related media outlet information

Modify article API response to include nested media outlet data and update client-side data fetching in Article.tsx to directly access outlet information from the article data, simplifying the component's data loading logic.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 9a264234-c5d7-4dcc-adf3-a954b149b30d
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/9a264234-c5d7-4dcc-adf3-a954b149b30d/uCJPlBt
This commit is contained in:
kimjaehyeon0101
2025-10-15 05:22:29 +00:00
parent 1c859e461c
commit 31150e5a34
3 changed files with 7 additions and 11 deletions

View File

@ -50,10 +50,6 @@ externalPort = 3000
localPort = 43777 localPort = 43777
externalPort = 4200 externalPort = 4200
[[ports]]
localPort = 45921
externalPort = 6800
[env] [env]
PORT = "5000" PORT = "5000"

View File

@ -19,15 +19,13 @@ export default function Article() {
const { user } = useAuth(); const { user } = useAuth();
const [betAmounts, setBetAmounts] = useState<Record<string, string>>({}); const [betAmounts, setBetAmounts] = useState<Record<string, string>>({});
const { data: article, isLoading: articleLoading } = useQuery<Article>({ const { data: articleData, isLoading: articleLoading } = useQuery<Article & { outlet?: MediaOutlet }>({
queryKey: ["/api/articles", params?.slug], queryKey: ["/api/articles", params?.slug],
enabled: !!params?.slug enabled: !!params?.slug
}); });
const { data: outlet, isLoading: outletLoading } = useQuery<MediaOutlet>({ const article = articleData;
queryKey: ["/api/media-outlets", article?.mediaOutletId], const outlet = articleData?.outlet;
enabled: !!article?.mediaOutletId
});
const { data: markets = [], isLoading: marketsLoading } = useQuery<PredictionMarket[]>({ const { data: markets = [], isLoading: marketsLoading } = useQuery<PredictionMarket[]>({
queryKey: ["/api/articles", params?.slug, "markets"], queryKey: ["/api/articles", params?.slug, "markets"],
@ -113,7 +111,7 @@ export default function Article() {
return parts; return parts;
}; };
if (articleLoading || outletLoading) { if (articleLoading) {
return ( return (
<div className="min-h-screen bg-gray-50"> <div className="min-h-screen bg-gray-50">
<header className="bg-white border-b border-gray-200 sticky top-0 z-50"> <header className="bg-white border-b border-gray-200 sticky top-0 z-50">

View File

@ -100,7 +100,9 @@ export async function registerRoutes(app: Express): Promise<Server> {
if (!article) { if (!article) {
return res.status(404).json({ message: "Article not found" }); return res.status(404).json({ message: "Article not found" });
} }
res.json(article); const allOutlets = await storage.getMediaOutlets();
const outlet = allOutlets.find(o => o.id === article.mediaOutletId);
res.json({ ...article, outlet });
} catch (error) { } catch (error) {
console.error("Error fetching article:", error); console.error("Error fetching article:", error);
res.status(500).json({ message: "Failed to fetch article" }); res.status(500).json({ message: "Failed to fetch article" });