From 9534f83e651ae2ac1802359d3c1d1398c97905ec Mon Sep 17 00:00:00 2001 From: austinkelsay Date: Thu, 5 Sep 2024 18:13:17 -0500 Subject: [PATCH] More sidebar fun, styling improvements, content is now broken out and rendered based on query param similar to community --- .../content/carousels/GenericCarousel.js | 16 ++-- src/components/forms/course/CourseForm.js | 5 ++ src/components/forms/course/LessonSelector.js | 4 +- src/components/sidebar/Sidebar.js | 58 +++++++++---- src/components/sidebar/sidebar.module.css | 1 + src/hooks/nostr/useWorkshops.js | 1 + src/pages/_app.js | 2 +- src/pages/auth/signin.js | 2 +- src/pages/{content.js => content/index.js} | 84 +++++++++++++------ src/pages/course/[slug]/draft/edit.js | 2 +- 10 files changed, 115 insertions(+), 60 deletions(-) rename src/pages/{content.js => content/index.js} (61%) diff --git a/src/components/content/carousels/GenericCarousel.js b/src/components/content/carousels/GenericCarousel.js index 7de5303..383217e 100644 --- a/src/components/content/carousels/GenericCarousel.js +++ b/src/components/content/carousels/GenericCarousel.js @@ -20,7 +20,7 @@ const responsiveOptions = [ } ]; -export default function GenericCarousel({items, selectedTopic}) { +export default function GenericCarousel({items, selectedTopic, title}) { const [carousels, setCarousels] = useState([]); useEffect(() => { @@ -35,16 +35,9 @@ export default function GenericCarousel({items, selectedTopic}) { itemsPerCarousel = 1; } - const filteredItems = selectedTopic === 'All' - ? items - : items.filter(item => - item.topics && - (item.topics.includes(selectedTopic) || item.type === selectedTopic.toLowerCase()) - ); - const newCarousels = []; - for (let i = 0; i < filteredItems.length; i += itemsPerCarousel) { - newCarousels.push(filteredItems.slice(i, i + itemsPerCarousel)); + for (let i = 0; i < items.length; i += itemsPerCarousel) { + newCarousels.push(items.slice(i, i + itemsPerCarousel)); } setCarousels(newCarousels); }; @@ -55,7 +48,8 @@ export default function GenericCarousel({items, selectedTopic}) { return () => { window.removeEventListener('resize', handleResize); }; - }, [items, selectedTopic]); + }, [items]); + return ( <> {carousels.map((carouselItems, index) => ( diff --git a/src/components/forms/course/CourseForm.js b/src/components/forms/course/CourseForm.js index fd13dd0..fb26571 100644 --- a/src/components/forms/course/CourseForm.js +++ b/src/components/forms/course/CourseForm.js @@ -52,6 +52,10 @@ const CourseForm = ({ draft = null }) => { console.log('allContent', allContent); }, [allContent]); + useEffect(() => { + console.log('fasfsa', workshops) + }, [workshops]) + useEffect(() => { if (!resourcesLoading && !workshopsLoading && !draftsLoading) { let combinedContent = []; @@ -59,6 +63,7 @@ const CourseForm = ({ draft = null }) => { combinedContent = [...combinedContent, ...resources]; } if (workshops) { + console.log('workssdfsdfdsf', workshops) combinedContent = [...combinedContent, ...workshops]; } if (drafts) { diff --git a/src/components/forms/course/LessonSelector.js b/src/components/forms/course/LessonSelector.js index 685fdaa..ae4398d 100644 --- a/src/components/forms/course/LessonSelector.js +++ b/src/components/forms/course/LessonSelector.js @@ -45,6 +45,8 @@ const LessonSelector = ({ isPaidCourse, lessons, setLessons, allContent, onNewRe } }); + console.log('filtered content', filteredContent) + const draftResourceOptions = filteredContent.filter(content => content?.topics.includes('resource') && !content.kind).map(content => ({ label: content.title, value: content @@ -60,7 +62,7 @@ const LessonSelector = ({ isPaidCourse, lessons, setLessons, allContent, onNewRe value: content })); - const workshopOptions = filteredContent.filter(content => content?.topics.includes('workshop') && content.kind).map(content => ({ + const workshopOptions = filteredContent.filter(content => content?.type === "workshop" && content.kind).map(content => ({ label: content.title, value: content })); diff --git a/src/components/sidebar/Sidebar.js b/src/components/sidebar/Sidebar.js index ed9a5f1..5d695cc 100644 --- a/src/components/sidebar/Sidebar.js +++ b/src/components/sidebar/Sidebar.js @@ -10,26 +10,47 @@ const Sidebar = () => { // Helper function to determine if the path matches the current route const isActive = (path) => { - const pathWithQuery = router.pathname + router.asPath.split(router.pathname)[1]; - return pathWithQuery === path; + return router.asPath === path; }; const { data: session } = useSession(); + const header = (text) => { + return router.push('/content')}>{text} + }; + 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

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

+

Home

+ + ({ + className: `hover:bg-gray-700 rounded-lg ${isActive('/content') || router.pathname === '/content' ? 'bg-gray-700' : ''} ${styles['p-accordion-header-link']}` + }), + content: styles['p-accordion-content'], + header: 'text-lg' + }} + header={header('Content')}> +
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' : ''}`}> +

Courses

+
+
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' : ''}`}> +

Workshops

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

Resources

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

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

Subscribe

+

Subscribe

{ headerAction: ({ context }) => ({ className: `hover:bg-gray-700 rounded-lg ${isActive('/feed') ? 'bg-gray-700' : ''} ${styles['p-accordion-header-link']}` }), - content: styles['p-accordion-content'] + content: styles['p-accordion-content'], + header: 'text-lg' }} 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

+

global

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

+

nostr

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

+

discord

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

+

stackernews

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

Settings

+

Settings

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

{session ? 'Logout' : 'Login'}

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

{session ? 'Logout' : 'Login'}

{/* todo: have to add this extra button to push the sidebar to the right space but it doesnt seem to cause any negative side effects? */}
-

Logout

+

Logout

diff --git a/src/components/sidebar/sidebar.module.css b/src/components/sidebar/sidebar.module.css index af22992..fa0da44 100644 --- a/src/components/sidebar/sidebar.module.css +++ b/src/components/sidebar/sidebar.module.css @@ -1,6 +1,7 @@ .p-accordion .p-accordion-content { border: none !important; padding-top: 0px !important; + padding-bottom: 0px !important; } .p-accordion .p-accordion-header-link { border: none !important; diff --git a/src/hooks/nostr/useWorkshops.js b/src/hooks/nostr/useWorkshops.js index 7c8fc38..5d01b04 100644 --- a/src/hooks/nostr/useWorkshops.js +++ b/src/hooks/nostr/useWorkshops.js @@ -59,6 +59,7 @@ export function useWorkshops() { if (isClient && contentIds) { fetchWorkshopsFromNDK().then(fetchedWorkshops => { if (fetchedWorkshops && fetchedWorkshops.length > 0) { + console.log('fetchedworkshops', fetchedWorkshops) setWorkshops(fetchedWorkshops); } }); diff --git a/src/pages/_app.js b/src/pages/_app.js index c83bd5e..cdb071f 100644 --- a/src/pages/_app.js +++ b/src/pages/_app.js @@ -35,7 +35,7 @@ export default function MyApp({
-
+
{/*
*/}
diff --git a/src/pages/auth/signin.js b/src/pages/auth/signin.js index b7fa2fe..d8edc06 100644 --- a/src/pages/auth/signin.js +++ b/src/pages/auth/signin.js @@ -45,7 +45,7 @@ export default function SignIn() { } return ( -
+

Sign In

!['Courses', 'Workshops', 'Resources'].includes(topic))]} selectedTopic={selectedTopic} onTabChange={handleTopicChange} className="max-w-[90%] mx-auto" diff --git a/src/pages/course/[slug]/draft/edit.js b/src/pages/course/[slug]/draft/edit.js index ee1ceac..82a3e0e 100644 --- a/src/pages/course/[slug]/draft/edit.js +++ b/src/pages/course/[slug]/draft/edit.js @@ -32,7 +32,7 @@ export default function Edit() { }, [router.isReady, router.query, showToast]); return ( -
+

Edit Course Draft

{draft && }