Refactor/courses cleanup

package.json

@@ -32,6 +32,7 @@
     "@vercel/kv": "^3.0.0",
     "axios": "^1.7.2",
     "bech32": "^2.0.0",
+    "buffer": "^6.0.3",
     "chart.js": "^4.4.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",

src/components/content/courses/CourseDetails.js → src/components/content/courses/details/CourseDetails.js

@@ -19,7 +19,7 @@ import { ProgressSpinner } from 'primereact/progressspinner';
 import { Toast } from 'primereact/toast';
 
 // Import the desktop and mobile components
-import DesktopCourseDetails from './DesktopCourseDetails';
+import DesktopCourseDetails from '@/components/content/courses/details/DesktopCourseDetails';
 import MobileCourseDetails from './MobileCourseDetails';
 
 export default function CourseDetails({

src/components/content/courses/CourseSidebar.js → src/components/content/courses/layout/CourseSidebar.js

@@ -37,8 +37,8 @@ const CourseSidebar = ({
                 ${isMobileView ? 'mb-3' : 'mb-2'}
             `}
       onClick={() => {
-        // Force full page refresh to trigger proper decryption
-        window.location.href = `/course/${window.location.pathname.split('/').pop()}?active=${index}`;
+        // Use smooth navigation function instead of forcing page refresh
+        onLessonSelect(index);
       }}
     >
       <div className={`flex items-start p-3 cursor-pointer ${isMobileView ? 'p-4' : 'p-3'}`}>

src/components/content/courses/tabs/CourseContent.js

@@ -0,0 +1,122 @@
+import React, { useState, useEffect } from 'react';
+import VideoLesson from '@/components/content/courses/lessons/VideoLesson';
+import DocumentLesson from '@/components/content/courses/lessons/DocumentLesson';
+import CombinedLesson from '@/components/content/courses/lessons/CombinedLesson';
+import MarkdownDisplay from '@/components/markdown/MarkdownDisplay';
+
+/**
+ * Component to display course content including lessons
+ */
+const CourseContent = ({ 
+  lessons, 
+  activeIndex, 
+  course, 
+  paidCourse, 
+  decryptedLessonIds, 
+  setCompleted 
+}) => {
+  const [lastActiveIndex, setLastActiveIndex] = useState(activeIndex);
+  const [isTransitioning, setIsTransitioning] = useState(false);
+  const [currentLesson, setCurrentLesson] = useState(null);
+
+  // Initialize current lesson and handle updates when lessons or activeIndex change
+  useEffect(() => {
+    if (lessons.length > 0 && activeIndex < lessons.length) {
+      setCurrentLesson(lessons[activeIndex]);
+    } else {
+      setCurrentLesson(null);
+    }
+  }, [lessons, activeIndex]);
+
+  // Handle smooth transitions between lessons
+  useEffect(() => {
+    if (activeIndex !== lastActiveIndex) {
+      // Start transition
+      setIsTransitioning(true);
+
+      // After a short delay, update the current lesson
+      const timer = setTimeout(() => {
+        setCurrentLesson(lessons[activeIndex] || null);
+        setLastActiveIndex(activeIndex);
+
+        // End transition with a slight delay to ensure content is ready
+        setTimeout(() => {
+          setIsTransitioning(false);
+        }, 50);
+      }, 300); // Match this with CSS transition duration
+
+      return () => clearTimeout(timer);
+    }
+  }, [activeIndex, lastActiveIndex, lessons]);
+
+  const renderLesson = (lesson) => {
+    if (!lesson) return null;
+
+    // Check if this specific lesson is decrypted
+    const lessonDecrypted = !paidCourse || decryptedLessonIds[lesson.id] || false;
+
+    if (lesson.topics?.includes('video') && lesson.topics?.includes('document')) {
+      return (
+        <CombinedLesson
+          key={`combined-${lesson.id}`}
+          lesson={lesson}
+          course={course}
+          decryptionPerformed={lessonDecrypted}
+          isPaid={paidCourse}
+          setCompleted={setCompleted}
+        />
+      );
+    } else if (lesson.type === 'video' || lesson.topics?.includes('video')) {
+      return (
+        <VideoLesson
+          key={`video-${lesson.id}`}
+          lesson={lesson}
+          course={course}
+          decryptionPerformed={lessonDecrypted}
+          isPaid={paidCourse}
+          setCompleted={setCompleted}
+        />
+      );
+    } else if (lesson.type === 'document' || lesson.topics?.includes('document')) {
+      return (
+        <DocumentLesson
+          key={`doc-${lesson.id}`}
+          lesson={lesson}
+          course={course}
+          decryptionPerformed={lessonDecrypted}
+          isPaid={paidCourse}
+          setCompleted={setCompleted}
+        />
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <>
+      {lessons.length > 0 && currentLesson ? (
+        <div className="bg-gray-800 rounded-lg shadow-sm overflow-hidden">
+          <div 
+            key={`lesson-container-${currentLesson.id}`}
+            className={`transition-opacity duration-300 ease-in-out ${isTransitioning ? 'opacity-0' : 'opacity-100'}`}
+          >
+            {renderLesson(currentLesson)}
+          </div>
+        </div>
+      ) : (
+        <div className={`text-center bg-gray-800 rounded-lg p-8 transition-opacity duration-300 ease-in-out ${isTransitioning ? 'opacity-0' : 'opacity-100'}`}>
+          <p>Select a lesson from the sidebar to begin learning.</p>
+        </div>
+      )}
+
+      {course?.content && (
+        <div className="mt-8 bg-gray-800 rounded-lg shadow-sm">
+          <MarkdownDisplay content={course.content} className="p-4 rounded-lg" />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default CourseContent; 

src/components/content/courses/tabs/CourseOverview.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Tag } from 'primereact/tag';
+import CourseDetails from '../details/CourseDetails';
+
+/**
+ * Component to display course overview with details
+ */
+const CourseOverview = ({ 
+  course,
+  paidCourse,
+  lessons,
+  decryptionPerformed,
+  handlePaymentSuccess,
+  handlePaymentError,
+  isMobileView,
+  completedLessons 
+}) => {
+  // Determine if course is completed
+  const isCompleted = lessons && lessons.length > 0 && completedLessons.length === lessons.length;
+
+  return (
+    <div className={`bg-gray-800 rounded-lg border border-gray-800 shadow-md ${isMobileView ? 'p-4' : 'p-6'}`}>
+      {isMobileView && course && (
+        <div className="mb-2">
+          {/* Completed tag above image in mobile view */}
+          {isCompleted && (
+            <div className="mb-2">
+              <Tag severity="success" value="Completed" />
+            </div>
+          )}
+
+          {/* Course image */}
+          {course.image && (
+            <div className="w-full h-48 relative rounded-lg overflow-hidden mb-3">
+              <img 
+                src={course.image} 
+                alt={course.title} 
+                className="w-full h-full object-cover"
+              />
+            </div>
+          )}
+        </div>
+      )}
+      <CourseDetails
+        processedEvent={course}
+        paidCourse={paidCourse}
+        lessons={lessons}
+        decryptionPerformed={decryptionPerformed}
+        handlePaymentSuccess={handlePaymentSuccess}
+        handlePaymentError={handlePaymentError}
+        isMobileView={isMobileView}
+        showCompletedTag={!isMobileView}
+      />
+    </div>
+  );
+};
+
+export default CourseOverview; 

src/components/content/courses/tabs/CourseQA.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import ZapThreadsWrapper from '@/components/ZapThreadsWrapper';
+
+/**
+ * Component to display course comments and Q&A section
+ */
+const CourseQA = ({ nAddress, isAuthorized, nsec, npub }) => {
+  return (
+    <div className="rounded-lg p-8 mt-4 bg-gray-800 max-mob:px-4">
+      <h2 className="text-xl font-bold mb-4">Comments</h2>
+      {nAddress !== null && isAuthorized ? (
+        <div className="px-4 max-mob:px-0">
+          <ZapThreadsWrapper
+            anchor={nAddress}
+            user={nsec || npub || null}
+            relays="wss://nos.lol/, wss://relay.damus.io/, wss://relay.snort.social/, wss://relay.nostr.band/, wss://relay.primal.net/, wss://nostrue.com/, wss://purplerelay.com/, wss://relay.devs.tools/"
+            disable="zaps"
+            isAuthorized={isAuthorized}
+          />
+        </div>
+      ) : (
+        <div className="text-center p-4 mx-4 bg-gray-800/50 rounded-lg">
+          <p className="text-gray-400">
+            Comments are only available to content purchasers, subscribers, and the content creator.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CourseQA; 

src/components/forms/combined/CombinedResourceForm.js

@@ -1,19 +1,17 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import axios from 'axios';
-import { useRouter } from 'next/router';
 import { InputText } from 'primereact/inputtext';
 import { InputTextarea } from 'primereact/inputtextarea';
 import { InputNumber } from 'primereact/inputnumber';
 import { InputSwitch } from 'primereact/inputswitch';
 import GenericButton from '@/components/buttons/GenericButton';
-import { useToast } from '@/hooks/useToast';
+import { useRouter } from 'next/router';
 import { useSession } from 'next-auth/react';
-import dynamic from 'next/dynamic';
-import { Tooltip } from 'primereact/tooltip';
+import { useToast } from '@/hooks/useToast';
 import 'primeicons/primeicons.css';
+import { Tooltip } from 'primereact/tooltip';
 import 'primereact/resources/primereact.min.css';
-
-const MDEditor = dynamic(() => import('@uiw/react-md-editor'), { ssr: false });
+import MarkdownEditor from '@/components/markdown/MarkdownEditor';
 
 const CDN_ENDPOINT = process.env.NEXT_PUBLIC_CDN_ENDPOINT;
 
@@ -199,9 +197,7 @@ const CombinedResourceForm = () => {
 
       <div className="p-inputgroup flex-1 flex-col mt-4">
         <span>Content</span>
-        <div data-color-mode="dark">
-          <MDEditor value={content} onChange={handleContentChange} height={350} />
-        </div>
+        <MarkdownEditor value={content} onChange={handleContentChange} height={350} />
       </div>
 
       <div className="mt-8 flex-col w-full">