From 4697dbc6f050e783284aa2f46079dbd699d84c44 Mon Sep 17 00:00:00 2001
From: Jerald-Golden-B <jerald@hexrfactory.com>
Date: Sat, 21 Jun 2025 09:36:34 +0530
Subject: [PATCH] refactor: extract VersionHistoryItem component for improved
 readability and maintainability

---
 .../versionHisory/VersionHistory.tsx          | 70 ++++++++++++-------
 1 file changed, 44 insertions(+), 26 deletions(-)

diff --git a/app/src/components/layout/sidebarRight/versionHisory/VersionHistory.tsx b/app/src/components/layout/sidebarRight/versionHisory/VersionHistory.tsx
index f4c4bb4..09fa67d 100644
--- a/app/src/components/layout/sidebarRight/versionHisory/VersionHistory.tsx
+++ b/app/src/components/layout/sidebarRight/versionHisory/VersionHistory.tsx
@@ -99,32 +99,18 @@ const VersionHistory = () => {
                 {versionHistory.length === 0 ? (
                     <div className="no-versions-message">No saved versions</div>
                 ) : (
-                    versionHistory.map((version) => (
-                        <button
-                            key={version.versionId}
-                            className="saved-version"
-                            onClick={() => handleSelectVersion(version)}
-                        >
-                            <div className="version-name">v {version.version}</div>
-                            <div className="version-details">
-                                <div className="details">
-                                    <span className="timestamp">
-                                        <RenameInput
-                                            value={version.versionName ? version.versionName : version.timeStamp}
-                                            onRename={(newName) =>
-                                                handleVersionNameChange(newName, version.versionId)
-                                            }
-                                        />
-                                    </span>
-                                    <span className="saved-by">
-                                        <div className="user-profile">{version.createdBy[0]}</div>
-                                        <div className="user-name">{version.createdBy}</div>
-                                    </span>
-                                </div>
-                                <ArrowIcon />
-                            </div>
-                        </button>
-                    ))
+                    versionHistory.map((version) => {
+                        const key = `version-${version.versionId}`;
+                        return (
+                            <VersionHistoryItem
+                                key={key}
+                                version={version}
+                                onSelect={handleSelectVersion}
+                                onRename={handleVersionNameChange}
+                            />
+                        );
+                    })
+
                 )}
             </div>
         </div>
@@ -132,3 +118,35 @@ const VersionHistory = () => {
 };
 
 export default VersionHistory;
+
+type VersionHistoryItemProps = {
+    version: Version;
+    onSelect: (version: Version) => void;
+    onRename: (newName: string, versionId: string) => void;
+};
+
+const VersionHistoryItem: React.FC<VersionHistoryItemProps> = ({ version, onSelect, onRename }) => {
+    return (
+        <button
+            className="saved-version"
+            onClick={() => onSelect(version)}
+        >
+            <div className="version-name">v {version.version}</div>
+            <div className="version-details">
+                <div className="details">
+                    <span className="timestamp">
+                        <RenameInput
+                            value={version.versionName ? version.versionName : version.timeStamp}
+                            onRename={(newName) => onRename(newName, version.versionId)}
+                        />
+                    </span>
+                    <span className="saved-by">
+                        <div className="user-profile">{version.createdBy[0]}</div>
+                        <div className="user-name">{version.createdBy}</div>
+                    </span>
+                </div>
+                <ArrowIcon />
+            </div>
+        </button>
+    );
+};