saulteafarmer/plebdevs
1
0
Fork 0
mirror of https://github.com/AustinKelsay/plebdevs.git synced 2025-06-06 01:02:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

More sidebar fun, styling improvements, content is now broken out and rendered based on query param similar to community

Browse Source
This commit is contained in:
austinkelsay 2024-09-05 18:13:17 -05:00
parent c54f0cfed2
commit 9534f83e65
10 changed files with 115 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/content/carousels/GenericCarousel.js
View File

@ -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) => (

5
src/components/forms/course/CourseForm.js
View File

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

4
src/components/forms/course/LessonSelector.js
View File

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

58
src/components/sidebar/Sidebar.js
View File

@ -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 <span onClick={() => router.push('/content')}>{text}</span>
};
return (
<div className='max-sidebar:hidden w-[13vw] bg-gray-800 p-2 fixed h-[100%] flex flex-col'>
<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">
<div onClick={() => 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' : ''}`}>
<i className="pi pi-home pl-5" /> <p className="pl-2 rounded-md font-bold">Home</p>
</div>
<div onClick={() => 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' : ''}`}>
<i className="pi pi-video pl-5" /> <p className="pl-2 rounded-md font-bold">Content</p>
<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
pt={{
headerAction: ({ context }) => ({
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')}>
<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' : ''}`}>
<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' : ''}`}>
<p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-video text-sm pr-1"></i> Workshops</p>
</div>
<div onClick={() => 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' : ''}`}>
<p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-file text-sm pr-1"></i> Resources</p>
</div>
</AccordionTab>
</Accordion>
<div onClick={() => 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' : ''}`}>
<i className="pi pi-plus pl-5" /> <p className="pl-2 rounded-md font-bold">Create</p>
<i className="pi pi-plus pl-5 text-sm" /> <p className="pl-2 rounded-md font-bold text-lg">Create</p>
</div>
<div onClick={() => 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' : ''}`}>
<i className="pi pi-star pl-5" /> <p className="pl-2 rounded-md font-bold">Subscribe</p>
<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
@ -37,34 +58,35 @@ const Sidebar = () => {
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"}>
<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' : ''}`}>
<p className="pl-3 rounded-md font-bold"><i className="pi pi-hashtag text-sm"></i> global</p>
<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' : ''}`}>
<p className="pl-3 rounded-md font-bold"><i className="pi pi-hashtag text-sm"></i> nostr</p>
<p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-hashtag text-sm pr-1"></i> nostr</p>
</div>
<div onClick={() => 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' : ''}`}>
<p className="pl-3 rounded-md font-bold"><i className="pi pi-hashtag text-sm"></i> discord</p>
<p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-hashtag text-sm pr-1"></i> discord</p>
</div>
<div onClick={() => 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' : ''}`}>
<p className="pl-3 rounded-md font-bold"><i className="pi pi-hashtag text-sm"></i> stackernews</p>
<p className="pl-3 rounded-md font-bold text-lg"><i className="pi pi-hashtag text-sm pr-1"></i> stackernews</p>
</div>
</AccordionTab>
</Accordion>
</div>
<div className='mt-auto'>
<div onClick={() => 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' : ''}`}>
<i className="pi pi-cog pl-5" /> <p className="pl-2 rounded-md font-bold">Settings</p>
<i className="pi pi-cog pl-5 text-sm" /> <p className="pl-2 rounded-md font-bold text-lg">Settings</p>
</div>
<div onClick={() => 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`}>
<i className={`pi ${session ? 'pi-sign-out' : 'pi-sign-in'} pl-5`} /> <p className="pl-2 rounded-md font-bold">{session ? 'Logout' : 'Login'}</p>
<div onClick={() => 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' : ''}`}>
<i className={`pi ${session ? 'pi-sign-out' : 'pi-sign-in'} pl-5 text-sm`} /> <p className="pl-2 rounded-md font-bold text-lg">{session ? 'Logout' : 'Login'}</p>
</div>
{/* 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? */}
<div onClick={signOut} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg`}>
<i className="pi pi-sign-out pl-5" /> <p className="pl-2 rounded-md font-bold">Logout</p>
<i className="pi pi-sign-out pl-5 text-sm" /> <p className="pl-2 rounded-md font-bold text-lg">Logout</p>
</div>
</div>
</div>

1
src/components/sidebar/sidebar.module.css
View File

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

1
src/hooks/nostr/useWorkshops.js
View File

@ -59,6 +59,7 @@ export function useWorkshops() {
if (isClient && contentIds) {
fetchWorkshopsFromNDK().then(fetchedWorkshops => {
if (fetchedWorkshops && fetchedWorkshops.length > 0) {
console.log('fetchedworkshops', fetchedWorkshops)
setWorkshops(fetchedWorkshops);
}
});

2
src/pages/_app.js
View File

@ -35,7 +35,7 @@ export default function MyApp({
<Navbar />
<div className='flex'>
<Sidebar />
<div className='max-w-[100vw] pl-[13vw] max-sidebar:pl-0 pb-16 max-sidebar:pb-20'>
<div className='max-w-[100vw] pl-[14vw] max-sidebar:pl-0 pb-16 max-sidebar:pb-20'>
{/* <div className='max-w-[100vw]'> */}
<Component {...pageProps} />
</div>

2
src/pages/auth/signin.js
View File

@ -45,7 +45,7 @@ export default function SignIn() {
}
return (
<div className="w-[100vw] min-bottom-bar:w-[83vw] mx-auto mt-24 flex flex-col justify-center">
<div className="w-[100vw] min-bottom-bar:w-[82vw] mx-auto mt-24 flex flex-col justify-center">
<h1 className="text-center mb-8">Sign In</h1>
<Button
label={"login with nostr"}

84
src/pages/content.js → src/pages/content/index.js
View File

@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import React, { useEffect, useState, useMemo } from 'react';
import GenericCarousel from '@/components/content/carousels/GenericCarousel';
import { parseEvent, parseCourseEvent } from '@/utils/nostr';
import { useResources } from '@/hooks/nostr/useResources';
@ -8,30 +8,41 @@ import { TabMenu } from 'primereact/tabmenu';
import 'primeicons/primeicons.css';
import { InputText } from 'primereact/inputtext';
import { Button } from 'primereact/button';
import { useRouter } from 'next/router';
const MenuTab = ({ items, selectedTopic, onTabChange }) => {
const router = useRouter();
const allItems = ['All', ...items];
const menuItems = allItems.map((item, index) => {
let icon = 'pi pi-tag';
if (item === 'All') icon = 'pi pi-eye';
else if (item === 'resource') icon = 'pi pi-file';
else if (item === 'workshop') icon = 'pi pi-video';
else if (item === 'course') icon = 'pi pi-desktop';
else if (item === 'Resources') icon = 'pi pi-file';
else if (item === 'Workshops') icon = 'pi pi-video';
else if (item === 'Courses') icon = 'pi pi-desktop';
const queryParam = item === 'All' ? '' : `?tag=${item.toLowerCase()}`;
const isActive = router.asPath === `/content${queryParam}`;
return {
label: (
<Button
className={`${selectedTopic === item ? 'bg-primary text-white' : ''}`}
onClick={() => onTabChange(item)}
outlined={selectedTopic !== item}
className={`${isActive ? 'bg-primary text-white' : ''}`}
onClick={() => {
onTabChange(item);
router.push(`/content${queryParam}`);
}}
outlined={!isActive}
rounded
size='small'
label={item}
icon={icon}
/>
),
command: () => onTabChange(item)
command: () => {
onTabChange(item);
router.push(`/content${queryParam}`);
}
};
});
@ -55,6 +66,7 @@ const MenuTab = ({ items, selectedTopic, onTabChange }) => {
}
const ContentPage = () => {
const router = useRouter();
const { resources, resourcesLoading } = useResources();
const { workshops, workshopsLoading } = useWorkshops();
const { courses, coursesLoading } = useCourses();
@ -64,63 +76,81 @@ const ContentPage = () => {
const [processedCourses, setProcessedCourses] = useState([]);
const [allContent, setAllContent] = useState([]);
const [allTopics, setAllTopics] = useState([]);
const [activeIndex, setActiveIndex] = useState(0);
const [searchQuery, setSearchQuery] = useState('');
const [selectedTopic, setSelectedTopic] = useState('All');
const [selectedTopic, setSelectedTopic] = useState('All')
const [filteredContent, setFilteredContent] = useState([]);
useEffect(() => {
console.log(selectedTopic);
}, [selectedTopic]);
const tag = router.query.tag;
if (tag) {
const topic = tag.charAt(0).toUpperCase() + tag.slice(1);
setSelectedTopic(topic);
} else {
setSelectedTopic('All');
}
}, [router.query.tag]);
useEffect(() => {
if (resources && !resourcesLoading) {
const processedResources = resources.map(resource => parseEvent(resource));
const processedResources = resources.map(resource => ({...parseEvent(resource), type: 'resource'}));
setProcessedResources(processedResources);
}
}, [resources, resourcesLoading]);
useEffect(() => {
if (workshops && !workshopsLoading) {
const processedWorkshops = workshops.map(workshop => parseEvent(workshop));
const processedWorkshops = workshops.map(workshop => ({...parseEvent(workshop), type: 'workshop'}));
setProcessedWorkshops(processedWorkshops);
}
}, [workshops, workshopsLoading]);
useEffect(() => {
if (courses && !coursesLoading) {
const processedCourses = courses.map(course => parseCourseEvent(course));
const processedCourses = courses.map(course => ({...parseCourseEvent(course), type: 'course'}));
setProcessedCourses(processedCourses);
}
}, [courses, coursesLoading]);
useEffect(() => {
const uniqueTopics = new Set([...processedResources, ...processedWorkshops, ...processedCourses].map(item => item.topics).flat());
const priorityItems = ['All', 'course', 'workshop', 'resource'];
const allContent = [...processedResources, ...processedWorkshops, ...processedCourses];
setAllContent(allContent);
const uniqueTopics = new Set(allContent.map(item => item.topics).flat());
const priorityItems = ['All', 'Courses', 'Workshops', 'Resources'];
const otherTopics = Array.from(uniqueTopics).filter(topic => !priorityItems.includes(topic));
setAllTopics([...priorityItems.slice(1), ...otherTopics]);
setAllContent([...processedResources, ...processedWorkshops, ...processedCourses]);
const combinedTopics = [...priorityItems.slice(1), ...otherTopics];
setAllTopics(combinedTopics);
if (selectedTopic) {
filterContent(selectedTopic, allContent);
}
}, [processedResources, processedWorkshops, processedCourses]);
useEffect(() => {
let filtered = allContent;
if (selectedTopic !== 'All') {
if (['course', 'workshop', 'resource'].includes(selectedTopic)) {
filtered = allContent.filter(item => item.type === selectedTopic);
const filterContent = (topic, content) => {
let filtered = content;
if (topic !== 'All') {
const topicLower = topic.toLowerCase();
if (['courses', 'workshops', 'resources'].includes(topicLower)) {
filtered = content.filter(item => item.type === topicLower.slice(0, -1));
} else {
filtered = allContent.filter(item => item.topics && item.topics.includes(selectedTopic));
filtered = content.filter(item => item.topics && item.topics.includes(topic.toLowerCase()));
}
}
setFilteredContent(filtered);
}, [selectedTopic, allContent]);
};
const handleTopicChange = (newTopic) => {
setSelectedTopic(newTopic);
const queryParam = newTopic === 'All' ? '' : `?tag=${newTopic.toLowerCase()}`;
router.push(`/content${queryParam}`, undefined, { shallow: true });
filterContent(newTopic, allContent);
};
const renderCarousels = () => {
return (
<GenericCarousel
key={selectedTopic} // Add this line
items={filteredContent}
selectedTopic={selectedTopic}
title={`${selectedTopic} Content`}
@ -142,7 +172,7 @@ const ContentPage = () => {
/>
</div>
<MenuTab
items={allTopics}
items={['Courses', 'Workshops', 'Resources', ...allTopics.filter(topic => !['Courses', 'Workshops', 'Resources'].includes(topic))]}
selectedTopic={selectedTopic}
onTabChange={handleTopicChange}
className="max-w-[90%] mx-auto"

2
src/pages/course/[slug]/draft/edit.js
View File

@ -32,7 +32,7 @@ export default function Edit() {
}, [router.isReady, router.query, showToast]);
return (
<div className="w-[80vw] max-w-[80vw] mx-auto my-8 flex flex-col justify-center">
<div className="w-full min-bottom-bar:w-[87vw] max-sidebar:w-[100vw] px-8 mx-auto my-8 flex flex-col justify-center">
<h2 className="text-center mb-8">Edit Course Draft</h2>
{draft && <CourseForm draft={draft} />}
</div>