From 1fb26d6969c50ebe3957c42aa2ba9af7c1998630 Mon Sep 17 00:00:00 2001 From: austinkelsay Date: Mon, 2 Sep 2024 12:41:26 -0500 Subject: [PATCH] Improving sidebar and feeds organization in the frontend, improved on some styles as well --- src/components/menutab/CommunityMenuTab.js | 5 ++ src/components/sidebar/Sidebar.js | 24 +++++---- src/pages/feed/discord.js | 34 ++----------- src/pages/feed/global.js | 34 ++----------- src/pages/feed/index.js | 57 ++++++++++++++++++++++ src/pages/feed/nostr.js | 34 ++----------- src/pages/feed/stackernews.js | 38 ++------------- src/styles/globals.css | 4 +- 8 files changed, 93 insertions(+), 137 deletions(-) create mode 100644 src/pages/feed/index.js diff --git a/src/components/menutab/CommunityMenuTab.js b/src/components/menutab/CommunityMenuTab.js index 06c8158..b9f3190 100644 --- a/src/components/menutab/CommunityMenuTab.js +++ b/src/components/menutab/CommunityMenuTab.js @@ -1,3 +1,4 @@ +import React, { useState, useEffect } from 'react'; import { Button } from 'primereact/button'; import { TabMenu } from 'primereact/tabmenu'; import Image from 'next/image'; @@ -7,6 +8,10 @@ import NostrIcon from '../../../public/nostr.png'; const CommunityMenuTab = ({ selectedTopic, onTabChange }) => { const allItems = ['global', 'nostr', 'discord', 'stackernews']; + useEffect(() => { + console.log(selectedTopic); + }, [selectedTopic]); + const menuItems = allItems.map((item, index) => { let icon; switch (item) { diff --git a/src/components/sidebar/Sidebar.js b/src/components/sidebar/Sidebar.js index fa2ecc5..312cb3f 100644 --- a/src/components/sidebar/Sidebar.js +++ b/src/components/sidebar/Sidebar.js @@ -8,32 +8,38 @@ const Sidebar = () => { // Helper function to determine if the path matches the current route const isActive = (path) => { - return router.pathname === path; + const pathWithQuery = router.pathname + router.asPath.split(router.pathname)[1]; + return pathWithQuery === path; }; return (
router.push('/')} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/') ? 'bg-gray-700' : ''}`}> -

Home

+

Home

router.push('/content')} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/content') ? 'bg-gray-700' : ''}`}> -

Content

+

Content

router.push('/create')} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/create') ? 'bg-gray-700' : ''}`}> -

Create

+

Create

- -
router.push('/feed')} className={`w-full cursor-pointer py-2 hover:bg-gray-700 rounded-lg ${isActive('/feed') ? 'bg-gray-700' : ''}`}> + ({ + className: `hover:bg-gray-700 rounded-lg ${isActive('/feed') ? 'bg-gray-700' : ''}` + }) + }} + header={"Community"}> +
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' : ''}`}>

global

-
router.push('/feed/nostr')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/feed/nostr') ? 'bg-gray-700' : ''}`}> +
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' : ''}`}>

nostr

-
router.push('/feed/discord')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/feed/discord') ? 'bg-gray-700' : ''}`}> +
router.push('/feed?channel=discord')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/feed?channel=discord') ? 'bg-gray-700' : ''}`}>

discord

-
router.push('/feed/stackernews')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/feed/stackernews') ? 'bg-gray-700' : ''}`}> +
router.push('/feed?channel=stackernews')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/feed?channel=stackernews') ? 'bg-gray-700' : ''}`}>

stackernews

diff --git a/src/pages/feed/discord.js b/src/pages/feed/discord.js index e0d797e..4d6fd1a 100644 --- a/src/pages/feed/discord.js +++ b/src/pages/feed/discord.js @@ -4,23 +4,13 @@ import { Avatar } from 'primereact/avatar'; import { Tag } from 'primereact/tag'; import { Button } from 'primereact/button'; import { ProgressSpinner } from 'primereact/progressspinner'; -import { InputText } from 'primereact/inputtext'; import { useDiscordQuery } from '@/hooks/communityQueries/useDiscordQuery'; import { useRouter } from 'next/router'; -import CommunityMenuTab from '@/components/menutab/CommunityMenuTab'; const DiscordFeed = () => { - const [selectedTopic, setSelectedTopic] = useState('global'); - const [searchQuery, setSearchQuery] = useState(''); - const allTopics = ['global', 'nostr', 'discord', 'stackernews']; - const router = useRouter(); const { data, error, isLoading } = useDiscordQuery({page: router.query.page}); - const handleTopicChange = (topic) => { - setSelectedTopic(topic); - }; - if (isLoading) { return (
@@ -40,9 +30,9 @@ const DiscordFeed = () => {

{message.author}

-
- - +
+ +
@@ -66,24 +56,6 @@ const DiscordFeed = () => { return (
-
-

Community

- setSearchQuery(e.target.value)} - placeholder="Search" - icon="pi pi-search" - className="w-full mb-2" - /> -
-
- -
{data && data.length > 0 ? ( data.map(message => ( diff --git a/src/pages/feed/global.js b/src/pages/feed/global.js index a9c5da6..bf03947 100644 --- a/src/pages/feed/global.js +++ b/src/pages/feed/global.js @@ -4,23 +4,13 @@ import { Avatar } from 'primereact/avatar'; import { Tag } from 'primereact/tag'; import { Button } from 'primereact/button'; import { ProgressSpinner } from 'primereact/progressspinner'; -import { InputText } from 'primereact/inputtext'; import { useDiscordQuery } from '@/hooks/communityQueries/useDiscordQuery'; import { useRouter } from 'next/router'; -import CommunityMenuTab from '@/components/menutab/CommunityMenuTab'; const GlobalFeed = () => { - const [selectedTopic, setSelectedTopic] = useState('global'); - const [searchQuery, setSearchQuery] = useState(''); - const allTopics = ['global', 'nostr', 'discord', 'stackernews']; - const router = useRouter(); const { data, error, isLoading } = useDiscordQuery({page: router.query.page}); - const handleTopicChange = (topic) => { - setSelectedTopic(topic); - }; - if (isLoading) { return (
@@ -40,9 +30,9 @@ const GlobalFeed = () => {

{message.author}

-
- - +
+ +
@@ -66,24 +56,6 @@ const GlobalFeed = () => { return (
-
-

Community

- setSearchQuery(e.target.value)} - placeholder="Search" - icon="pi pi-search" - className="w-full mb-2" - /> -
-
- -
{data && data.length > 0 ? ( data.map(message => ( diff --git a/src/pages/feed/index.js b/src/pages/feed/index.js new file mode 100644 index 0000000..31a048f --- /dev/null +++ b/src/pages/feed/index.js @@ -0,0 +1,57 @@ +import React, { useState } from 'react'; +import { InputText } from 'primereact/inputtext'; +import CommunityMenuTab from '@/components/menutab/CommunityMenuTab'; +import NostrFeed from './nostr'; +import DiscordFeed from './discord'; +import StackerNewsFeed from './stackernews'; +import GlobalFeed from './global'; +import { useRouter } from 'next/router'; +const Feed = () => { + const [selectedTopic, setSelectedTopic] = useState('global'); + const [searchQuery, setSearchQuery] = useState(''); + const allTopics = ['global', 'nostr', 'discord', 'stackernews']; + + const router = useRouter(); + + const handleTopicChange = (topic) => { + setSelectedTopic(topic); + router.push(`/feed?channel=${topic}`); + }; + + return ( +
+
+

Community

+ setSearchQuery(e.target.value)} + placeholder="Search" + icon="pi pi-search" + className="w-full mb-2" + /> +
+
+ +
+ { + selectedTopic === 'global' && + } + { + selectedTopic === 'nostr' && + } + { + selectedTopic === 'discord' && + } + { + selectedTopic === 'stackernews' && + } +
+ ); +}; + +export default Feed; \ No newline at end of file diff --git a/src/pages/feed/nostr.js b/src/pages/feed/nostr.js index e3d9e47..fbab8e4 100644 --- a/src/pages/feed/nostr.js +++ b/src/pages/feed/nostr.js @@ -4,23 +4,13 @@ import { Avatar } from 'primereact/avatar'; import { Tag } from 'primereact/tag'; import { Button } from 'primereact/button'; import { ProgressSpinner } from 'primereact/progressspinner'; -import { InputText } from 'primereact/inputtext'; import { useDiscordQuery } from '@/hooks/communityQueries/useDiscordQuery'; import { useRouter } from 'next/router'; -import CommunityMenuTab from '@/components/menutab/CommunityMenuTab'; const NostrFeed = () => { - const [selectedTopic, setSelectedTopic] = useState('global'); - const [searchQuery, setSearchQuery] = useState(''); - const allTopics = ['global', 'nostr', 'discord', 'stackernews']; - const router = useRouter(); const { data, error, isLoading } = useDiscordQuery({page: router.query.page}); - const handleTopicChange = (topic) => { - setSelectedTopic(topic); - }; - if (isLoading) { return (
@@ -40,9 +30,9 @@ const NostrFeed = () => {

{message.author}

-
- - +
+ +
@@ -66,24 +56,6 @@ const NostrFeed = () => { return (
-
-

Community

- setSearchQuery(e.target.value)} - placeholder="Search" - icon="pi pi-search" - className="w-full mb-2" - /> -
-
- -
{data && data.length > 0 ? ( data.map(message => ( diff --git a/src/pages/feed/stackernews.js b/src/pages/feed/stackernews.js index 0f3deba..5854047 100644 --- a/src/pages/feed/stackernews.js +++ b/src/pages/feed/stackernews.js @@ -4,23 +4,13 @@ import { Avatar } from 'primereact/avatar'; import { Tag } from 'primereact/tag'; import { Button } from 'primereact/button'; import { ProgressSpinner } from 'primereact/progressspinner'; -import { InputText } from 'primereact/inputtext'; import { useDiscordQuery } from '@/hooks/communityQueries/useDiscordQuery'; import { useRouter } from 'next/router'; -import CommunityMenuTab from '@/components/menutab/CommunityMenuTab'; - -const StackernewsFeed = () => { - const [selectedTopic, setSelectedTopic] = useState('global'); - const [searchQuery, setSearchQuery] = useState(''); - const allTopics = ['global', 'nostr', 'discord', 'stackernews']; +const StackerNewsFeed = () => { const router = useRouter(); const { data, error, isLoading } = useDiscordQuery({page: router.query.page}); - const handleTopicChange = (topic) => { - setSelectedTopic(topic); - }; - if (isLoading) { return (
@@ -40,9 +30,9 @@ const StackernewsFeed = () => {

{message.author}

-
- - +
+ +
@@ -66,24 +56,6 @@ const StackernewsFeed = () => { return (
-
-

Community

- setSearchQuery(e.target.value)} - placeholder="Search" - icon="pi pi-search" - className="w-full mb-2" - /> -
-
- -
{data && data.length > 0 ? ( data.map(message => ( @@ -104,4 +76,4 @@ const StackernewsFeed = () => { ); }; -export default StackernewsFeed; \ No newline at end of file +export default StackerNewsFeed; \ No newline at end of file diff --git a/src/styles/globals.css b/src/styles/globals.css index ff43fcc..365b3e1 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -72,8 +72,8 @@ div { padding-bottom: 12px !important; padding-top: 12px !important; margin-bottom: 8px !important; - border-bottom-left-radius: 5px !important; - border-bottom-right-radius: 5px !important; + border-bottom-left-radius: 7px !important; + border-bottom-right-radius: 7px !important; } /* hero banner animation */