finsignal-feed-explore 1.2.0 → 1.3.0

package/dist/NewsFeed.js

@@ -191,38 +191,86 @@ function formatTimeAgo(dateString) {
 export function FeedList({ feedType = 'trending', items: itemsProp, onItemClick, className = '', feedApiUrl = 'https://explore-gateway.changesandbox.ru', useMockData = false }) {
     const [items, setItems] = React.useState(itemsProp || mockFeedItems);
     const [loading, setLoading] = React.useState(false);
+    const [loadingMore, setLoadingMore] = React.useState(false);
     const [error, setError] = React.useState(null);
-    // Загрузка новостей с API
-    React.useEffect(() => {
+    const [cursor, setCursor] = React.useState(undefined);
+    const [hasMore, setHasMore] = React.useState(true);
+    const scrollContainerRef = React.useRef(null);
+    // Загрузка начальных новостей
+    const fetchNews = React.useCallback((...args_1) => __awaiter(this, [...args_1], void 0, function* (isInitial = true) {
+        var _a;
         if (useMockData || itemsProp) {
             setItems(itemsProp || mockFeedItems);
+            setHasMore(false);
             return;
         }
-        const fetchNews = () => __awaiter(this, void 0, void 0, function* () {
+        const currentCursor = isInitial ? undefined : cursor;
+        const limit = isInitial ? 20 : 20; // initialLoad: 20, pageSize: 20
+        if (isInitial) {
             setLoading(true);
-            setError(null);
-            try {
-                const response = yield fetch(`${feedApiUrl}/api/feed/${feedType}`);
-                if (!response.ok) {
-                    throw new Error(`HTTP error! status: ${response.status}`);
-                }
-                const data = yield response.json();
-                // Преобразуем данные из API в формат FeedItem
-                const newsItems = data.items || data;
-                setItems(newsItems);
+        }
+        else {
+            setLoadingMore(true);
+        }
+        setError(null);
+        try {
+            const url = new URL(`${feedApiUrl}/api/feed/${feedType}`);
+            if (currentCursor)
+                url.searchParams.append('cursor', currentCursor);
+            url.searchParams.append('limit', limit.toString());
+            const response = yield fetch(url.toString());
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
             }
-            catch (err) {
-                console.error('Error fetching news:', err);
-                setError(err instanceof Error ? err.message : 'Failed to fetch news');
-                // Fallback на моки при ошибке
+            const data = yield response.json();
+            // Формат ответа: { items: [], next_offset?: string }
+            const newsItems = data.items || data;
+            const nextOffset = (_a = data.next_offset) === null || _a === void 0 ? void 0 : _a.toString();
+            setItems(prev => isInitial ? newsItems : [...prev, ...newsItems]);
+            setCursor(nextOffset);
+            setHasMore(!!nextOffset);
+        }
+        catch (err) {
+            console.error('Error fetching news:', err);
+            setError(err instanceof Error ? err.message : 'Failed to fetch news');
+            // Fallback на моки при ошибке только для первой загрузки
+            if (isInitial) {
                 setItems(mockFeedItems);
+                setHasMore(false);
             }
-            finally {
-                setLoading(false);
-            }
-        });
-        fetchNews();
-    }, [feedApiUrl, feedType, useMockData, itemsProp]);
+        }
+        finally {
+            setLoading(false);
+            setLoadingMore(false);
+        }
+    }), [feedApiUrl, feedType, useMockData, itemsProp, cursor]);
+    // Начальная загрузка
+    React.useEffect(() => {
+        fetchNews(true);
+    }, [feedApiUrl, feedType, useMockData]);
+    // Infinite scroll: обработка скролла
+    const handleScroll = React.useCallback(() => {
+        if (!scrollContainerRef.current || !hasMore || loadingMore)
+            return;
+        const container = scrollContainerRef.current;
+        const scrollTop = container.scrollTop;
+        const scrollHeight = container.scrollHeight;
+        const clientHeight = container.clientHeight;
+        // Подгружаем когда осталось 70% до конца (prefetchThreshold: 0.7)
+        const scrollPercentage = (scrollTop + clientHeight) / scrollHeight;
+        if (scrollPercentage > 0.7) {
+            console.log('📜 Loading more news...');
+            fetchNews(false);
+        }
+    }, [hasMore, loadingMore, fetchNews]);
+    // Добавляем слушатель скролла
+    React.useEffect(() => {
+        const container = scrollContainerRef.current;
+        if (!container)
+            return;
+        container.addEventListener('scroll', handleScroll);
+        return () => container.removeEventListener('scroll', handleScroll);
+    }, [handleScroll]);
     const getTypeLabel = (type) => {
         const labels = {
             signal: 'Сигнал',
@@ -247,7 +295,7 @@ export function FeedList({ feedType = 'trending', items: itemsProp, onItemClick,
         };
         return colors[type] || colors.post;
     };
-    return (_jsxs("div", { className: `feed-list ${className}`, children: [loading && (_jsx("div", { style: {
+    return (_jsxs("div", { ref: scrollContainerRef, className: `feed-list ${className}`, style: Object.assign({ overflowY: 'auto', maxHeight: '100%' }, ((className === '') && { height: '100%' })), children: [loading && (_jsx("div", { style: {
                     textAlign: 'center',
                     padding: '20px',
                     color: '#6b7280',
@@ -270,5 +318,15 @@ export function FeedList({ feedType = 'trending', items: itemsProp, onItemClick,
                 }
                 // Для остальных типов оставляем обычный рендеринг
                 return (_jsxs("div", { className: "feed-item", onClick: () => onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item), children: [_jsxs("div", { className: "feed-item-header", children: [_jsx("span", { className: "feed-type-badge", style: { backgroundColor: getTypeColor(item.type) }, children: getTypeLabel(item.type) }), _jsx("span", { className: "feed-time", children: formatTimeAgo(item.created_at) })] }), item.title && _jsx("h3", { className: "feed-title", children: item.title }), item.body && _jsx("p", { className: "feed-body", children: item.body }), item.metadata.signal && (_jsxs("div", { className: "feed-signal-metrics", children: [_jsxs("div", { className: "signal-stock", children: [_jsx("span", { className: "signal-symbol", children: item.metadata.signal.symbol }), _jsx("span", { className: "signal-company", children: item.metadata.signal.companyName })] }), _jsxs("div", { className: "signal-prices", children: [_jsxs("div", { className: "signal-price-item", children: [_jsx("span", { className: "label", children: "Entry:" }), _jsx("span", { className: "value", children: item.metadata.signal.metrics.entry })] }), _jsxs("div", { className: "signal-price-item", children: [_jsx("span", { className: "label", children: "TP:" }), _jsx("span", { className: "value green", children: item.metadata.signal.metrics.takeProfit })] }), _jsxs("div", { className: "signal-price-item", children: [_jsx("span", { className: "label", children: "SL:" }), _jsx("span", { className: "value red", children: item.metadata.signal.metrics.stopLoss })] })] })] })), ((_c = item.metadata.news) === null || _c === void 0 ? void 0 : _c.stocks) && (_jsx("div", { className: "feed-stocks", children: item.metadata.news.stocks.map((stock, idx) => (_jsxs("div", { className: "stock-card", children: [_jsx("span", { className: "stock-symbol", children: stock.symbol }), _jsx("span", { className: "stock-price", children: stock.price }), _jsx("span", { className: `stock-change ${stock.changeType}`, children: stock.change })] }, idx))) })), ((_d = item.metadata.ai_categorization) === null || _d === void 0 ? void 0 : _d.tags) && (_jsx("div", { className: "feed-tags", children: item.metadata.ai_categorization.tags.map((tag, idx) => (_jsxs("span", { className: "feed-tag", children: ["#", tag] }, idx))) }))] }, item.content_id));
-            })] }));
+            }), loadingMore && (_jsx("div", { style: {
+                    textAlign: 'center',
+                    padding: '16px',
+                    color: '#6b7280',
+                    fontSize: '14px'
+                }, children: "\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430 \u0435\u0449\u0435..." })), !hasMore && !loading && items.length > 0 && (_jsx("div", { style: {
+                    textAlign: 'center',
+                    padding: '16px',
+                    color: '#9ca3af',
+                    fontSize: '12px'
+                }, children: "\u0412\u0441\u0435 \u043D\u043E\u0432\u043E\u0441\u0442\u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043D\u044B" }))] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "finsignal-feed-explore",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "News feed explorer components for React web applications",
   "main": "dist/index.js",
   "module": "dist/index.js",