Skip to content

Commit ed367aa

Browse files
colin969colin969
committed
refactor: More components moved to functionals
1 parent a85980b commit ed367aa

12 files changed

+172
-381
lines changed

‎src/renderer/components/CreditsTooltip.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,12 @@ export type CreditsTooltipProps = {
1616
export function CreditsTooltip(props: CreditsTooltipProps) {
1717
const ref = useRef<HTMLDivElement>(null);
1818

19+
function onMouseMove(event: MouseEvent) {
20+
if (ref.current) {
21+
setPosition(ref.current, event.clientX, event.clientY);
22+
}
23+
}
24+
1925
// Follow cursor
2026
useEffect(() => {
2127
if (!props.profile) { return; } // (Tooltip is not visible)
@@ -26,12 +32,6 @@ export function CreditsTooltip(props: CreditsTooltipProps) {
2632

2733
document.addEventListener('mousemove', onMouseMove);
2834
return () => { document.removeEventListener('mousemove', onMouseMove); };
29-
30-
function onMouseMove(event: MouseEvent) {
31-
if (ref.current) {
32-
setPosition(ref.current, event.clientX, event.clientY);
33-
}
34-
}
3535
}, [props.profile, props.profileX, props.profileY]);
3636

3737
// Render profile

‎src/renderer/components/CurateBoxWarnings.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,12 @@ export function CurateBoxWarnings(props: CurateBoxWarningsProps) {
1616
// Converts warnings into a single string
1717
const warningsStrings = warnings.writtenWarnings.map(s => `- ${strings[s as keyof LangContainer['curate']] || s}\n`);
1818
// Render warnings
19-
const warningElements = () => (
20-
warningsStrings.length > 0 ? (
21-
<span
22-
className='curate-box-warnings__entry'>
23-
{`${warningsStrings.join('')}`}
24-
</span>
25-
) : ( undefined )
26-
);
19+
const warningElements = warningsStrings.length > 0 ? (
20+
<span
21+
className='curate-box-warnings__entry'>
22+
{`${warningsStrings.join('')}`}
23+
</span>
24+
) : undefined ;
2725
// Misc.
2826
const isEmpty = warningCount === 0;
2927
// Render

‎src/renderer/components/FloatingContainer.tsx‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,14 @@ type FloatingContainerProps = {
66
onClick?: () => void;
77
} & React.HTMLProps<HTMLDivElement>;
88

9-
export class FloatingContainer extends React.Component<FloatingContainerProps> {
10-
render() {
11-
return (
12-
<div className='floating-container__wrapper'
13-
{ ...this.props }
14-
onClick={this.props.onClick}>
15-
<div className={`floating-container ${this.props.floatingClassName}`}>
16-
{this.props.children}
17-
</div>
9+
export function FloatingContainer(props: FloatingContainerProps) {
10+
return (
11+
<div className='floating-container__wrapper'
12+
{ ...props }
13+
onClick={props.onClick}>
14+
<div className={`floating-container ${props.floatingClassName}`}>
15+
{props.children}
1816
</div>
19-
);
20-
}
17+
</div>
18+
);
2119
}

‎src/renderer/components/GameOrder.tsx‎

Lines changed: 42 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { GameOrderBy, GameOrderReverse } from 'flashpoint-launcher';
22
import * as React from 'react';
33
import { LangContext } from '../util/lang';
4+
import { useContext } from 'react';
45

56
export type GameOrderProps = {
67
/** Called when the either the property to order by, or what way to order in, is changed. */
@@ -21,62 +22,59 @@ export type GameOrderChangeEvent = {
2122
* Two drop down lists, the first for selecting what to order the games by, and
2223
* the second for selecting what way to order the games in.
2324
*/
24-
export class GameOrder extends React.Component<GameOrderProps> {
25-
render() {
26-
const strings = this.context.filter;
27-
const allStrings = this.context;
28-
return (
29-
<>
30-
{/* Order By */}
31-
<select
32-
className='search-selector search-bar-order-dropdown'
33-
value={this.props.orderBy}
34-
onChange={this.onOrderByChange}>
35-
<option value='title'>{strings.title}</option>
36-
<option value='developer'>{strings.developer}</option>
37-
<option value='publisher'>{strings.publisher}</option>
38-
<option value='series'>{strings.series}</option>
39-
<option value='platform'>{strings.platform}</option>
40-
<option value='releaseDate'>{allStrings.browse.releaseDate}</option>
41-
<option value='dateAdded'>{strings.dateAdded}</option>
42-
<option value='dateModified'>{strings.dateModified}</option>
43-
<option value='lastPlayed'>{allStrings.browse.lastPlayed}</option>
44-
<option value='playtime'>{allStrings.browse.playtime}</option>
45-
</select>
46-
{/* Order Reverse */}
47-
<select
48-
className='search-selector search-bar-order-dropdown'
49-
value={this.props.orderReverse}
50-
onChange={this.onOrderReverseChange}>
51-
<option value='ASC'>{strings.ascending}</option>
52-
<option value='DESC'>{strings.descending}</option>
53-
</select>
54-
</>
55-
);
56-
}
25+
export function GameOrder(props: GameOrderProps) {
26+
const allStrings = useContext(LangContext);
27+
const strings = allStrings.filter;
5728

58-
onOrderByChange = (event: React.ChangeEvent<HTMLSelectElement>): void => {
59-
this.updateOrder({ orderBy: event.target.value as GameOrderBy }); // Let the parser deal with invalid values instead. How would this even happen?
29+
const onOrderByChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
30+
updateOrder({ orderBy: event.target.value as GameOrderBy }); // Let the parser deal with invalid values instead. How would this even happen?
6031
};
6132

62-
onOrderReverseChange = (event: React.ChangeEvent<HTMLSelectElement>): void => {
33+
const onOrderReverseChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
6334
if (isOrderReverse(event.target.value)) {
64-
this.updateOrder({ orderReverse: event.target.value });
35+
updateOrder({ orderReverse: event.target.value });
6536
} else {
6637
console.error(`Failed to set "Order Reverse". Value is invalid! (value: "${event.target.value}")`);
6738
}
6839
};
6940

70-
updateOrder(data: Partial<GameOrderChangeEvent>): void {
71-
if (this.props.onChange) {
72-
this.props.onChange({
73-
orderBy: data.orderBy || this.props.orderBy,
74-
orderReverse: data.orderReverse || this.props.orderReverse,
41+
const updateOrder = (data: Partial<GameOrderChangeEvent>) => {
42+
if (props.onChange) {
43+
props.onChange({
44+
orderBy: data.orderBy || props.orderBy,
45+
orderReverse: data.orderReverse || props.orderReverse,
7546
});
7647
}
77-
}
48+
};
7849

79-
static contextType = LangContext;
50+
return (
51+
<>
52+
{/* Order By */}
53+
<select
54+
className='search-selector search-bar-order-dropdown'
55+
value={props.orderBy}
56+
onChange={onOrderByChange}>
57+
<option value='title'>{strings.title}</option>
58+
<option value='developer'>{strings.developer}</option>
59+
<option value='publisher'>{strings.publisher}</option>
60+
<option value='series'>{strings.series}</option>
61+
<option value='platform'>{strings.platform}</option>
62+
<option value='releaseDate'>{allStrings.browse.releaseDate}</option>
63+
<option value='dateAdded'>{strings.dateAdded}</option>
64+
<option value='dateModified'>{strings.dateModified}</option>
65+
<option value='lastPlayed'>{allStrings.browse.lastPlayed}</option>
66+
<option value='playtime'>{allStrings.browse.playtime}</option>
67+
</select>
68+
{/* Order Reverse */}
69+
<select
70+
className='search-selector search-bar-order-dropdown'
71+
value={props.orderReverse}
72+
onChange={onOrderReverseChange}>
73+
<option value='ASC'>{strings.ascending}</option>
74+
<option value='DESC'>{strings.descending}</option>
75+
</select>
76+
</>
77+
);
8078
}
8179

8280
function isOrderReverse(value: string): value is GameOrderReverse {

‎src/renderer/components/ImagePreview.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export type ImagePreviewState = {
2323

2424
/** An overlay that covers the entire window and displays an image in the center. */
2525
export class ImagePreview extends React.Component<ImagePreviewProps, ImagePreviewState> {
26-
borderRef: React.RefObject<HTMLDivElement> = React.createRef();
26+
borderRef: React.RefObject<HTMLDivElement | null> = React.createRef();
2727
/** Parent element of the overlay root element. */
2828
parent: HTMLElement;
2929
/** Root element of the overlay. */

‎src/renderer/components/MetaEditExporter.tsx‎

Lines changed: 0 additions & 149 deletions
This file was deleted.

‎src/renderer/components/RightBrowseSidebarAddApp.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ export class RightBrowseSidebarAddApp extends React.Component<RightBrowseSidebar
105105
);
106106
}
107107

108-
renderDeleteButton({ confirm, extra }: ConfirmElementArgs<LangContainer['browse']>): JSX.Element {
108+
renderDeleteButton({ confirm, extra }: ConfirmElementArgs<LangContainer['browse']>): React.JSX.Element {
109109
const className = 'browse-right-sidebar__additional-application__delete-button';
110110
return (
111111
<div

‎src/renderer/components/RightTagCategoriesSidebar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export class RightTagCategoriesSidebar extends React.Component<RightTagCategorie
3030
static contextType = LangContext;
3131
declare context: React.ContextType<typeof LangContext>;
3232

33-
launchCommandRef: React.RefObject<HTMLInputElement> = React.createRef();
33+
launchCommandRef: React.RefObject<HTMLInputElement | null> = React.createRef();
3434

3535
constructor(props: RightTagCategoriesSidebarProps) {
3636
super(props);
@@ -144,7 +144,7 @@ export class RightTagCategoriesSidebar extends React.Component<RightTagCategorie
144144
}
145145
}
146146

147-
renderDeleteCategoryButton({ confirm, extra }: ConfirmElementArgs<LangContainer['tags']>): JSX.Element {
147+
renderDeleteCategoryButton({ confirm, extra }: ConfirmElementArgs<LangContainer['tags']>): React.JSX.Element {
148148
const className = 'tag-category__buttons-delete';
149149
return (
150150
<div

‎src/renderer/components/RightTagsSidebar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export class RightTagsSidebar extends React.Component<RightTagsSidebarProps, Rig
4949
static contextType = LangContext;
5050
declare context: React.ContextType<typeof LangContext>;
5151

52-
launchCommandRef: React.RefObject<HTMLInputElement> = React.createRef();
52+
launchCommandRef: React.RefObject<HTMLInputElement | null> = React.createRef();
5353

5454
constructor(props: RightTagsSidebarProps) {
5555
super(props);
@@ -207,7 +207,7 @@ export class RightTagsSidebar extends React.Component<RightTagsSidebarProps, Rig
207207
}
208208
}
209209

210-
renderDeleteTagButton({ confirm, extra }: ConfirmElementArgs<LangContainer['tags']>): JSX.Element {
210+
renderDeleteTagButton({ confirm, extra }: ConfirmElementArgs<LangContainer['tags']>): React.JSX.Element {
211211
const className = 'tag-alias__buttons-delete';
212212
return (
213213
<div

0 commit comments

Comments
 (0)