Anything

src/modules/comic/ComicLanding.tsx

@@ -25,7 +25,7 @@ interface ComicData {
 export function ComicLanding() {
   const { sessionId } = useParams();
   const navigate = useNavigate();
-  
+
   const [isAuth, setIsAuth] = useState(false);
   const [password, setPassword] = useState('');
   const [comicData, setComicData] = useState<ComicData | null>(null);
@@ -34,7 +34,7 @@ export function ComicLanding() {
   const [searchQuery, setSearchQuery] = useState('');
   const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
   const [loadingChapter, setLoadingChapter] = useState(false);
-  
+
   const [ws, setWs] = useState<WebSocket | null>(null);
 
   useEffect(() => {
@@ -51,13 +51,12 @@ export function ComicLanding() {
         sessionStorage.removeItem(`comic_${sessionId}`);
       }
     }
-    
+
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
     const wsUrl = `${protocol}//${window.location.host}/ws`;
     const websocket = new WebSocket(wsUrl);
 
     websocket.onopen = () => {
-      console.log('[WS] Connected');
       websocket.send(JSON.stringify({
         type: 'validate_comic_password',
         sessionId
@@ -66,7 +65,7 @@ export function ComicLanding() {
 
     websocket.onmessage = (event) => {
       const message = JSON.parse(event.data);
-      
+
       if (message.type === 'password_validation_response') {
         if (!message.success) {
           setError(message.error || 'Session tidak valid');
@@ -87,7 +86,7 @@ export function ComicLanding() {
             }));
             return currentPassword;
           });
-          
+
           setLoadingChapter(false);
         } else {
           setError(message.error || 'Gagal memuat data');
@@ -99,21 +98,14 @@ export function ComicLanding() {
         setLoadingChapter(false);
         if (message.success) {
           setPassword((currentPassword) => {
-            console.log('[ComicLanding] Navigating to reader with:', {
-              hasData: !!message.data,
-              hasPassword: !!currentPassword,
-              password: currentPassword,
-              sessionId: sessionId
-            });
-            
-            navigate(`/read/${sessionId}_chapter`, { 
-              state: { 
+            navigate(`/read/${sessionId}_chapter`, {
+              state: {
                 chapterData: message.data,
                 password: currentPassword,
                 sessionId: sessionId
-              } 
+              }
             });
-            
+
             return currentPassword;
           });
         } else {
@@ -147,7 +139,7 @@ export function ComicLanding() {
 
   const handlePasswordSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    
+
     if (!password.trim()) {
       setError('Password tidak boleh kosong');
       return;
@@ -173,15 +165,8 @@ export function ComicLanding() {
       return;
     }
 
-    console.log('[ComicLanding] Reading chapter with:', {
-      chapterSlug,
-      sessionId,
-      hasPassword: !!password,
-      password: password
-    });
-
     setLoadingChapter(true);
-    
+
     ws.send(JSON.stringify({
       type: 'request_chapter_data',
       sessionId,
@@ -234,7 +219,7 @@ export function ComicLanding() {
               <h2>Protected Content</h2>
               <p>Masukkan password untuk melanjutkan</p>
             </div>
-            
+
             <form onSubmit={handlePasswordSubmit} className="auth-form">
               <div className="input-group">
                 <input
@@ -246,9 +231,9 @@ export function ComicLanding() {
                   autoFocus
                 />
               </div>
-              
+
               {error && <div className="error-message">{error}</div>}
-              
+
               <button type="submit" className="submit-btn">
                 Unlock
               </button>
@@ -298,13 +283,13 @@ export function ComicLanding() {
             <img src={comicData.thumbnailUrl} alt={comicData.title} />
             <div className="type-badge">{comicData.type}</div>
           </div>
-          
+
           <div className="hero-info">
             <h1 className="comic-title">{comicData.title}</h1>
             {comicData.indonesiaTitle && (
               <h2 className="comic-subtitle">{comicData.indonesiaTitle}</h2>
             )}
-            
+
             <div className="meta-info">
               <div className="meta-item">
                 <span className="meta-label">Author:</span>
@@ -339,7 +324,7 @@ export function ComicLanding() {
       <div className="chapters-section">
         <div className="chapters-header">
           <h2>Chapters</h2>
-          
+
           <div className="chapters-controls">
             <div className="search-box">
               <input
@@ -349,8 +334,8 @@ export function ComicLanding() {
                 onChange={(e) => setSearchQuery(e.target.value)}
               />
             </div>
-            
-            <button 
+
+            <button
               className="sort-btn"
               onClick={() => setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc')}
             >
@@ -366,8 +351,8 @@ export function ComicLanding() {
             </div>
           ) : (
             sortedChapters.map((chapter, index) => (
-              <div 
-                key={index} 
+              <div
+                key={index}
                 className="chapter-item"
                 onClick={() => handleReadChapter(chapter.slug)}
               >
@@ -388,4 +373,4 @@ export function ComicLanding() {
       </div>
     </div>
   );
-}
+}

src/modules/comic/ComicReader.tsx

@@ -26,7 +26,7 @@ export function ComicReader() {
   const { sessionId } = useParams();
   const navigate = useNavigate();
   const location = useLocation();
-  
+
   const [data, setData] = useState<ReaderData | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
@@ -38,72 +38,59 @@ export function ComicReader() {
   const [loadingChapter, setLoadingChapter] = useState(false);
   const [password, setPassword] = useState<string>('');
   const [originalSessionId, setOriginalSessionId] = useState<string>('');
-  
+
   const imageRefs = useRef<{ [key: number]: HTMLImageElement | null }>({});
   const controlsTimeout = useRef<number | null>(null);
   const scrollContainerRef = useRef<HTMLDivElement | null>(null);
   const wsRef = useRef<WebSocket | null>(null);
   const chapterData = location.state?.chapterData;
   useEffect(() => {
-  const statePassword = location.state?.password;
-  const stateSessionId = location.state?.sessionId;
-  
-  console.log('[Reader] Initializing auth data:', {
-    hasPassword: !!statePassword,
-    hasSessionId: !!stateSessionId,
-    password: statePassword,
-    sessionId: stateSessionId
-  });
-
-  if (statePassword) {
-    setPassword(statePassword);
-  }
-  
-  if (stateSessionId) {
-    setOriginalSessionId(stateSessionId);
-  }
-}, [location.state]);
+    const statePassword = location.state?.password;
+    const stateSessionId = location.state?.sessionId;
+
+    console.log('[Reader] Initializing auth data:', {
+      hasPassword: !!statePassword,
+      hasSessionId: !!stateSessionId,
+      password: statePassword,
+      sessionId: stateSessionId
+    });
+
+    if (statePassword) {
+      setPassword(statePassword);
+    }
+
+    if (stateSessionId) {
+      setOriginalSessionId(stateSessionId);
+    }
+  }, [location.state]);
 
   useEffect(() => {
     if (!password || !originalSessionId) return;
 
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
     const wsUrl = `${protocol}//${window.location.host}/ws`;
-    console.log('[Reader WS] Connecting to:', wsUrl);
-    
+   
     const ws = new WebSocket(wsUrl);
     let isConnected = false;
     wsRef.current = ws;
 
-    ws.onopen = () => {
-      console.log('[Reader WS] Connected and ready');
+    ws.onopen = () => {      
       isConnected = true;
     };
 
     ws.onmessage = (event) => {
       try {
         const message = JSON.parse(event.data);
-        
+
         if (message.type === 'chapter_data_response') {
           setLoadingChapter(false);
-          
+
           if (message.success && message.data) {
-            console.log('[Reader WS] New chapter data received:', {
-              title: message.data.title,
-              hasPrev: !!message.data.prevChapter,
-              hasNext: !!message.data.nextChapter,
-              prevChapter: message.data.prevChapter,
-              nextChapter: message.data.nextChapter,
-              hasAllChapters: !!message.data.allChapters,
-              allChaptersCount: message.data.allChapters?.length || 0
-            });
-            
-            // Preserve allChapters if not in response
             const newData = {
               ...message.data,
               allChapters: message.data.allChapters || data?.allChapters || []
             };
-            
+
             setData(newData);
             setCurrentPage(1);
             scrollContainerRef.current?.scrollTo({ top: 0 });
@@ -126,7 +113,6 @@ export function ComicReader() {
     };
 
     ws.onclose = () => {
-      console.log('[Reader WS] Disconnected');
       wsRef.current = null;
     };
 
@@ -139,14 +125,6 @@ export function ComicReader() {
 
   useEffect(() => {
     if (chapterData) {
-      console.log('[Reader] Chapter data received:', {
-        title: chapterData.title,
-        totalImages: chapterData.totalImages,
-        hasPrev: !!chapterData.prevChapter,
-        hasNext: !!chapterData.nextChapter,
-        prevChapter: chapterData.prevChapter,
-        nextChapter: chapterData.nextChapter
-      });
       setData(chapterData);
       setLoading(false);
       return;
@@ -161,7 +139,7 @@ export function ComicReader() {
     setError('Please open chapter from comic page');
     setLoading(false);
   }, [sessionId, password, chapterData, originalSessionId]);
-  
+
   useEffect(() => {
     const resetTimeout = () => {
       if (controlsTimeout.current) {
@@ -175,7 +153,7 @@ export function ComicReader() {
     };
 
     const handleMove = () => resetTimeout();
-    
+
     window.addEventListener('mousemove', handleMove);
     window.addEventListener('touchstart', handleMove);
 
@@ -187,15 +165,15 @@ export function ComicReader() {
       }
     };
   }, []);
-  
+
   useEffect(() => {
     const handleScroll = () => {
       if (!scrollContainerRef.current) return;
-      
-      const container = scrollContainerRef.current;      
+
+      const container = scrollContainerRef.current;
       const windowHeight = container.clientHeight;
       let currentIdx = 1;
-      
+
       for (let i = 1; i <= (data?.totalImages || 0); i++) {
         const img = imageRefs.current[i];
         if (img) {
@@ -208,7 +186,7 @@ export function ComicReader() {
           }
         }
       }
-      
+
       setCurrentPage(currentIdx);
     };
 
@@ -225,7 +203,7 @@ export function ComicReader() {
       const container = scrollContainerRef.current;
       const containerRect = container.getBoundingClientRect();
       const imgRect = img.getBoundingClientRect();
-      
+
       const scrollTo = container.scrollTop + (imgRect.top - containerRect.top);
       container.scrollTo({ top: scrollTo, behavior: 'smooth' });
     }
@@ -251,24 +229,15 @@ export function ComicReader() {
       setJumpPage('');
     }
   };
-  
-  const handleChapterNavigation = (chapterSlug: string) => {
-    console.log('[Reader] Attempting chapter navigation to:', chapterSlug);
-    console.log('[Reader] WebSocket state:', wsRef.current?.readyState);
-    console.log('[Reader] Has password:', !!password);
-    console.log('[Reader] Has sessionId:', !!originalSessionId);
 
+  const handleChapterNavigation = (chapterSlug: string) => {
     if (!password || !originalSessionId) {
       setError('Missing authentication data');
       return;
     }
 
-    // If WebSocket is not open, try to wait or show error
     if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
-      // Check if it's connecting
       if (wsRef.current?.readyState === WebSocket.CONNECTING) {
-        console.log('[Reader] WebSocket is connecting, waiting...');
-        // Wait a bit and retry
         setTimeout(() => {
           if (wsRef.current?.readyState === WebSocket.OPEN) {
             handleChapterNavigation(chapterSlug);
@@ -278,7 +247,7 @@ export function ComicReader() {
         }, 1000);
         return;
       }
-      
+
       setError('Connection lost. Please refresh the page.');
       console.error('[Reader] WebSocket not connected. State:', wsRef.current?.readyState);
       return;
@@ -295,7 +264,6 @@ export function ComicReader() {
       allChapters: data?.allChapters || []
     };
 
-    console.log('[Reader] Sending chapter request:', requestData);
     wsRef.current.send(JSON.stringify(requestData));
   };
 
@@ -312,7 +280,7 @@ export function ComicReader() {
     return (
       <div className="reader-loading">
         <div className="spinner"></div>
-        <p>Loading next chapter...</p>
+        <p>Loading chapter...</p>
       </div>
     );
   }
@@ -334,7 +302,7 @@ export function ComicReader() {
         <button className="back-btn" onClick={() => navigate(-1)}>
           ← Back
         </button>
-        
+
         <div className="reader-title">
           <h1>{data.title}</h1>
           <span className="page-indicator">
@@ -342,8 +310,8 @@ export function ComicReader() {
           </span>
         </div>
 
-        <button 
-          className="menu-btn" 
+        <button
+          className="menu-btn"
           onClick={() => setShowMenu(!showMenu)}
         >
           ☰
@@ -354,7 +322,7 @@ export function ComicReader() {
         <div className="hamburger-menu" onClick={() => setShowMenu(false)}>
           <div className="menu-content" onClick={(e) => e.stopPropagation()}>
             <button onClick={() => setShowMenu(false)} className="close-menu">✕</button>
-            
+
             <div className="menu-section">
               <h3>Navigation</h3>
               <button onClick={() => { scrollToPage(1); setShowMenu(false); }}>
@@ -437,14 +405,14 @@ export function ComicReader() {
 
       <div className="reader-footer">
         <div className="page-controls">
-          <button 
+          <button
             className="nav-control-btn"
             onClick={prevChapter}
             disabled={!data.prevChapter}
           >
             ← Prev
           </button>
-          
+
           <div className="page-info">
             <span>{currentPage} / {data.totalImages}</span>
             <input
@@ -457,7 +425,7 @@ export function ComicReader() {
             />
           </div>
 
-          <button 
+          <button
             className="nav-control-btn"
             onClick={nextChapter}
             disabled={!data.nextChapter}
@@ -468,4 +436,4 @@ export function ComicReader() {
       </div>
     </div>
   );
-}
+}