fix: sort data feed articles by date descending (#106)

* feat(ui): sorted Newsletter Publications by created date desc

* fix(ui): fixed bug with Article Table Keyword elements not have unique key

* chore: resolved react node dep mismatch and added @cloudscape-design/chat-components

* fix(ui): added missing loader to Newsletter publications table

Author: flamingquaks

lib/user-interface/genai-newsletter-ui/src/components/data-feeds/article-table.tsx

@@ -53,9 +53,16 @@ export default function DataFeedArticleTable () {
       return
     }
     if (result.data.listArticles?.items !== null) {
-      setArticles(result.data.listArticles?.items as Article[])
+      const sortedArticles = [...(result.data.listArticles?.items as Article[])]
+        .sort((a, b) => {
+          const dateA = new Date(a.createdAt ?? 0);
+          const dateB = new Date(b.createdAt ?? 0);
+          return dateB.getTime() - dateA.getTime();
+        });
+      setArticles(sortedArticles);
     }
 
+
     setLoading(false)
   }, [appContext, dataFeedId])
 
@@ -101,7 +108,6 @@ export default function DataFeedArticleTable () {
     if (flagArticle !== null && flagArticle == 'true' && articleId !== null) {
       setLoading(true)
       try {
-        console.log('TRIGGER')
         flagDataFeedArticle(articleId, true)
       } catch (error) {
         console.log(error)

lib/user-interface/genai-newsletter-ui/src/components/newsletters/definitions.tsx

@@ -105,9 +105,9 @@ export const ArticlesTableColumnDefinition = (
     {
       id: 'keywords',
       cell: (item: Article) => (
-        <SpaceBetween size="xs" direction="horizontal">
+        <SpaceBetween key={'keywords-'+item.keywords+'spacer'} size="xs" direction="horizontal">
           {item.keywords?.split(',').map((keyword: string) => {
-            return <Badge color="blue">{keyword}</Badge>
+            return <Badge key={'keywords-' + item.keywords + '-' + keyword} color="blue">{keyword}</Badge>
           })}
         </SpaceBetween>
       ),

lib/user-interface/genai-newsletter-ui/src/components/newsletters/publications-table.tsx

@@ -8,21 +8,25 @@ import { AppContext } from '../../common/app-context'
 import { useParams } from 'react-router-dom'
 import { Publication } from '../../../../../shared/api/API'
 import {
+  Box,
   Button,
   Container,
   ExpandableSection,
-  SpaceBetween
+  SpaceBetween,
 } from '@cloudscape-design/components'
+import { LoadingBar } from '@cloudscape-design/chat-components'
 import { listPublications } from '../../../../../shared/api/graphql/queries'
 import { generateAuthorizedClient } from '../../common/helpers'
 import Newsletter from './newsletter'
 
-export default function PublicationsTable () {
+export default function PublicationsTable() {
   const appContext = useContext(AppContext)
   const { newsletterId } = useParams()
   const [publications, setPublications] = useState<Publication[]>([])
+  const [publicationsLoading, setPublicationsLoading] = useState<boolean>(true)
 
   const getPublications = useCallback(async () => {
+    setPublicationsLoading(true)
     if (!appContext) {
       return
     }
@@ -37,65 +41,80 @@ export default function PublicationsTable () {
           id: newsletterId
         }
       }
-    })
+    });
 
     if (result.errors) {
-      console.error(result.errors)
+      console.error(result.errors);
     } else {
-      setPublications([
-        ...(result.data.listPublications?.items as Publication[])
-      ])
+      const sortedPublications = [...(result.data.listPublications?.items as Publication[])]
+        .sort((a, b) => {
+          const dateA = new Date(a.createdAt ?? 0);
+          const dateB = new Date(b.createdAt ?? 0);
+          return dateB.getTime() - dateA.getTime();
+        });
+      setPublications(sortedPublications);
+      setPublicationsLoading(false)
     }
+
   }, [appContext, newsletterId])
 
   useEffect(() => {
     getPublications()
   }, [getPublications])
   return (
     <SpaceBetween direction="vertical" size="m">
-      {publications.length > 0 ? (
-        publications.map((publication) => {
-          if (publication.filePath) {
-            return (
-              <ExpandableSection
-                key={'newsletterPublicationSection' + publication.id}
-                headerText={publication.createdAt}
-                headerActions={
-                  publication.filePath !== null &&
-                  publication.filePath !== undefined &&
-                  publication.filePath.length > 0 ? (
-                    <SpaceBetween size="s" direction="horizontal">
-                      <Button
-                        onClick={() => {
-                          window.open(
-                            (publication.filePath + '.html') as string,
-                            '_blank'
-                          )
-                        }}
-                      >
-                        Open in a New Window
-                      </Button>
-                    </SpaceBetween>
-                  ) : (
-                    <></>
-                  )
-                }
-                variant="stacked"
-              >
-                <Container>
-                  <Newsletter
-                    filePath={publication.filePath}
-                    key={`rendered-newsletter-${publication.id}`}
-                  />
-                </Container>
-              </ExpandableSection>
-            )
-          } else {
-            return <></>
-          }
-        })
+      {publicationsLoading ? (
+        <SpaceBetween direction='vertical' size='m'>
+          <Box margin={{ bottom: "xs", left: "l"}}>
+            Loading Newsletter Publications
+          </Box>
+          <LoadingBar variant='gen-ai' />
+        </SpaceBetween>
       ) : (
-        <p>No Publications Available</p>
+        publications.length > 0 ? (
+          publications.map((publication) => {
+            if (publication.filePath) {
+              return (
+                <ExpandableSection
+                  key={'newsletterPublicationSection' + publication.id}
+                  headerText={publication.createdAt}
+                  headerActions={
+                    publication.filePath !== null &&
+                      publication.filePath !== undefined &&
+                      publication.filePath.length > 0 ? (
+                      <SpaceBetween size="s" direction="horizontal">
+                        <Button
+                          onClick={() => {
+                            window.open(
+                              (publication.filePath + '.html') as string,
+                              '_blank'
+                            )
+                          }}
+                        >
+                          Open in a New Window
+                        </Button>
+                      </SpaceBetween>
+                    ) : (
+                      <></>
+                    )
+                  }
+                  variant="stacked"
+                >
+                  <Container>
+                    <Newsletter
+                      filePath={publication.filePath}
+                      key={`rendered-newsletter-${publication.id}`}
+                    />
+                  </Container>
+                </ExpandableSection>
+              )
+            } else {
+              return <></>
+            }
+          })
+        ) : (
+          <p>No Publications Available</p>
+        )
       )}
     </SpaceBetween>
   )