saulteafarmer/plebdevs
1
0
Fork 0
mirror of https://github.com/AustinKelsay/plebdevs.git synced 2025-06-06 18:31:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

stackernews feed is working

Browse Source
This commit is contained in:
austinkelsay 2024-09-02 16:24:18 -05:00
parent d77fdaac66
commit e2a202c697
3 changed files with 139 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/pages/api/stackernews.js
View File

@ -4,10 +4,11 @@ export default async function handler(req, res) {
try { try {
const response = await axios.post('https://stacker.news/api/graphql', { const response = await axios.post('https://stacker.news/api/graphql', {
query: ` query: `
query RecentItems { query RecentDevItemsWithComments {
items( items(
limit: 10, sub: "devs",
sort: "NEW" sort: "NEW",
limit: 10
) { ) {
items { items {
id id
@ -18,6 +19,15 @@ export default async function handler(req, res) {
name name
} }
sats sats
comments {
id
text
createdAt
user {
name
}
sats
}
} }
} }
} }

81
src/pages/feed/global.js
View File

@ -1,17 +1,32 @@
import React, { useState, useEffect } from 'react'; import React from 'react';
import { Card } from 'primereact/card'; import { Card } from 'primereact/card';
import { Avatar } from 'primereact/avatar'; import { Avatar } from 'primereact/avatar';
import { Tag } from 'primereact/tag'; import { Tag } from 'primereact/tag';
import { Button } from 'primereact/button'; import { Button } from 'primereact/button';
import { ProgressSpinner } from 'primereact/progressspinner'; import { ProgressSpinner } from 'primereact/progressspinner';
import { useDiscordQuery } from '@/hooks/communityQueries/useDiscordQuery'; import { useDiscordQuery } from '@/hooks/communityQueries/useDiscordQuery';
import { useQuery } from '@tanstack/react-query';
import axios from 'axios';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
const StackerNewsIconComponent = () => (
<svg width="16" height="16" className='mr-2' viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="#facc15" fillRule="evenodd" d="m41.7 91.4 41.644 59.22-78.966 69.228L129.25 155.94l-44.083-58.14 54.353-65.441Z"/>
<path fill="#facc15" fillRule="evenodd" d="m208.355 136.74-54.358-64.36-38.4 128.449 48.675-74.094 64.36 65.175L251.54 42.497Z"/>
</svg>
);
const fetchStackerNews = async () => {
const response = await axios.get('/api/stackernews');
return response.data.data.items.items;
};
const GlobalFeed = () => { const GlobalFeed = () => {
const router = useRouter(); 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 ( return (
<div className="h-[100vh] min-bottom-bar:w-[87vw] max-sidebar:w-[100vw]"> <div className="h-[100vh] min-bottom-bar:w-[87vw] max-sidebar:w-[100vw]">
<ProgressSpinner className='w-full mt-24 mx-auto' /> <ProgressSpinner className='w-full mt-24 mx-auto' />
@ -19,37 +34,54 @@ const GlobalFeed = () => {
); );
} }
if (error) { if (discordError || stackerNewsError) {
return <div className="text-red-500 text-center p-4">Failed to load messages. Please try again later.</div>; return <div className="text-red-500 text-center p-4">Failed to load feed. Please try again later.</div>;
} }
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) => (
<div className="flex flex-row w-full items-center justify-between p-4 bg-gray-800 rounded-t-lg"> <div className="flex flex-row w-full items-center justify-between p-4 bg-gray-800 rounded-t-lg">
<div className="flex flex-row items-center"> <div className="flex flex-row items-center">
<Avatar image={message.avatar} shape="circle" size="large" className="border-2 border-blue-400" /> <Avatar image={item.type === 'discord' ? item.avatar : null} icon={item.type === 'stackernews' ? "pi pi-user" : null} shape="circle" size="large" className="border-2 border-blue-400" />
<p className="pl-4 font-bold text-xl text-white">{message.author}</p> <p className="pl-4 font-bold text-xl text-white">{item.type === 'discord' ? item.author : item.user.name}</p>
</div> </div>
<div className="flex flex-col items-start justify-between"> <div className="flex flex-col items-start justify-between">
<div className="flex flex-row w-full justify-between items-center my-1 max-sidebar:flex-col max-sidebar:items-start"> <div className="flex flex-row w-full justify-between items-center my-1 max-sidebar:flex-col max-sidebar:items-start">
<Tag value={message.channel} severity="primary" className="w-fit text-[#f8f8ff] bg-gray-600 mr-2 max-sidebar:mr-0" /> {item.type === 'discord' ? (
<>
<Tag value={item.channel} severity="primary" className="w-fit text-[#f8f8ff] bg-gray-600 mr-2 max-sidebar:mr-0" />
<Tag icon="pi pi-discord" value="discord" className="w-fit text-[#f8f8ff] bg-blue-400 max-sidebar:mt-1" /> <Tag icon="pi pi-discord" value="discord" className="w-fit text-[#f8f8ff] bg-blue-400 max-sidebar:mt-1" />
</>
) : (
<>
<Tag value="~devs" severity="contrast" className="w-fit text-[#f8f8ff] mr-2 max-sidebar:mr-0" />
<Tag icon={<StackerNewsIconComponent />} value="stackernews" className="w-fit bg-gray-600 text-[#f8f8ff] max-sidebar:mt-1" />
</>
)}
</div> </div>
</div> </div>
</div> </div>
); );
const footer = (message) => ( const footer = (item) => (
<div className="w-full flex justify-between items-center"> <div className="w-full flex justify-between items-center">
<span className="bg-gray-800 rounded-lg p-2 text-sm text-gray-300"> <span className="bg-gray-800 rounded-lg p-2 text-sm text-gray-300">
{new Date(message.timestamp).toLocaleString()} {new Date(item.timestamp || item.createdAt).toLocaleString()}
</span> </span>
<Button <Button
label="View in Discord" label={item.type === 'discord' ? "View in Discord" : "View on StackerNews"}
icon="pi pi-external-link" icon="pi pi-external-link"
outlined outlined
severity={item.type === 'discord' ? "info" : "warning"}
size="small" size="small"
className='my-2' className='my-2'
onClick={() => window.open(`https://discord.com/channels/${message.channelId}/${message.id}`, '_blank')} onClick={() => window.open(item.type === 'discord' ?
`https://discord.com/channels/${item.channelId}/${item.id}` :
`https://stacker.news/items/${item.id}`, '_blank')}
/> />
</div> </div>
); );
@ -57,19 +89,28 @@ const GlobalFeed = () => {
return ( return (
<div className="bg-gray-900 h-full w-full min-bottom-bar:w-[87vw]"> <div className="bg-gray-900 h-full w-full min-bottom-bar:w-[87vw]">
<div className="mx-4 mt-4"> <div className="mx-4 mt-4">
{data && data.length > 0 ? ( {combinedFeed.length > 0 ? (
data.map(message => ( combinedFeed.map(item => (
<Card <Card
key={message.id} key={item.id}
header={() => header(message)} header={() => header(item)}
footer={() => footer(message)} footer={() => footer(item)}
className="w-full bg-gray-700 shadow-lg hover:shadow-xl transition-shadow duration-300 mb-4" className="w-full bg-gray-700 shadow-lg hover:shadow-xl transition-shadow duration-300 mb-4"
> >
<p className="m-0 text-lg text-gray-200">{message.content}</p> {item.type === 'discord' ? (
<p className="m-0 text-lg text-gray-200">{item.content}</p>
) : (
<>
<h3 className="m-0 text-lg text-gray-200">{item.title}</h3>
<p className="text-sm text-gray-400">
Comments: {item.comments.length} | Sats: {item.sats}
</p>
</>
)}
</Card> </Card>
)) ))
) : ( ) : (
<div className="text-gray-400 text-center p-4">No messages available.</div> <div className="text-gray-400 text-center p-4">No items available.</div>
)} )}
</div> </div>
</div> </div>

62
src/pages/feed/stackernews.js
View File

@ -1,9 +1,19 @@
import React from 'react'; import React, { useEffect } from 'react';
import { Card } from 'primereact/card'; 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 { ProgressSpinner } from 'primereact/progressspinner';
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import axios from 'axios'; import axios from 'axios';
const StackerNewsIconComponent = () => (
<svg width="16" height="16" className='mr-2' viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="#facc15" fillRule="evenodd" d="m41.7 91.4 41.644 59.22-78.966 69.228L129.25 155.94l-44.083-58.14 54.353-65.441Z"/>
<path fill="#facc15" fillRule="evenodd" d="m208.355 136.74-54.358-64.36-38.4 128.449 48.675-74.094 64.36 65.175L251.54 42.497Z"/>
</svg>
);
const fetchStackerNews = async () => { const fetchStackerNews = async () => {
const response = await axios.get('/api/stackernews'); const response = await axios.get('/api/stackernews');
return response.data.data.items.items; // Note the change here return response.data.data.items.items; // Note the change here
@ -12,11 +22,14 @@ const fetchStackerNews = async () => {
const StackerNewsFeed = () => { const StackerNewsFeed = () => {
const { data: items, isLoading, error } = useQuery({queryKey: ['stackerNews'], queryFn: fetchStackerNews}); const { data: items, isLoading, error } = useQuery({queryKey: ['stackerNews'], queryFn: fetchStackerNews});
useEffect(() => {
console.log(items);
}, [items]);
if (isLoading) { if (isLoading) {
return ( return (
<div className="h-[100vh] min-bottom-bar:w-[87vw] max-sidebar:w-[100vw]"> <div className="h-[100vh] min-bottom-bar:w-[87vw] max-sidebar:w-[100vw]">
<ProgressSpinner className='w-full mt-24 mx-auto' /> <ProgressSpinner className='w-full mt-24 mx-auto' />
<p>Loading...</p>
</div> </div>
); );
} }
@ -26,6 +39,38 @@ const StackerNewsFeed = () => {
return <div className="text-red-500 text-center p-4">Error loading data. Please try again later.</div>; return <div className="text-red-500 text-center p-4">Error loading data. Please try again later.</div>;
} }
const header = (item) => (
<div className="flex flex-row w-full items-center justify-between p-4 bg-gray-800 rounded-t-lg">
<div className="flex flex-row items-center">
<Avatar icon="pi pi-user" shape="circle" size="large" className="border-2 border-blue-400" />
<p className="pl-4 font-bold text-xl text-white">{item.user.name}</p>
</div>
<div className="flex flex-col items-start justify-between">
<div className="flex flex-row w-full justify-between items-center my-1 max-sidebar:flex-col max-sidebar:items-start">
<Tag value="~devs" severity="contrast" className="w-fit text-[#f8f8ff] mr-2 max-sidebar:mr-0" />
<Tag icon={<StackerNewsIconComponent />} value="stackernews" className="w-fit bg-gray-600 text-[#f8f8ff] max-sidebar:mt-1" />
</div>
</div>
</div>
);
const footer = (item) => (
<div className="w-full flex justify-between items-center">
<span className="bg-gray-800 rounded-lg p-2 text-sm text-gray-300">
{new Date(item.createdAt).toLocaleString()}
</span>
<Button
label="View on Stacker News"
icon="pi pi-external-link"
severity="warning"
outlined
size="small"
className='my-2'
onClick={() => window.open(`https://stacker.news/items/${item.id}`, '_blank')}
/>
</div>
);
return ( return (
<div className="bg-gray-900 h-full w-full min-bottom-bar:w-[87vw]"> <div className="bg-gray-900 h-full w-full min-bottom-bar:w-[87vw]">
<div className="mx-4 mt-4"> <div className="mx-4 mt-4">
@ -33,21 +78,14 @@ const StackerNewsFeed = () => {
items.map(item => ( items.map(item => (
<Card <Card
key={item.id} 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" className="w-full bg-gray-700 shadow-lg hover:shadow-xl transition-shadow duration-300 mb-4"
> >
<h3 className="m-0 text-lg text-gray-200">{item.title}</h3> <h3 className="m-0 text-lg text-gray-200">{item.title}</h3>
<p className="text-sm text-gray-400">Posted by: {item.user.name}</p>
<p className="text-sm text-gray-400"> <p className="text-sm text-gray-400">
Comments: {item.commentCount} | Sats: {item.sats} Comments: {item.comments.length} | Sats: {item.sats}
</p> </p>
<p className="text-sm text-gray-400">
Created at: {new Date(item.createdAt).toLocaleString()}
</p>
{item.url && (
<a href={item.url} target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:underline">
View on Stacker News
</a>
)}
</Card> </Card>
)) ))
) : ( ) : (