Front: Prettier

This commit is contained in:
Arthur Jamet
2023-11-19 16:27:40 +01:00
parent b0b5579cb3
commit 66048ca793
2 changed files with 52 additions and 28 deletions
+46 -25
View File
@@ -90,7 +90,7 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
const [paused, setPause] = useState<boolean>(true);
const stopwatch = useStopwatch();
const [time, setTime] = useState(0);
const songHistory = useQuery(API.getSongHistory(songId), { refetchOnWindowFocus: true });
const songHistory = useQuery(API.getSongHistory(songId));
const [partitionRendered, setPartitionRendered] = useState(false); // Used to know when partitionview can render
const [score, setScore] = useState(0); // Between 0 and 100
// const fadeAnim = useRef(new Animated.Value(0)).current;
@@ -109,7 +109,8 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
});
const colorScheme = useColorScheme();
const { colors } = useTheme();
const textColor = colorScheme == 'dark' ? colors.lightText : colors.coolGray[800];
const textColor = colors.text;
const statColor = colors.lightText;
const onPause = () => {
stopwatch.pause();
@@ -303,7 +304,7 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
}
}, [song.data, partitionRendered]);
if (!song.data || !songHistory.data) {
if (!song.data) {
return <LoadingView />;
}
return (
@@ -335,12 +336,16 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
title={translate('selectPlayMode')}
description={translate('selectPlayModeExplaination')}
isVisible={type === undefined}
setIsVisible={navigation.canGoBack() ? (isVisible) => {
if (!isVisible) {
// If we dismiss the popup, Go to previous page
navigation.goBack();
}
} : undefined}
setIsVisible={
navigation.canGoBack()
? (isVisible) => {
if (!isVisible) {
// If we dismiss the popup, Go to previous page
navigation.goBack();
}
}
: undefined
}
>
<Row style={{ justifyContent: 'space-between' }}>
<ButtonBase
@@ -351,16 +356,26 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
/>
<ButtonBase
style={{}}
type='filled'
type="filled"
title={translate('playBtn')}
onPress={async () => setType('normal')}
/>
</Row>
</PopupCC>
{/* eslint-disable-next-line react/jsx-key*/}
{([['lastScore', songHistory.data.best ?? 0, <Clock color={textColor.toString()}/>], ['bestScore', songHistory.data.history.at(0)?.score ?? 0, <Cup color={textColor.toString()}/>]] as const)
.map(([label, value, icon]) => (
{(
[
[
'lastScore',
songHistory.data?.best ?? 0,
() => <Clock color={statColor} />,
] as const,
[
'bestScore',
songHistory.data?.history.at(0)?.score ?? 0,
() => <Cup color={statColor} />,
],
] as const
).map(([label, value, icon]) => (
<View
key={label}
style={{
@@ -370,8 +385,8 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
alignItems: 'center',
}}
>
<Text color={textColor} fontSize={12}>
<Translate translationKey={label}/>
<Text color={statColor} fontSize={12}>
<Translate translationKey={label} />
</Text>
<View
style={{
@@ -380,8 +395,8 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
gap: 5,
}}
>
{icon}
<Text color={textColor} fontSize={12} bold>
{icon()}
<Text color={statColor} fontSize={12} bold>
{value}
</Text>
</View>
@@ -410,7 +425,7 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
borderRadius: 12,
}}
>
<Text color={textColor} fontSize={24}>
<Text color={textColor[900]} fontSize={24}>
{score}
</Text>
</View>
@@ -428,10 +443,10 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
borderRadius: 12,
}}
>
<Text color={textColor} fontSize={20}>
<Text color={textColor[900]} fontSize={20}>
{lastScoreMessage?.content}
</Text>
<Text color={textColor} fontSize={15} bold>
<Text color={textColor[900]} fontSize={15} bold>
{streak > 0 && `x${streak}`}
</Text>
</View>
@@ -516,7 +531,7 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
}}
>
<Text
color={textColor}
color={textColor[800]}
fontSize={14}
maxW={'100%'}
isTruncated
@@ -524,7 +539,7 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
{song.data.name}
</Text>
<Text
color={textColor}
color={textColor[900]}
fontSize={12}
maxW={'100%'}
isTruncated
@@ -548,7 +563,13 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
<IconButton
size="sm"
variant="solid"
icon={<Icon as={Ionicons} name={paused ? 'play' : 'pause'} />}
icon={
<Icon
as={Ionicons}
color={colors.coolGray[900]}
name={paused ? 'play' : 'pause'}
/>
}
onPress={() => {
if (paused) {
onResume();
@@ -570,7 +591,7 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
/>
</>
)}
<Text color={textColor}>
<Text color={textColor[900]}>
{time < 0
? paused
? '0:00'