news widget
This commit is contained in:
parent
f43388c377
commit
da34c32527
@ -1,7 +1,7 @@
|
|||||||
import { getServerSession } from "next-auth/next";
|
import { getServerSession } from "next-auth/next";
|
||||||
import { authOptions } from "@/app/api/auth/[...nextauth]/route";
|
import { authOptions } from "@/app/api/auth/[...nextauth]/route";
|
||||||
import { redirect } from "next/navigation";
|
import { redirect } from "next/navigation";
|
||||||
import { ObservatoryFrame } from "@/components/observatory/observatory-frame";
|
import { ObservatoryView } from "@/components/observatory/observatory-view";
|
||||||
|
|
||||||
export default async function Page() {
|
export default async function Page() {
|
||||||
const session = await getServerSession(authOptions);
|
const session = await getServerSession(authOptions);
|
||||||
@ -10,5 +10,5 @@ export default async function Page() {
|
|||||||
redirect("/signin");
|
redirect("/signin");
|
||||||
}
|
}
|
||||||
|
|
||||||
return <ObservatoryFrame />;
|
return <ObservatoryView />;
|
||||||
}
|
}
|
||||||
145
components/observatory/observatory-map.tsx
Normal file
145
components/observatory/observatory-map.tsx
Normal file
@ -0,0 +1,145 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect, useRef } from "react";
|
||||||
|
|
||||||
|
interface CountryData {
|
||||||
|
name: string;
|
||||||
|
count: number;
|
||||||
|
// In a real implementation, we would have coordinates
|
||||||
|
x?: number;
|
||||||
|
y?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ObservatoryMapProps {
|
||||||
|
countries: CountryData[];
|
||||||
|
onCountrySelect: (country: string) => void;
|
||||||
|
selectedCountry: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ObservatoryMap({
|
||||||
|
countries,
|
||||||
|
onCountrySelect,
|
||||||
|
selectedCountry
|
||||||
|
}: ObservatoryMapProps) {
|
||||||
|
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||||
|
|
||||||
|
// Draw the map and country markers
|
||||||
|
useEffect(() => {
|
||||||
|
const canvas = canvasRef.current;
|
||||||
|
if (!canvas) return;
|
||||||
|
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
if (!ctx) return;
|
||||||
|
|
||||||
|
// Set canvas dimensions
|
||||||
|
const updateCanvasDimensions = () => {
|
||||||
|
const parent = canvas.parentElement;
|
||||||
|
if (parent) {
|
||||||
|
canvas.width = parent.clientWidth;
|
||||||
|
canvas.height = parent.clientHeight;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
updateCanvasDimensions();
|
||||||
|
window.addEventListener('resize', updateCanvasDimensions);
|
||||||
|
|
||||||
|
// Clear canvas
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
// Draw world map background (simplified)
|
||||||
|
ctx.fillStyle = '#e0e0e0';
|
||||||
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
// Draw grid lines for better visualization
|
||||||
|
ctx.strokeStyle = '#ffffff';
|
||||||
|
ctx.lineWidth = 0.5;
|
||||||
|
|
||||||
|
// Horizontal grid lines
|
||||||
|
for (let y = 0; y < canvas.height; y += 30) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(0, y);
|
||||||
|
ctx.lineTo(canvas.width, y);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Vertical grid lines
|
||||||
|
for (let x = 0; x < canvas.width; x += 30) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(x, 0);
|
||||||
|
ctx.lineTo(x, canvas.height);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Draw country markers (in random positions)
|
||||||
|
countries.forEach((country, index) => {
|
||||||
|
// Generate random positions (in a real app, we would use actual coordinates)
|
||||||
|
const x = (index * 50 + 100) % (canvas.width - 50);
|
||||||
|
const y = 50 + Math.floor(index / 5) * 50;
|
||||||
|
|
||||||
|
// Draw marker
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(x, y, country.count > 5 ? 10 : (country.count > 2 ? 7 : 5), 0, Math.PI * 2);
|
||||||
|
|
||||||
|
// Highlight selected country
|
||||||
|
if (selectedCountry === country.name) {
|
||||||
|
ctx.fillStyle = '#3b82f6';
|
||||||
|
} else {
|
||||||
|
ctx.fillStyle = '#ef4444';
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.fill();
|
||||||
|
|
||||||
|
// Draw country name
|
||||||
|
ctx.fillStyle = '#000000';
|
||||||
|
ctx.font = '12px Arial';
|
||||||
|
ctx.fillText(country.name, x + 12, y + 4);
|
||||||
|
|
||||||
|
// Store coordinates for click detection
|
||||||
|
country.x = x;
|
||||||
|
country.y = y;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle click events
|
||||||
|
const handleClick = (e: MouseEvent) => {
|
||||||
|
const rect = canvas.getBoundingClientRect();
|
||||||
|
const x = e.clientX - rect.left;
|
||||||
|
const y = e.clientY - rect.top;
|
||||||
|
|
||||||
|
// Check if a country marker was clicked
|
||||||
|
for (const country of countries) {
|
||||||
|
if (country.x && country.y) {
|
||||||
|
const distance = Math.sqrt(
|
||||||
|
Math.pow(x - country.x, 2) + Math.pow(y - country.y, 2)
|
||||||
|
);
|
||||||
|
|
||||||
|
if (distance <= 10) {
|
||||||
|
onCountrySelect(country.name);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
canvas.addEventListener('click', handleClick);
|
||||||
|
|
||||||
|
// Cleanup
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('resize', updateCanvasDimensions);
|
||||||
|
canvas.removeEventListener('click', handleClick);
|
||||||
|
};
|
||||||
|
}, [countries, selectedCountry, onCountrySelect]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full h-full bg-gray-100 rounded-lg relative">
|
||||||
|
<canvas
|
||||||
|
ref={canvasRef}
|
||||||
|
className="w-full h-full rounded-lg"
|
||||||
|
/>
|
||||||
|
{countries.length === 0 && (
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center">
|
||||||
|
<p className="text-gray-500">No countries detected in the news</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
234
components/observatory/observatory-view.tsx
Normal file
234
components/observatory/observatory-view.tsx
Normal file
@ -0,0 +1,234 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import { RefreshCw, Globe } from "lucide-react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { ObservatoryMap } from "./observatory-map";
|
||||||
|
|
||||||
|
// News item interface matching the API response
|
||||||
|
interface NewsItem {
|
||||||
|
id: number;
|
||||||
|
title: string;
|
||||||
|
displayDate: string;
|
||||||
|
timestamp: string;
|
||||||
|
source: string;
|
||||||
|
description: string | null;
|
||||||
|
category: string | null;
|
||||||
|
url: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ObservatoryView() {
|
||||||
|
const [news, setNews] = useState<NewsItem[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [selectedCountry, setSelectedCountry] = useState<string | null>(null);
|
||||||
|
|
||||||
|
// Fetch news data
|
||||||
|
const fetchNews = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/news?limit=50');
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Failed to fetch news');
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
setNews(data);
|
||||||
|
setError(null);
|
||||||
|
} catch (err) {
|
||||||
|
setError('Failed to fetch news');
|
||||||
|
console.error('Error fetching news:', err);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Fetch news on component mount
|
||||||
|
useEffect(() => {
|
||||||
|
fetchNews();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Extract countries from news data (simplified version)
|
||||||
|
const extractCountries = (newsItems: NewsItem[]) => {
|
||||||
|
// This is a simplified implementation
|
||||||
|
// In a real app, we would use NLP or a more sophisticated technique
|
||||||
|
const countries = [
|
||||||
|
'France', 'USA', 'Canada', 'UK', 'Germany', 'Japan', 'China',
|
||||||
|
'India', 'Brazil', 'Australia', 'Russia', 'Italy', 'Spain'
|
||||||
|
];
|
||||||
|
|
||||||
|
const result: Record<string, NewsItem[]> = {};
|
||||||
|
|
||||||
|
newsItems.forEach(item => {
|
||||||
|
countries.forEach(country => {
|
||||||
|
if (
|
||||||
|
(item.title && item.title.includes(country)) ||
|
||||||
|
(item.description && item.description.includes(country))
|
||||||
|
) {
|
||||||
|
if (!result[country]) {
|
||||||
|
result[country] = [];
|
||||||
|
}
|
||||||
|
result[country].push(item);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Handle country selection on the map
|
||||||
|
const handleCountrySelect = (country: string) => {
|
||||||
|
setSelectedCountry(selectedCountry === country ? null : country);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Get news filtered by selected country
|
||||||
|
const getFilteredNews = () => {
|
||||||
|
if (!selectedCountry) return news;
|
||||||
|
|
||||||
|
const countriesMap = extractCountries(news);
|
||||||
|
return countriesMap[selectedCountry] || [];
|
||||||
|
};
|
||||||
|
|
||||||
|
// Loading state
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="w-full h-[calc(100vh-8rem)] flex items-center justify-center">
|
||||||
|
<RefreshCw className="h-10 w-10 animate-spin text-gray-400" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Error state
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div className="w-full h-[calc(100vh-8rem)] flex flex-col items-center justify-center">
|
||||||
|
<p className="text-red-500 mb-4">{error}</p>
|
||||||
|
<Button onClick={fetchNews}>Retry</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const filteredNews = getFilteredNews();
|
||||||
|
const countriesMap = extractCountries(news);
|
||||||
|
const countries = Object.keys(countriesMap);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="container mx-auto px-4 py-8">
|
||||||
|
<div className="flex flex-col space-y-6">
|
||||||
|
<Card className="bg-white/95 backdrop-blur-sm border-0 shadow-lg">
|
||||||
|
<CardHeader className="pb-2 border-b border-gray-100">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<CardTitle className="text-2xl font-semibold text-gray-800 flex items-center gap-2">
|
||||||
|
<Globe className="h-6 w-6 text-gray-600" />
|
||||||
|
News Observatory
|
||||||
|
</CardTitle>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={fetchNews}
|
||||||
|
className="h-8 px-2 rounded-full"
|
||||||
|
>
|
||||||
|
<RefreshCw className="h-4 w-4 mr-2" />
|
||||||
|
Refresh
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||||
|
{/* News Feed Section */}
|
||||||
|
<div className="lg:col-span-2">
|
||||||
|
<Card className="bg-white/95 backdrop-blur-sm border-0 shadow-lg h-full">
|
||||||
|
<CardHeader className="pb-2 border-b border-gray-100">
|
||||||
|
<CardTitle className="text-lg font-semibold text-gray-800">
|
||||||
|
{selectedCountry ? `News about ${selectedCountry}` : 'Latest News'}
|
||||||
|
<span className="text-sm font-normal ml-2 text-gray-500">
|
||||||
|
({filteredNews.length} articles)
|
||||||
|
</span>
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="p-4">
|
||||||
|
<div className="space-y-4 max-h-[calc(100vh-20rem)] overflow-y-auto pr-2">
|
||||||
|
{filteredNews.length === 0 ? (
|
||||||
|
<p className="text-gray-500 text-center py-10">No news available</p>
|
||||||
|
) : (
|
||||||
|
filteredNews.map(item => (
|
||||||
|
<div
|
||||||
|
key={item.id}
|
||||||
|
className="p-4 rounded-lg bg-white shadow-sm hover:shadow-md transition-all duration-200"
|
||||||
|
onClick={() => window.open(item.url, '_blank')}
|
||||||
|
>
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<div className="flex items-center justify-between text-xs">
|
||||||
|
<span className="text-gray-500">{item.displayDate}</span>
|
||||||
|
<span className="text-gray-500">{item.source}</span>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-md font-medium text-gray-800" title={item.title}>
|
||||||
|
{item.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-gray-600 mt-1">
|
||||||
|
{item.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Map Section */}
|
||||||
|
<div className="lg:col-span-1">
|
||||||
|
<Card className="bg-white/95 backdrop-blur-sm border-0 shadow-lg h-full">
|
||||||
|
<CardHeader className="pb-2 border-b border-gray-100">
|
||||||
|
<CardTitle className="text-lg font-semibold text-gray-800">
|
||||||
|
World Map
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="p-4">
|
||||||
|
{/* Map Placeholder */}
|
||||||
|
<div
|
||||||
|
className="bg-gray-100 rounded-lg h-[300px] mb-4"
|
||||||
|
>
|
||||||
|
<ObservatoryMap
|
||||||
|
countries={Object.entries(countriesMap).map(([name, items]) => ({
|
||||||
|
name,
|
||||||
|
count: items.length
|
||||||
|
}))}
|
||||||
|
onCountrySelect={handleCountrySelect}
|
||||||
|
selectedCountry={selectedCountry}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Countries List */}
|
||||||
|
<div className="mt-4">
|
||||||
|
<h4 className="text-md font-medium mb-2">Mentioned Countries:</h4>
|
||||||
|
{countries.length === 0 ? (
|
||||||
|
<p className="text-gray-500">No countries detected</p>
|
||||||
|
) : (
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{countries.map(country => (
|
||||||
|
<Button
|
||||||
|
key={country}
|
||||||
|
variant={selectedCountry === country ? "default" : "outline"}
|
||||||
|
size="sm"
|
||||||
|
onClick={() => handleCountrySelect(country)}
|
||||||
|
className="text-xs"
|
||||||
|
>
|
||||||
|
{country} ({countriesMap[country].length})
|
||||||
|
</Button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user