sn devs items showing

src/components/BottomBar.js

@@ -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>
     );

src/pages/api/stackernews.js

@@ -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' });
+  }
+}

src/pages/feed/index.js

@@ -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

src/pages/feed/stackernews.js

@@ -1,75 +1,57 @@
-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 { useRouter } from 'next/router';
+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: items, isLoading, error } = useQuery({queryKey: ['stackerNews'], queryFn: fetchStackerNews});
-    const { data, error, isLoading } = useDiscordQuery({page: router.query.page});
 
 	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>;
+		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 ? (
+				{items && items.length > 0 ? (
-                data.map(message => (
+					items.map(item => (
 						<Card
-                    key={message.id}
+							key={item.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>
+							<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 messages available.</div>
+					<div className="text-gray-400 text-center p-4">No items available.</div>
 				)}
 			</div>
 		</div>