mirror of
https://github.com/AustinKelsay/plebdevs.git
synced 2025-04-19 19:01:19 +00:00
sn devs items showing
This commit is contained in:
austinkelsay
parent
1fb26d6969
commit
d77fdaac66
@ -12,13 +12,13 @@ const BottomBar = () => {
|
||||
return (
|
||||
<div className='min-bottom-bar:hidden fixed bottom-0 left-0 right-0 bg-gray-800 p-2 flex justify-around items-center z-20 border-t-2 border-gray-700'>
|
||||
<div onClick={() => router.push('/')} className={`cursor-pointer p-2 rounded-lg ${isActive('/') ? 'bg-gray-700' : ''}`}>
|
||||
<i className="pi pi-home" />
|
||||
<i className="pi pi-home text-2xl" />
|
||||
</div>
|
||||
<div onClick={() => router.push('/content')} className={`cursor-pointer p-2 rounded-lg ${isActive('/content') ? 'bg-gray-700' : ''}`}>
|
||||
<i className="pi pi-video" />
|
||||
<i className="pi pi-video text-2xl" />
|
||||
</div>
|
||||
<div onClick={() => router.push('/feed')} className={`cursor-pointer p-2 rounded-lg ${isActive('/feed') ? 'bg-gray-700' : ''}`}>
|
||||
<i className="pi pi-comments" />
|
||||
<i className="pi pi-comments text-2xl" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
37
src/pages/api/stackernews.js
Normal file
37
src/pages/api/stackernews.js
Normal file
@ -0,0 +1,37 @@
|
||||
import axios from 'axios';
|
||||
|
||||
export default async function handler(req, res) {
|
||||
try {
|
||||
const response = await axios.post('https://stacker.news/api/graphql', {
|
||||
query: `
|
||||
query RecentItems {
|
||||
items(
|
||||
limit: 10,
|
||||
sort: "NEW"
|
||||
) {
|
||||
items {
|
||||
id
|
||||
title
|
||||
url
|
||||
createdAt
|
||||
user {
|
||||
name
|
||||
}
|
||||
sats
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
}, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
}
|
||||
});
|
||||
|
||||
res.status(200).json(response.data);
|
||||
} catch (error) {
|
||||
console.error('Error fetching from Stacker News:', error.response ? error.response.data : error.message);
|
||||
res.status(500).json({ error: 'An error occurred while fetching data' });
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
import CommunityMenuTab from '@/components/menutab/CommunityMenuTab';
|
||||
import NostrFeed from './nostr';
|
||||
@ -18,8 +18,13 @@ const Feed = () => {
|
||||
router.push(`/feed?channel=${topic}`);
|
||||
};
|
||||
|
||||
// initialize the selected topic to the query parameter
|
||||
useEffect(() => {
|
||||
setSelectedTopic(router.query.channel);
|
||||
}, [router.query.channel]);
|
||||
|
||||
return (
|
||||
<div className="bg-gray-900 h-full w-full min-bottom-bar:w-[87vw]">
|
||||
<div className="bg-gray-900 h-full w-[100vw] min-bottom-bar:w-[87vw]">
|
||||
<div className="w-fit mx-4 pt-4 flex flex-col items-start">
|
||||
<h1 className="text-3xl font-bold mb-4 ml-1">Community</h1>
|
||||
<InputText
|
||||
|
||||
@ -1,79 +1,61 @@
|
||||
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 { useRouter } from 'next/router';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import axios from 'axios';
|
||||
|
||||
const fetchStackerNews = async () => {
|
||||
const response = await axios.get('/api/stackernews');
|
||||
return response.data.data.items.items; // Note the change here
|
||||
};
|
||||
|
||||
const StackerNewsFeed = () => {
|
||||
const router = useRouter();
|
||||
const { data, error, isLoading } = useDiscordQuery({page: router.query.page});
|
||||
const { data: items, isLoading, error } = useQuery({queryKey: ['stackerNews'], queryFn: fetchStackerNews});
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="h-[100vh] min-bottom-bar:w-[87vw] max-sidebar:w-[100vw]">
|
||||
<ProgressSpinner className='w-full mt-24 mx-auto' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="h-[100vh] min-bottom-bar:w-[87vw] max-sidebar:w-[100vw]">
|
||||
<ProgressSpinner className='w-full mt-24 mx-auto' />
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return <div className="text-red-500 text-center p-4">Failed to load messages. Please try again later.</div>;
|
||||
}
|
||||
if (error) {
|
||||
console.error('Error fetching Stacker News:', error);
|
||||
return <div className="text-red-500 text-center p-4">Error loading data. Please try again later.</div>;
|
||||
}
|
||||
|
||||
const header = (message) => (
|
||||
<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 image={message.avatar} shape="circle" size="large" className="border-2 border-blue-400" />
|
||||
<p className="pl-4 font-bold text-xl text-white">{message.author}</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={message.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" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const footer = (message) => (
|
||||
<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(message.timestamp).toLocaleString()}
|
||||
</span>
|
||||
<Button
|
||||
label="View in Discord"
|
||||
icon="pi pi-external-link"
|
||||
outlined
|
||||
size="small"
|
||||
className='my-2'
|
||||
onClick={() => window.open(`https://discord.com/channels/${message.channelId}/${message.id}`, '_blank')}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="bg-gray-900 h-full w-full min-bottom-bar:w-[87vw]">
|
||||
<div className="mx-4 mt-4">
|
||||
{data && data.length > 0 ? (
|
||||
data.map(message => (
|
||||
<Card
|
||||
key={message.id}
|
||||
header={() => header(message)}
|
||||
footer={() => footer(message)}
|
||||
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>
|
||||
</Card>
|
||||
))
|
||||
) : (
|
||||
<div className="text-gray-400 text-center p-4">No messages available.</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="bg-gray-900 h-full w-full min-bottom-bar:w-[87vw]">
|
||||
<div className="mx-4 mt-4">
|
||||
{items && items.length > 0 ? (
|
||||
items.map(item => (
|
||||
<Card
|
||||
key={item.id}
|
||||
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>
|
||||
<p className="text-sm text-gray-400">Posted by: {item.user.name}</p>
|
||||
<p className="text-sm text-gray-400">
|
||||
Comments: {item.commentCount} | Sats: {item.sats}
|
||||
</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>
|
||||
))
|
||||
) : (
|
||||
<div className="text-gray-400 text-center p-4">No items available.</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default StackerNewsFeed;
|
||||
Loading…
x
Reference in New Issue
Block a user