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

course form mostly

Browse Source
This commit is contained in:
austinkelsay 2024-07-21 19:56:55 -05:00
parent b92a0ada02
commit 45bc85bba6
12 changed files with 3055 additions and 593 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3328
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@ -6,11 +6,13 @@
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
"lint": "next lint",
"postinstall": "npx prisma generate"
},
"dependencies": {
"@getalby/bitcoin-connect-react": "^3.5.3",
"@prisma/client": "^5.17.0",
"@uiw/react-markdown-preview": "^5.1.2",
"@uiw/react-md-editor": "^3.11.0",
"axios": "^1.7.2",
"bech32": "^2.0.0",

54
src/components/forms/CourseForm.js
View File

@ -8,6 +8,8 @@ import { Dropdown } from "primereact/dropdown";
import { v4 as uuidv4, v4 } from 'uuid';
import { useLocalStorageWithEffect } from "@/hooks/useLocalStorage";
import { useNostr } from "@/hooks/useNostr";
import { useRouter } from "next/router";
import { useToast } from "@/hooks/useToast";
import { nip19 } from "nostr-tools"
import { parseEvent } from "@/utils/nostr";
import ContentDropdownItem from "@/components/content/dropdowns/ContentDropdownItem";
@ -29,6 +31,9 @@ const CourseForm = () => {
const { fetchResources, fetchWorkshops, publish, fetchSingleEvent } = useNostr();
const [pubkey, setPubkey] = useState('');
const router = useRouter();
const { showToast } = useToast();
const fetchAllContent = async () => {
try {
// Fetch drafts from the database
@ -60,8 +65,6 @@ const CourseForm = () => {
}
}, [user]);
console.log('lessons', selectedLessons);
const handleSubmit = async (e) => {
e.preventDefault();
@ -74,7 +77,7 @@ const CourseForm = () => {
// If the lesson is already published, add its id to finalIds
finalIds.push(lesson.id);
} else {
// If the lesson is unpublished, create an event and sign it
// If the lesson is unpublished, create an event and sign it, publish it, save to db, and add its id to finalIds
let event;
if (lesson.price) {
event = {
@ -117,6 +120,8 @@ const CourseForm = () => {
const published = await publish(signedEvent);
if (published) {
// need to save resource to db
// delete the draft
axios.delete(`/api/drafts/${lesson.id}`)
.then((response) => {
@ -129,8 +134,6 @@ const CourseForm = () => {
}
}
console.log('finalIds:', finalIds);
// Fetch all of the lessons from Nostr by their ids
const fetchedLessons = await Promise.all(
finalIds.map(async (id) => {
@ -140,8 +143,6 @@ const CourseForm = () => {
})
);
console.log('fetchedLessons:', fetchedLessons);
// // Parse the fields from the lessons to get all of the necessary information
const parsedLessons = fetchedLessons.map((lesson) => {
const { id, kind, pubkey, content, title, summary, image, published_at, d, topics } = parseEvent(lesson);
@ -161,15 +162,19 @@ const CourseForm = () => {
if (parsedLessons.length === selectedLessons.length) {
// Create a new course event
const newCourseId = uuidv4();
const courseEvent = {
kind: 30004,
created_at: Math.floor(Date.now() / 1000),
content: "",
tags: [
['d', uuidv4()],
['d', newCourseId],
// add a tag for plebdevs community at some point
['name', title],
['picture', coverImage],
['about', summary],
['image', coverImage],
['description', summary],
['l', "Education"],
...parsedLessons.map((lesson) => ['a', `${lesson.kind}:${lesson.pubkey}:${lesson.d}`]),
],
};
@ -181,18 +186,27 @@ const CourseForm = () => {
const published = await publish(signedCourseEvent);
if (published) {
// Reset the form fields after publishing the course
setTitle('');
setSummary('');
setChecked(false);
setPrice(0);
setCoverImage('');
setLessons([{ id: uuidv4(), title: 'Select a lesson' }]);
setSelectedLessons([]);
setTopics(['']);
axios.post('/api/courses', {
id: newCourseId,
resources: {
connect: parsedLessons.map(lesson => ({ id: lesson.id }))
},
noteId: signedCourseEvent.id,
user: {
connect: {
id: user.id
}
}
})
.then(response => {
console.log('Course created:', response);
router.push(`/course/${signedCourseEvent.id}`);
})
.catch(error => {
console.error('Error creating course:', error);
});
} else {
// Handle error
showToast('error', 'Error', 'Failed to publish course. Please try again.');
}
}
};

111
src/components/forms/CourseFormNew.js Normal file
View File

@ -0,0 +1,111 @@
/**
* Course Creation Flow:
* 1. Generate a new course ID
* 2. Process each lesson:
* - If unpublished: create event, publish to Nostr, save to DB, delete draft
* - If published: use existing data
* 3. Create and publish course event to Nostr
* 4. Save course to database
* 5. Show success message and redirect to course page
*/
const handleSubmit = async (e) => {
e.preventDefault();
const newCourseId = uuidv4();
const processedLessons = [];
try {
// Step 1: Process lessons
for (const lesson of selectedLessons) {
let noteId = lesson.noteId;
if (!lesson.published_at) {
// Publish unpublished lesson
const event = createLessonEvent(lesson);
const signedEvent = await window.nostr.signEvent(event);
const published = await publish(signedEvent);
if (!published) {
throw new Error(`Failed to publish lesson: ${lesson.title}`);
}
noteId = signedEvent.id;
// Save to db and delete draft
await Promise.all([
axios.post('/api/resources', {
id: lesson.id,
noteId: noteId,
userId: user.id,
price: lesson.price || 0,
}),
axios.delete(`/api/drafts/${lesson.id}`)
]);
}
processedLessons.push({ id: lesson.id, noteId: noteId });
}
// Step 2: Create and publish course
const courseEvent = createCourseEvent(newCourseId, title, summary, coverImage, processedLessons);
const signedCourseEvent = await window.nostr.signEvent(courseEvent);
const published = await publish(signedCourseEvent);
if (!published) {
throw new Error('Failed to publish course');
}
// Step 3: Save course to db
await axios.post('/api/courses', {
id: newCourseId,
resources: {
connect: processedLessons.map(lesson => ({ id: lesson.id }))
},
noteId: signedCourseEvent.id,
userId: user.id,
price: price || 0
});
// Step 4: Show success message and redirect
showToast('success', 'Course created successfully');
router.push(`/course/${newCourseId}`);
} catch (error) {
console.error('Error creating course:', error);
showToast('error', error.message || 'Failed to create course. Please try again.');
}
};
const createLessonEvent = (lesson) => ({
kind: lesson.price ? 30402 : 30023,
content: lesson.content,
created_at: Math.floor(Date.now() / 1000),
tags: [
['d', lesson.id],
['title', lesson.title],
['summary', lesson.summary],
['image', lesson.image],
...lesson.topics.map(topic => ['t', topic]),
['published_at', Math.floor(Date.now() / 1000).toString()],
...(lesson.price ? [
['price', lesson.price],
['location', `https://plebdevs.com/${lesson.topics[1]}/${lesson.id}`]
] : [])
]
});
const createCourseEvent = (courseId, title, summary, coverImage, lessons) => ({
kind: 30004,
created_at: Math.floor(Date.now() / 1000),
content: "",
tags: [
['d', courseId],
['name', title],
['picture', coverImage],
['image', coverImage],
['description', summary],
['l', "Education"],
...lessons.map((lesson) => ['a', `${lesson.kind}:${lesson.pubkey}:${lesson.id}`]),
],
});

11
src/db/models/courseModels.js
View File

@ -21,7 +21,16 @@ export const getCourseById = async (id) => {
export const createCourse = async (data) => {
return await prisma.course.create({
data,
data: {
id: data.id,
noteId: data.noteId,
user: data.user,
resources: data.resources
},
include: {
resources: true,
user: true
}
});
};

2
src/hooks/useNostr.js
View File

@ -78,9 +78,11 @@ export function useNostr() {
[{ ids: [id] }],
{
onevent: (event) => {
console.log('Fetched event:', event);
resolve(event);
},
onerror: (error) => {
console.error('Failed to fetch event:', error);
reject(error);
},
}

22
src/pages/course/[slug].js
View File

@ -2,19 +2,13 @@ import React, { useEffect, useState } from "react";
import { useRouter } from "next/router";
import { useNostr } from "@/hooks/useNostr";
import { parseEvent } from "@/utils/nostr";
import ReactMarkdown from 'react-markdown';
import rehypeRaw from 'rehype-raw';
const MarkdownContent = ({ content }) => {
return (
<div>
<ReactMarkdown rehypePlugins={[rehypeRaw]}>
{content}
</ReactMarkdown>
</div>
);
};
import dynamic from 'next/dynamic';
const MDDisplay = dynamic(
() => import("@uiw/react-markdown-preview"),
{
ssr: false,
}
);
const Course = () => {
const [course, setCourse] = useState(null);
@ -45,7 +39,7 @@ const Course = () => {
<h2 className="text-lg text-center whitespace-pre-line">{course?.summary}</h2>
<div className="mx-auto my-6">
{
course?.content && <MarkdownContent content={course?.content} />
course?.content && <MDDisplay source={course.content} />
}
</div>
</div>

22
src/pages/details/[slug].js
View File

@ -12,19 +12,13 @@ import Image from 'next/image';
import dynamic from 'next/dynamic';
import ZapThreadsWrapper from '@/components/ZapThreadsWrapper';
import 'primeicons/primeicons.css';
import ReactMarkdown from 'react-markdown';
import rehypeRaw from 'rehype-raw';
const MarkdownContent = ({ content }) => {
return (
<div>
<ReactMarkdown rehypePlugins={[rehypeRaw]} className='markdown-content'>
{content}
</ReactMarkdown>
</div>
);
};
import dynamic from 'next/dynamic';
const MDDisplay = dynamic(
() => import("@uiw/react-markdown-preview"),
{
ssr: false,
}
);
const BitcoinConnectPayButton = dynamic(
() => import('@getalby/bitcoin-connect-react').then((mod) => mod.PayButton),
@ -193,7 +187,7 @@ export default function Details() {
)}
<div className='w-[75vw] mx-auto mt-12 p-12 border-t-2 border-gray-300 max-tab:p-0 max-mob:p-0 max-tab:max-w-[100vw] max-mob:max-w-[100vw]'>
{
processedEvent?.content && <MarkdownContent content={processedEvent.content} />
processedEvent?.content && <MDDisplay source={processedEvent.content} />
}
</div>
</div>

22
src/pages/draft/[slug]/index.js
View File

@ -13,19 +13,13 @@ import { Tag } from 'primereact/tag';
import Image from 'next/image';
import useResponsiveImageDimensions from '@/hooks/useResponsiveImageDimensions';
import 'primeicons/primeicons.css';
import ReactMarkdown from 'react-markdown';
import rehypeRaw from 'rehype-raw';
const MarkdownContent = ({ content }) => {
return (
<div>
<ReactMarkdown rehypePlugins={[rehypeRaw]} className='markdown-content'>
{content}
</ReactMarkdown>
</div>
);
};
import dynamic from 'next/dynamic';
const MDDisplay = dynamic(
() => import("@uiw/react-markdown-preview"),
{
ssr: false,
}
);
export default function Details() {
const [draft, setDraft] = useState(null);
@ -314,7 +308,7 @@ export default function Details() {
</div>
<div className='w-[75vw] mx-auto mt-12 p-12 border-t-2 border-gray-300 max-tab:p-0 max-mob:p-0 max-tab:max-w-[100vw] max-mob:max-w-[100vw]'>
{
draft?.content && <MarkdownContent content={draft.content} />
draft?.content && <MDDisplay source={draft.content} />
}
</div>
</div>

25
src/pages/index.js
View File

@ -1,5 +1,5 @@
import Head from 'next/head';
import React, { useEffect } from 'react';
import React, { useEffect, useCallback } from 'react';
import CoursesCarousel from '@/components/content/carousels/CoursesCarousel';
import WorkshopsCarousel from '@/components/content/carousels/WorkshopsCarousel';
import HeroBanner from '@/components/banner/HeroBanner';
@ -10,20 +10,19 @@ import axios from 'axios';
export default function Home() {
const [contentIds, setContentIds] = useLocalStorageWithEffect('contentIds', []);
// this is ready so now we can pass all ids into fetch hooks from loacl storage
useEffect(() => {
const fetchContentIds = async () => {
try {
const response = await axios.get('/api/content/all');
const ids = response.data;
setContentIds(ids);
} catch (error) {
console.error('Failed to fetch content IDs:', error);
}
};
const fetchContentIds = useCallback(async () => {
try {
const response = await axios.get('/api/content/all');
const ids = response.data;
setContentIds(ids);
} catch (error) {
console.error('Failed to fetch content IDs:', error);
}
}, []);
useEffect(() => {
fetchContentIds();
}, [setContentIds]);
}, [fetchContentIds]);
return (
<>

14
src/pages/resource/[slug].js
View File

@ -2,18 +2,6 @@ import React, { useEffect, useState } from "react";
import { useRouter } from "next/router";
import { useNostr } from "@/hooks/useNostr";
import { parseEvent } from "@/utils/nostr";
import ReactMarkdown from 'react-markdown';
import rehypeRaw from 'rehype-raw';
const MarkdownContent = ({ content }) => {
return (
<div>
<ReactMarkdown rehypePlugins={[rehypeRaw]}>
{content}
</ReactMarkdown>
</div>
);
};
const Resource = () => {
@ -48,7 +36,7 @@ const Resource = () => {
<h2 className="text-lg text-center whitespace-pre-line">{resource?.summary}</h2>
<div className="mx-auto my-6">
{
resource?.content && <MarkdownContent content={resource?.content} />
resource?.content && <MDDisplay source={resource.content} />
}
</div>
</div>

33
src/styles/globals.css
View File

@ -95,4 +95,37 @@ h3 {
font-size: 16px !important;
width: 16px !important;
height: 16px !important;
}
/* MarkdownDisplay styles */
pre {
background-color: #1e1e1e;
color: #d4d4d4;
padding: 1em;
border-radius: 5px;
overflow-x: auto;
}
code {
font-family: 'Consolas', 'Monaco', 'Andale Mono', 'Ubuntu Mono', monospace;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-name,
.hljs-tag {
color: #569cd6;
}
.hljs-string,
.hljs-title,
.hljs-section,
.hljs-attribute,
.hljs-literal,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-addition {
color: #ce9178;
}