Merge pull request #27 from OrdinalNews/fix/recent-news

Update recent news layout
OrdinalNews · Apr 4, 2023 · 6133181 · 6133181
2 parents e85433b + c4c6244
commit 6133181
Show file tree

Hide file tree

Showing 15 changed files with 346 additions and 223 deletions.
diff --git 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: <ViewNews />,
   },
   {
-    path: '/recent-news',
+    path: '/newest',
     element: <RecentNews />,
   },
 ]);

diff --git a/src/routes/post-news.tsx b/src/routes/post-news.tsx
@@ -132,10 +132,15 @@ export default function PostNews() {
   return (
     <>
       <Box
-        borderRadius="xl"
         display="flex"
         flexDir="column"
+        alignItems="center"
+        justifyContent="center"
+        textAlign="center"
         w="100%"
+        minH="100vh"
+        py={8}
+        px={4}
       >
         <Stack
           align={'center'}
@@ -234,7 +239,7 @@ export default function PostNews() {
           <ModalOverlay />
           <ModalContent>
             <ModalHeader>
-              <Heading>Ready to Inscribe</Heading>
+              <Heading>Ready to Inscribe!</Heading>
             </ModalHeader>
             <ModalCloseButton />
             <ModalBody
@@ -299,7 +304,7 @@ export default function PostNews() {
                   as={ChakraLink}
                   href="https://gamma.io/ordinals"
                   isExternal
-                  className="link-button"
+                  className="button-link-hack"
                   minW={['100%', '75%', 'fit-content']}
                   mb={[6, 6, 0]}
                 >
@@ -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
@@ -1,62 +1,65 @@
 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/');
 
 async function getRecentNews() {
   const result = await fetch(new URL(`/api/data/ord-news`, apiUrl).toString());
   if (result.ok) {
     const infoData: KVNamespaceListResult<unknown, string> = 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 (
-    <HStack
-      my={3}
-      alignItems="stretch"
+    <VStack
+      alignItems="flex-start"
+      w="100%"
+      maxW={1200}
+      py={4}
     >
-      <StatsCard
-        title={undefined}
-        stat={<Link to={`/view-news?id=${id}`}>{title}</Link>}
-      />
-      <StatsCard
-        title="News #"
-        stat="coming soon"
-      />
-      <StatsCard
-        title="Inscription #"
-        stat={number.toLocaleString()}
-      />
-      <StatsCard
-        title="Author"
-        stat={author ? author : 'anonymous'}
-      />
-      <StatsCard
-        title="Timestamp"
-        stat={new Date(timestamp).toLocaleString()}
-      />
-    </HStack>
+      <Heading
+        size="md"
+        textAlign="left"
+      >
+        <Link
+          className="link-wrap-hack"
+          to={`/view-news?id=${number}`}
+        >
+          {title}
+        </Link>
+      </Heading>
+      <HStack flexWrap="wrap">
+        <Text>{new Date(timestamp).toLocaleString()}</Text>
+        <Text>•</Text>
+        <Text>News # 005</Text>
+        <Text>•</Text>
+        <Text>Inscription # {number.toLocaleString()}</Text>
+        <Text>•</Text>
+        <Text>{author ? author : 'anonymous'}</Text>
+      </HStack>
+      <Divider />
+    </VStack>
   );
 }
 
@@ -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<unknown, string>) => 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 <Text>Loading...</Text>;
+    return (
+      <Box
+        display="flex"
+        flexDir="column"
+        alignItems="center"
+        justifyContent="center"
+        textAlign="left"
+        w="100%"
+        minH="100vh"
+        py={8}
+        px={4}
+      >
+        <Text>Loading...</Text>
+      </Box>
+    );
   }
 
   if (!newsList || !newsData) {
-    return <Text>Failed to load news.</Text>;
+    return (
+      <Box
+        display="flex"
+        flexDir="column"
+        alignItems="center"
+        justifyContent="center"
+        textAlign="left"
+        w="100%"
+        minH="100vh"
+        py={8}
+        px={4}
+      >
+        <Text>Failed to load news.</Text>
+      </Box>
+    );
   }
 
   return (
-    <>
+    <Box
+      display="flex"
+      flexDir="column"
+      alignItems="center"
+      justifyContent="center"
+      textAlign="left"
+      w="100%"
+      minH="100vh"
+      py={8}
+      px={4}
+    >
       <Heading>News Feed</Heading>
       <Text>
         Detected {newsList.length} news inscription{newsList.length > 1 ? 's' : null}
@@ -131,6 +175,6 @@ export default function RecentNews() {
             {...news}
           />
         ))}
-    </>
+    </Box>
   );
 }
diff --git 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 (
-    <Container borderRadius="xl">
+    <Box
+      display="flex"
+      flexDir="column"
+      alignItems="center"
+      justifyContent="center"
+      textAlign="center"
+      w="100%"
+      minH="100vh"
+      py={8}
+      px={4}
+    >
+      <Image
+        boxSize="150px"
+        margin="0 auto"
+        src="/ordinal-news-logo.png"
+        alt="Ordinal News Logo"
+        mb={4}
+      />
       <Heading>404 - not found!</Heading>
       <Text>We couldn't find that page.</Text>
       <br />
+      <Text>Current location: {location.pathname}</Text>
+      <br />
       <Text>
         Please try a different page or <Link to="/">click this link to return home.</Link>
       </Text>
-      <br />
-      <Text>Current location: {location.pathname}</Text>
-    </Container>
+    </Box>
   );
 }