forked from akai/readest
Egan Gumiwang Pratama Bisma
46fdea3522
* feat: provide reading progress indicator for each books in the bookshelf * refactor: simplify bookshelf component and remove unused hook; enhance reading progress calculation - Removed the `useBookConfigLoader` hook as it was no longer needed. - Simplified the bookshelf items generation by eliminating the use of `useMemo`. - Improved the reading progress calculation in the `ReadingProgress` component to directly use the book's progress data. - Updated the `Book` type to include a `progress` field for better tracking of reading status. * fix formatting for readerStore
44 lines
1.0 KiB
TypeScript
44 lines
1.0 KiB
TypeScript
import type React from 'react';
|
|
import { memo, useMemo } from 'react';
|
|
import type { Book } from '@/types/book';
|
|
|
|
interface ReadingProgressProps {
|
|
book: Book;
|
|
}
|
|
|
|
const getProgressPercentage = (book: Book) => {
|
|
if (!book.progress || !book.progress[1]) {
|
|
return null;
|
|
}
|
|
if (book.progress && book.progress[1] === 1) {
|
|
return 100;
|
|
}
|
|
return Math.round((book.progress[0] / book.progress[1]) * 100);
|
|
};
|
|
|
|
const ReadingProgress: React.FC<ReadingProgressProps> = memo(
|
|
({ book }) => {
|
|
const progressPercentage = useMemo(() => getProgressPercentage(book), [book]);
|
|
|
|
if (!progressPercentage) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className='text-neutral-content/70 flex justify-between text-xs'>
|
|
<span>{progressPercentage}%</span>
|
|
</div>
|
|
);
|
|
},
|
|
(prevProps, nextProps) => {
|
|
return (
|
|
prevProps.book.hash === nextProps.book.hash &&
|
|
prevProps.book.updatedAt === nextProps.book.updatedAt
|
|
);
|
|
},
|
|
);
|
|
|
|
ReadingProgress.displayName = 'ReadingProgress';
|
|
|
|
export default ReadingProgress;
|