Better syncing of sidebar options and query params

src/components/feeds/GlobalFeed.js

@@ -116,7 +116,7 @@ const GlobalFeed = () => {
             <div className="flex flex-row items-center">
                 <Avatar 
                     image={getAvatarImage(item)}
-                    icon={item.type === 'stackernews' ? "pi pi-user" : null} 
+                    icon={getAvatarImage(item) ? null : 'pi pi-user'}
                     shape="circle" 
                     size="large" 
                     className="border-2 border-blue-400" 

src/components/feeds/NostrFeed.js

@@ -19,12 +19,21 @@ const NostrFeed = () => {
     const [authorData, setAuthorData] = useState({});
 
     useEffect(() => {
-        communityNotes.forEach(note => {
+        const fetchAuthors = async () => {
-            if (!authorData[note.pubkey]) {
+            const authorDataMap = {};
-                fetchAuthor(note.pubkey);
+            for (const message of communityNotes) {
+                if (!authorDataMap[message.pubkey]) {
+                    const author = await fetchAuthor(message.pubkey);
+                    authorDataMap[message.pubkey] = author;
+                }
             }
-        });
+            setAuthorData(authorDataMap);
-    }, [communityNotes, authorData]);
+        };
+
+        if (communityNotes && communityNotes.length > 0) {
+            fetchAuthors();
+        }
+    }, [communityNotes]);
 
     const fetchAuthor = async (pubkey) => {
         try {
@@ -37,41 +46,43 @@ const NostrFeed = () => {
             if (author) {
                 try {
                     const fields = await findKind0Fields(JSON.parse(author.content));
-                    setAuthorData(prevData => ({
+                    return fields;
-                        ...prevData,
-                        [pubkey]: fields
-                    }));
                 } catch (error) {
                     console.error('Error fetching author:', error);
                 }
             }
+            return null;
         } catch (error) {
             console.error('Error fetching author:', error);
         }
     };
 
-    const renderHeader = (message) => {
+    const getAvatarImage = (message) => {
-        const author = authorData[message.pubkey];
+        return authorData[message.pubkey]?.avatar ? returnImageProxy(authorData[message.pubkey]?.avatar) : null;
+    };
 
-        if (!author || Object.keys(author).length === 0 || !author.username || !author.avatar) {
+    const renderHeader = (message) => (
-            return null;
+        <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 
-        return (
+                    image={getAvatarImage(message)}
-            <div className="flex flex-row w-full items-center justify-between p-4 bg-gray-800 rounded-t-lg">
+                    icon={getAvatarImage(message) ? null : 'pi pi-user'}
-                <div className="flex flex-row items-center">
+                    shape="circle" 
-                    <Avatar image={author?.avatar} shape="circle" size="large" className="border-2 border-blue-400" />
+                    size="large" 
-                    <p className="pl-4 font-bold text-xl text-white">{author?.username || author?.pubkey.substring(0, 12) + '...'}</p>
+                    className="border-2 border-blue-400" 
-                </div>
+                />
-                <div className="flex flex-col items-start justify-between">
+                <p className="pl-4 font-bold text-xl text-white">
-                    <div className="flex flex-row w-full justify-between items-center my-1 max-sidebar:flex-col max-sidebar:items-start">
+                    {authorData[message.pubkey]?.username || message.pubkey.substring(0, 12) + '...'}
-                        <Tag icon="pi pi-hashtag" value="plebdevs" severity="primary" className="w-fit text-[#f8f8ff] bg-gray-600 mr-2 max-sidebar:mr-0" />
+                </p>
-                        <Tag icon={<Image src={NostrIcon} alt="Nostr" width={14} height={14} className='mr-[1px]' />} value="nostr" className="w-fit text-[#f8f8ff] bg-blue-400 max-sidebar:mt-1" />
+            </div>
-                    </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 icon="pi pi-hashtag" value="plebdevs" severity="primary" className="w-fit text-[#f8f8ff] bg-gray-600 mr-2 max-sidebar:mr-0" />
+                    <Tag icon={<Image src={NostrIcon} alt="Nostr" width={14} height={14} className='mr-[1px]' />} value="nostr" 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">

src/components/navbar/navbar.module.css

@@ -11,6 +11,8 @@
 .logo {
     border-radius: 25px;
     margin-right: 8px;
+    max-height: 60px;
+    max-width: 60px;
 }
 
 .title {

src/components/profile/UserProfile.js

@@ -1,6 +1,7 @@
 import React, { useRef, useState, useEffect } from "react";
 import { DataTable } from "primereact/datatable";
 import { Button } from "primereact/button";
+import { Avatar } from "primereact/avatar";
 import { Menu } from "primereact/menu";
 import { Column } from "primereact/column";
 import { useImageProxy } from "@/hooks/useImageProxy";

src/components/sidebar/Sidebar.js

@@ -15,10 +15,6 @@ const Sidebar = () => {
 
     const { data: session } = useSession();
 
-    const header = (text) => {
-        return <span onClick={() => router.push('/content')}>{text}</span>
-    };
-
     return (
         <div className='max-sidebar:hidden w-[14vw] bg-gray-800 p-2 fixed h-[100%] flex flex-col'>
             <div className="flex-grow overflow-y-auto">
@@ -26,7 +22,7 @@ const Sidebar = () => {
                     <i className="pi pi-home pl-5" /> <p className="pl-2 rounded-md font-bold text-lg">Home</p>
                 </div>
                 <Accordion activeIndex={0} className={styles['p-accordion']} style={{ marginBottom: '0px', paddingBottom: '0px' }}>
-                    <AccordionTab 
+                    <AccordionTab
                         pt={{
                             headerAction: ({ context }) => ({
                                 className: `hover:bg-gray-700 rounded-lg ${isActive('/content') || router.pathname === '/content' ? 'bg-gray-700' : ''} ${styles['p-accordion-header-link']}`
@@ -34,8 +30,11 @@ const Sidebar = () => {
                             content: styles['p-accordion-content'],
                             header: 'text-lg'
                         }}
-                        header={header('Content')}>
+                        header={'Content'}>
-                        <div onClick={() => router.push('/content?tag=courses')} className={`w-full cursor-pointer py-2 hover:bg-gray-700 rounded-lg ${isActive('/content?tag=courses') ? 'bg-gray-700' : ''}`}>
+                        <div onClick={() => router.push('/content?tag=all')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/content?tag=all') ? 'bg-gray-700' : ''}`}>
+                            <p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-eye text-sm pr-1"></i> All</p>
+                        </div>
+                        <div onClick={() => router.push('/content?tag=courses')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/content?tag=courses') ? 'bg-gray-700' : ''}`}>
                             <p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-desktop text-sm pr-1"></i> Courses</p>
                         </div>
                         <div onClick={() => router.push('/content?tag=workshops')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/content?tag=workshops') ? 'bg-gray-700' : ''}`}>
@@ -53,7 +52,7 @@ const Sidebar = () => {
                     <i className="pi pi-star pl-5 text-sm" /> <p className="pl-2 rounded-md font-bold text-lg">Subscribe</p>
                 </div>
                 <Accordion activeIndex={0} className={styles['p-accordion']}>
-                    <AccordionTab 
+                    <AccordionTab
                         pt={{
                             headerAction: ({ context }) => ({
                                 className: `hover:bg-gray-700 rounded-lg ${isActive('/feed') ? 'bg-gray-700' : ''} ${styles['p-accordion-header-link']}`
@@ -62,7 +61,7 @@ const Sidebar = () => {
                             header: 'text-lg'
                         }}
                         header={"Community"}>
-                        <div onClick={() => router.push('/feed?channel=global')} className={`w-full cursor-pointer py-2 hover:bg-gray-700 rounded-lg ${isActive('/feed?channel=global') ? 'bg-gray-700' : ''}`}>
+                        <div onClick={() => router.push('/feed?channel=global')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/feed?channel=global') ? 'bg-gray-700' : ''}`}>
                             <p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-hashtag text-sm pr-1"></i> global</p>
                         </div>
                         <div onClick={() => router.push('/feed?channel=nostr')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/feed?channel=nostr') ? 'bg-gray-700' : ''}`}>

src/pages/content/index.js

@@ -21,7 +21,7 @@ const MenuTab = ({ items, selectedTopic, onTabChange }) => {
         else if (item === 'Workshops') icon = 'pi pi-video';
         else if (item === 'Courses') icon = 'pi pi-desktop';
 
-        const queryParam = item === 'All' ? '' : `?tag=${item.toLowerCase()}`;
+        const queryParam = item === 'all' ? '' : `?tag=${item.toLowerCase()}`;
         const isActive = router.asPath === `/content${queryParam}`;
 
         return {