diff --git a/src/App.tsx b/src/App.tsx index 96e9563..0885495 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,12 +1,11 @@ import { ChakraProvider } from '@chakra-ui/react'; import { createBrowserRouter, RouterProvider } from 'react-router-dom'; -import './style/App.css'; -import './style/index.css'; import Root404 from './routes/root-404'; import RootIndex from './routes/root-index'; import PostNews from './routes/post-news'; import ViewNews from './routes/view-news'; import theme from './style/theme'; +import './style/app.css'; import RecentNews from './routes/recent-news'; const router = createBrowserRouter([ @@ -24,7 +23,7 @@ const router = createBrowserRouter([ element: , }, { - path: '/recent-news', + path: '/newest', element: , }, ]); diff --git a/src/routes/post-news.tsx b/src/routes/post-news.tsx index c06088e..6e1aeff 100644 --- a/src/routes/post-news.tsx +++ b/src/routes/post-news.tsx @@ -132,10 +132,15 @@ export default function PostNews() { return ( <> - Ready to Inscribe + Ready to Inscribe! @@ -310,7 +315,7 @@ export default function PostNews() { as={ChakraLink} href="https://ordinalsbot.com/" isExternal - className="link-button" + className="button-link-hack" minW={['100%', '75%', 'fit-content']} mb={[6, 6, 0]} > @@ -321,7 +326,7 @@ export default function PostNews() { as={ChakraLink} href="https://ordimint.com" isExternal - className="link-button" + className="button-link-hack" minW={['100%', '75%', 'fit-content']} mb={[6, 6, 0]} > @@ -332,7 +337,7 @@ export default function PostNews() { as={ChakraLink} href="https://unisat.io/inscribe" isExternal - className="link-button" + className="button-link-hack" minW={['100%', '75%', 'fit-content']} > UniSat diff --git a/src/routes/recent-news.tsx b/src/routes/recent-news.tsx index beda3fe..0c3b2d8 100644 --- a/src/routes/recent-news.tsx +++ b/src/routes/recent-news.tsx @@ -1,9 +1,8 @@ import { useEffect, useState } from 'react'; -import { Heading, HStack, Text } from '@chakra-ui/react'; -import { KVNamespaceListResult } from '@cloudflare/workers-types'; +import { Box, Divider, Heading, HStack, Text, VStack, Wrap, WrapItem } from '@chakra-ui/react'; +import { KVNamespaceListKey, KVNamespaceListResult } from '@cloudflare/workers-types'; import { InscriptionMeta, OrdinalNews } from '../../lib/api-types'; import { Link } from 'react-router-dom'; -import StatsCard from '../components/stats-card'; const apiUrl = new URL('https://inscribe.news/'); @@ -11,52 +10,56 @@ async function getRecentNews() { const result = await fetch(new URL(`/api/data/ord-news`, apiUrl).toString()); if (result.ok) { const infoData: KVNamespaceListResult = await result.json(); + console.log(`getRecentNews: found ${infoData.keys.length} news items from API`); return infoData; } - console.log(`getRecentNews: ${result.status}`); + console.log(`getRecentNews: ${result.status} ${result.statusText}`); return undefined; } async function getNewsData(id: string) { const news = await fetch(new URL(`/api/data/${id}`, apiUrl).toString()); if (news.ok) { - console.log(`news: ${typeof news}`); - console.log(`news: ${JSON.stringify(news)}`); + //console.log(`news: ${typeof news}`); + //console.log(`news: ${JSON.stringify(news)}`); const newsData: InscriptionMeta & OrdinalNews = await news.json(); return newsData; } - console.log(`getNewsData: ${news.status}`); + console.log(`getNewsData: ${news.status} ${news.statusText}`); return undefined; } function NewsItem(props: InscriptionMeta & OrdinalNews) { - const { id, number, timestamp, title, author } = props; + const { number, timestamp, title, author } = props; return ( - - {title}} - /> - - - - - + + + {title} + + + + {new Date(timestamp).toLocaleString()} + • + News # 005 + • + Inscription # {number.toLocaleString()} + • + {author ? author : 'anonymous'} + + + ); } @@ -71,8 +74,7 @@ export default function RecentNews() { getRecentNews() .then(data => { if (data) { - const newsList = data.keys.map((key: any) => key.name); - //console.log(`newsList: ${JSON.stringify(newsList)}`); + const newsList = data.keys.map((key: KVNamespaceListKey) => key.name); setNewsList(newsList); } }) @@ -84,37 +86,79 @@ export default function RecentNews() { useEffect(() => { if (newsList && newsList.length > 0) { + const processedNewsIds = new Set(); for (const newsId of newsList) { - getNewsData(newsId) - .then(data => { - if (data) { - setNewsData(prev => { - if (prev) { - return [...prev, data]; - } - return [data]; - }); - } - setLoading(false); - }) - .catch(err => { - console.log(`getNewsData: ${err}`); - setLoading(false); - }); + if (!processedNewsIds.has(newsId)) { + processedNewsIds.add(newsId); + getNewsData(newsId) + .then(data => { + if (data) { + setNewsData(prev => { + if (prev) { + return [...prev, data]; + } + return [data]; + }); + } + setLoading(false); + }) + .catch(err => { + console.log(`getNewsData: ${err}`); + setLoading(false); + }); + } } } }, [newsList]); if (loading) { - return Loading...; + return ( + + Loading... + + ); } if (!newsList || !newsData) { - return Failed to load news.; + return ( + + Failed to load news. + + ); } return ( - <> + News Feed Detected {newsList.length} news inscription{newsList.length > 1 ? 's' : null} @@ -131,6 +175,6 @@ export default function RecentNews() { {...news} /> ))} - + ); } diff --git a/src/routes/root-404.tsx b/src/routes/root-404.tsx index 8c051a3..ec1db5c 100644 --- a/src/routes/root-404.tsx +++ b/src/routes/root-404.tsx @@ -1,18 +1,35 @@ -import { Container, Heading, Text } from '@chakra-ui/react'; +import { Box, Container, Heading, Image, Text } from '@chakra-ui/react'; import { Link, useLocation } from 'react-router-dom'; export default function Root404() { const location = useLocation(); return ( - + + Ordinal News Logo 404 - not found! We couldn't find that page.
+ Current location: {location.pathname} +
Please try a different page or click this link to return home. -
- Current location: {location.pathname} - + ); } diff --git a/src/routes/root-index.tsx b/src/routes/root-index.tsx index 1490519..e10ad9d 100644 --- a/src/routes/root-index.tsx +++ b/src/routes/root-index.tsx @@ -1,18 +1,25 @@ -import { Box, Heading, Text, Link as ChakraLink, Image, Button } from '@chakra-ui/react'; +import { Box, Heading, Text, Link as ChakraLink, Image, Button, Stack } from '@chakra-ui/react'; import { Link } from 'react-router-dom'; export default function RootIndex() { return ( Ordinal News Logo Ordinal News Standard Permanently inscribe news and topics of discussion to Bitcoin. - - + ); } diff --git a/src/routes/view-news.tsx b/src/routes/view-news.tsx index d11aeb4..f81df92 100644 --- a/src/routes/view-news.tsx +++ b/src/routes/view-news.tsx @@ -77,32 +77,62 @@ export default function ViewNews() { if (!id) { return ( - + No Inscription ID Unable to load news inscription. Please provide the ID as a query parameter, or Click this link to return home. - + ); } if (loading) { return ( - + Loading inscription data... ID: {id} - + ); } if (!data || !news) { return ( - + Unable to Load Unable to load news inscription. ID: {id} Click this link to return home. - + ); } @@ -113,6 +143,7 @@ export default function ViewNews() { textAlign="left" minH="100vh" maxW="800px" + pt={8} > {news.title}