refactor: extract VersionHistoryItem component for improved readability and maintainability
This commit is contained in:
parent
695e3c08bb
commit
4697dbc6f0
|
@ -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>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
Loading…
Reference in New Issue