From d4a758d262b6e9eb437857643219e2b1774e817f Mon Sep 17 00:00:00 2001 From: mathysPaul Date: Thu, 2 Nov 2023 21:53:21 +0100 Subject: [PATCH] [FIX]: - Prettier - Linter --- front/Navigation.tsx | 4 +- front/Theme.tsx | 2 +- front/components/GtkUI/RawElement.tsx | 2 +- front/components/UI/ButtonBase.tsx | 8 +- front/components/UI/CheckboxBase.tsx | 12 +- front/components/UI/IconButton.tsx | 415 +++++++++++----------- front/components/UI/LinkBase.tsx | 46 +-- front/components/UI/LogoutButtonCC.tsx | 52 +-- front/components/UI/MusicItem.tsx | 273 +++++++------- front/components/UI/README.md | 64 ++-- front/components/UI/ScaffoldDesktopCC.tsx | 6 +- front/components/UI/ScaffoldMobileCC.tsx | 8 +- front/i18n/Translations.ts | 9 +- front/views/MusicView.tsx | 127 +++++-- front/views/settings/SettingsView.tsx | 4 +- 15 files changed, 550 insertions(+), 482 deletions(-) diff --git a/front/Navigation.tsx b/front/Navigation.tsx index b777542..12a4bbc 100644 --- a/front/Navigation.tsx +++ b/front/Navigation.tsx @@ -13,7 +13,7 @@ import { Translate, translate } from './i18n/i18n'; import SongLobbyView from './views/SongLobbyView'; import HomeView from './views/HomeView'; import SearchView from './views/SearchView'; -import SetttingsNavigator from './views/settings/SettingsView'; +import SettingsTab from './views/settings/SettingsView'; import { useQuery } from './Queries'; import API, { APIError } from './API'; import PlayView from './views/PlayView'; @@ -58,7 +58,7 @@ const protectedRoutes = () => }, Play: { component: PlayView, options: { title: translate('play') }, link: '/play/:songId' }, Settings: { - component: SetttingsNavigator, + component: SettingsTab, options: { headerShown: false }, link: '/settings/:screen?', stringify: { diff --git a/front/Theme.tsx b/front/Theme.tsx index 71c8a15..645d5c4 100644 --- a/front/Theme.tsx +++ b/front/Theme.tsx @@ -32,7 +32,7 @@ const ThemeProvider = ({ children }: { children: JSX.Element }) => { }; const glassmorphism = colorScheme === 'light' ? lightGlassmorphism : darkGlassmorphism; - const text = colorScheme === 'light' ? darkGlassmorphism : lightGlassmorphism + const text = colorScheme === 'light' ? darkGlassmorphism : lightGlassmorphism; return ( { const isSmallScreen = screenSize === 'small'; const { width: screenWidth } = useWindowDimensions(); const colorScheme = useColorScheme(); - const color = colorScheme === 'light' ? 'rgba(0,0,0,0.7)' : 'rgba(255,255,255,0.7)' + const color = colorScheme === 'light' ? 'rgba(0,0,0,0.7)' : 'rgba(255,255,255,0.7)'; return ( = ({ {icon && ( )} diff --git a/front/components/UI/CheckboxBase.tsx b/front/components/UI/CheckboxBase.tsx index fd92189..3cf6cf0 100644 --- a/front/components/UI/CheckboxBase.tsx +++ b/front/components/UI/CheckboxBase.tsx @@ -54,17 +54,9 @@ const CheckboxBase: React.FC = ({ title, color, style, check, set > {check ? ( - + ) : ( - + )} {title} diff --git a/front/components/UI/IconButton.tsx b/front/components/UI/IconButton.tsx index dbe2826..a785403 100644 --- a/front/components/UI/IconButton.tsx +++ b/front/components/UI/IconButton.tsx @@ -1,7 +1,8 @@ +/* eslint-disable react/prop-types */ // Import required dependencies and components. -import { Icon } from "iconsax-react-native"; -import { useRef, useState, useMemo } from "react"; -import { Animated, StyleProp, TouchableOpacity, ViewStyle } from "react-native"; +import { Icon } from 'iconsax-react-native'; +import { useRef, useState, useMemo } from 'react'; +import { Animated, StyleProp, TouchableOpacity, ViewStyle } from 'react-native'; // Default values for the component props. const DEFAULT_SCALE_FACTOR: number = 1.25; @@ -10,110 +11,110 @@ const DEFAULT_PADDING: number = 0; // Define the type for the IconButton props. type IconButtonProps = { - /** - * Indicates if the button starts in an active state. - * @default false - */ - isActive?: boolean; - - /** - * Color of the icon. - */ - color: string; - - /** - * Optional color of the icon when active. - */ - colorActive?: string; - - /** - * Callback function triggered when the button is pressed. - */ - onPress?: () => void | Promise; - - /** - * Size of the icon. - * @default 24 - */ - size?: number; - - /** - * Icon to display. - */ - icon: Icon; - - /** - * Optional icon to display when active. - */ - iconActive?: Icon; - - /** - * Variant style of the icon. - * @default "Outline" - */ - variant?: "Outline" | "Bold" | "Bulk" | "Broken" | "TwoTone"; - - /** - * Variant style of the icon when active. - * @default "Outline" - */ - activeVariant?: "Outline" | "Bold" | "Bulk" | "Broken" | "TwoTone"; - - /** - * Custom style for the icon. - */ - style?: ViewStyle | ViewStyle[]; - - /** - * Custom style for the icon's container. - */ - containerStyle?: ViewStyle | ViewStyle[]; - - /** - * Scale factor when the icon animates on press. - * @default 1.25 - */ - scaleFactor?: number; - - /** - * Duration of the icon animation in milliseconds. - * @default 250 - */ - animationDuration?: number; - - /** - * Padding around the icon. - * @default 0 - */ - padding?: number; + /** + * Indicates if the button starts in an active state. + * @default false + */ + isActive?: boolean; + + /** + * Color of the icon. + */ + color: string; + + /** + * Optional color of the icon when active. + */ + colorActive?: string; + + /** + * Callback function triggered when the button is pressed. + */ + onPress?: () => void | Promise; + + /** + * Size of the icon. + * @default 24 + */ + size?: number; + + /** + * Icon to display. + */ + icon: Icon; + + /** + * Optional icon to display when active. + */ + iconActive?: Icon; + + /** + * Variant style of the icon. + * @default "Outline" + */ + variant?: 'Outline' | 'Bold' | 'Bulk' | 'Broken' | 'TwoTone'; + + /** + * Variant style of the icon when active. + * @default "Outline" + */ + activeVariant?: 'Outline' | 'Bold' | 'Bulk' | 'Broken' | 'TwoTone'; + + /** + * Custom style for the icon. + */ + style?: ViewStyle | ViewStyle[]; + + /** + * Custom style for the icon's container. + */ + containerStyle?: ViewStyle | ViewStyle[]; + + /** + * Scale factor when the icon animates on press. + * @default 1.25 + */ + scaleFactor?: number; + + /** + * Duration of the icon animation in milliseconds. + * @default 250 + */ + animationDuration?: number; + + /** + * Padding around the icon. + * @default 0 + */ + padding?: number; }; /** * `IconButton` Component - * + * * Render an interactive icon that can toggle between active and inactive states. * Supports customization of colors, icons, animation speed, size, and more. - * + * * Features: * - Can render two different icons for active and inactive states. * - Includes an animation that scales the icon when pressed. * - Supports custom styling for both the icon and its container. * - Accepts various icon variants for flexibility in design. - * + * * Usage: - * + * * ```jsx - * console.log('Icon pressed!')} * /> * ``` - * + * * To use with active states: - * + * * ```jsx - * console.log('Icon toggled!')} * /> * ``` - * + * * Note: If `iconActive` is provided but `colorActive` is not, * the `color` prop will be used for both active and inactive states. */ const IconButton: React.FC = ({ - isActive = false, - color, - colorActive, - onPress, - size = 24, - icon: Icon, - iconActive: IconActive, - variant = "Outline", - activeVariant = "Outline", - style, - containerStyle, - scaleFactor = DEFAULT_SCALE_FACTOR, - animationDuration = DEFAULT_ANIMATION_DURATION, - padding = DEFAULT_PADDING, + isActive = false, + color, + colorActive, + onPress, + size = 24, + icon: Icon, + iconActive: IconActive, + variant = 'Outline', + activeVariant = 'Outline', + style, + containerStyle, + scaleFactor = DEFAULT_SCALE_FACTOR, + animationDuration = DEFAULT_ANIMATION_DURATION, + padding = DEFAULT_PADDING, }) => { - // State to track active status. - const [isActiveState, setIsActiveState] = useState(isActive); + // State to track active status. + const [isActiveState, setIsActiveState] = useState(isActive); - // Animation values. - const scaleValue: Animated.Value = useRef(new Animated.Value(1)).current; - const animateValue: Animated.Value = useRef(new Animated.Value(isActive ? 0 : 1)).current; - - // Check for active icon. - const hasActiveIcon: boolean = !!IconActive; + // Animation values. + const scaleValue: Animated.Value = useRef(new Animated.Value(1)).current; + const animateValue: Animated.Value = useRef(new Animated.Value(isActive ? 0 : 1)).current; - // Interpolation for icon colors between active and inactive states. - const colorValue: Animated.AnimatedInterpolation = animateValue.interpolate({ - inputRange: [0, 1], - outputRange: [color, colorActive || color], - }); + // Check for active icon. + const hasActiveIcon: boolean = !!IconActive; - // Combine styles for the icon container. - const combinedContainerStyle: StyleProp = useMemo<(ViewStyle | ViewStyle[] | undefined)[]>( - () => [ - { - position: 'relative', - // Adjust width and height to account for specified padding. Since the icons - // are absolutely positioned inside the container, the container's size needs - // to include the padding to ensure the icons are properly centered and spaced. - width: size + (padding * 2), - height: size + (padding * 2), - justifyContent: 'center', - alignItems: 'center', - }, - containerStyle - ], - [padding, containerStyle] - ); + // Interpolation for icon colors between active and inactive states. + const colorValue: Animated.AnimatedInterpolation = animateValue.interpolate({ + inputRange: [0, 1], + outputRange: [color, colorActive || color], + }); - /** - * Toggles the active state of the icon. - * Executes the onPress callback and triggers the animation. - */ - const toggleState = async () => { - // Execute onPress if provided. - if (onPress) { - await onPress(); - } + // Combine styles for the icon container. + const combinedContainerStyle: StyleProp = useMemo< + (ViewStyle | ViewStyle[] | undefined)[] + >( + () => [ + { + position: 'relative', + // Adjust width and height to account for specified padding. Since the icons + // are absolutely positioned inside the container, the container's size needs + // to include the padding to ensure the icons are properly centered and spaced. + width: size + padding * 2, + height: size + padding * 2, + justifyContent: 'center', + alignItems: 'center', + }, + containerStyle, + ], + [padding, containerStyle] + ); - // Toggle isActiveState. - setIsActiveState(!isActiveState); + /** + * Toggles the active state of the icon. + * Executes the onPress callback and triggers the animation. + */ + const toggleState = async () => { + // Execute onPress if provided. + if (onPress) { + await onPress(); + } - // Animation sequences. - const animations: Animated.CompositeAnimation[] = [ - Animated.sequence([ - Animated.timing(scaleValue, { - toValue: scaleFactor, - duration: animationDuration, - useNativeDriver: true, - }), - Animated.timing(scaleValue, { - toValue: 1, - duration: animationDuration, - useNativeDriver: true, - }), - ]), - ]; + // Toggle isActiveState. + setIsActiveState(!isActiveState); - if (hasActiveIcon || colorActive) { - animations.push( - Animated.timing(animateValue, { - toValue: isActiveState ? 1 : 0, - duration: animationDuration, - useNativeDriver: true, - }) - ); - } + // Animation sequences. + const animations: Animated.CompositeAnimation[] = [ + Animated.sequence([ + Animated.timing(scaleValue, { + toValue: scaleFactor, + duration: animationDuration, + useNativeDriver: true, + }), + Animated.timing(scaleValue, { + toValue: 1, + duration: animationDuration, + useNativeDriver: true, + }), + ]), + ]; - // Start animations in parallel. - Animated.parallel(animations).start(); - }; + if (hasActiveIcon || colorActive) { + animations.push( + Animated.timing(animateValue, { + toValue: isActiveState ? 1 : 0, + duration: animationDuration, + useNativeDriver: true, + }) + ); + } - return ( - - {hasActiveIcon && ( - - - - )} - - - - - ); + // Start animations in parallel. + Animated.parallel(animations).start(); + }; + + return ( + + {hasActiveIcon && ( + + + + )} + + + + + ); }; export default IconButton; diff --git a/front/components/UI/LinkBase.tsx b/front/components/UI/LinkBase.tsx index 336f906..8673094 100644 --- a/front/components/UI/LinkBase.tsx +++ b/front/components/UI/LinkBase.tsx @@ -48,28 +48,30 @@ const LinkBase: React.FC = ({ text, onPress }) => { }).start(); }; - return ( - - - {text} - - - - ); + return ( + + + {text} + + + + ); }; const styles = StyleSheet.create({ diff --git a/front/components/UI/LogoutButtonCC.tsx b/front/components/UI/LogoutButtonCC.tsx index 85cb9c0..f4149e3 100644 --- a/front/components/UI/LogoutButtonCC.tsx +++ b/front/components/UI/LogoutButtonCC.tsx @@ -38,30 +38,34 @@ const LogoutButtonCC = ({ const [isVisible, setIsVisible] = useState(false); return ( - <> - {isGuest ? setIsVisible(true) : dispatch(unsetAccessToken());}} - /> - - - { dispatch(unsetAccessToken()) }} - /> - - + <> + { + isGuest ? setIsVisible(true) : dispatch(unsetAccessToken()); + }} + /> + + + { + dispatch(unsetAccessToken()); + }} + /> + + ); }; diff --git a/front/components/UI/MusicItem.tsx b/front/components/UI/MusicItem.tsx index e6c835a..1e3f3b8 100644 --- a/front/components/UI/MusicItem.tsx +++ b/front/components/UI/MusicItem.tsx @@ -1,3 +1,4 @@ +/* eslint-disable react/prop-types */ import React, { useMemo, memo } from 'react'; import { StyleSheet } from 'react-native'; import { Column, HStack, Row, Stack, Text, useBreakpointValue, useTheme } from 'native-base'; @@ -11,56 +12,56 @@ import { useTranslation } from 'react-i18next'; * Props for the MusicItem component. */ interface MusicItemProps { - /** The artist's name. */ - artist: string; - - /** The song's title. */ - song: string; - - /** The URL for the song's cover image. */ - image: string; - - /** The level of the song difficulty . */ - level: number; - - /** The last score achieved for this song. */ - lastScore: number; - - /** The highest score achieved for this song. */ - bestScore: number; - - /** Indicates whether the song is liked/favorited by the user. */ - liked: boolean; - - /** Callback function triggered when the like button is pressed. */ - onLike: () => void; - - /** Callback function triggered when the song is played. */ - onPlay?: () => void; + /** The artist's name. */ + artist: string; + + /** The song's title. */ + song: string; + + /** The URL for the song's cover image. */ + image: string; + + /** The level of the song difficulty . */ + level: number; + + /** The last score achieved for this song. */ + lastScore: number; + + /** The highest score achieved for this song. */ + bestScore: number; + + /** Indicates whether the song is liked/favorited by the user. */ + liked: boolean; + + /** Callback function triggered when the like button is pressed. */ + onLike: () => void; + + /** Callback function triggered when the song is played. */ + onPlay?: () => void; } // Custom hook to handle the number formatting based on the current user's language. function useNumberFormatter() { - const { i18n } = useTranslation(); + const { i18n } = useTranslation(); - // Memoizing the number formatter to avoid unnecessary recalculations. - // It will be recreated only when the language changes. - const formatter = useMemo(() => { - return new Intl.NumberFormat(i18n.language, { - notation: "compact", - compactDisplay: "short" - }); - }, [i18n.language]); + // Memoizing the number formatter to avoid unnecessary recalculations. + // It will be recreated only when the language changes. + const formatter = useMemo(() => { + return new Intl.NumberFormat(i18n.language, { + notation: 'compact', + compactDisplay: 'short', + }); + }, [i18n.language]); - return (num: number) => formatter.format(num); + return (num: number) => formatter.format(num); } /** * `MusicItem` Component - * + * * Display individual music tracks with artist information, cover image, song title, and associated stats. * Designed for optimal performance and responsiveness across different screen sizes. - * + * * Features: * - Displays artist name, song title, and track cover image. * - Indicates user interaction with a like/favorite feature. @@ -68,11 +69,11 @@ function useNumberFormatter() { * - Adapts its layout and design responsively according to screen size. * - Optimized performance to ensure smooth rendering even in long lists. * - Automatic number formatting based on user's language preference. - * + * * Usage: - * + * * ```jsx - * {() => console.log('Play music!')} * /> * ``` - * - * Note: + * + * Note: * - The number formatting for `level`, `lastScore`, and `bestScore` adapts automatically based on the user's language preference using the i18n module. * - Given its optimized performance characteristics, this component is suitable for rendering in lists with potentially hundreds of items. */ -const MusicItem: React.FC = memo((props) => { - // Accessing theme colors and breakpoint values for responsive design - const { colors } = useTheme(); - const screenSize = useBreakpointValue({ base: 'small', md: 'md', xl: 'xl' }); - const formatNumber = useNumberFormatter(); +function MusicItemComponent(props: MusicItemProps) { + // Accessing theme colors and breakpoint values for responsive design + const { colors } = useTheme(); + const screenSize = useBreakpointValue({ base: 'small', md: 'md', xl: 'xl' }); + const formatNumber = useNumberFormatter(); - // Styles are memoized to optimize performance. - const styles = useMemo(() => StyleSheet.create({ - container: { - backgroundColor: colors.coolGray[500], - paddingRight: screenSize === 'small' ? 8 : 16, - }, - playButtonContainer: { - zIndex: 1, - position: 'absolute', - right: -8, - bottom: -6, - }, - playButton: { - backgroundColor: colors.primary[300], - borderRadius: 999, - }, - image: { - position: 'relative', - width: screenSize === 'xl' ? 80 : 60, - height: screenSize === 'xl' ? 80 : 60, - }, - artistText: { - color: colors.text[700], - fontWeight: "bold", - }, - songContainer: { - width: '100%', - }, - stats: { - display: 'flex', - flex: 1, - maxWidth: screenSize === 'xl' ? 150 : 50, - height: '100%', - alignItems: 'center', - justifyContent: screenSize === 'xl' ? 'flex-end' : 'center', - } - }), [colors, screenSize]); + // Styles are memoized to optimize performance. + const styles = useMemo( + () => + StyleSheet.create({ + container: { + backgroundColor: colors.coolGray[500], + paddingRight: screenSize === 'small' ? 8 : 16, + }, + playButtonContainer: { + zIndex: 1, + position: 'absolute', + right: -8, + bottom: -6, + }, + playButton: { + backgroundColor: colors.primary[300], + borderRadius: 999, + }, + image: { + position: 'relative', + width: screenSize === 'xl' ? 80 : 60, + height: screenSize === 'xl' ? 80 : 60, + }, + artistText: { + color: colors.text[700], + fontWeight: 'bold', + }, + songContainer: { + width: '100%', + }, + stats: { + display: 'flex', + flex: 1, + maxWidth: screenSize === 'xl' ? 150 : 50, + height: '100%', + alignItems: 'center', + justifyContent: screenSize === 'xl' ? 'flex-end' : 'center', + }, + }), + [colors, screenSize] + ); - // Memoizing formatted numbers to avoid unnecessary computations. - const formattedLevel = useMemo(() => formatNumber(props.level), [props.level]); - const formattedLastScore = useMemo(() => formatNumber(props.lastScore), [props.lastScore]); - const formattedBestScore = useMemo(() => formatNumber(props.bestScore), [props.bestScore]); + // Memoizing formatted numbers to avoid unnecessary computations. + const formattedLevel = useMemo(() => formatNumber(props.level), [props.level]); + const formattedLastScore = useMemo(() => formatNumber(props.lastScore), [props.lastScore]); + const formattedBestScore = useMemo(() => formatNumber(props.bestScore), [props.bestScore]); - return ( - - - - - - - - {props.artist} - - {screenSize === 'xl' && } - - {props.song} - - - - {[formattedLevel, formattedLastScore, formattedBestScore].map((value, index) => ( - - {value} - - ))} - - ); -}); + return ( + + + + + + + + {props.artist} + + {screenSize === 'xl' && } + + {props.song} + + + + {[formattedLevel, formattedLastScore, formattedBestScore].map((value, index) => ( + + {value} + + ))} + + ); +} -export default MusicItem; \ No newline at end of file +// Using `memo` to optimize rendering performance by memorizing the component's output. +// This ensures that the component only re-renders when its props change. +const MusicItem = memo(MusicItemComponent); + +export default MusicItem; diff --git a/front/components/UI/README.md b/front/components/UI/README.md index 3978126..dca65f5 100644 --- a/front/components/UI/README.md +++ b/front/components/UI/README.md @@ -1,40 +1,37 @@ ## IconButton -The `IconButton` is a responsive component displaying an interactive icon. It can toggle between active and inactive states, with customizable animations and styles for each state. +The `IconButton` is a responsive component displaying an interactive icon. It can toggle between active and inactive states, with customizable animations and styles for each state. ### Features: -- Toggle between active and inactive icons. -- Scale animation on press. -- Full customization of icon colors, sizes, and variants. -- Customizable styles for both the icon and its container. +- Toggle between active and inactive icons. +- Scale animation on press. +- Full customization of icon colors, sizes, and variants. +- Customizable styles for both the icon and its container. ### Preview ```jsx - console.log('Icon pressed!')} -/> + console.log('Icon pressed!')} /> ``` With active states: + ```jsx - console.log('Icon toggled!')} + console.log('Icon toggled!')} /> ``` ### Props | Prop | Type | Description | Default Value | -|-------------------|--------------|----------------------------------------------------|----------------| +| ----------------- | ------------ | -------------------------------------------------- | -------------- | | isActive | boolean | Indicates if the button starts in an active state. | false | | color | string | Color of the icon. | - | | colorActive | string | Optional active state color for the icon. | Value of color | @@ -50,38 +47,37 @@ With active states: | style | object/style | Custom style for the icon. | - | | containerStyle | object/style | Custom style for the icon's container. | - | - ## MusicItem The MusicItem is a responsive component designed to display individual music tracks with key details and interactive buttons, adapting its layout and design across various screen sizes. ### Features: -- Displays artist name, song title, and track cover image. -- Provides interactivity through a play button and a like button. -- Indicates song difficulty level, last score, and best score with automatic number formatting based on user's language preference. -- Optimized for performance, ensuring smooth rendering even in extensive lists. +- Displays artist name, song title, and track cover image. +- Provides interactivity through a play button and a like button. +- Indicates song difficulty level, last score, and best score with automatic number formatting based on user's language preference. +- Optimized for performance, ensuring smooth rendering even in extensive lists. ### Preview ```jsx - console.log('Music liked!')} - onPlay={() => console.log('Play music!')} + console.log('Music liked!')} + onPlay={() => console.log('Play music!')} /> ``` ### Props | Prop | Type | Description | Default Value | -|-----------|----------|-------------------------------------------------------|---------------| +| --------- | -------- | ----------------------------------------------------- | ------------- | | artist | string | Artist's name. | - | | song | string | Song's title. | - | | image | string | URL for the song's cover image. | - | diff --git a/front/components/UI/ScaffoldDesktopCC.tsx b/front/components/UI/ScaffoldDesktopCC.tsx index 27aec99..647c63b 100644 --- a/front/components/UI/ScaffoldDesktopCC.tsx +++ b/front/components/UI/ScaffoldDesktopCC.tsx @@ -91,7 +91,11 @@ const ScaffoldDesktopCC = (props: ScaffoldDesktopCCProps) => { }} > - + { maxHeight: '100%', flexDirection: 'column', flexShrink: 0, - padding: props.widthPadding ? 8 : 0 + padding: props.widthPadding ? 8 : 0, }} contentContainerStyle={{ flex: 1 }} > - - {props.children} - - + {props.children} + { const colorScheme = useColorScheme(); return ( - - {props.isBigScreen && {props.text}} - + + {props.isBigScreen && ( + + {props.text} + + )} + ); -} +}; export const FavoritesMusic = () => { const { colors } = useTheme(); @@ -49,34 +66,62 @@ export const FavoritesMusic = () => { const isBigScreen = screenSize === 'xl'; return ( - - - + + + Song - { - [{text: "level", icon: Chart2}, {text: "lastScore", icon: ArrowRotateLeft}, {text: "BastScore", icon: Cup}].map((value, index) => ( - - )) - } - + {[ + { text: 'level', icon: Chart2 }, + { text: 'lastScore', icon: ArrowRotateLeft }, + { text: 'BastScore', icon: Cup }, + ].map((value) => ( + + ))} + { } } + onLike={() => { + console.log('Liked !'); + }} level={3} lastScore={25550} bestScore={420} artist={'Ludwig van Beethoven'} song={'Piano Sonata No. 8'} - /> + /> { } } + onLike={() => { + console.log('Liked !'); + }} level={3} lastScore={255500000} - bestScore={42000} artist={'Ludwig van Beethoven'} song={'Sonata for Piano no. 20 in G major, op. 49 no. 2'} /> + bestScore={42000} + artist={'Ludwig van Beethoven'} + song={'Sonata for Piano no. 20 in G major, op. 49 no. 2'} + /> ); }; @@ -113,11 +158,10 @@ const getTabData = (key: string) => { return { index: 2, icon: StatusUp }; default: return { index: 3, icon: FolderCross }; - } }; -const SetttingsNavigator = (props: RouteProps<{}>) => { +const MusicTab = (props: RouteProps) => { const layout = useWindowDimensions(); const [index, setIndex] = React.useState(0); const colorScheme = useColorScheme(); @@ -139,8 +183,8 @@ const SetttingsNavigator = (props: RouteProps<{}>) => { borderBottomWidth: 1, borderColor: colors.primary[300], }} - activeColor={ colorScheme === 'light' ? '#000' : '#fff'} - inactiveColor={ colorScheme === 'light' ? 'rgba(0,0,0,0.7)' : 'rgba(255,255,255,0.7)'} + activeColor={colorScheme === 'light' ? '#000' : '#fff'} + inactiveColor={colorScheme === 'light' ? 'rgba(0,0,0,0.7)' : 'rgba(255,255,255,0.7)'} indicatorStyle={{ backgroundColor: colors.primary[300] }} renderIcon={( scene: Scene & { @@ -150,13 +194,22 @@ const SetttingsNavigator = (props: RouteProps<{}>) => { ) => { const tabHeader = getTabData(scene.route!.key); return ( - + ); }} renderLabel={({ route, color }) => layout.width > 800 && ( - {translate(route.title as 'musicTabFavorites' | 'musicTabRecentlyPlayed' | 'musicTabStepUp')} + {translate( + route.title as + | 'musicTabFavorites' + | 'musicTabRecentlyPlayed' + | 'musicTabStepUp' + )} ) } @@ -173,7 +226,7 @@ const SetttingsNavigator = (props: RouteProps<{}>) => { padding: isSmallScreen ? 4 : 20, paddingTop: 32, // maxWidth: 850, - width: '100%' + width: '100%', }} // style={{ height: 'fit-content' }} renderTabBar={renderTabBar} @@ -186,4 +239,4 @@ const SetttingsNavigator = (props: RouteProps<{}>) => { ); }; -export default SetttingsNavigator; +export default MusicTab; diff --git a/front/views/settings/SettingsView.tsx b/front/views/settings/SettingsView.tsx index 6be9af4..9d3215a 100644 --- a/front/views/settings/SettingsView.tsx +++ b/front/views/settings/SettingsView.tsx @@ -66,7 +66,7 @@ const getTabData = (key: string) => { }; // eslint-disable-next-line @typescript-eslint/ban-types -const SetttingsNavigator = (props: RouteProps<{}>) => { +const SettingsTab = (props: RouteProps<{}>) => { const layout = useWindowDimensions(); const [index, setIndex] = React.useState(0); const colorScheme = useColorScheme(); @@ -148,4 +148,4 @@ const SetttingsNavigator = (props: RouteProps<{}>) => { ); }; -export default SetttingsNavigator; +export default SettingsTab;