From 7acaa3c393676cc3daad6d8976ba144077585649 Mon Sep 17 00:00:00 2001
From: mukimovd <41473651-mukimovd@users.noreply.replit.com>
Date: Thu, 1 May 2025 23:09:14 +0000
Subject: [PATCH] Improve how the text is displayed and managed on the reading
 page

Refactors page navigation and enhances data processing in `NewWorkReading.tsx` to prevent re-renders and ensure type safety.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: cbacfb18-842a-4116-a907-18c0105ad8ec
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/39b5c689-6e8a-4d5a-9792-69cc81a56534/7a2b685c-be08-4ee5-b1e9-5d3d68ea9c89.jpg
---
 client/src/pages/works/NewWorkReading.tsx | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/client/src/pages/works/NewWorkReading.tsx b/client/src/pages/works/NewWorkReading.tsx
index 89c6284..e1f0070 100644
--- a/client/src/pages/works/NewWorkReading.tsx
+++ b/client/src/pages/works/NewWorkReading.tsx
@@ -71,7 +71,8 @@ import {
   Eye,
   ExternalLink,
   Palette,
-  Columns
+  Columns,
+  X
 } from "lucide-react";
 
 // Type definitions for linguistic analysis
@@ -236,7 +237,7 @@ export default function NewWorkReading() {
       });
     });
     
-    uniqueWords.forEach(word => {
+    Array.from(uniqueWords).forEach(word => {
       const count = Math.ceil(word.length / 3);
       const breakdown = [];
       for (let i = 0; i < word.length; i += 3) {
@@ -271,7 +272,7 @@ export default function NewWorkReading() {
       .map(w => w.replace(/[.,;!?]/g, '').toLowerCase())
       .filter(w => w.length > 0);
     
-    const complexTerms = [...new Set(allWords.filter(w => w.length > 8 || Math.random() > 0.9))];
+    const complexTerms = Array.from(new Set(allWords.filter(w => w.length > 8 || Math.random() > 0.9)));
     
     // Theme lexicon
     const themes = ['love', 'nature', 'time', 'death', 'art'];
@@ -321,11 +322,15 @@ export default function NewWorkReading() {
     const lines = contentToLines(content);
     const totalPages = Math.ceil(lines.length / linesPerPage);
     
-    // Make sure active page is in bounds
-    const safePage = Math.min(Math.max(1, activePage), totalPages);
-    if (safePage !== activePage) {
-      setActivePage(safePage);
-    }
+    // Make sure active page is in bounds but without causing re-renders
+    const safePage = Math.min(Math.max(1, activePage), Math.max(1, totalPages));
+    
+    // Only update active page in a useEffect to avoid infinite re-render
+    useEffect(() => {
+      if (safePage !== activePage) {
+        setActivePage(safePage);
+      }
+    }, [safePage, activePage]);
     
     const startIdx = (safePage - 1) * linesPerPage;
     const endIdx = startIdx + linesPerPage;