diff --git a/front/Navigation.tsx b/front/Navigation.tsx index 45abf78..b777542 100644 --- a/front/Navigation.tsx +++ b/front/Navigation.tsx @@ -211,7 +211,7 @@ const ProfileErrorView = (props: { onTryAgain: () => void }) => { { dispatch(unsetAccessToken()); - navigation.navigate('Start'); + navigation.navigate('Login'); }} colorScheme="error" variant="outline" diff --git a/front/Theme.tsx b/front/Theme.tsx index d00d3c9..71c8a15 100644 --- a/front/Theme.tsx +++ b/front/Theme.tsx @@ -31,12 +31,8 @@ const ThemeProvider = ({ children }: { children: JSX.Element }) => { 1000: 'rgba(16,16,20,1)', }; - const glassmorphism = colorScheme === 'light' - ? lightGlassmorphism - : darkGlassmorphism - const text = colorScheme === 'light' - ? darkGlassmorphism - : lightGlassmorphism + const glassmorphism = colorScheme === 'light' ? lightGlassmorphism : darkGlassmorphism; + const text = colorScheme === 'light' ? darkGlassmorphism : lightGlassmorphism return ( { const navigation = useNavigation(); return ( - navigation.navigate('User')} shadow={3}> + navigation.navigate('User', {})} shadow={3}> {Object.keys(props).map((competencyName, i) => ( diff --git a/front/components/Loading.tsx b/front/components/Loading.tsx index 4910597..4504d1c 100644 --- a/front/components/Loading.tsx +++ b/front/components/Loading.tsx @@ -1,8 +1,5 @@ import { useTheme } from 'native-base'; import { Center, Spinner } from 'native-base'; -import useColorScheme from '../hooks/colorScheme'; -import { DefaultTheme, DarkTheme } from '@react-navigation/native'; -import { useMemo } from 'react'; const LoadingComponent = () => { const theme = useTheme(); return ; diff --git a/front/components/ProgressBar.tsx b/front/components/ProgressBar.tsx index 82b24cd..96be1e2 100644 --- a/front/components/ProgressBar.tsx +++ b/front/components/ProgressBar.tsx @@ -14,7 +14,7 @@ const ProgressBar = ({ xp }: { xp: number }) => { const nav = useNavigation(); return ( - nav.navigate('User')}> + nav.navigate('User', {})}> diff --git a/front/components/ScoreGraph.tsx b/front/components/ScoreGraph.tsx index 1dca4eb..f0b53ad 100644 --- a/front/components/ScoreGraph.tsx +++ b/front/components/ScoreGraph.tsx @@ -1,11 +1,4 @@ -import { - Box, - Flex, - Select, - useBreakpointValue, - useTheme, - Wrap, -} from 'native-base'; +import { Box, Flex, Select, useBreakpointValue, useTheme, Wrap } from 'native-base'; import { LineChart } from 'react-native-chart-kit'; import { useState } from 'react'; import { useWindowDimensions } from 'react-native'; @@ -16,43 +9,46 @@ import { LoadingView } from './Loading'; const formatScoreDate = (playDate: Date): string => { // const formattedDate = `${pad(playDate.getDay())}/${pad(playDate.getMonth())}`; // const formattedTime = `${pad(playDate.getHours())}:${pad(playDate.getMinutes())}`; - + // console.log(playDate.toDateString()); // console.log(`${playDate.getDate()}/${playDate.getMonth() + 1}`); return `${playDate.getDate()}`; }; type GraphProps = { - songId: number, - since: Date + songId: number; + since: Date; }; -const calculateDailyAverages = (scores: { playDate: Date, score: number }[]): { playDate: Date, score: number }[] => { - const dailyScores: { [key: string]: number[] } = {}; +const calculateDailyAverages = ( + scores: { playDate: Date; score: number }[] +): { playDate: Date; score: number }[] => { + const dailyScores: { [key: string]: number[] } = {}; - // Regroupez les scores par date - scores.forEach((score) => { - const date = score.playDate.toISOString().split('T')[0] as string; // Obtenez la date au format 'YYYY-MM-DD' - if (!dailyScores[date]) { - dailyScores[date] = []; - } - dailyScores[date]!.push(score.score); - }); + // Regroupez les scores par date + scores.forEach((score) => { + const date = score.playDate.toISOString().split('T')[0] as string; // Obtenez la date au format 'YYYY-MM-DD' + if (!dailyScores[date]) { + dailyScores[date] = []; + } + dailyScores[date]!.push(score.score); + }); - // Calculez la moyenne des scores par jour et créez un tableau d'objets avec le format final - const dailyAverages: { playDate: Date, score: number }[] = []; - Object.keys(dailyScores).forEach((date) => { - const oneDayScore = dailyScores[date]; + // Calculez la moyenne des scores par jour et créez un tableau d'objets avec le format final + const dailyAverages: { playDate: Date; score: number }[] = []; + Object.keys(dailyScores).forEach((date) => { + const oneDayScore = dailyScores[date]; if (oneDayScore) { - const average = oneDayScore.reduce((total, score) => total + score, 0) / oneDayScore.length; + const average = + oneDayScore.reduce((total, score) => total + score, 0) / oneDayScore.length; dailyAverages.push({ playDate: new Date(date), score: average }); } - }); + }); - return dailyAverages; + return dailyAverages; }; -const Graph = ({songId, since}: GraphProps) => { +const Graph = ({ songId, since }: GraphProps) => { const isSmall = useBreakpointValue({ base: true, md: false }); const theme = useTheme(); const [containerWidth, setContainerWidth] = useState(0); @@ -63,8 +59,7 @@ const Graph = ({songId, since}: GraphProps) => { } const dailyScore = calculateDailyAverages(scoresQuery.data.history); - const scoresToSort = dailyScore - .filter((item: { playDate: Date; }) => item.playDate >= since); + const scoresToSort = dailyScore.filter((item: { playDate: Date }) => item.playDate >= since); const scores = scoresToSort.sort((a, b) => { if (a.playDate < b.playDate) { @@ -81,10 +76,12 @@ const Graph = ({songId, since}: GraphProps) => { style={{ width: '100%', marginTop: 20 }} onLayout={(event) => setContainerWidth(event.nativeEvent.layout.width)} > - {scores && scores.length > 0 && + {scores && scores.length > 0 && ( formatScoreDate(playDate)), + labels: isSmall + ? [] + : scores.map(({ playDate }) => formatScoreDate(playDate)), datasets: [ { data: scores.map(({ score }) => score), @@ -117,10 +114,10 @@ const Graph = ({songId, since}: GraphProps) => { }} bezier /> - } + )} ); -} +}; const ScoreGraph = () => { const layout = useWindowDimensions(); @@ -158,25 +155,25 @@ const ScoreGraph = () => { setSelectedSinceDate(threeDaysAgo); break; } - } + }; return ( - + @@ -198,12 +195,9 @@ const ScoreGraph = () => { - {selectedSong !== undefined && - - } + {selectedSong !== undefined && ( + + )} ); }; diff --git a/front/components/UI/ButtonBase.tsx b/front/components/UI/ButtonBase.tsx index 180583c..168f15f 100644 --- a/front/components/UI/ButtonBase.tsx +++ b/front/components/UI/ButtonBase.tsx @@ -132,7 +132,14 @@ const ButtonBase: React.FC = ({ /> )} {iconImage && } - {title && {title}} + {title && ( + + {title} + + )} )} diff --git a/front/components/UI/ButtonMenuBase.tsx b/front/components/UI/ButtonMenuBase.tsx index 335234a..5a64a2f 100644 --- a/front/components/UI/ButtonMenuBase.tsx +++ b/front/components/UI/ButtonMenuBase.tsx @@ -127,12 +127,22 @@ const ButtonBase: React.FC = ({ {icon && ( )} {iconImage && } - {title && {title}} + {title && ( + + {title} + + )} )} diff --git a/front/components/UI/Glassmorphism.tsx b/front/components/UI/Glassmorphism.tsx index 95afa46..b98d50c 100644 --- a/front/components/UI/Glassmorphism.tsx +++ b/front/components/UI/Glassmorphism.tsx @@ -5,22 +5,22 @@ import { StyleProp, ViewStyle } from 'react-native'; import useColorScheme from '../../hooks/colorScheme'; type GlassmorphismCCProps = { - children?: ReactNode, + children?: ReactNode; style?: StyleProp; }; const GlassmorphismCC = ({ children, style }: GlassmorphismCCProps) => { - const colorScheme = useColorScheme(); - console.log(colorScheme); + const colorScheme = useColorScheme(); + console.log(colorScheme); - return ( - - {children} - + return ( + + {children} + ); }; diff --git a/front/components/UI/LinkBase.tsx b/front/components/UI/LinkBase.tsx index 96011b3..336f906 100644 --- a/front/components/UI/LinkBase.tsx +++ b/front/components/UI/LinkBase.tsx @@ -3,51 +3,50 @@ import { TouchableOpacity, Animated, StyleSheet, Platform } from 'react-native'; import { Column, Text, useTheme } from 'native-base'; interface LinkBaseProps { - text: string; - onPress: () => void; + text: string; + onPress: () => void; } const LinkBase: React.FC = ({ text, onPress }) => { - const underlineHeight = useRef(new Animated.Value(4)).current; - const opacity = useRef(new Animated.Value(1)).current; - const color = useRef(new Animated.Value(1)).current; + const underlineHeight = useRef(new Animated.Value(4)).current; + const opacity = useRef(new Animated.Value(1)).current; const theme = useTheme(); - const handleMouseEnter = () => { - if (Platform.OS === 'web') { - Animated.timing(underlineHeight, { - toValue: 20, - duration: 250, - useNativeDriver: false - }).start(); - } - }; + const handleMouseEnter = () => { + if (Platform.OS === 'web') { + Animated.timing(underlineHeight, { + toValue: 20, + duration: 250, + useNativeDriver: false, + }).start(); + } + }; - const handleMouseLeave = () => { - if (Platform.OS === 'web') { - Animated.timing(underlineHeight, { - toValue: 4, - duration: 250, - useNativeDriver: false - }).start(); - } - }; + const handleMouseLeave = () => { + if (Platform.OS === 'web') { + Animated.timing(underlineHeight, { + toValue: 4, + duration: 250, + useNativeDriver: false, + }).start(); + } + }; - const handlePressIn = () => { - Animated.timing(opacity, { - toValue: 0.8, - duration: 250, - useNativeDriver: false - }).start(); - }; + const handlePressIn = () => { + Animated.timing(opacity, { + toValue: 0.8, + duration: 250, + useNativeDriver: false, + }).start(); + }; - const handlePressOut = () => { - Animated.timing(opacity, { - toValue: 1, - duration: 250, - useNativeDriver: false - }).start(); - }; + const handlePressOut = () => { + Animated.timing(opacity, { + toValue: 1, + duration: 250, + useNativeDriver: false, + }).start(); + }; return ( = ({ text, onPress }) => { }; const styles = StyleSheet.create({ - container: { - position: 'relative', - }, - underline: { - width: '100%', - position: 'absolute', - zIndex: -1, - bottom: 0, - }, + container: { + position: 'relative', + }, + underline: { + width: '100%', + position: 'absolute', + zIndex: -1, + bottom: 0, + }, }); export default LinkBase; diff --git a/front/components/UI/LogoutButtonCC.tsx b/front/components/UI/LogoutButtonCC.tsx index b9c06a2..85cb9c0 100644 --- a/front/components/UI/LogoutButtonCC.tsx +++ b/front/components/UI/LogoutButtonCC.tsx @@ -1,16 +1,14 @@ -import { Text, Row, Heading, Column, Center } from 'native-base'; import ButtonBase, { ButtonType } from './ButtonBase'; -import { CloseSquare, LoginCurve, LogoutCurve } from 'iconsax-react-native'; +import { LogoutCurve } from 'iconsax-react-native'; import { useDispatch } from 'react-redux'; import { translate } from '../../i18n/i18n'; import { unsetAccessToken } from '../../state/UserSlice'; -import { BlurView } from 'expo-blur'; import { useState } from 'react'; -import Modal from "react-native-modal"; import React from 'react'; import SignUpForm from '../../components/forms/signupform'; import API, { APIError } from '../../API'; import PopupCC from './PopupCC'; +import { StyleProp, ViewStyle } from 'react-native'; const handleSubmit = async (username: string, password: string, email: string) => { try { @@ -26,11 +24,16 @@ const handleSubmit = async (username: string, password: string, email: string) = type LogoutButtonCCProps = { collapse?: boolean; isGuest?: boolean; - style: any; - buttonType: ButtonType + style: StyleProp; + buttonType: ButtonType; }; -const LogoutButtonCC = ({collapse = false, isGuest = false, buttonType = 'menu', style}: LogoutButtonCCProps) => { +const LogoutButtonCC = ({ + collapse = false, + isGuest = false, + buttonType = 'menu', + style, +}: LogoutButtonCCProps) => { const dispatch = useDispatch(); const [isVisible, setIsVisible] = useState(false); diff --git a/front/components/UI/PopupCC.tsx b/front/components/UI/PopupCC.tsx index 5dc04f4..88f8a53 100644 --- a/front/components/UI/PopupCC.tsx +++ b/front/components/UI/PopupCC.tsx @@ -1,63 +1,58 @@ import { Text, Row, Heading, Column } from 'native-base'; import ButtonBase from './ButtonBase'; import { CloseSquare } from 'iconsax-react-native'; -import { BlurView } from 'expo-blur'; import { ReactNode } from 'react'; -import Modal from "react-native-modal"; +import Modal from 'react-native-modal'; import React from 'react'; import GlassmorphismCC from './Glassmorphism'; type PopupCCProps = { - title: string, - description?: string, - children?: ReactNode, - isVisible: boolean, - setIsVisible?: (isVisible: boolean) => void, + title: string; + description?: string; + children?: ReactNode; + isVisible: boolean; + setIsVisible?: (isVisible: boolean) => void; }; const PopupCC = ({ title, description, children, isVisible, setIsVisible }: PopupCCProps) => { return ( - - - - - - - {title} - - {setIsVisible !== undefined && - setIsVisible(false)} - /> - } - - - {description !== undefined && - {description} - } - {children !== undefined && children} - - - + + + + + + {title} + {setIsVisible !== undefined && ( + setIsVisible(false)} + /> + )} + + + {description !== undefined && {description}} + {children !== undefined && children} + + + ); }; diff --git a/front/components/UI/Scaffold.tsx b/front/components/UI/Scaffold.tsx index 55fef12..0c5b59c 100644 --- a/front/components/UI/Scaffold.tsx +++ b/front/components/UI/Scaffold.tsx @@ -86,11 +86,11 @@ const ScaffoldCC = (props: ScaffoldCCProps) => { height: 32, }} /> - {layout.width > 650 && + {layout.width > 650 && ( Chromacase - } + )} @@ -168,7 +168,7 @@ const ScaffoldCC = (props: ScaffoldCCProps) => { type="menu" isDisabled={props.routeName === 'Settings'} iconVariant={props.routeName === 'Settings' ? 'Bold' : 'Outline'} - onPress={async () => navigation.navigate('Settings')} + onPress={async () => navigation.navigate('Settings', {})} /> {!user.isGuest && ( diff --git a/front/components/UI/ScaffoldAuth.tsx b/front/components/UI/ScaffoldAuth.tsx index 24ed830..649bd54 100644 --- a/front/components/UI/ScaffoldAuth.tsx +++ b/front/components/UI/ScaffoldAuth.tsx @@ -1,5 +1,16 @@ import { LinearGradient } from 'expo-linear-gradient'; -import { Flex, Stack, View, Text, Wrap, Image, Row, Column, ScrollView, useToast } from 'native-base'; +import { + Flex, + Stack, + View, + Text, + Wrap, + Image, + Row, + Column, + ScrollView, + useToast, +} from 'native-base'; import { FunctionComponent } from 'react'; import { Linking, useWindowDimensions } from 'react-native'; import ButtonBase from './ButtonBase'; @@ -37,9 +48,11 @@ const ScaffoldAuth: FunctionComponent = ({ const dispatch = useDispatch(); const toast = useToast(); const colorScheme = useColorScheme(); - const logo = colorScheme == 'light' - ? require('../../assets/icon_light.png') - : require('../../assets/icon_dark.png'); + const logo = + colorScheme == 'light' + ? require('../../assets/icon_light.png') + : require('../../assets/icon_dark.png'); + // eslint-disable-next-line @typescript-eslint/no-var-requires const [banner] = useAssets(require('../../assets/banner.jpg')); return ( @@ -49,7 +62,7 @@ const ScaffoldAuth: FunctionComponent = ({ style={{ flex: 1, backgroundColor: '#cdd4fd' }} > - + = ({ height: 32, }} /> - {layout.width > 650 && + {layout.width > 650 && ( Chromacase - } + )} { try { handleGuestLogin((accessToken: string) => { @@ -79,10 +92,17 @@ const ScaffoldAuth: FunctionComponent = ({ } toast.show({ description: error as string }); } - }} + }} /> - + = ({ {submitButton} {link.label} - + - {layout.width > 650 && + {layout.width > 650 && ( = ({ style={{ width: '100%', height: '100%', borderRadius: 8 }} /> - } - {colorScheme === 'dark' && + )} + {colorScheme === 'dark' && ( = ({ zIndex: -2, }} /> - } + )} ); }; diff --git a/front/components/UI/ScaffoldCC.tsx b/front/components/UI/ScaffoldCC.tsx index 960cb51..69bf107 100644 --- a/front/components/UI/ScaffoldCC.tsx +++ b/front/components/UI/ScaffoldCC.tsx @@ -3,31 +3,23 @@ import useColorScheme from '../../hooks/colorScheme'; import { useQuery } from '../../Queries'; import API from '../../API'; import { LinearGradient } from 'expo-linear-gradient'; -import { - Cup, - Discover, - Icon, - Music, - SearchNormal1, - Setting2, - User, -} from 'iconsax-react-native'; +import { Cup, Discover, Icon, Music, SearchNormal1, Setting2, User } from 'iconsax-react-native'; import { LoadingView } from '../Loading'; import ScaffoldDesktopCC from './ScaffoldDesktopCC'; import ScaffoldMobileCC from './ScaffoldMobileCC'; const menu: { - type: "main" | "sub"; + type: 'main' | 'sub'; title: string; icon: Icon; link: string; }[] = [ - { type: "main", title: 'menuDiscovery', icon: Discover, link: 'HomeNew' }, - { type: "main", title: 'menuProfile', icon: User, link: 'User' }, - { type: "main", title: 'menuMusic', icon: Music, link: 'Music' }, - { type: "main", title: 'menuSearch', icon: SearchNormal1, link: 'Search' }, - { type: "main", title: 'menuLeaderBoard', icon: Cup, link: 'Score' }, - { type: "sub", title: 'menuSettings', icon: Setting2, link: 'Settings' }, + { type: 'main', title: 'menuDiscovery', icon: Discover, link: 'HomeNew' }, + { type: 'main', title: 'menuProfile', icon: User, link: 'User' }, + { type: 'main', title: 'menuMusic', icon: Music, link: 'Music' }, + { type: 'main', title: 'menuSearch', icon: SearchNormal1, link: 'Search' }, + { type: 'main', title: 'menuLeaderBoard', icon: Cup, link: 'Score' }, + { type: 'sub', title: 'menuSettings', icon: Setting2, link: 'Settings' }, ]; type ScaffoldCCProps = { @@ -36,7 +28,7 @@ type ScaffoldCCProps = { withPadding?: boolean; }; -const ScaffoldCC = ({children, routeName, withPadding = true}: ScaffoldCCProps) => { +const ScaffoldCC = ({ children, routeName, withPadding = true }: ScaffoldCCProps) => { const userQuery = useQuery(API.getUserInfo); const screenSize = useBreakpointValue({ base: 'small', md: 'big' }); @@ -44,13 +36,14 @@ const ScaffoldCC = ({children, routeName, withPadding = true}: ScaffoldCCProps) return ; } const colorScheme = useColorScheme(); - const logo = colorScheme == 'light' - ? require('../../assets/icon_light.png') - : require('../../assets/icon_dark.png'); + const logo = + colorScheme == 'light' + ? require('../../assets/icon_light.png') + : require('../../assets/icon_dark.png'); return ( - {screenSize === 'small' ? + {screenSize === 'small' ? ( {children} - : {children} - } - {colorScheme === 'dark' && + )} + {colorScheme === 'dark' && ( - } + )} ); }; diff --git a/front/components/UI/ScaffoldDesktopCC.tsx b/front/components/UI/ScaffoldDesktopCC.tsx index df7a808..27aec99 100644 --- a/front/components/UI/ScaffoldDesktopCC.tsx +++ b/front/components/UI/ScaffoldDesktopCC.tsx @@ -1,9 +1,9 @@ -import { View, Image, useWindowDimensions } from 'react-native'; -import { Divider, Text, ScrollView, Flex, Row, useMediaQuery, useTheme } from 'native-base'; +/* eslint-disable no-mixed-spaces-and-tabs */ +import { View, Image } from 'react-native'; +import { Divider, Text, ScrollView, Row, useMediaQuery, useTheme } from 'native-base'; import { useQuery, useQueries } from '../../Queries'; import API from '../../API'; import Song from '../../models/Song'; -import { LinearGradient } from 'expo-linear-gradient'; import ButtonBase from './ButtonBase'; import { Icon } from 'iconsax-react-native'; import { LoadingView } from '../Loading'; @@ -13,24 +13,22 @@ import Spacer from './Spacer'; import User from '../../models/User'; import LogoutButtonCC from './LogoutButtonCC'; import GlassmorphismCC from './Glassmorphism'; -import { ColorSchemeProvider } from '../../Theme'; -import useColorScheme from '../../hooks/colorScheme'; type ScaffoldDesktopCCProps = { - widthPadding: boolean, + widthPadding: boolean; children?: React.ReactNode; user: User; logo: string; routeName: string; menu: { - type: "main" | "sub"; + type: 'main' | 'sub'; title: string; icon: Icon; link: string; - }[] + }[]; }; -const SongHistory = (props: {quantity: number}) => { +const SongHistory = (props: { quantity: number }) => { const playHistoryQuery = useQuery(API.getUserPlayHistory); const songHistory = useQueries( playHistoryQuery.data?.map(({ songID }) => API.getSong(songID)) ?? [] @@ -42,9 +40,10 @@ const SongHistory = (props: {quantity: number}) => { return ( - {songHistory.length === 0 ? + {songHistory.length === 0 ? ( {translate('menuNoSongsPlayedYet')} - : songHistory + ) : ( + songHistory .map((h) => h.data) .filter((data): data is Song => data !== undefined) .filter( @@ -62,12 +61,11 @@ const SongHistory = (props: {quantity: number}) => { > {histoItem.name} - ) - ) - } + )) + )} ); -} +}; const ScaffoldDesktopCC = (props: ScaffoldDesktopCCProps) => { const navigation = useNavigation(); @@ -102,39 +100,53 @@ const ScaffoldDesktopCC = (props: ScaffoldDesktopCCProps) => { height: 32, }} /> - {!isSmallScreen && + {!isSmallScreen && ( Chromacase - } + )} - {props.menu.map((value) => ( - value.type === "main" && - - - navigation.navigate(value.link as never) - } - /> - - - ))} + {props.menu.map( + (value) => + value.type === 'main' && ( + + + navigation.navigate(value.link as never) + } + /> + + + ) + )} - {!isSmallScreen && + {!isSmallScreen && ( - - + + { > {translate('menuRecentlyPlayed')} - + - } - + )} + - - - {props.menu.map((value) => ( - value.type === "sub" && - - navigation.navigate(value.link as never) - } - /> - ))} - - + + + {props.menu.map( + (value) => + value.type === 'sub' && ( + navigation.navigate(value.link as never)} + /> + ) + )} + + - + { > {props.children} - + - ); }; diff --git a/front/components/UI/ScaffoldMobileCC.tsx b/front/components/UI/ScaffoldMobileCC.tsx index 38bca8b..f3ab35b 100644 --- a/front/components/UI/ScaffoldMobileCC.tsx +++ b/front/components/UI/ScaffoldMobileCC.tsx @@ -1,5 +1,6 @@ +/* eslint-disable no-mixed-spaces-and-tabs */ import { View } from 'react-native'; -import { ScrollView, Flex, useMediaQuery, useTheme } from 'native-base'; +import { ScrollView, Flex, useMediaQuery, useTheme } from 'native-base'; import ButtonBase from './ButtonBase'; import { Icon } from 'iconsax-react-native'; import { useNavigation } from '../../Navigation'; @@ -12,13 +13,13 @@ type ScaffoldMobileCCProps = { user: User; logo: string; routeName: string; - widthPadding: number; + widthPadding: boolean; menu: { - type: "main" | "sub"; + type: 'main' | 'sub'; title: string; icon: Icon; link: string; - }[] + }[]; }; const ScaffoldMobileCC = (props: ScaffoldMobileCCProps) => { @@ -45,7 +46,7 @@ const ScaffoldMobileCC = (props: ScaffoldMobileCCProps) => { - + { key={'key-menu-link-' + value.title} type="menu" icon={value.icon} - title={props.routeName === value.link && !isSmallScreen ? translate(value.title as 'menuDiscovery' | 'menuProfile' | 'menuMusic' | 'menuSearch' | 'menuLeaderBoard' | 'menuSettings') : undefined} + title={ + props.routeName === value.link && !isSmallScreen + ? translate( + value.title as + | 'menuDiscovery' + | 'menuProfile' + | 'menuMusic' + | 'menuSearch' + | 'menuLeaderBoard' + | 'menuSettings' + ) + : undefined + } isDisabled={props.routeName === value.link} - iconVariant={ - props.routeName === value.link ? 'Bold' : 'Outline' - } - onPress={async () => - navigation.navigate(value.link as never) - } + iconVariant={props.routeName === value.link ? 'Bold' : 'Outline'} + onPress={async () => navigation.navigate(value.link as never)} /> ))} diff --git a/front/components/UI/SeparatorBase.tsx b/front/components/UI/SeparatorBase.tsx index e228c91..c517aba 100644 --- a/front/components/UI/SeparatorBase.tsx +++ b/front/components/UI/SeparatorBase.tsx @@ -27,14 +27,14 @@ const SeparatorBase: FunctionComponent = ({ children }) => { const colorScheme = useColorScheme(); const { colors } = useTheme(); const color = colorScheme === 'light' ? colors.black[500] : '#FFFFFF'; - + return ( - + {children} - + ); -} +}; export default SeparatorBase; diff --git a/front/components/UI/TextFieldBase.tsx b/front/components/UI/TextFieldBase.tsx index f1c0509..e0ad2a2 100644 --- a/front/components/UI/TextFieldBase.tsx +++ b/front/components/UI/TextFieldBase.tsx @@ -3,7 +3,6 @@ import React, { useState } from 'react'; import { View, TouchableOpacity, StyleSheet, StyleProp, ViewStyle } from 'react-native'; import InteractiveBase from './InteractiveBase'; import { Input, useTheme } from 'native-base'; -import { ColorSchemeProvider } from '../../Theme'; import useColorScheme from '../../hooks/colorScheme'; export interface TextFieldBaseProps { @@ -104,7 +103,11 @@ const TextFieldBase: React.FC = ({ }); return ( - + {icon && ( @@ -121,7 +124,9 @@ const TextFieldBase: React.FC = ({ style={[styles.input, icon ? {} : { paddingLeft: 12 }]} autoComplete={autoComplete} placeholder={placeholder + (isRequired ? '*' : '')} - placeholderTextColor={colorScheme === 'light' ? 'rgba(0,0,0,0.7)' : 'rgba(255,255,255,0.7)'} + placeholderTextColor={ + colorScheme === 'light' ? 'rgba(0,0,0,0.7)' : 'rgba(255,255,255,0.7)' + } secureTextEntry={isSecret ? !isPasswordVisible : false} onFocus={() => setFocused(true)} onBlur={() => setFocused(false)} diff --git a/front/components/forms/signupform.tsx b/front/components/forms/signupform.tsx index 4b8719d..d4dc4ee 100644 --- a/front/components/forms/signupform.tsx +++ b/front/components/forms/signupform.tsx @@ -130,7 +130,7 @@ const SignUpForm = ({ onSubmit }: SignupFormProps) => { }); }} /> - + {
- diff --git a/front/views/ForgotPasswordView.tsx b/front/views/ForgotPasswordView.tsx index 7bc30b4..9b5e822 100644 --- a/front/views/ForgotPasswordView.tsx +++ b/front/views/ForgotPasswordView.tsx @@ -12,7 +12,7 @@ const ForgotPasswordView = () => { route: `/auth/forgot-password?email=${email}`, method: 'PUT', }); - navigation.navigate('Home'); + navigation.navigate('Home', {}); return 'email sent'; } catch { return 'Error with email, please contact support'; diff --git a/front/views/HomeView.tsx b/front/views/HomeView.tsx index 8c1a25b..d057df1 100644 --- a/front/views/HomeView.tsx +++ b/front/views/HomeView.tsx @@ -13,6 +13,7 @@ import Song from '../models/Song'; import { FontAwesome5 } from '@expo/vector-icons'; import ScaffoldCC from '../components/UI/ScaffoldCC'; +// eslint-disable-next-line @typescript-eslint/ban-types const HomeView = (props: RouteProps<{}>) => { const navigation = useNavigation(); const userQuery = useQuery(API.getUserInfo); @@ -135,13 +136,13 @@ const HomeView = (props: RouteProps<{}>) => { translate={{ translationKey: 'settingsBtn' }} colorScheme="gray" size="sm" - onPress={() => navigation.navigate('Settings')} + onPress={() => navigation.navigate('Settings', {})} /> navigation.navigate('HomeNew')} + onPress={() => navigation.navigate('HomeNew', {})} /> diff --git a/front/views/PasswordResetView.tsx b/front/views/PasswordResetView.tsx index bd74b2e..f7b3980 100644 --- a/front/views/PasswordResetView.tsx +++ b/front/views/PasswordResetView.tsx @@ -17,7 +17,7 @@ const PasswordResetView = () => { password, }, }); - navigation.navigate('Home'); + navigation.navigate('Home', {}); return 'password succesfully reset'; } catch { return 'password reset failed'; diff --git a/front/views/PlayView.tsx b/front/views/PlayView.tsx index 45eca36..7002da8 100644 --- a/front/views/PlayView.tsx +++ b/front/views/PlayView.tsx @@ -136,7 +136,7 @@ const PlayView = ({ songId, type, route }: RouteProps) => { stopwatch.stop(); if (webSocket.current?.readyState != WebSocket.OPEN) { console.warn('onEnd: Websocket not open'); - navigation.dispatch(StackActions.replace('Home')); + navigation.dispatch(StackActions.replace('Home', {})); return; } webSocket.current?.send( diff --git a/front/views/ProfileView.tsx b/front/views/ProfileView.tsx index aec07d7..adc7346 100644 --- a/front/views/ProfileView.tsx +++ b/front/views/ProfileView.tsx @@ -19,6 +19,7 @@ function xpToProgressBarValue(xp: number): number { return Math.floor(xp / 10); } +// eslint-disable-next-line @typescript-eslint/ban-types const ProfileView = (props: RouteProps<{}>) => { const layout = useWindowDimensions(); const navigation = useNavigation(); @@ -70,13 +71,19 @@ const ProfileView = (props: RouteProps<{}>) => { title="Modifier profil" style={{ width: 'fit-content' }} type={'filled'} - onPress={async () => navigation.navigate('Settings')} + onPress={async () => navigation.navigate('Settings', {})} /> Account created on {userQuery.data.data.createdAt.toLocaleDateString()} - + Your client ID is {userQuery.data.id} @@ -93,7 +100,7 @@ const ProfileView = (props: RouteProps<{}>) => { flex={1} /> - + ); diff --git a/front/views/ScoreView.tsx b/front/views/ScoreView.tsx index 15d204c..1abf16b 100644 --- a/front/views/ScoreView.tsx +++ b/front/views/ScoreView.tsx @@ -163,7 +163,7 @@ const ScoreView = (props: RouteProps) => { navigation.navigate('Home')} + onPress={() => navigation.navigate('Home', {})} /> navigation.navigate('Song', { songId })} diff --git a/front/views/SearchView.tsx b/front/views/SearchView.tsx index bb43cac..3af01fc 100644 --- a/front/views/SearchView.tsx +++ b/front/views/SearchView.tsx @@ -110,4 +110,4 @@ const SearchView = (props: RouteProps) => { ); }; -export default SearchView; \ No newline at end of file +export default SearchView; diff --git a/front/views/SigninView.tsx b/front/views/SigninView.tsx index 401c7d0..d276ead 100644 --- a/front/views/SigninView.tsx +++ b/front/views/SigninView.tsx @@ -61,11 +61,11 @@ const SigninView = () => { return ( { return ( ) => { const songsQuery = useQuery(API.getSongSuggestions); const screenSize = useBreakpointValue({ base: 'small', md: 'big' }); diff --git a/front/views/VerifiedView.tsx b/front/views/VerifiedView.tsx index 51d8c28..907cd63 100644 --- a/front/views/VerifiedView.tsx +++ b/front/views/VerifiedView.tsx @@ -17,7 +17,7 @@ const VerifiedView = () => { route: `/auth/verify?token=${(route.params as any).token}`, method: 'PUT', }); - navigation.navigate('Home'); + navigation.navigate('Home', {}); } catch { setFailed(true); } diff --git a/front/views/settings/NotificationsSettings.tsx b/front/views/settings/NotificationsSettings.tsx index bcb2d77..fdba6c6 100644 --- a/front/views/settings/NotificationsSettings.tsx +++ b/front/views/settings/NotificationsSettings.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import { Flex } from 'native-base'; import { translate } from '../../i18n/i18n'; import ElementList from '../../components/GtkUI/ElementList'; import useUserSettings from '../../hooks/userSettings'; @@ -17,13 +16,15 @@ const NotificationsSettings = () => { } return ( , title: translate('SettingsNotificationsTabPushNotificationsSectionTitle'), - description: translate('SettingsNotificationsTabPushNotificationsSectionDescription'), + description: translate( + 'SettingsNotificationsTabPushNotificationsSectionDescription' + ), data: { value: settings.data.notifications.pushNotif, onToggle: () => { @@ -39,7 +40,9 @@ const NotificationsSettings = () => { type: 'toggle', icon: , title: translate('SettingsNotificationsTabEmailNotificationsSectionTitle'), - description: translate('SettingsNotificationsTabEmailNotificationsSectionDescription'), + description: translate( + 'SettingsNotificationsTabEmailNotificationsSectionDescription' + ), data: { value: settings.data.notifications.emailNotif, onToggle: () => { @@ -55,7 +58,9 @@ const NotificationsSettings = () => { type: 'toggle', icon: , title: translate('SettingsNotificationsTabTrainingReminderSectionTitle'), - description: translate('SettingsNotificationsTabTrainingReminderSectionDescription'), + description: translate( + 'SettingsNotificationsTabTrainingReminderSectionDescription' + ), data: { value: settings.data.notifications.trainNotif, onToggle: () => { @@ -71,7 +76,9 @@ const NotificationsSettings = () => { type: 'toggle', icon: , title: translate('SettingsNotificationsTabReleaseAlertSectionTitle'), - description: translate('SettingsNotificationsTabReleaseAlertSectionDescription'), + description: translate( + 'SettingsNotificationsTabReleaseAlertSectionDescription' + ), data: { value: settings.data.notifications.newSongNotif, onToggle: () => { diff --git a/front/views/settings/PreferencesSettings.tsx b/front/views/settings/PreferencesSettings.tsx index 2912919..821aba4 100644 --- a/front/views/settings/PreferencesSettings.tsx +++ b/front/views/settings/PreferencesSettings.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { useDispatch } from 'react-redux'; -import { Column, Flex } from 'native-base'; +import { Column } from 'native-base'; import { useLanguage } from '../../state/LanguageSlice'; import { AvailableLanguages, DefaultLanguage, translate } from '../../i18n/i18n'; import { useSelector } from '../../state/Store'; @@ -17,7 +17,7 @@ const PreferencesSettings = () => { const colorScheme = useColorScheme(); const color = colorScheme === 'light' ? '#000' : '#fff'; return ( - + { icon: , type: 'dropdown', title: translate('SettingsPreferencesTabDifficultySectionTitle'), - description: translate('SettingsPreferencesTabDifficultySectionDescription'), + description: translate( + 'SettingsPreferencesTabDifficultySectionDescription' + ), data: { value: settings.difficulty, defaultValue: 'medium', @@ -90,7 +92,9 @@ const PreferencesSettings = () => { icon: , type: 'toggle', title: translate('SettingsPreferencesTabColorblindModeSectionTitle'), - description: translate('SettingsPreferencesTabColorblindModeSectionDescription'), + description: translate( + 'SettingsPreferencesTabColorblindModeSectionDescription' + ), data: { value: settings.colorBlind, onToggle: () => { diff --git a/front/views/settings/PrivacySettings.tsx b/front/views/settings/PrivacySettings.tsx index cfb279f..9ee66db 100644 --- a/front/views/settings/PrivacySettings.tsx +++ b/front/views/settings/PrivacySettings.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import { Flex } from 'native-base'; import { translate } from '../../i18n/i18n'; import ElementList from '../../components/GtkUI/ElementList'; import { useDispatch } from 'react-redux'; @@ -22,7 +21,7 @@ const PrivacySettings = () => { } return ( { data: { value: settings.dataCollection, onToggle: () => - dispatch( - updateSettings({ dataCollection: !settings.dataCollection }) - ), + dispatch(updateSettings({ dataCollection: !settings.dataCollection })), }, }, { diff --git a/front/views/settings/SettingsPremium.tsx b/front/views/settings/SettingsPremium.tsx index cfd7015..3c0db60 100644 --- a/front/views/settings/SettingsPremium.tsx +++ b/front/views/settings/SettingsPremium.tsx @@ -1,6 +1,5 @@ import API from '../../API'; import React from 'react'; -import { Flex } from 'native-base'; import { LoadingView } from '../../components/Loading'; import ElementList from '../../components/GtkUI/ElementList'; import { translate } from '../../i18n/i18n'; @@ -21,7 +20,7 @@ const PremiumSettings = () => { const color = colorScheme === 'light' ? '#000' : '#fff'; return ( , diff --git a/front/views/settings/SettingsProfile.tsx b/front/views/settings/SettingsProfile.tsx index c206a55..8e76b12 100644 --- a/front/views/settings/SettingsProfile.tsx +++ b/front/views/settings/SettingsProfile.tsx @@ -1,6 +1,6 @@ import API from '../../API'; import React from 'react'; -import { Column, Flex, Toast } from 'native-base'; +import { Column, Toast } from 'native-base'; import { LoadingView } from '../../components/Loading'; import ElementList from '../../components/GtkUI/ElementList'; import { translate } from '../../i18n/i18n'; @@ -10,8 +10,6 @@ import { Google, PasswordCheck, SmsEdit, UserSquare, Verify } from 'iconsax-reac import ChangeEmailForm from '../../components/forms/changeEmailForm'; import ChangePasswordForm from '../../components/forms/changePasswordForm'; import LogoutButtonCC from '../../components/UI/LogoutButtonCC'; -import Spacer from '../../components/UI/Spacer'; -import { ColorSchemeProvider } from '../../Theme'; import useColorScheme from '../../hooks/colorScheme'; const handleChangeEmail = async (newEmail: string): Promise => { @@ -36,7 +34,7 @@ const ProfileSettings = () => { const colorScheme = useColorScheme(); const color = colorScheme === 'light' ? '#000' : '#fff'; return ( - + { title: translate('settingsProfileTabGoogleSectionTitle'), description: translate('settingsProfileTabGoogleSectionDescription'), data: { - text: translate(user.googleID ? 'settingsProfileTabGoogleSectionLinkedText' : 'settingsProfileTabGoogleSectionNotLinkedText') + text: translate( + user.googleID + ? 'settingsProfileTabGoogleSectionLinkedText' + : 'settingsProfileTabGoogleSectionNotLinkedText' + ), }, }, { @@ -54,20 +56,28 @@ const ProfileSettings = () => { title: translate('settingsProfileTabVerifiedSectionTitle'), description: translate('settingsProfileTabVerifiedSectionDescription'), data: { - text: translate(user.emailVerified ? 'settingsProfileTabVerifiedSectionVerifiedText' : 'settingsProfileTabVerifiedSectionNotVerifiedText'), + text: translate( + user.emailVerified + ? 'settingsProfileTabVerifiedSectionVerifiedText' + : 'settingsProfileTabVerifiedSectionNotVerifiedText' + ), onPress: user.emailVerified ? undefined : () => API.fetch({ route: '/auth/reverify', method: 'PUT' }) .then(() => Toast.show({ - description: translate('settingsProfileTabVerifiedSectionVerificationToast') + description: translate( + 'settingsProfileTabVerifiedSectionVerificationToast' + ), }) ) .catch((e) => { console.error(e); Toast.show({ - description: translate('settingsProfileTabVerifiedSectionVerificationToastError') + description: translate( + 'settingsProfileTabVerifiedSectionVerificationToastError' + ), }); }), }, @@ -94,12 +104,18 @@ const ProfileSettings = () => { .then(() => { userQuery.refetch(); Toast.show({ - description: translate('settingsProfileTabAvatarSectionUpdateToast'), + description: translate( + 'settingsProfileTabAvatarSectionUpdateToast' + ), }); }) .catch((e) => { console.error(e); - Toast.show({ description: translate('settingsProfileTabAvatarSectionUpdateToastError')}); + Toast.show({ + description: translate( + 'settingsProfileTabAvatarSectionUpdateToastError' + ), + }); }); } }); @@ -125,7 +141,9 @@ const ProfileSettings = () => { icon: , type: 'sectionDropdown', title: translate('settingsProfileTabChangePasswordSectionTitle'), - description: translate('settingsProfileTabChangePasswordSectionDescription'), + description: translate( + 'settingsProfileTabChangePasswordSectionDescription' + ), data: { value: true, section: [ @@ -140,7 +158,11 @@ const ProfileSettings = () => { }, ]} /> - + ); }; diff --git a/front/views/settings/SettingsView.tsx b/front/views/settings/SettingsView.tsx index b8b4715..6be9af4 100644 --- a/front/views/settings/SettingsView.tsx +++ b/front/views/settings/SettingsView.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Center, Flex, Text, useTheme } from 'native-base'; +import { Center, Text, useTheme } from 'native-base'; import ProfileSettings from './SettingsProfile'; import NotificationsSettings from './NotificationsSettings'; import PrivacySettings from './PrivacySettings'; @@ -26,7 +26,6 @@ import { Scene } from 'react-native-tab-view/lib/typescript/src/types'; import PremiumSettings from './SettingsPremium'; import { RouteProps } from '../../Navigation'; import ScaffoldCC from '../../components/UI/ScaffoldCC'; -import { ColorSchemeProvider } from '../../Theme'; import useColorScheme from '../../hooks/colorScheme'; import { translate } from '../../i18n/i18n'; @@ -66,6 +65,7 @@ const getTabData = (key: string) => { } }; +// eslint-disable-next-line @typescript-eslint/ban-types const SetttingsNavigator = (props: RouteProps<{}>) => { const layout = useWindowDimensions(); const [index, setIndex] = React.useState(0); @@ -89,8 +89,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 & { @@ -100,13 +100,25 @@ const SetttingsNavigator = (props: RouteProps<{}>) => { ) => { const tabHeader = getTabData(scene.route!.key); return ( - + ); }} renderLabel={({ route, color }) => layout.width > 1100 && ( - {translate(route.title as 'settingsTabProfile' | 'settingsTabPremium' | 'settingsTabPreferences' | 'settingsTabNotifications' | 'settingsTabPrivacy' | 'settingsTabPiano')} + {translate( + route.title as + | 'settingsTabProfile' + | 'settingsTabPremium' + | 'settingsTabPreferences' + | 'settingsTabNotifications' + | 'settingsTabPrivacy' + | 'settingsTabPiano' + )} ) } @@ -123,7 +135,7 @@ const SetttingsNavigator = (props: RouteProps<{}>) => { paddingTop: 32, padding: 20, maxWidth: 850, - width: '100%' + width: '100%', }} style={{ height: 'fit-content' }} renderTabBar={renderTabBar}