From 1c859e461c6076220e2f514a261839c28406db54 Mon Sep 17 00:00:00 2001
From: kimjaehyeon0101 <47347352-kimjaehyeon0101@users.noreply.replit.com>
Date: Wed, 15 Oct 2025 05:08:23 +0000
Subject: [PATCH] Update article page to display the correct media outlet
 header

Modify the Article page component to dynamically fetch and display the header information of the associated media outlet, including its logo and name, by introducing a new API call to retrieve MediaOutlet data.

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
---
 .replit                      |  4 ++
 client/src/pages/Article.tsx | 83 +++++++++++++++++++++++++++---------
 2 files changed, 68 insertions(+), 19 deletions(-)

diff --git a/.replit b/.replit
index 8826cfc..1cda342 100644
--- a/.replit
+++ b/.replit
@@ -50,6 +50,10 @@ externalPort = 3000
 localPort = 43777
 externalPort = 4200
 
+[[ports]]
+localPort = 45921
+externalPort = 6800
+
 [env]
 PORT = "5000"
 
diff --git a/client/src/pages/Article.tsx b/client/src/pages/Article.tsx
index adb0e94..00887b8 100644
--- a/client/src/pages/Article.tsx
+++ b/client/src/pages/Article.tsx
@@ -5,16 +5,18 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
-import { TrendingUp, TrendingDown, DollarSign, Clock } from "lucide-react";
+import { TrendingUp, TrendingDown, DollarSign, Clock, IdCard } from "lucide-react";
 import { useToast } from "@/hooks/use-toast";
 import { apiRequest, queryClient } from "@/lib/queryClient";
 import Footer from "@/components/Footer";
-import type { Article, PredictionMarket } from "@shared/schema";
+import { useAuth } from "@/hooks/useAuth";
+import type { Article, PredictionMarket, MediaOutlet } from "@shared/schema";
 
 export default function Article() {
   const [, params] = useRoute("/articles/:slug");
   const [, setLocation] = useLocation();
   const { toast } = useToast();
+  const { user } = useAuth();
   const [betAmounts, setBetAmounts] = useState<Record<string, string>>({});
 
   const { data: article, isLoading: articleLoading } = useQuery<Article>({
@@ -22,6 +24,11 @@ export default function Article() {
     enabled: !!params?.slug
   });
 
+  const { data: outlet, isLoading: outletLoading } = useQuery<MediaOutlet>({
+    queryKey: ["/api/media-outlets", article?.mediaOutletId],
+    enabled: !!article?.mediaOutletId
+  });
+
   const { data: markets = [], isLoading: marketsLoading } = useQuery<PredictionMarket[]>({
     queryKey: ["/api/articles", params?.slug, "markets"],
     enabled: !!params?.slug
@@ -106,20 +113,17 @@ export default function Article() {
     return parts;
   };
 
-  if (articleLoading) {
+  if (articleLoading || outletLoading) {
     return (
       <div className="min-h-screen bg-gray-50">
         <header className="bg-white border-b border-gray-200 sticky top-0 z-50">
           <div className="max-w-7xl mx-auto px-6 py-4">
             <div className="flex items-center justify-between">
-              <div className="flex items-center">
-                <img 
-                  src="/attached_assets/logo_black_1759181850935.png" 
-                  alt="SAPIENS" 
-                  className="h-5 w-auto cursor-pointer"
-                  data-testid="logo-sapiens"
-                  onClick={() => setLocation("/")}
-                />
+              <div className="flex items-center space-x-4">
+                <div className="animate-pulse flex space-x-3">
+                  <div className="rounded-full bg-gray-300 h-10 w-10"></div>
+                  <div className="h-5 bg-gray-300 rounded w-24"></div>
+                </div>
               </div>
             </div>
           </div>
@@ -158,14 +162,55 @@ export default function Article() {
       <header className="bg-white border-b border-gray-200 sticky top-0 z-50">
         <div className="max-w-7xl mx-auto px-6 py-4">
           <div className="flex items-center justify-between">
-            <div className="flex items-center">
-              <img 
-                src="/attached_assets/logo_black_1759181850935.png" 
-                alt="SAPIENS" 
-                className="h-5 w-auto cursor-pointer"
-                data-testid="logo-sapiens"
-                onClick={() => setLocation("/")}
-              />
+            <div className="flex items-center space-x-4">
+              {outlet?.imageUrl ? (
+                <img 
+                  src={outlet.imageUrl} 
+                  alt={outlet.name} 
+                  className="w-10 h-10 rounded-full object-cover cursor-pointer"
+                  onClick={() => setLocation(`/media/${outlet.slug}`)}
+                  data-testid="img-outlet-profile"
+                />
+              ) : (
+                <div 
+                  className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center cursor-pointer"
+                  onClick={() => outlet && setLocation(`/media/${outlet.slug}`)}
+                  data-testid="img-outlet-profile-fallback"
+                >
+                  <span className="text-white font-bold text-lg">
+                    {outlet?.name.charAt(0)}
+                  </span>
+                </div>
+              )}
+              <div className="flex items-center space-x-3 cursor-pointer hover:opacity-80 transition-opacity" onClick={() => setLocation("/")}>
+                <img 
+                  src="/attached_assets/logo_black_1759162717640.png" 
+                  alt="SAPIENS" 
+                  className="h-5 w-auto"
+                  data-testid="logo-sapiens"
+                />
+                {outlet && (
+                  <div className="flex items-center space-x-2">
+                    <span className="text-base font-bold text-gray-900" data-testid="text-outlet-name-header">
+                      {outlet.name}
+                    </span>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setLocation(`/media/${outlet.slug}/report`);
+                      }}
+                      className="h-6 px-2 flex items-center gap-1 text-xs border-gray-300 hover:bg-gray-100"
+                      aria-label="View complete profile"
+                      data-testid="button-profile"
+                    >
+                      <IdCard className="h-3 w-3" />
+                      <span>About</span>
+                    </Button>
+                  </div>
+                )}
+              </div>
             </div>
           </div>
         </div>