Front: Pretty and Lint (#225)

front/components/VirtualPiano/Octave.tsx

@@ -5,9 +5,9 @@ import {
 	octaveKeys,
 	isAccidental,
 	HighlightedKey,
-} from "../../models/Piano";
-import { Box, Row, Text } from "native-base";
-import PianoKeyComp from "./PianoKeyComp";
+} from '../../models/Piano';
+import { Box, Row, Text } from 'native-base';
+import PianoKeyComp from './PianoKeyComp';
 
 type OctaveProps = Parameters<typeof Box>[0] & {
 	number: number;
@@ -57,22 +57,20 @@ const Octave = (props: OctaveProps) => {
 	const whiteKeys = keys.filter((k) => !isAccidental(k));
 	const blackKeys = keys.filter(isAccidental);
 
-	const whiteKeyWidthExpr = "calc(100% / 7)";
-	const whiteKeyHeightExpr = "100%";
-	const blackKeyWidthExpr = "calc(100% / 13)";
-	const blackKeyHeightExpr = "calc(100% / 1.5)";
+	const whiteKeyWidthExpr = 'calc(100% / 7)';
+	const whiteKeyHeightExpr = '100%';
+	const blackKeyWidthExpr = 'calc(100% / 13)';
+	const blackKeyHeightExpr = 'calc(100% / 1.5)';
 
 	return (
 		<Box {...props}>
-			<Row height={"100%"} width={"100%"}>
-				{whiteKeys.map((key, i) => {
-					const highlightedKey = highlightedNotes.find(
-						(h) => h.key.note === key.note
-					);
+			<Row height={'100%'} width={'100%'}>
+				{whiteKeys.map((key) => {
+					const highlightedKey = highlightedNotes.find((h) => h.key.note === key.note);
 					const isHighlighted = highlightedKey !== undefined;
-					const highlightColor =
-						highlightedKey?.bgColor ?? defaultHighlightColor;
+					const highlightColor = highlightedKey?.bgColor ?? defaultHighlightColor;
 					return (
+						// eslint-disable-next-line react/jsx-key
 						<PianoKeyComp
 							pianoKey={key}
 							showNoteName={showNoteNames}
@@ -89,13 +87,11 @@ const Octave = (props: OctaveProps) => {
 					);
 				})}
 				{blackKeys.map((key, i) => {
-					const highlightedKey = highlightedNotes.find(
-						(h) => h.key.note === key.note
-					);
+					const highlightedKey = highlightedNotes.find((h) => h.key.note === key.note);
 					const isHighlighted = highlightedKey !== undefined;
-					const highlightColor =
-						highlightedKey?.bgColor ?? defaultHighlightColor;
+					const highlightColor = highlightedKey?.bgColor ?? defaultHighlightColor;
 					return (
+						// eslint-disable-next-line react/jsx-key
 						<PianoKeyComp
 							pianoKey={key}
 							showNoteName={showNoteNames}
@@ -107,15 +103,15 @@ const Octave = (props: OctaveProps) => {
 							style={{
 								width: blackKeyWidthExpr,
 								height: blackKeyHeightExpr,
-								position: "absolute",
+								position: 'absolute',
 								left: `calc(calc(${whiteKeyWidthExpr} * ${
 									i + ((i > 1) as unknown as number) + 1
 								}) - calc(${blackKeyWidthExpr} / 2))`,
-								top: "0px",
+								top: '0px',
 							}}
 							text={{
-								color: "white",
-								fontSize: "xs",
+								color: 'white',
+								fontSize: 'xs',
 							}}
 						/>
 					);
@@ -139,18 +135,18 @@ const Octave = (props: OctaveProps) => {
 };
 
 Octave.defaultProps = {
-	startNote: "C",
-	endNote: "B",
-	showNoteNames: "onpress",
+	startNote: 'C',
+	endNote: 'B',
+	showNoteNames: 'onpress',
 	showOctaveNumber: false,
-	whiteKeyBg: "white",
-	whiteKeyBgPressed: "gray.200",
-	whiteKeyBgHovered: "gray.100",
-	blackKeyBg: "black",
-	blackKeyBgPressed: "gray.600",
-	blackKeyBgHovered: "gray.700",
+	whiteKeyBg: 'white',
+	whiteKeyBgPressed: 'gray.200',
+	whiteKeyBgHovered: 'gray.100',
+	blackKeyBg: 'black',
+	blackKeyBgPressed: 'gray.600',
+	blackKeyBgHovered: 'gray.700',
 	highlightedNotes: [],
-	defaultHighlightColor: "#FF0000",
+	defaultHighlightColor: '#FF0000',
 	onNoteDown: () => {},
 	onNoteUp: () => {},
 };

front/components/VirtualPiano/PianoKeyComp.tsx

@@ -1,11 +1,6 @@
-import { Box, Pressable, Text } from "native-base";
-import { StyleProp, ViewStyle } from "react-native";
-import {
-	PianoKey,
-	NoteNameBehavior,
-	octaveKeys,
-	keyToStr,
-} from "../../models/Piano";
+import { Box, Pressable, Text } from 'native-base';
+import { StyleProp, ViewStyle } from 'react-native';
+import { PianoKey, NoteNameBehavior, octaveKeys, keyToStr } from '../../models/Piano';
 
 type PianoKeyProps = {
 	pianoKey: PianoKey;
@@ -48,22 +43,18 @@ const PianoKeyComp = ({
 }: PianoKeyProps) => {
 	const textDefaultProps = {
 		style: {
-			userSelect: "none",
-			WebkitUserSelect: "none",
-			MozUserSelect: "none",
-			msUserSelect: "none",
+			userSelect: 'none',
+			WebkitUserSelect: 'none',
+			MozUserSelect: 'none',
+			msUserSelect: 'none',
 		},
-		fontSize: "xl",
-		color: "black",
+		fontSize: 'xl',
+		color: 'black',
 	} as Parameters<typeof Text>[0];
 
 	const textProps = { ...textDefaultProps, ...text };
 	return (
-		<Pressable
-			onPressIn={onKeyDown}
-			onPressOut={onKeyUp}
-			style={style}
-		>
+		<Pressable onPressIn={onKeyDown} onPressOut={onKeyUp} style={style}>
 			{({ isHovered, isPressed }) => (
 				<Box
 					bg={(() => {
@@ -90,9 +81,9 @@ const PianoKeyComp = ({
 PianoKeyComp.defaultProps = {
 	key: octaveKeys[0],
 	showNoteNames: NoteNameBehavior.onhover,
-	keyBg: "white",
-	keyBgPressed: "gray.200",
-	keyBgHovered: "gray.100",
+	keyBg: 'white',
+	keyBgPressed: 'gray.200',
+	keyBgHovered: 'gray.100',
 	onKeyDown: () => {},
 	onKeyUp: () => {},
 	text: {},

front/components/VirtualPiano/VirtualPiano.tsx

@@ -1,16 +1,8 @@
-import { Row, Box } from "native-base";
-import React, { useState, useEffect } from "react";
-import Octave from "./Octave";
-import { StyleProp, ViewStyle } from "react-native";
-import {
-	Note,
-	PianoKey,
-	NoteNameBehavior,
-	KeyPressStyle,
-	keyToStr,
-	strToKey,
-	HighlightedKey,
-} from "../../models/Piano";
+import { Row } from 'native-base';
+import React from 'react';
+import Octave from './Octave';
+import { StyleProp, ViewStyle } from 'react-native';
+import { Note, PianoKey, NoteNameBehavior, HighlightedKey } from '../../models/Piano';
 
 type VirtualPianoProps = Parameters<typeof Row>[0] & {
 	onNoteDown: (note: PianoKey) => void;
@@ -37,29 +29,21 @@ const VirtualPiano = ({
 	showOctaveNumbers,
 	style,
 }: VirtualPianoProps) => {
-	const notesList: Array<Note> = [
-		Note.C,
-		Note.D,
-		Note.E,
-		Note.F,
-		Note.G,
-		Note.A,
-		Note.B,
-	];
+	const notesList: Array<Note> = [Note.C, Note.D, Note.E, Note.F, Note.G, Note.A, Note.B];
 	const octaveList = [];
 
 	for (let octaveNum = startOctave; octaveNum <= endOctave; octaveNum++) {
 		octaveList.push(octaveNum);
 	}
 
-    const octaveWidthExpr = `calc(100% / ${octaveList.length})`;
+	const octaveWidthExpr = `calc(100% / ${octaveList.length})`;
 
 	return (
 		<Row style={style}>
 			{octaveList.map((octaveNum) => {
 				return (
 					<Octave
-						style={{ width: octaveWidthExpr, height: "100%" }}
+						style={{ width: octaveWidthExpr, height: '100%' }}
 						key={octaveNum}
 						number={octaveNum}
 						showNoteNames={showNoteNames}
@@ -68,9 +52,7 @@ const VirtualPiano = ({
 							n.key.octave ? n.key.octave == octaveNum : true
 						)}
 						startNote={octaveNum == startOctave ? startNote : notesList[0]}
-						endNote={
-							octaveNum == endOctave ? endNote : notesList[notesList.length - 1]
-						}
+						endNote={octaveNum == endOctave ? endNote : notesList[notesList.length - 1]}
 						onNoteDown={onNoteDown}
 						onNoteUp={onNoteUp}
 					/>
@@ -81,8 +63,8 @@ const VirtualPiano = ({
 };
 
 VirtualPiano.defaultProps = {
-	onNoteDown: (_n: PianoKey) => {},
-	onNoteUp: (_n: PianoKey) => {},
+	onNoteDown: () => {},
+	onNoteUp: () => {},
 	startOctave: 2,
 	startNote: Note.C,
 	endOctave: 6,
@@ -90,7 +72,7 @@ VirtualPiano.defaultProps = {
 	showNoteNames: NoteNameBehavior.onpress,
 	highlightedNotes: [],
 	showOctaveNumbers: true,
-    style: {},
+	style: {},
 };
 
 export default VirtualPiano;