From e2a202c69746221b1d4f6fad3326e5c6e19d48cc Mon Sep 17 00:00:00 2001 From: austinkelsay Date: Mon, 2 Sep 2024 16:24:18 -0500 Subject: [PATCH] stackernews feed is working --- src/pages/api/stackernews.js | 16 +++++-- src/pages/feed/global.js | 83 ++++++++++++++++++++++++-------- src/pages/feed/stackernews.js | 90 +++++++++++++++++++++++++---------- 3 files changed, 139 insertions(+), 50 deletions(-) diff --git a/src/pages/api/stackernews.js b/src/pages/api/stackernews.js index f313bf7..aa1b575 100644 --- a/src/pages/api/stackernews.js +++ b/src/pages/api/stackernews.js @@ -4,10 +4,11 @@ export default async function handler(req, res) { try { const response = await axios.post('https://stacker.news/api/graphql', { query: ` - query RecentItems { + query RecentDevItemsWithComments { items( - limit: 10, - sort: "NEW" + sub: "devs", + sort: "NEW", + limit: 10 ) { items { id @@ -18,6 +19,15 @@ export default async function handler(req, res) { name } sats + comments { + id + text + createdAt + user { + name + } + sats + } } } } diff --git a/src/pages/feed/global.js b/src/pages/feed/global.js index bf03947..8f046dc 100644 --- a/src/pages/feed/global.js +++ b/src/pages/feed/global.js @@ -1,17 +1,32 @@ -import React, { useState, useEffect } from 'react'; +import React from 'react'; import { Card } from 'primereact/card'; import { Avatar } from 'primereact/avatar'; import { Tag } from 'primereact/tag'; import { Button } from 'primereact/button'; import { ProgressSpinner } from 'primereact/progressspinner'; import { useDiscordQuery } from '@/hooks/communityQueries/useDiscordQuery'; +import { useQuery } from '@tanstack/react-query'; +import axios from 'axios'; import { useRouter } from 'next/router'; +const StackerNewsIconComponent = () => ( + + + + +); + +const fetchStackerNews = async () => { + const response = await axios.get('/api/stackernews'); + return response.data.data.items.items; +}; + const GlobalFeed = () => { const router = useRouter(); - const { data, error, isLoading } = useDiscordQuery({page: router.query.page}); + const { data: discordData, error: discordError, isLoading: discordLoading } = useDiscordQuery({page: router.query.page}); + const { data: stackerNewsData, error: stackerNewsError, isLoading: stackerNewsLoading } = useQuery({queryKey: ['stackerNews'], queryFn: fetchStackerNews}); - if (isLoading) { + if (discordLoading || stackerNewsLoading) { return (
@@ -19,37 +34,54 @@ const GlobalFeed = () => { ); } - if (error) { - return
Failed to load messages. Please try again later.
; + if (discordError || stackerNewsError) { + return
Failed to load feed. Please try again later.
; } - const header = (message) => ( + const combinedFeed = [ + ...(discordData || []).map(item => ({ ...item, type: 'discord' })), + ...(stackerNewsData || []).map(item => ({ ...item, type: 'stackernews' })) + ].sort((a, b) => new Date(b.timestamp || b.createdAt) - new Date(a.timestamp || a.createdAt)); + + const header = (item) => (
- -

{message.author}

+ +

{item.type === 'discord' ? item.author : item.user.name}

- - + {item.type === 'discord' ? ( + <> + + + + ) : ( + <> + + } value="stackernews" className="w-fit bg-gray-600 text-[#f8f8ff] max-sidebar:mt-1" /> + + )}
); - const footer = (message) => ( + const footer = (item) => (
- {new Date(message.timestamp).toLocaleString()} + {new Date(item.timestamp || item.createdAt).toLocaleString()}
); @@ -57,19 +89,28 @@ const GlobalFeed = () => { return (
- {data && data.length > 0 ? ( - data.map(message => ( + {combinedFeed.length > 0 ? ( + combinedFeed.map(item => ( header(message)} - footer={() => footer(message)} + key={item.id} + header={() => header(item)} + footer={() => footer(item)} className="w-full bg-gray-700 shadow-lg hover:shadow-xl transition-shadow duration-300 mb-4" > -

{message.content}

+ {item.type === 'discord' ? ( +

{item.content}

+ ) : ( + <> +

{item.title}

+

+ Comments: {item.comments.length} | Sats: {item.sats} +

+ + )} )) ) : ( -
No messages available.
+
No items available.
)}
diff --git a/src/pages/feed/stackernews.js b/src/pages/feed/stackernews.js index 433930d..e17fdbe 100644 --- a/src/pages/feed/stackernews.js +++ b/src/pages/feed/stackernews.js @@ -1,9 +1,19 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { Card } from 'primereact/card'; +import { Avatar } from 'primereact/avatar'; +import { Tag } from 'primereact/tag'; +import { Button } from 'primereact/button'; import { ProgressSpinner } from 'primereact/progressspinner'; import { useQuery } from '@tanstack/react-query'; import axios from 'axios'; +const StackerNewsIconComponent = () => ( + + + + +); + const fetchStackerNews = async () => { const response = await axios.get('/api/stackernews'); return response.data.data.items.items; // Note the change here @@ -12,11 +22,14 @@ const fetchStackerNews = async () => { const StackerNewsFeed = () => { const { data: items, isLoading, error } = useQuery({queryKey: ['stackerNews'], queryFn: fetchStackerNews}); + useEffect(() => { + console.log(items); + }, [items]); + if (isLoading) { return (
-

Loading...

); } @@ -26,33 +39,58 @@ const StackerNewsFeed = () => { return
Error loading data. Please try again later.
; } + const header = (item) => ( +
+
+ +

{item.user.name}

+
+
+
+ + } value="stackernews" className="w-fit bg-gray-600 text-[#f8f8ff] max-sidebar:mt-1" /> +
+
+
+ ); + + const footer = (item) => ( +
+ + {new Date(item.createdAt).toLocaleString()} + +
+ ); + return (
- {items && items.length > 0 ? ( - items.map(item => ( - -

{item.title}

-

Posted by: {item.user.name}

-

- Comments: {item.commentCount} | Sats: {item.sats} -

-

- Created at: {new Date(item.createdAt).toLocaleString()} -

- {item.url && ( - - View on Stacker News - - )} - - )) - ) : ( -
No items available.
- )} + {items && items.length > 0 ? ( + items.map(item => ( + header(item)} + footer={() => footer(item)} + className="w-full bg-gray-700 shadow-lg hover:shadow-xl transition-shadow duration-300 mb-4" + > +

{item.title}

+

+ Comments: {item.comments.length} | Sats: {item.sats} +

+ + )) + ) : ( +
No items available.
+ )}
);