refactor: extract VersionHistoryItem component for improved readability and maintainability

This commit is contained in:
Jerald-Golden-B 2025-06-21 09:36:34 +05:30
parent 695e3c08bb
commit 4697dbc6f0
1 changed files with 44 additions and 26 deletions

View File

@ -99,32 +99,18 @@ const VersionHistory = () => {
{versionHistory.length === 0 ? ( {versionHistory.length === 0 ? (
<div className="no-versions-message">No saved versions</div> <div className="no-versions-message">No saved versions</div>
) : ( ) : (
versionHistory.map((version) => ( versionHistory.map((version) => {
<button const key = `version-${version.versionId}`;
key={version.versionId} return (
className="saved-version" <VersionHistoryItem
onClick={() => handleSelectVersion(version)} key={key}
> version={version}
<div className="version-name">v {version.version}</div> onSelect={handleSelectVersion}
<div className="version-details"> onRename={handleVersionNameChange}
<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>
))
)} )}
</div> </div>
</div> </div>
@ -132,3 +118,35 @@ const VersionHistory = () => {
}; };
export default 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>
);
};