From be6bb02db062f4a1578ea6c4ba63e708e65bbb9f Mon Sep 17 00:00:00 2001 From: austinkelsay Date: Sat, 16 Mar 2024 14:56:58 -0500 Subject: [PATCH] more ui improvements, sidebar, details page, navbar --- src/components/courses/CoursesCarousel.js | 2 +- src/components/navbar/Navbar.js | 73 +++++++++++++-- src/components/sidebar/Sidebar.js | 46 +++++----- src/components/workshops/WorkshopsCarousel.js | 3 +- src/pages/content.js | 11 +-- src/pages/details/[slug].js | 62 +++++++++++++ src/pages/profile.js | 88 ++++++++++++++----- src/redux/reducers/eventsReducer.js | 7 +- src/styles/globals.css | 5 ++ tailwind.config.js | 7 +- 10 files changed, 237 insertions(+), 67 deletions(-) create mode 100644 src/pages/details/[slug].js diff --git a/src/components/courses/CoursesCarousel.js b/src/components/courses/CoursesCarousel.js index 5ec152f..30e762a 100644 --- a/src/components/courses/CoursesCarousel.js +++ b/src/components/courses/CoursesCarousel.js @@ -26,7 +26,7 @@ export default function CoursesCarousel() { const courseTemplate = (course) => { return ( -
router.push(`/course/${course.id}`)} className="flex flex-col items-center w-full px-4 cursor-pointer mt-8"> +
router.push(`/details/${course.id}`)} className="flex flex-col items-center w-full px-4 cursor-pointer mt-8">
resource thumbnail { const router = useRouter(); + const menu = useRef(null); + + const menuItems = [ + { + label: 'Home', + icon: 'pi pi-home', + command: () => { + // Add your edit functionality here + } + }, + { + label: 'Content', + icon: 'pi pi-video', + command: () => { + // Add your delete functionality here + } + }, + { + label: 'Chat', + icon: 'pi pi-comment', + items: [ + { + label: 'General', + icon: 'pi pi-hashtag', + command: () => { + // Add your edit functionality here + } + }, + { + label: 'Nostr', + icon: 'pi pi-hashtag', + command: () => { + // Add your delete functionality here + } + }, + { + label: 'Discord', + icon: 'pi pi-hashtag', + command: () => { + // Add your delete functionality here + } + }, + { + label: 'Stackernews', + icon: 'pi pi-hashtag', + command: () => { + // Add your delete functionality here + } + } + ] + } + ]; + const start = ( -
-
router.push('/')} className={styles.titleContainer}> +
+
+ menu.current.toggle(e)}> + +
+
router.push('/')} className="flex flex-row items-center justify-center cursor-pointer"> logo -

PlebDevs

+

PlebDevs

); return ( - + ); }; diff --git a/src/components/sidebar/Sidebar.js b/src/components/sidebar/Sidebar.js index 3dbecc6..eb03519 100644 --- a/src/components/sidebar/Sidebar.js +++ b/src/components/sidebar/Sidebar.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React from 'react'; import { Accordion, AccordionTab } from 'primereact/accordion'; import { useRouter } from 'next/router'; import 'primeicons/primeicons.css'; @@ -6,17 +6,21 @@ import 'primeicons/primeicons.css'; const Sidebar = () => { const router = useRouter(); + // Helper function to determine if the path matches the current route + const isActive = (path) => { + return router.pathname === path; + }; + return ( -
-
router.push('/')} className='w-full cursor-pointer hover:bg-gray-700 rounded-lg'> -

Home

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

Home

-
router.push('/content')} className='w-full cursor-pointer hover:bg-gray-700 rounded-lg'> -

Content

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

Content

{ className: 'border-none bg-transparent hover:bg-gray-700 rounded-lg', }), headerAction: ({ context }) => ({ - className: 'border-none bg-transparent', + className: 'border-none bg-transparent py-3 my-2', }), content: { className: 'border-none bg-transparent pt-0' } } }} - > + className="unstyled border-none bg-transparent"> -
router.push('/chat/general')} className='w-full cursor-pointer hover:bg-gray-700 rounded-lg'> -

general

-
-
router.push('/chat/nostr')} className='w-full cursor-pointer hover:bg-gray-700 rounded-lg'> -

nostr

-
-
router.push('/chat/discord')} className='w-full cursor-pointer hover:bg-gray-700 rounded-lg'> -

discord

-
-
router.push('/chat/stackernews')} className='w-full cursor-pointer hover:bg-gray-700 rounded-lg'> -

stackernews

-
+
router.push('/chat/general')} className={`w-full cursor-pointer hover:bg-gray-700 rounded-lg ${isActive('/chat/general') ? 'bg-gray-700' : ''}`}> +

general

+
+
router.push('/chat/nostr')} className={`w-full cursor-pointer hover:bg-gray-700 rounded-lg ${isActive('/chat/nostr') ? 'bg-gray-700' : ''}`}> +

nostr

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

discord

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

stackernews

