chore: jsx component

Author: Julusian

packages/webui/src/client/ui/SegmentTimeline/SegmentContextMenu.tsx

@@ -14,7 +14,7 @@ import { IContextMenuContext } from '../RundownView'
 import { PartUi, SegmentUi } from './SegmentTimelineContainer'
 import { SegmentId } from '@sofie-automation/corelib/dist/dataModel/Ids'
 import { SegmentOrphanedReason } from '@sofie-automation/corelib/dist/dataModel/Segment'
-import { RenderUserEditOperations } from '../UserEditOperations/RenderUserEditOperations'
+import { UserEditOperationMenuItems } from '../UserEditOperations/RenderUserEditOperations'
 import * as RundownResolver from '../../lib/RundownResolver'
 
 interface IProps {
@@ -84,18 +84,19 @@ export const SegmentContextMenu = withTranslation()(
 										<span>{t('Clear queued segment')}</span>
 									</MenuItem>
 								)}
-								{segment &&
-									RenderUserEditOperations(
-										isSegmentEditAble,
-										segment.rundownId,
-										segment.name,
-										segment.userEditOperations,
-										{
-											segmentExternalId: segment?.externalId,
+								{segment && (
+									<UserEditOperationMenuItems
+										rundownId={segment.rundownId}
+										targetName={segment.name}
+										operationTarget={{
+											segmentExternalId: segment.externalId,
 											partExternalId: undefined,
 											pieceExternalId: undefined,
-										}
-									)}
+										}}
+										userEditOperations={segment.userEditOperations}
+										isFormEditable={isSegmentEditAble}
+									/>
+								)}
 								<hr />
 							</>
 						)}
@@ -166,17 +167,17 @@ export const SegmentContextMenu = withTranslation()(
 									</>
 								)}
 
-								{RenderUserEditOperations(
-									isPartEditAble,
-									part.instance.rundownId,
-									part.instance.part.title,
-									part.instance.part.userEditOperations,
-									{
+								<UserEditOperationMenuItems
+									rundownId={part.instance.rundownId}
+									targetName={part.instance.part.title}
+									operationTarget={{
 										segmentExternalId: segment?.externalId,
 										partExternalId: part.instance.part.externalId,
 										pieceExternalId: undefined,
-									}
-								)}
+									}}
+									userEditOperations={part.instance.part.userEditOperations}
+									isFormEditable={isPartEditAble}
+								/>
 							</>
 						)}
 					</ContextMenu>

packages/webui/src/client/ui/UserEditOperations/RenderUserEditOperations.tsx

@@ -5,20 +5,29 @@ import { CoreUserEditingDefinition } from '@sofie-automation/corelib/dist/dataMo
 import { JSONBlobParse, UserEditingType, UserOperationTarget } from '@sofie-automation/blueprints-integration'
 import { translateMessage } from '@sofie-automation/corelib/dist/TranslatableMessage'
 import { MenuItem } from '@jstarpl/react-contextmenu'
-import { i18nTranslator } from '../i18n'
 import { doModalDialog } from '../../lib/ModalDialog'
 import { SchemaFormInPlace } from '../../lib/forms/SchemaFormInPlace'
 import { doUserAction, UserAction } from '../../lib/clientUserAction'
 import { MeteorCall } from '../../lib/meteorApi'
+import { useTranslation } from 'react-i18next'
 
-export function RenderUserEditOperations(
-	isFormEditable: boolean,
-	rundownId: RundownId,
-	targetName: string,
-	userEditOperations: CoreUserEditingDefinition[] | undefined,
+interface UserEditOperationMenuItemsProps {
+	rundownId: RundownId
+	targetName: string
 	operationTarget: UserOperationTarget
-): React.JSX.Element | null {
-	const t = i18nTranslator
+	userEditOperations: CoreUserEditingDefinition[] | undefined
+	isFormEditable: boolean
+}
+
+export function UserEditOperationMenuItems({
+	rundownId,
+	targetName,
+	operationTarget,
+	userEditOperations,
+	isFormEditable,
+}: UserEditOperationMenuItemsProps): React.JSX.Element | null {
+	const { t } = useTranslation()
+
 	if (!userEditOperations || userEditOperations.length === 0) return null
 	return (
 		<>
@@ -41,7 +50,7 @@ export function RenderUserEditOperations(
 									// ToDo: use CSS to Style state instead of asterix
 									userEditOperation.isActive ? <span className="action-protected">{'• '}</span> : null
 								}
-								<span>{translateMessage(userEditOperation.label, i18nTranslator)}</span>
+								<span>{translateMessage(userEditOperation.label, t)}</span>
 							</MenuItem>
 						)
 					case UserEditingType.FORM:
@@ -77,7 +86,7 @@ export function RenderUserEditOperations(
 									})
 								}}
 							>
-								<span>{translateMessage(userEditOperation.label, i18nTranslator)}</span>
+								<span>{translateMessage(userEditOperation.label, t)}</span>
 							</MenuItem>
 						)
 					default: