#1067: Optimize React component rendering

VocaDB · Nov 1, 2022 · a427c6b · a427c6b
1 parent 23f8467
commit a427c6b
Showing 1 changed file with 96 additions and 50 deletions.
diff --git a/VocaDbWeb/Scripts/Pages/Discussion/Partials/ViewFolder.tsx b/VocaDbWeb/Scripts/Pages/Discussion/Partials/ViewFolder.tsx
@@ -1,6 +1,7 @@
 import Button from '@/Bootstrap/Button';
 import { ServerSidePaging } from '@/Components/Shared/Partials/Knockout/ServerSidePaging';
 import { ProfileIconKnockout_ImageSize } from '@/Components/Shared/Partials/User/ProfileIconKnockout_ImageSize';
+import { DiscussionTopicContract } from '@/DataContracts/Discussion/DiscussionTopicContract';
 import { ImageSize } from '@/Models/Images/ImageSize';
 import { LoginManager } from '@/Models/LoginManager';
 import EditTopic from '@/Pages/Discussion/Partials/EditTopic';
@@ -15,6 +16,100 @@ import { Link, useNavigate } from 'react-router-dom';
 
 const loginManager = new LoginManager(vdb.values);
 
+const ViewFolderTableHeader = React.memo(
+	(): React.ReactElement => {
+		const { t } = useTranslation(['ViewRes.Discussion']);
+
+		return (
+			<thead>
+				<tr>
+					<th>{t('ViewRes.Discussion:Index.Topic')}</th>
+					<th>{t('ViewRes.Discussion:Index.Author')}</th>
+					<th className="hidden-phone">
+						{t('ViewRes.Discussion:Index.Comments')}
+					</th>
+					<th>{t('ViewRes.Discussion:Index.Created')}</th>
+					<th>{t('ViewRes.Discussion:Index.LastComment')}</th>
+				</tr>
+			</thead>
+		);
+	},
+);
+
+interface ViewFolderTableRowProps {
+	topic: DiscussionTopicContract;
+}
+
+const ViewFolderTableRow = observer(
+	({ topic }: ViewFolderTableRowProps): React.ReactElement => {
+		const navigate = useNavigate();
+
+		return (
+			<tr onClick={(): void => navigate(`/discussion/topics/${topic.id}`)}>
+				<td>
+					<span>{topic.name}</span>
+				</td>
+				<td>
+					<span>
+						{/* eslint-disable-next-line react/jsx-pascal-case */}
+						<ProfileIconKnockout_ImageSize
+							imageSize={ImageSize.TinyThumb}
+							user={topic.author}
+							size={18}
+						/>{' '}
+						<span>{topic.author.name}</span>
+					</span>
+				</td>
+				<td className="hidden-phone">
+					<span>{topic.commentCount}</span>
+				</td>
+				<td>
+					<span>{moment(topic.created).format('lll')}</span>
+				</td>
+				<td>
+					{topic.lastComment && (
+						<span>
+							{moment(topic.lastComment.created).format('lll')} by{' '}
+							{topic.lastComment.authorName}
+						</span>
+					)}
+				</td>
+			</tr>
+		);
+	},
+);
+
+interface ViewFolderTableBodyProps {
+	discussionIndexStore: DiscussionIndexStore;
+}
+
+const ViewFolderTableBody = observer(
+	({ discussionIndexStore }: ViewFolderTableBodyProps): React.ReactElement => {
+		return (
+			<tbody className="discussion-topics">
+				{discussionIndexStore.topics.map((topic) => (
+					<ViewFolderTableRow topic={topic} key={topic.id} />
+				))}
+			</tbody>
+		);
+	},
+);
+
+interface ViewFolderTableProps {
+	discussionIndexStore: DiscussionIndexStore;
+}
+
+const ViewFolderTable = observer(
+	({ discussionIndexStore }: ViewFolderTableProps): React.ReactElement => {
+		return (
+			<table className="table">
+				<ViewFolderTableHeader />
+				<ViewFolderTableBody discussionIndexStore={discussionIndexStore} />
+			</table>
+		);
+	},
+);
+
 interface ViewFolderProps {
 	discussionIndexStore: DiscussionIndexStore;
 }
@@ -89,56 +184,7 @@ const ViewFolder = observer(
 
 				<ServerSidePaging pagingStore={discussionIndexStore.paging} />
 
-				<table className="table">
-					<thead>
-						<tr>
-							<th>{t('ViewRes.Discussion:Index.Topic')}</th>
-							<th>{t('ViewRes.Discussion:Index.Author')}</th>
-							<th className="hidden-phone">
-								{t('ViewRes.Discussion:Index.Comments')}
-							</th>
-							<th>{t('ViewRes.Discussion:Index.Created')}</th>
-							<th>{t('ViewRes.Discussion:Index.LastComment')}</th>
-						</tr>
-					</thead>
-					<tbody className="discussion-topics">
-						{discussionIndexStore.topics.map((topic) => (
-							<tr
-								onClick={(): void => navigate(`/discussion/topics/${topic.id}`)}
-								key={topic.id}
-							>
-								<td>
-									<span>{topic.name}</span>
-								</td>
-								<td>
-									<span>
-										{/* eslint-disable-next-line react/jsx-pascal-case */}
-										<ProfileIconKnockout_ImageSize
-											imageSize={ImageSize.TinyThumb}
-											user={topic.author}
-											size={18}
-										/>{' '}
-										<span>{topic.author.name}</span>
-									</span>
-								</td>
-								<td className="hidden-phone">
-									<span>{topic.commentCount}</span>
-								</td>
-								<td>
-									<span>{moment(topic.created).format('lll')}</span>
-								</td>
-								<td>
-									{topic.lastComment && (
-										<span>
-											{moment(topic.lastComment.created).format('lll')} by{' '}
-											{topic.lastComment.authorName}
-										</span>
-									)}
-								</td>
-							</tr>
-						))}
-					</tbody>
-				</table>
+				<ViewFolderTable discussionIndexStore={discussionIndexStore} />
 
 				<ServerSidePaging pagingStore={discussionIndexStore.paging} />
 			</div>