vitrine-app · paul-roman · Apr 17, 2018 · Apr 17, 2018 · Apr 17, 2018
diff --git a/assets/client/app/components/ActionButton.tsx b/assets/client/app/components/ActionButton.tsx
@@ -90,7 +90,7 @@ export class ActionButton extends VitrineComponent<Props, State> {
 	}
 }
 
-const styles: React.CSSProperties = StyleSheet.create({
+const styles: React.CSSProperties & any = StyleSheet.create({
 	buttonWrapper: {
 		display: 'inline-block'
 	},

diff --git a/assets/client/app/components/BlurPicture.tsx b/assets/client/app/components/BlurPicture.tsx
@@ -127,7 +127,7 @@ export class BlurPicture extends VitrineComponent<Props, State> {
 	}
 }
 
-const styles: React.CSSProperties = StyleSheet.create({
+const styles: React.CSSProperties & any = StyleSheet.create({
 	container: {
 		width: 100..percents(),
 		height: 100..percents(),

diff --git a/assets/client/app/components/CirclePercentage.tsx b/assets/client/app/components/CirclePercentage.tsx
@@ -50,13 +50,13 @@ export class CirclePercentage extends VitrineComponent<Props, {}> {
 	}
 }
 
-const progressKeyframe: React.CSSProperties = {
+const progressKeyframe: React.CSSProperties & any = {
 	'0%': {
 		strokeDasharray: '0 100'
 	}
 };
 
-const styles: React.CSSProperties = StyleSheet.create({
+const styles: React.CSSProperties & any = StyleSheet.create({
 	svg: {
 		display: 'block',
 		height: 110,

diff --git a/assets/client/app/components/ContextMenu.tsx b/assets/client/app/components/ContextMenu.tsx
@@ -147,7 +147,7 @@ export class ContextMenu extends VitrineComponent<Props, State> {
 	}
 }
 
-const styles: React.CSSProperties = StyleSheet.create({
+const styles: React.CSSProperties & any = StyleSheet.create({
 	modal: {
 		margin: margin(22..rem(), 'auto')
 	},

diff --git a/assets/client/app/components/EmulatorSettingsRow.tsx b/assets/client/app/components/EmulatorSettingsRow.tsx
@@ -129,7 +129,7 @@ export class EmulatorSettingsRow extends VitrineComponent<Props, State> {
 	}
 }
 
-const styles: React.CSSProperties = StyleSheet.create({
+const styles: React.CSSProperties & any = StyleSheet.create({
 	emulatorTr: {
 		transition: `${150}ms ease`
 	},

diff --git a/assets/client/app/components/ErrorsWrapper.tsx b/assets/client/app/components/ErrorsWrapper.tsx
@@ -72,7 +72,7 @@ export class ErrorsWrapper extends React.Component<{}, State> {
 	}
 }
 
-const styles: React.CSSProperties = StyleSheet.create({
+const styles: React.CSSProperties & any = StyleSheet.create({
 	modal: {
 		margin: margin(13..rem(), 'auto'),
 		cursor: 'default',

diff --git a/assets/client/app/components/GameAddModal.tsx b/assets/client/app/components/GameAddModal.tsx
@@ -477,7 +477,7 @@ export class GameAddModal extends VitrineComponent<Props, State> {
 	}
 }
 
-const styles: React.CSSProperties = StyleSheet.create({
+const styles: React.CSSProperties & any = StyleSheet.create({
 	modal: {
 		margin: margin(1..rem(), 'auto'),
 		cursor: 'default',

diff --git a/assets/client/app/components/GameContainer.tsx b/assets/client/app/components/GameContainer.tsx
@@ -157,7 +157,7 @@ export class GameContainer extends VitrineComponent<Props, State> {
 	}
 }
 
-const styles: React.CSSProperties = StyleSheet.create({
+const styles: React.CSSProperties & any = StyleSheet.create({
 	gameContainerWrapper: {
 		width: 84.5.percents(),
 		padding: 0,

diff --git a/assets/client/app/components/GamesModule.tsx b/assets/client/app/components/GamesModule.tsx
@@ -49,7 +49,7 @@ export class GamesModule extends VitrineComponent<Props, any> {
 	}
 }
 
-const styles: React.CSSProperties = StyleSheet.create({
+const styles: React.CSSProperties & any = StyleSheet.create({
 	gamesModuleIcon: {
 		opacity: 0.05,
 		width: 150..px(),

diff --git a/assets/client/app/components/IgdbResearchModal.tsx b/assets/client/app/components/IgdbResearchModal.tsx
@@ -222,7 +222,7 @@ export class IgdbResearchModal extends VitrineComponent<Props, State> {
 	}
 }
 
-const styles: React.CSSProperties = StyleSheet.create({
+const styles: React.CSSProperties & any = StyleSheet.create({
 	modal: {
 		margin: margin(9..rem(), 'auto'),
 		cursor: 'default',

diff --git a/assets/client/app/components/ImagesCollection.tsx b/assets/client/app/components/ImagesCollection.tsx
@@ -100,7 +100,7 @@ export class ImagesCollection extends VitrineComponent<Props, State> {
 	}
 }
 
-const styles: React.CSSProperties = StyleSheet.create({
+const styles: React.CSSProperties & any = StyleSheet.create({
 	imagesContainer: {
 		overflowX: 'auto',
 		overflowY: 'hidden',

diff --git a/assets/client/app/components/NumberPicker.tsx b/assets/client/app/components/NumberPicker.tsx
@@ -130,7 +130,7 @@ export class NumberPicker extends VitrineComponent<Props, State> {
 	}
 }
 
-const styles: React.CSSProperties = StyleSheet.create({
+const styles: React.CSSProperties & any = StyleSheet.create({
 	spinnerInput: {
 		textAlign: 'right'
 	},

diff --git a/assets/client/app/components/PotentialGamesAddModal.tsx b/assets/client/app/components/PotentialGamesAddModal.tsx
@@ -55,7 +55,7 @@ export const PotentialGamesAddModal: React.StatelessComponent<Props> = (props: P
 	);
 };
 
-const styles: React.CSSProperties = StyleSheet.create({
+const styles: React.CSSProperties & any = StyleSheet.create({
 	modal: {
 		margin: margin(3..rem(), 'auto'),
 		cursor: 'default',

diff --git a/assets/client/app/components/SettingsModal.tsx b/assets/client/app/components/SettingsModal.tsx
@@ -489,7 +489,7 @@ export class SettingsModal extends VitrineComponent<Props, State> {
 	}
 }
 
-const styles: React.CSSProperties = StyleSheet.create({
+const styles: React.CSSProperties & any = StyleSheet.create({
 	modal: {
 		margin: margin(5..rem(), 'auto'),
 		cursor: 'default',

diff --git a/assets/client/app/components/SideBar.tsx b/assets/client/app/components/SideBar.tsx
@@ -12,6 +12,7 @@ import { ContextMenu } from '../containers/ContextMenu';
 import { localizer } from '../Localizer';
 import { serverListener } from '../ServerListener';
 import { ActionButton } from './ActionButton';
+import { VitrineComponent } from './VitrineComponent';
 
 interface Props {
 	potentialGames: GamesCollection<PotentialGame>;
@@ -26,94 +27,106 @@ interface Props {
 	launchGame: (gameUuid: string) => void;
 }
 
-export const SideBar: React.StatelessComponent<Props> = (props: Props) => {
-	const clickGameHandler = (event: any) => {
-		const selectedGame: PlayableGame = props.playableGames.getGame(event.target.id.replace('sidebar-game:', ''));
-		props.selectGame(selectedGame);
-	};
+export class SideBar extends VitrineComponent<Props, {}> {
+	public constructor(props: Props) {
+		super(props);
 
-	const taskBarRefreshBtnClickHandler = () => {
+		this.clickGameHandler = this.clickGameHandler.bind(this);
+		this.taskBarRefreshBtnClickHandler = this.taskBarRefreshBtnClickHandler.bind(this);
+		this.potentialGamesButton = this.potentialGamesButton.bind(this);
+	}
+
+	private clickGameHandler(event: any) {
+		const selectedGame: PlayableGame = this.props.playableGames.getGame(event.target.id.replace('sidebar-game:', ''));
+		this.props.selectGame(selectedGame);
+	}
+
+	private taskBarRefreshBtnClickHandler() {
 		serverListener.send('refresh-potential-games');
-	};
+	}
 
-	const potentialGamesButton = () => {
-		props.openPotentialGamesAddModal();
-	};
+	private potentialGamesButton() {
+		this.props.openPotentialGamesAddModal();
+	}
 
-	serverListener.listen('potential-games-search-begin', () => {
-		props.refreshGames();
-	});
+	public componentDidMount() {
+		serverListener.listen('potential-games-search-begin', () => {
+			this.props.refreshGames();
+		});
+	}
 
-	const taskBarElements: JSX.Element = (
-		<div className={css(styles.commandsGroup)}>
-			<Grid className={css(styles.commandsGrid)}>
-				<Grid.Column width={4} className={css(styles.commandButton)}>
-					<ActionButton
-						icon={faPlus}
-						tooltip={localizer.f('addGameLabel')}
-						onClick={props.openGameAddModal}
-					/>
-				</Grid.Column>
-				<Grid.Column width={4} className={css(styles.commandButton)}>
-					<ActionButton
-						icon={faSyncAlt}
-						spin={props.refreshingGames}
-						tooltip={localizer.f('refreshLabel')}
-						onClick={taskBarRefreshBtnClickHandler}
-					/>
-				</Grid.Column>
-				<Grid.Column width={4} className={css(styles.commandButton)}>
-					<ActionButton
-						icon={faCogs}
-						tooltip={localizer.f('settings')}
-						onClick={props.openSettingsModal}
-					/>
-				</Grid.Column>
-				<Grid.Column width={4} className={css(styles.commandButton, styles.addGameButton)}>
-					<Button
-						primary={true}
-						style={{ visibility: (props.potentialGames.size()) ? ('visible') : ('hidden') }}
-						onClick={potentialGamesButton}
-					>
-						{props.potentialGames.size()}
-					</Button>
-				</Grid.Column>
-			</Grid>
-		</div>
-	);
+	public render() {
+		const taskBarElements: JSX.Element = (
+			<div className={css(styles.commandsGroup)}>
+				<Grid className={css(styles.commandsGrid)}>
+					<Grid.Column width={4} className={css(styles.commandButton)}>
+						<ActionButton
+							icon={faPlus}
+							tooltip={localizer.f('addGameLabel')}
+							onClick={this.props.openGameAddModal}
+						/>
+					</Grid.Column>
+					<Grid.Column width={4} className={css(styles.commandButton)}>
+						<ActionButton
+							icon={faSyncAlt}
+							spin={this.props.refreshingGames}
+							tooltip={localizer.f('refreshLabel')}
+							onClick={this.taskBarRefreshBtnClickHandler}
+						/>
+					</Grid.Column>
+					<Grid.Column width={4} className={css(styles.commandButton)}>
+						<ActionButton
+							icon={faCogs}
+							tooltip={localizer.f('settings')}
+							onClick={this.props.openSettingsModal}
+						/>
+					</Grid.Column>
+					<Grid.Column width={4} className={css(styles.commandButton, styles.addGameButton)}>
+						<Button
+							primary={true}
+							style={{ visibility: (this.props.potentialGames.size()) ? ('visible') : ('hidden') }}
+							onClick={this.potentialGamesButton}
+						>
+							{this.props.potentialGames.size()}
+						</Button>
+					</Grid.Column>
+				</Grid>
+			</div>
+		);
 
-	return (
-		<Grid.Column className={css(styles.sideBarWrapper)}>
-			{taskBarElements}
-			<div className={css(styles.sideBarContent)}>
-				<ul className={css(styles.gamesListUl)}>
-					{props.playableGames.map((game: PlayableGame, index: number) => (
-							<ContextMenuTrigger
-								id='sidebar-games-context-menu'
-								key={index}
-							>
-								<li
-									id={`sidebar-game:${game.uuid}`}
-									className={
-										css(styles.gamesListLi) +
-										((props.selectedGame && props.selectedGame.uuid === game.uuid) ? (' ' + css(styles.selectedGame)) : (''))
-									}
-									onClick={clickGameHandler}
-									onDoubleClick={props.launchGame.bind(null, game.uuid)}
+		return (
+			<Grid.Column className={css(styles.sideBarWrapper)}>
+				{taskBarElements}
+				<div className={css(styles.sideBarContent)}>
+					<ul className={css(styles.gamesListUl)}>
+						{this.props.playableGames.map((game: PlayableGame, index: number) => (
+								<ContextMenuTrigger
+									id='sidebar-games-context-menu'
+									key={index}
 								>
-									{game.name}
-								</li>
-							</ContextMenuTrigger>
-						)
-					)}
-				</ul>
-			</div>
-			<ContextMenu/>
-		</Grid.Column>
-	);
-};
+									<li
+										id={`sidebar-game:${game.uuid}`}
+										className={
+											css(styles.gamesListLi) +
+											((this.props.selectedGame && this.props.selectedGame.uuid === game.uuid) ? (' ' + css(styles.selectedGame)) : (''))
+										}
+										onClick={this.clickGameHandler}
+										onDoubleClick={this.props.launchGame.bind(null, game.uuid)}
+									>
+										{game.name}
+									</li>
+								</ContextMenuTrigger>
+							)
+						)}
+					</ul>
+				</div>
+				<ContextMenu/>
+			</Grid.Column>
+		);
+	}
+}
 
-const styles: React.CSSProperties = StyleSheet.create({
+const styles: React.CSSProperties & any = StyleSheet.create({
 	sideBarWrapper: {
 		padding: 0,
 		width: 15.5.percents(),

diff --git a/assets/client/app/components/TaskBar.tsx b/assets/client/app/components/TaskBar.tsx
@@ -57,7 +57,7 @@ export class TaskBar extends VitrineComponent<{}, {}> {
 	}
 }
 
-const styles: React.CSSProperties = StyleSheet.create({
+const styles: React.CSSProperties & any = StyleSheet.create({
 	taskBar: {
 		height: 22,
 		backgroundColor: '#23211F',

diff --git a/assets/client/app/components/TimePlayedEditionModal.tsx b/assets/client/app/components/TimePlayedEditionModal.tsx
@@ -154,7 +154,7 @@ export class TimePlayedEditionModal extends VitrineComponent<Props, State> {
 	}
 }
 
-const styles: React.CSSProperties = StyleSheet.create({
+const styles: React.CSSProperties & any = StyleSheet.create({
 	modal: {
 		width: 300,
 		margin: margin(20..rem(), 'auto')

diff --git a/assets/client/app/components/Vitrine.tsx b/assets/client/app/components/Vitrine.tsx
@@ -159,7 +159,7 @@ export class Vitrine extends VitrineComponent<Props, State> {
 	}
 }
 
-const styles: React.CSSProperties = StyleSheet.create({
+const styles: React.CSSProperties & any = StyleSheet.create({
 	vitrineApp: {
 		height: 100..percents(),
 		userSelect: 'none',

diff --git a/assets/client/app/components/VitrineLoader.tsx b/assets/client/app/components/VitrineLoader.tsx
@@ -96,13 +96,13 @@ export class VitrineLoader extends React.Component<null, State> {
 	}
 }
 
-const pulseKeyframes: any = {
+const pulseKeyframes: React.CSSProperties & any = {
 	to: {
 		boxShadow: `${0} ${0} ${0} ${45..px()} ${rgba(117, 76, 46, 0)}`
 	}
 };
 
-const styles: React.CSSProperties = StyleSheet.create({
+const styles: React.CSSProperties & any = StyleSheet.create({
 	loader: {
 		'textAlign': 'center',
 		'padding': 7,

diff --git a/assets/client/app/components/icons/WindowControlIcon.tsx b/assets/client/app/components/icons/WindowControlIcon.tsx
@@ -71,7 +71,7 @@ export class WindowControlIcon extends React.Component<Props, State> {
 	}
 }
 
-const styles: React.CSSProperties = StyleSheet.create({
+const styles: React.CSSProperties & any = StyleSheet.create({
 	icon: {
 		backgroundColor: rgba(0, 0, 255, 0),
 		width: 40,