refactor for recalling /decrypt on lesson change

src/components/content/courses/CombinedLesson.js

@@ -167,10 +167,17 @@ const CombinedLesson = ({ lesson, course, decryptionPerformed, isPaid, setComple
   }, [videoCompleted, videoTracking, lesson.id, setCompleted, isVideo]);
 
   const renderContent = () => {
-    if (isPaid && decryptionPerformed) {
+    if (!lesson?.content) {
+      if (isVideo) {
         return (
-        <div ref={mdDisplayRef}>
+          <div className="w-full aspect-video rounded-lg flex flex-col items-center justify-center bg-gray-800">
-          <MarkdownDisplay content={lesson.content} className="p-4 rounded-lg w-full" />
+            <p className="text-center text-gray-400">No content available for this lesson.</p>
+          </div>
+        );
+      }
+      return (
+        <div className="w-full p-8 rounded-lg flex flex-col items-center justify-center bg-gray-800">
+          <p className="text-center text-gray-400">No content available for this lesson.</p>
         </div>
       );
     }
@@ -209,15 +216,11 @@ const CombinedLesson = ({ lesson, course, decryptionPerformed, isPaid, setComple
       );
     }
 
-    if (lesson?.content) {
     return (
       <div ref={mdDisplayRef}>
         <MarkdownDisplay content={lesson.content} className="p-4 rounded-lg w-full" />
       </div>
     );
-    }
-
-    return null;
   };
 
   return (

src/components/content/courses/CourseSidebar.js

@@ -36,7 +36,10 @@ const CourseSidebar = ({
                 }
                 ${isMobileView ? 'mb-3' : 'mb-2'}
             `}
-      onClick={() => onLessonSelect(index)}
+      onClick={() => {
+        // Force full page refresh to trigger proper decryption
+        window.location.href = `/course/${window.location.pathname.split('/').pop()}?active=${index}`;
+      }}
     >
       <div className={`flex items-start p-3 cursor-pointer ${isMobileView ? 'p-4' : 'p-3'}`}>
         {lesson.image && (

src/components/content/courses/DocumentLesson.js

@@ -113,9 +113,14 @@ const DocumentLesson = ({ lesson, course, decryptionPerformed, isPaid, setComple
   }, [isCompleted, lesson.id, setCompleted, isTracking]);
 
   const renderContent = () => {
-    if (isPaid && decryptionPerformed) {
+    if (!lesson?.content) {
-      return <MarkdownDisplay content={lesson.content} className="p-4 rounded-lg w-full" />;
+      return (
+        <div className="w-full p-8 rounded-lg flex flex-col items-center justify-center bg-gray-800">
+          <p className="text-center text-gray-400">No content available for this lesson.</p>
+        </div>
+      );
     }
+    
     if (isPaid && !decryptionPerformed) {
       return (
         <div className="w-full p-8 rounded-lg flex flex-col items-center justify-center">
@@ -128,10 +133,8 @@ const DocumentLesson = ({ lesson, course, decryptionPerformed, isPaid, setComple
         </div>
       );
     }
-    if (lesson?.content) {
+    
     return <MarkdownDisplay content={lesson.content} className="p-4 rounded-lg w-full" />;
-    }
-    return null;
   };
 
   return (

src/components/content/courses/VideoLesson.js

@@ -163,13 +163,17 @@ const VideoLesson = ({ lesson, course, decryptionPerformed, isPaid, setCompleted
   }, [decryptionPerformed, isPaid, checkDuration]);
 
   const renderContent = () => {
-    if (isPaid && decryptionPerformed) {
+    // Content not available
+    if (!lesson?.content) {
       return (
-        <div ref={mdDisplayRef}>
+        <div className="w-full aspect-video rounded-lg flex flex-col items-center justify-center bg-gray-800">
-          <MarkdownDisplay content={lesson.content} className="p-0 rounded-lg w-full" />
+          <p className="text-center text-gray-400">No content available for this lesson.</p>
         </div>
       );
-    } else if (isPaid && !decryptionPerformed) {
+    }
+    
+    // Paid content that needs to be purchased
+    if (isPaid && !decryptionPerformed) {
       return (
         <div className="w-full aspect-video rounded-lg flex flex-col items-center justify-center relative overflow-hidden">
           <div
@@ -189,14 +193,14 @@ const VideoLesson = ({ lesson, course, decryptionPerformed, isPaid, setCompleted
           </p>
         </div>
       );
-    } else if (lesson?.content) {
+    }
+    
+    // Content is available and decrypted (or free)
     return (
       <div ref={mdDisplayRef}>
         <MarkdownDisplay content={lesson.content} className="p-0 rounded-lg w-full" />
       </div>
     );
-    }
-    return null;
   };
 
   return (

src/config/appConfig.js

@@ -11,7 +11,8 @@ const appConfig = {
   ],
   authorPubkeys: [
     'f33c8a9617cb15f705fc70cd461cfd6eaf22f9e24c33eabad981648e5ec6f741',
-    'c67cd3e1a83daa56cff16f635db2fdb9ed9619300298d4701a58e68e84098345'
+    'c67cd3e1a83daa56cff16f635db2fdb9ed9619300298d4701a58e68e84098345',
+    '6260f29fa75c91aaa292f082e5e87b438d2ab4fdf96af398567b01802ee2fcd4'
   ],
   customLightningAddresses: [
     {

src/hooks/encryption/useDecryptContent.js

@@ -1,28 +1,61 @@
-import { useState } from 'react';
+import { useState, useRef } from 'react';
 import axios from 'axios';
 
 export const useDecryptContent = () => {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
+  const inProgressRef = useRef(false);
+  const cachedResults = useRef({});
   
-  const decryptContent = async encryptedContent => {
+  const decryptContent = async (encryptedContent) => {
+    // Validate input
+    if (!encryptedContent) {
+      return null;
+    }
+    
+    // Prevent multiple simultaneous calls
+    if (inProgressRef.current) {
+      // Wait for a small delay to prevent tight loop
+      await new Promise(resolve => setTimeout(resolve, 100));
+      
+      // Return a cached result if we have one
+      const firstChars = encryptedContent.substring(0, 20);
+      if (cachedResults.current[firstChars]) {
+        return cachedResults.current[firstChars];
+      }
+      
+      return null;
+    }
+    
+    // Check if we've already decrypted this content
+    const firstChars = encryptedContent.substring(0, 20);
+    if (cachedResults.current[firstChars]) {
+      return cachedResults.current[firstChars];
+    }
+    
+    try {
+      inProgressRef.current = true;
       setIsLoading(true);
       setError(null);
       
-    try {
       const response = await axios.post('/api/decrypt', { encryptedContent });
       
       if (response.status !== 200) {
-        throw new Error('Failed to decrypt content');
+        throw new Error(`Failed to decrypt: ${response.statusText}`);
       }
       
       const decryptedContent = response.data.decryptedContent;
-      setIsLoading(false);
+      
+      // Cache the result
+      cachedResults.current[firstChars] = decryptedContent;
+      
       return decryptedContent;
-    } catch (err) {
+    } catch (error) {
-      setError(err.message);
+      setError(error.message || 'Decryption failed');
-      setIsLoading(false);
       return null;
+    } finally {
+      setIsLoading(false);
+      inProgressRef.current = false;
     }
   };
   

src/pages/course/[slug]/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback, useMemo } from 'react';
+import React, { useEffect, useState, useCallback, useMemo, useRef } from 'react';
 import { useRouter } from 'next/router';
 import { parseCourseEvent, parseEvent, findKind0Fields } from '@/utils/nostr';
 import CourseDetails from '@/components/content/courses/CourseDetails';
@@ -135,42 +135,102 @@ const useLessons = (ndk, fetchAuthor, lessonIds, pubkey) => {
   return { lessons, uniqueLessons, setLessons };
 };
 
-const useDecryption = (session, paidCourse, course, lessons, setLessons) => {
+const useDecryption = (session, paidCourse, course, lessons, setLessons, router) => {
-  const [decryptionPerformed, setDecryptionPerformed] = useState(false);
+  const [decryptedLessonIds, setDecryptedLessonIds] = useState({});
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(false);
   const { decryptContent } = useDecryptContent();
+  const processingRef = useRef(false);
+  const lastLessonIdRef = useRef(null);
   
-  useEffect(() => {
+  // Get the current active lesson
-    const decrypt = async () => {
+  const currentLessonIndex = router.query.active ? parseInt(router.query.active, 10) : 0;
-      if (session?.user && paidCourse && !decryptionPerformed) {
+  const currentLesson = lessons.length > 0 ? lessons[currentLessonIndex] : null;
-        setLoading(true);
+  const currentLessonId = currentLesson?.id;
-        const canAccess =
+  
+  // Check if the current lesson has been decrypted
+  const isCurrentLessonDecrypted = 
+    !paidCourse || 
+    (currentLessonId && decryptedLessonIds[currentLessonId]);
+  
+  // Check user access
+  const hasAccess = useMemo(() => {
+    if (!session?.user || !paidCourse || !course) return false;
+    
+    return (
       session.user.purchased?.some(purchase => purchase.courseId === course?.d) ||
       session.user?.role?.subscribed ||
-          session.user?.pubkey === course?.pubkey;
+      session.user?.pubkey === course?.pubkey
-
-        if (canAccess && lessons.length > 0) {
-          try {
-            const decryptedLessons = await Promise.all(
-              lessons.map(async lesson => {
-                const decryptedContent = await decryptContent(lesson.content);
-                return { ...lesson, content: decryptedContent };
-              })
     );
-            setLessons(decryptedLessons);
+  }, [session, paidCourse, course]);
-            setDecryptionPerformed(true);
-          } catch (error) {
-            console.error('Error decrypting lessons:', error);
-          }
-        }
-        setLoading(false);
-      }
-      setLoading(false);
-    };
-    decrypt();
-  }, [session, paidCourse, course, lessons, decryptionPerformed, setLessons]);
   
-  return { decryptionPerformed, loading };
+  // Simplified decrypt function
+  const decryptCurrentLesson = useCallback(async () => {
+    if (!currentLesson || !hasAccess || !paidCourse) return;
+    if (processingRef.current) return;
+    if (decryptedLessonIds[currentLesson.id]) return;
+    if (!currentLesson.content) return;
+    
+    try {
+      processingRef.current = true;
+      setLoading(true);
+      
+      // Add safety timeout to prevent infinite processing
+      const timeoutPromise = new Promise((_, reject) => 
+        setTimeout(() => reject(new Error('Decryption timeout')), 10000)
+      );
+      
+      // Race between decryption and timeout
+      const decryptedContent = await Promise.race([
+        decryptContent(currentLesson.content),
+        timeoutPromise
+      ]);
+      
+      if (!decryptedContent) {
+        return;
+      }
+      
+      // Update the lessons array with decrypted content
+      const updatedLessons = lessons.map(lesson => 
+        lesson.id === currentLesson.id 
+          ? { ...lesson, content: decryptedContent } 
+          : lesson
+      );
+      
+      setLessons(updatedLessons);
+      
+      // Mark this lesson as decrypted
+      setDecryptedLessonIds(prev => ({
+        ...prev,
+        [currentLesson.id]: true
+      }));
+    } catch (error) {
+      // Silent error handling to prevent UI disruption
+    } finally {
+      setLoading(false);
+      processingRef.current = false;
+    }
+  }, [currentLesson, hasAccess, paidCourse, decryptContent, lessons, setLessons, decryptedLessonIds]);
+  
+  // Run decryption when lesson changes
+  useEffect(() => {
+    if (!currentLessonId) return;
+    
+    // Skip if the lesson hasn't changed
+    if (lastLessonIdRef.current === currentLessonId) return;
+    
+    // Update the last processed lesson id
+    lastLessonIdRef.current = currentLessonId;
+    
+    if (hasAccess && paidCourse && !decryptedLessonIds[currentLessonId]) {
+      decryptCurrentLesson();
+    }
+  }, [currentLessonId, hasAccess, paidCourse, decryptedLessonIds, decryptCurrentLesson]);
+  
+  return {
+    decryptionPerformed: isCurrentLessonDecrypted,
+    loading,
+    decryptedLessonIds
+  };
 };
 
 const Course = () => {
@@ -262,12 +322,13 @@ const Course = () => {
     course?.pubkey
   );
   
-  const { decryptionPerformed, loading: decryptionLoading } = useDecryption(
+  const { decryptionPerformed, loading: decryptionLoading, decryptedLessonIds } = useDecryption(
     session,
     paidCourse,
     course,
     lessons,
-    setLessons
+    setLessons,
+    router
   );
 
   useEffect(() => {
@@ -478,23 +539,27 @@ const Course = () => {
   }
 
   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
           lesson={lesson}
           course={course}
-          decryptionPerformed={decryptionPerformed}
+          decryptionPerformed={lessonDecrypted}
           isPaid={paidCourse}
           setCompleted={setCompleted}
         />
-        
       );
     } else if (lesson.type === 'video' && !lesson.topics?.includes('document')) {
       return (
         <VideoLesson
           lesson={lesson}
           course={course}
-          decryptionPerformed={decryptionPerformed}
+          decryptionPerformed={lessonDecrypted}
           isPaid={paidCourse}
           setCompleted={setCompleted}
         />
@@ -504,7 +569,7 @@ const Course = () => {
         <DocumentLesson
           lesson={lesson}
           course={course}
-          decryptionPerformed={decryptionPerformed}
+          decryptionPerformed={lessonDecrypted}
           isPaid={paidCourse}
           setCompleted={setCompleted}
         />
@@ -545,8 +610,10 @@ const Course = () => {
             <div className={`${activeTab === 'content' ? 'block' : 'hidden'}`}>
               {uniqueLessons.length > 0 && uniqueLessons[activeIndex] ? (
                 <div className="bg-gray-800 rounded-lg shadow-sm overflow-hidden">
+                  <div key={`lesson-${uniqueLessons[activeIndex].id}`}>
                     {renderLesson(uniqueLessons[activeIndex])}
                   </div>
+                </div>
               ) : (
                 <div className="text-center bg-gray-800 rounded-lg p-8">
                   <p>Select a lesson from the sidebar to begin learning.</p>