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
This commit is contained in:
mukimovd 2025-05-01 23:09:14 +00:00
parent 1d35cf4e58
commit 7acaa3c393

View File

@ -71,7 +71,8 @@ import {
Eye, Eye,
ExternalLink, ExternalLink,
Palette, Palette,
Columns Columns,
X
} from "lucide-react"; } from "lucide-react";
// Type definitions for linguistic analysis // 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 count = Math.ceil(word.length / 3);
const breakdown = []; const breakdown = [];
for (let i = 0; i < word.length; i += 3) { for (let i = 0; i < word.length; i += 3) {
@ -271,7 +272,7 @@ export default function NewWorkReading() {
.map(w => w.replace(/[.,;!?]/g, '').toLowerCase()) .map(w => w.replace(/[.,;!?]/g, '').toLowerCase())
.filter(w => w.length > 0); .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 // Theme lexicon
const themes = ['love', 'nature', 'time', 'death', 'art']; const themes = ['love', 'nature', 'time', 'death', 'art'];
@ -321,11 +322,15 @@ export default function NewWorkReading() {
const lines = contentToLines(content); const lines = contentToLines(content);
const totalPages = Math.ceil(lines.length / linesPerPage); const totalPages = Math.ceil(lines.length / linesPerPage);
// Make sure active page is in bounds // Make sure active page is in bounds but without causing re-renders
const safePage = Math.min(Math.max(1, activePage), totalPages); const safePage = Math.min(Math.max(1, activePage), Math.max(1, totalPages));
if (safePage !== activePage) {
setActivePage(safePage); // 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 startIdx = (safePage - 1) * linesPerPage;
const endIdx = startIdx + linesPerPage; const endIdx = startIdx + linesPerPage;