Skip to content

Commit c810d26

Browse files
JulusianJulusian
committed
chore: convert some class react components to functional
1 parent c6be9f5 commit c810d26

30 files changed

+890
-1162
lines changed

‎packages/webui/src/client/lib/ConnectionStatusNotification.tsx‎

Lines changed: 11 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,7 @@ import { Meteor } from 'meteor/meteor'
22
import { DDP } from 'meteor/ddp'
33
import * as React from 'react'
44
import * as _ from 'underscore'
5-
6-
import { Translated } from './ReactMeteorData/react-meteor-data'
75
import { MomentFromNow } from './Moment'
8-
96
import {
107
NotificationCenter,
118
NoticeLevel,
@@ -14,13 +11,14 @@ import {
1411
NotifierHandle,
1512
} from './notifications/notifications'
1613
import { WithManagedTracker } from './reactiveData/reactiveDataHelper'
17-
import { withTranslation } from 'react-i18next'
14+
import { useTranslation } from 'react-i18next'
1815
import { NotificationCenterPopUps } from './notifications/NotificationCenterPanel'
1916
import { MeteorPubSub } from '@sofie-automation/meteor-lib/dist/api/pubsub'
2017
import { ICoreSystem, ServiceMessage, Criticality } from '@sofie-automation/meteor-lib/dist/collections/CoreSystem'
2118
import { TFunction } from 'react-i18next'
2219
import { getRandomId } from '@sofie-automation/corelib/dist/lib'
2320
import { CoreSystem } from '../collections'
21+
import { useEffect } from 'react'
2422

2523
export class ConnectionStatusNotifier extends WithManagedTracker {
2624
private _notificationList: NotificationList
@@ -233,30 +231,16 @@ function createSystemNotification(cs: ICoreSystem | undefined): Notification | u
233231
return undefined
234232
}
235233

236-
interface IProps {}
237-
interface IState {
238-
dismissed: boolean
239-
}
240-
241-
export const ConnectionStatusNotification = withTranslation()(
242-
class ConnectionStatusNotification extends React.Component<Translated<IProps>, IState> {
243-
private notifier: ConnectionStatusNotifier | undefined
244-
245-
constructor(props: Translated<IProps>) {
246-
super(props)
247-
}
234+
export function ConnectionStatusNotification(): JSX.Element {
235+
const { t } = useTranslation()
248236

249-
componentDidMount(): void {
250-
this.notifier = new ConnectionStatusNotifier(this.props.t)
251-
}
237+
useEffect(() => {
238+
const notifier = new ConnectionStatusNotifier(t)
252239

253-
componentWillUnmount(): void {
254-
if (this.notifier) this.notifier.stop()
240+
return () => {
241+
notifier.stop()
255242
}
243+
}, [t])
256244

257-
render(): JSX.Element {
258-
// this.props.connected
259-
return <NotificationCenterPopUps />
260-
}
261-
}
262-
)
245+
return <NotificationCenterPopUps />
246+
}

‎packages/webui/src/client/lib/notifications/NotificationCenterPanel.tsx‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -455,9 +455,6 @@ export const NotificationCenterPopUps = translateWithTracker<IProps, IState, ITr
455455
/**
456456
* Presentational component that displays a panel containing the NotificationCenterPopUps list containing
457457
* the snoozed items and an 'Empty' label if no notifications are present.
458-
* @export
459-
* @class NotificationCenterPanel
460-
* @extends React.Component
461458
*/
462459
export const NotificationCenterPanel = (props: { limitCount?: number; filter?: NoticeLevel }): JSX.Element => (
463460
<div className="notification-center-panel">
@@ -486,9 +483,6 @@ interface IToggleProps {
486483

487484
/**
488485
* A button for with a count of notifications in the Notification Center
489-
* @export
490-
* @class NotificationCenterPanelToggle
491-
* @extends React.Component<IToggleProps>
492486
*/
493487
export function NotificationCenterPanelToggle({
494488
className,

‎packages/webui/src/client/ui/ClockView/Timediff.tsx‎

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,19 @@
1-
import * as React from 'react'
21
import ClassNames from 'classnames'
32
import { RundownUtils } from '../../lib/rundown'
43

5-
export const Timediff = class Timediff extends React.Component<{ time: number }> {
6-
render(): JSX.Element {
7-
const time = -this.props.time
8-
const isNegative = Math.floor(time / 1000) > 0
9-
const timeString = RundownUtils.formatDiffToTimecode(time, true, false, true, false, true, '', false, true)
4+
export function Timediff({ time: rawTime }: { time: number }): JSX.Element {
5+
const time = -rawTime
6+
const isNegative = Math.floor(time / 1000) > 0
7+
const timeString = RundownUtils.formatDiffToTimecode(time, true, false, true, false, true, '', false, true)
108

11-
return (
12-
<span
13-
className={ClassNames({
14-
'clocks-segment-countdown-red': isNegative,
15-
'clocks-counter-heavy': time / 1000 > -30,
16-
})}
17-
>
18-
{timeString}
19-
</span>
20-
)
21-
}
9+
return (
10+
<span
11+
className={ClassNames({
12+
'clocks-segment-countdown-red': isNegative,
13+
'clocks-counter-heavy': time / 1000 > -30,
14+
})}
15+
>
16+
{timeString}
17+
</span>
18+
)
2219
}

‎packages/webui/src/client/ui/PieceIcons/PieceIcon.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@ import {
66
RemoteContent,
77
EvsContent,
88
} from '@sofie-automation/blueprints-integration'
9-
import CamInputIcon from './Renderers/CamInputIcon'
10-
import VTInputIcon from './Renderers/VTInputIcon'
9+
import { CamInputIcon } from './Renderers/CamInputIcon'
10+
import { VTInputIcon } from './Renderers/VTInputIcon'
1111
import SplitInputIcon from './Renderers/SplitInputIcon'
12-
import RemoteInputIcon from './Renderers/RemoteInputIcon'
13-
import LiveSpeakInputIcon from './Renderers/LiveSpeakInputIcon'
14-
import GraphicsInputIcon from './Renderers/GraphicsInputIcon'
15-
import UnknownInputIcon from './Renderers/UnknownInputIcon'
12+
import { RemoteInputIcon } from './Renderers/RemoteInputIcon'
13+
import { LiveSpeakInputIcon } from './Renderers/LiveSpeakInputIcon'
14+
import { GraphicsInputIcon } from './Renderers/GraphicsInputIcon'
15+
import { UnknownInputIcon } from './Renderers/UnknownInputIcon'
1616
import { MeteorPubSub } from '@sofie-automation/meteor-lib/dist/api/pubsub'
1717
import { PieceInstance } from '@sofie-automation/corelib/dist/dataModel/PieceInstance'
1818
import { findPieceInstanceToShow, findPieceInstanceToShowFromInstances } from './utils'

‎packages/webui/src/client/ui/PieceIcons/Renderers/CamInputIcon.tsx‎

Lines changed: 37 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,43 @@
1-
import * as React from 'react'
2-
31
// @todo: use dynamic data for camera number
4-
export default class CamInputIcon extends React.Component<{ inputIndex?: string; abbreviation?: string }> {
5-
render(): JSX.Element {
6-
return (
7-
<svg className="piece_icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
8-
<rect width="126.5" height="89" className="camera" />
9-
<text
2+
export function CamInputIcon({
3+
inputIndex,
4+
abbreviation,
5+
}: {
6+
inputIndex?: string
7+
abbreviation?: string
8+
}): JSX.Element {
9+
return (
10+
<svg className="piece_icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
11+
<rect width="126.5" height="89" className="camera" />
12+
<text
13+
x="9.6414976"
14+
textLength="106.5"
15+
y="71.513954"
16+
style={{
17+
fill: '#ffffff',
18+
fontFamily: 'open-sans',
19+
fontSize: '40px',
20+
letterSpacing: '0px',
21+
lineHeight: '1.25',
22+
wordSpacing: '0px',
23+
textShadow: '0 2px 9px rgba(0, 0, 0, 0.5)',
24+
}}
25+
xmlSpace="preserve"
26+
>
27+
<tspan
1028
x="9.6414976"
11-
textLength="106.5"
1229
y="71.513954"
13-
style={{
14-
fill: '#ffffff',
15-
fontFamily: 'open-sans',
16-
fontSize: '40px',
17-
letterSpacing: '0px',
18-
lineHeight: '1.25',
19-
wordSpacing: '0px',
20-
textShadow: '0 2px 9px rgba(0, 0, 0, 0.5)',
21-
}}
22-
xmlSpace="preserve"
30+
textLength="107.21"
31+
lengthAdjust="spacing"
32+
style={{ fill: '#ffffff', fontFamily: 'Roboto', fontSize: '75px', fontWeight: 100 }}
33+
className="label"
2334
>
24-
<tspan
25-
x="9.6414976"
26-
y="71.513954"
27-
textLength="107.21"
28-
lengthAdjust="spacing"
29-
style={{ fill: '#ffffff', fontFamily: 'Roboto', fontSize: '75px', fontWeight: 100 }}
30-
className="label"
31-
>
32-
{this.props.abbreviation ? this.props.abbreviation : 'C'}
33-
<tspan style={{ fontFamily: 'Roboto', fontWeight: 'normal' }}>
34-
{this.props.inputIndex !== undefined ? this.props.inputIndex : ''}
35-
</tspan>
35+
{abbreviation ? abbreviation : 'C'}
36+
<tspan style={{ fontFamily: 'Roboto', fontWeight: 'normal' }}>
37+
{inputIndex !== undefined ? inputIndex : ''}
3638
</tspan>
37-
</text>
38-
</svg>
39-
)
40-
}
39+
</tspan>
40+
</text>
41+
</svg>
42+
)
4143
}

‎packages/webui/src/client/ui/PieceIcons/Renderers/GraphicsInputIcon.tsx‎

Lines changed: 26 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,30 @@
1-
import * as React from 'react'
2-
export default class GraphicsInputIcon extends React.Component<{ abbreviation?: string }> {
3-
render(): JSX.Element {
4-
return (
5-
<svg className="piece_icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
6-
<rect width="126.5" height="89" className="graphics" />
7-
<text
1+
export function GraphicsInputIcon({ abbreviation }: { abbreviation?: string }): JSX.Element {
2+
return (
3+
<svg className="piece_icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
4+
<rect width="126.5" height="89" className="graphics" />
5+
<text
6+
x="37.5"
7+
y="71.513954"
8+
style={{
9+
fill: '#ffffff',
10+
fontFamily: 'open-sans',
11+
fontSize: '40px',
12+
letterSpacing: '0px',
13+
lineHeight: '1.25',
14+
wordSpacing: '0px',
15+
textShadow: '0 2px 9px rgba(0, 0, 0, 0.5)',
16+
}}
17+
xmlSpace="preserve"
18+
>
19+
<tspan
820
x="37.5"
921
y="71.513954"
10-
style={{
11-
fill: '#ffffff',
12-
fontFamily: 'open-sans',
13-
fontSize: '40px',
14-
letterSpacing: '0px',
15-
lineHeight: '1.25',
16-
wordSpacing: '0px',
17-
textShadow: '0 2px 9px rgba(0, 0, 0, 0.5)',
18-
}}
19-
xmlSpace="preserve"
22+
style={{ fill: '#ffffff', fontFamily: 'Roboto', fontSize: '75px', fontWeight: 100 }}
23+
className="label"
2024
>
21-
<tspan
22-
x="37.5"
23-
y="71.513954"
24-
style={{ fill: '#ffffff', fontFamily: 'Roboto', fontSize: '75px', fontWeight: 100 }}
25-
className="label"
26-
>
27-
{this.props.abbreviation ? this.props.abbreviation : 'G'}
28-
</tspan>
29-
</text>
30-
</svg>
31-
)
32-
}
25+
{abbreviation ? abbreviation : 'G'}
26+
</tspan>
27+
</text>
28+
</svg>
29+
)
3330
}

‎packages/webui/src/client/ui/PieceIcons/Renderers/LiveSpeakInputIcon.tsx‎

Lines changed: 31 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,35 @@
1-
import * as React from 'react'
2-
3-
export default class LiveSpeakInputIcon extends React.Component<{ abbreviation?: string }> {
4-
render(): JSX.Element {
5-
return (
6-
<svg className="piece_icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
7-
<rect width="126.5" height="89" className="live-speak" />
8-
<linearGradient id="background-gradient" gradientTransform="rotate(90)">
9-
<stop className="stop1" offset={0.5} />
10-
<stop className="stop2" offset={0.5} />
11-
</linearGradient>
12-
<text
1+
export function LiveSpeakInputIcon({ abbreviation }: { abbreviation?: string }): JSX.Element {
2+
return (
3+
<svg className="piece_icon" version="1.1" viewBox="0 0 126.5 89" xmlns="http://www.w3.org/2000/svg">
4+
<rect width="126.5" height="89" className="live-speak" />
5+
<linearGradient id="background-gradient" gradientTransform="rotate(90)">
6+
<stop className="stop1" offset={0.5} />
7+
<stop className="stop2" offset={0.5} />
8+
</linearGradient>
9+
<text
10+
x="5"
11+
y="66.514"
12+
textLength="116.5"
13+
style={{
14+
fill: '#ffffff',
15+
fontFamily: 'open-sans',
16+
fontSize: '40px',
17+
letterSpacing: '0px',
18+
lineHeight: '1.25',
19+
wordSpacing: '0px',
20+
textShadow: '0 2px 9px rgba(0, 0, 0, 0.5)',
21+
}}
22+
xmlSpace="preserve"
23+
>
24+
<tspan
1325
x="5"
1426
y="66.514"
15-
textLength="116.5"
16-
style={{
17-
fill: '#ffffff',
18-
fontFamily: 'open-sans',
19-
fontSize: '40px',
20-
letterSpacing: '0px',
21-
lineHeight: '1.25',
22-
wordSpacing: '0px',
23-
textShadow: '0 2px 9px rgba(0, 0, 0, 0.5)',
24-
}}
25-
xmlSpace="preserve"
27+
style={{ fill: '#ffffff', fontFamily: 'Roboto', fontSize: '62px', fontWeight: 100 }}
28+
className="label"
2629
>
27-
<tspan
28-
x="5"
29-
y="66.514"
30-
style={{ fill: '#ffffff', fontFamily: 'Roboto', fontSize: '62px', fontWeight: 100 }}
31-
className="label"
32-
>
33-
{this.props.abbreviation ? this.props.abbreviation : 'LSK'}
34-
</tspan>
35-
</text>
36-
</svg>
37-
)
38-
}
30+
{abbreviation ? abbreviation : 'LSK'}
31+
</tspan>
32+
</text>
33+
</svg>
34+
)
3935
}

‎packages/webui/src/client/ui/PieceIcons/Renderers/RemoteInputIcon.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,17 @@ export function BaseRemoteInputIcon(props: Readonly<React.PropsWithChildren<{ cl
3535
)
3636
}
3737

38-
export default function RemoteInputIcon(props: Readonly<{ inputIndex?: string; abbreviation?: string }>): JSX.Element {
38+
export function RemoteInputIcon({
39+
inputIndex,
40+
abbreviation,
41+
}: {
42+
inputIndex?: string
43+
abbreviation?: string
44+
}): JSX.Element {
3945
return (
4046
<BaseRemoteInputIcon className="remote">
41-
{props.abbreviation ? props.abbreviation : 'LIVE'}
42-
<tspan style={{ fontFamily: 'Roboto', fontWeight: 'normal' }}>{props.inputIndex ?? ''}</tspan>
47+
{abbreviation ? abbreviation : 'LIVE'}
48+
<tspan style={{ fontFamily: 'Roboto', fontWeight: 'normal' }}>{inputIndex ?? ''}</tspan>
4349
</BaseRemoteInputIcon>
4450
)
4551
}

0 commit comments

Comments
 (0)