+
diff --git a/src/components/workshops/WorkshopsCarousel.js b/src/components/workshops/WorkshopsCarousel.js index ce7aff2..27c053d 100644 --- a/src/components/workshops/WorkshopsCarousel.js +++ b/src/components/workshops/WorkshopsCarousel.js @@ -9,6 +9,7 @@ import { formatTimestampToHowLongAgo } from '@/utils/time'; export default function WorkshopsCarousel() { const resources = useSelector((state) => state.events.resources); + console.log(resources); const [processedResources, setProcessedResources] = useState([]); const { returnImageProxy } = useImageProxy(); @@ -24,7 +25,7 @@ export default function WorkshopsCarousel() { const resourceTemplate = (resource) => { return ( -
router.push(`/resource/${resource.id}`)} className="flex flex-col items-center w-full px-4 cursor-pointer mt-8"> +
router.push(`/details/${resource.id}`)} className="flex flex-col items-center w-full px-4 cursor-pointer mt-8">
resource thumbnail - - Create Next App - - - -
- ) } diff --git a/src/pages/details/[slug].js b/src/pages/details/[slug].js new file mode 100644 index 0000000..075bb07 --- /dev/null +++ b/src/pages/details/[slug].js @@ -0,0 +1,62 @@ +import React, { useEffect, useState } from 'react'; +import { useRouter } from 'next/router'; +import { useNostr } from '@/hooks/useNostr'; +import { parseEvent } from '@/utils/nostr'; +import { useImageProxy } from '@/hooks/useImageProxy'; +import Image from 'next/image'; +import 'primeicons/primeicons.css'; + +export default function Details() { + const [event, setEvent] = useState(null); + const [processedEvent, setProcessedEvent] = useState({}); + + const { returnImageProxy } = useImageProxy(); + const { fetchSingleEvent } = useNostr(); + + const router = useRouter(); + + useEffect(() => { + if (router.isReady) { + const { slug } = router.query; + + const fetchEvent = async (slug) => { + const event = await fetchSingleEvent(slug); + if (event) { + setEvent(event); + } + }; + + fetchEvent(slug); + } + }, [router.isReady, router.query]); + + useEffect(() => { + if (event) { + const { id, content, title, summary, image, published_at } = parseEvent(event); + setProcessedEvent({ id, content, title, summary, image, published_at }); + } + }, [event]); + + return ( +
+ router.push('/')} /> +
+ { + processedEvent && ( + <> + resource thumbnail +

{processedEvent.title}

+

{processedEvent.summary}

+ + ) + } +
+
+ ); +} \ No newline at end of file diff --git a/src/pages/profile.js b/src/pages/profile.js index ab5d6ed..c20507d 100644 --- a/src/pages/profile.js +++ b/src/pages/profile.js @@ -1,6 +1,7 @@ -import React from "react"; +import React, {useRef} from "react"; import { Button } from "primereact/button"; import { DataTable } from 'primereact/datatable'; +import { Menu } from 'primereact/menu'; import { Column } from 'primereact/column'; import { useSelector } from "react-redux"; import { useImageProxy } from "@/hooks/useImageProxy"; @@ -9,44 +10,85 @@ import Image from "next/image"; const Profile = () => { const user = useSelector((state) => state.user.user); const { returnImageProxy } = useImageProxy(); + const menu = useRef(null); const purchases = [ - { code: '123', name: 'Product 1', category: 'Category 1', quantity: 1 }, - { code: '124', name: 'Product 2', category: 'Category 2', quantity: 2 }, - { code: '125', name: 'Product 3', category: 'Category 3', quantity: 3 }, - { code: '126', name: 'Product 4', category: 'Category 4', quantity: 4 }, - { code: '127', name: 'Product 5', category: 'Category 5', quantity: 5 }, + { + cost: 100, + name: 'Course 1', + category: 'Education', + date: '2021-09-01' + }, + { + cost: 200, + name: 'Course 2', + category: 'Education', + date: '2021-09-01' + }, + { + cost: 300, + name: 'Course 3', + category: 'Education', + date: '2021-09-01' + }, + { + cost: 400, + name: 'Course 4', + category: 'Education', + date: '2021-09-01' + } ]; + const menuItems = [ + { + label: 'Edit', + icon: 'pi pi-pencil', + command: () => { + // Add your edit functionality here + } + }, + { + label: 'Delete', + icon: 'pi pi-trash', + command: () => { + // Add your delete functionality here + } + } + ]; + + return ( <> -
- {user.avatar && ( - logo - )} +
+
+ {user.avatar && ( + user's avatar + )} + menu.current.toggle(e)}> + +
+ +

{user.username}

{user.pubkey}

-
-

Subscription

You currently have no active subscription

- - + + - + ) diff --git a/src/redux/reducers/eventsReducer.js b/src/redux/reducers/eventsReducer.js index 149e5b3..94d0874 100644 --- a/src/redux/reducers/eventsReducer.js +++ b/src/redux/reducers/eventsReducer.js @@ -5,15 +5,16 @@ const addItems = (state, action, key) => { const existingIds = new Set(state[key].map(item => item.id)); if (Array.isArray(action.payload)) { + console.log('action.payload', action.payload); // Filter out duplicates based on the id const uniqueItems = action.payload.filter(item => !existingIds.has(item.id)); // If payload is an array, spread it into the existing array without duplicates - state[key] = [...state[key], ...uniqueItems]; + state[key] = [...state[key], ...action.payload]; } else { // If payload is a single item, push it into the array if it's not a duplicate - if (!existingIds.has(action.payload.id)) { + // if (!existingIds.has(action.payload.id)) { state[key].push(action.payload); - } + // } } }; diff --git a/src/styles/globals.css b/src/styles/globals.css index c210c64..40901c9 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -18,3 +18,8 @@ background-color: transparent !important; border: none !important; } + +.p-menubar-button .p-icon { + display: none !important; +} + diff --git a/tailwind.config.js b/tailwind.config.js index d53b2ea..43a07d7 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -7,10 +7,13 @@ module.exports = { ], theme: { extend: { + screens: { + 'max-mob': {'max': '475px'}, + 'max-tab': {'max': '768px'}, + }, backgroundImage: { 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', - 'gradient-conic': - 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', + 'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', }, }, },