zoriya/Chromacase
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixing error prettier redesign CI

Browse Source
This commit is contained in:
mathysPaul
2023-09-19 17:36:19 +02:00
parent 073ff033f3
commit 1abfbf391f
22 changed files with 986 additions and 778 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/views/settings/NotificationView.tsx
+4 -4
View File
@@ -29,7 +29,7 @@ const NotificationsView = () => {
elements={[
{
type: 'toggle',
icon: <MonitorMobbile size="24" color="#FFF" style={{minWidth: 24}}/>,
icon: <MonitorMobbile size="24" color="#FFF" style={{ minWidth: 24 }} />,
title: translate('SettingsNotificationsPushNotifications'),
description: 'Cette notification apparaitra sur votre apparail en pop-up',
data: {
@@ -45,7 +45,7 @@ const NotificationsView = () => {
},
{
type: 'toggle',
icon: <Send2 size="24" color="#FFF" style={{minWidth: 24}}/>,
icon: <Send2 size="24" color="#FFF" style={{ minWidth: 24 }} />,
title: translate('SettingsNotificationsEmailNotifications'),
description: 'Recevez des mails pour atteindre vos objectifs',
data: {
@@ -61,7 +61,7 @@ const NotificationsView = () => {
},
{
type: 'toggle',
icon: <Calendar1 size="24" color="#FFF" style={{minWidth: 24}}/>,
icon: <Calendar1 size="24" color="#FFF" style={{ minWidth: 24 }} />,
title: translate('SettingsNotificationsTrainingReminder'),
description: 'Un apprentissage régulier est la clé',
data: {
@@ -77,7 +77,7 @@ const NotificationsView = () => {
},
{
type: 'toggle',
icon: <Warning2 size="24" color="#FFF" style={{minWidth: 24}}/>,
icon: <Warning2 size="24" color="#FFF" style={{ minWidth: 24 }} />,
title: translate('SettingsNotificationsReleaseAlert'),
description: 'Restez informé de nos mises à jour',
data: {
front/views/settings/PreferencesView.tsx
+15 -6
View File
@@ -7,7 +7,16 @@ import { useSelector } from '../../state/Store';
import { updateSettings } from '../../state/SettingsSlice';
import ElementList from '../../components/GtkUI/ElementList';
import LocalSettings from '../../models/LocalSettings';
import { Brush, Brush2, Colorfilter, LanguageSquare, Rank, Ranking, Sound, Star1 } from 'iconsax-react-native';
import {
Brush,
Brush2,
Colorfilter,
LanguageSquare,
Rank,
Ranking,
Sound,
Star1,
} from 'iconsax-react-native';
const PreferencesView = () => {
const dispatch = useDispatch();
@@ -29,7 +38,7 @@ const PreferencesView = () => {
}}
elements={[
{
icon: <Brush2 size="24" color="#FFF" style={{minWidth: 24}}/>,
icon: <Brush2 size="24" color="#FFF" style={{ minWidth: 24 }} />,
type: 'dropdown',
title: translate('SettingsPreferencesTheme'),
description: 'Définissez le theme (Dark ou Light) de votre application',
@@ -51,7 +60,7 @@ const PreferencesView = () => {
},
},
{
icon: <LanguageSquare size="24" color="#FFF" style={{minWidth: 24}}/>,
icon: <LanguageSquare size="24" color="#FFF" style={{ minWidth: 24 }} />,
type: 'dropdown',
title: translate('SettingsPreferencesLanguage'),
description: 'Définissez la langue de votre application',
@@ -69,7 +78,7 @@ const PreferencesView = () => {
},
},
{
icon: <Rank size="24" color="#FFF" style={{minWidth: 24}}/>,
icon: <Rank size="24" color="#FFF" style={{ minWidth: 24 }} />,
type: 'dropdown',
title: translate('SettingsPreferencesDifficulty'),
description: 'La précision du tempo est de plus en plus élevée',
@@ -100,7 +109,7 @@ const PreferencesView = () => {
}}
elements={[
{
icon: <Colorfilter size="24" color="#FFF" style={{minWidth: 24}}/>,
icon: <Colorfilter size="24" color="#FFF" style={{ minWidth: 24 }} />,
type: 'toggle',
title: translate('SettingsPreferencesColorblindMode'),
description: 'Augmente le contraste',
@@ -121,7 +130,7 @@ const PreferencesView = () => {
}}
elements={[
{
icon: <Sound size="24" color="#FFF" style={{minWidth: 24}}/>,
icon: <Sound size="24" color="#FFF" style={{ minWidth: 24 }} />,
type: 'range',
title: translate('SettingsPreferencesMicVolume'),
description: 'Régler le volume de votre micro selon vos preference',
front/views/settings/PrivacyView.tsx
+5 -4
View File
@@ -34,9 +34,10 @@ const PrivacyView = () => {
elements={[
{
type: 'toggle',
icon: <Driver size="24" color="#FFF" style={{minWidth: 24}}/>,
icon: <Driver size="24" color="#FFF" style={{ minWidth: 24 }} />,
title: translate('dataCollection'),
description: 'Acceptez-vous la récupération de vos données pour l\'amélioration de Chromacase ?',
description:
"Acceptez-vous la récupération de vos données pour l'amélioration de Chromacase ?",
data: {
value: settings.dataCollection,
onToggle: () =>
@@ -47,7 +48,7 @@ const PrivacyView = () => {
},
{
type: 'toggle',
icon: <Shop size="24" color="#FFF" style={{minWidth: 24}}/>,
icon: <Shop size="24" color="#FFF" style={{ minWidth: 24 }} />,
title: translate('customAds'),
description: 'Afficher les suggestions dans la section des recommandations',
data: {
@@ -58,7 +59,7 @@ const PrivacyView = () => {
},
{
type: 'toggle',
icon: <Like1 size="24" color="#FFF" style={{minWidth: 24}}/>,
icon: <Like1 size="24" color="#FFF" style={{ minWidth: 24 }} />,
title: translate('recommendations'),
description: 'Souhaitez-vous recevoir nos conseils et recommandations ?',
data: {
front/views/settings/SettingsPremiumView.tsx
+16 -6
View File
@@ -11,7 +11,15 @@ import { useQuery } from '../../Queries';
import UserAvatar from '../../components/UserAvatar';
import * as ImagePicker from 'expo-image-picker';
import SettingBase from '../../components/UI/SettingsBase';
import { Designtools, Google, Magicpen, PasswordCheck, SmsEdit, Star1, UserSquare } from 'iconsax-react-native';
import {
Designtools,
Google,
Magicpen,
PasswordCheck,
SmsEdit,
Star1,
UserSquare,
} from 'iconsax-react-native';
import { LinearGradient } from 'expo-linear-gradient';
// Too painful to infer the settings-only, typed navigator. Gave up
@@ -40,19 +48,21 @@ const PremiumSettings = () => {
}}
elements={[
{
icon: <Star1 size="24" color="#FFF" style={{minWidth: 24}}/>,
icon: <Star1 size="24" color="#FFF" style={{ minWidth: 24 }} />,
type: 'text',
title: translate('premiumAccount'),
description: 'Personalisation premium et outils vous permetant de passer au niveau supperieur',
description:
'Personalisation premium et outils vous permetant de passer au niveau supperieur',
data: {
text: translate(user.premium ? 'yes' : 'no'),
},
},
{
icon: <Magicpen size="24" color="#FFF" style={{minWidth: 24}}/>,
icon: <Magicpen size="24" color="#FFF" style={{ minWidth: 24 }} />,
type: 'toggle',
title: 'Piano Magique',
description: 'Fait apparaître de la lumière sur le piano pendant les parties',
description:
'Fait apparaître de la lumière sur le piano pendant les parties',
helperText:
'Vous devez posséder le module physique lumineux Chromacase pour pouvoir utiliser cette fonctionnalité',
disabled: true,
@@ -62,7 +72,7 @@ const PremiumSettings = () => {
},
},
{
icon: <Designtools size="24" color="#FFF" style={{minWidth: 24}}/>,
icon: <Designtools size="24" color="#FFF" style={{ minWidth: 24 }} />,
type: 'dropdown',
title: 'Thème de piano',
description: 'Définissez le theme de votre piano',
front/views/settings/SettingsProfileView.tsx
+41 -21
View File
@@ -2,7 +2,18 @@ import API from '../../API';
import { useDispatch } from 'react-redux';
import { unsetAccessToken } from '../../state/UserSlice';
import React from 'react';
import { Column, Text, Button, Box, Flex, Center, Heading, Popover, Toast, View } from 'native-base';
import {
Column,
Text,
Button,
Box,
Flex,
Center,
Heading,
Popover,
Toast,
View,
} from 'native-base';
import TextButton from '../../components/TextButton';
import { LoadingView } from '../../components/Loading';
import ElementList from '../../components/GtkUI/ElementList';
@@ -11,7 +22,16 @@ import { useQuery } from '../../Queries';
import UserAvatar from '../../components/UserAvatar';
import * as ImagePicker from 'expo-image-picker';
import SettingBase from '../../components/UI/SettingsBase';
import { ArrowDown2, EyeSlash, Google, Lock1, PasswordCheck, Sms, SmsEdit, UserSquare } from 'iconsax-react-native';
import {
ArrowDown2,
EyeSlash,
Google,
Lock1,
PasswordCheck,
Sms,
SmsEdit,
UserSquare,
} from 'iconsax-react-native';
import { LinearGradient } from 'expo-linear-gradient';
import TextFormField from '../../components/UI/TextFormField';
import ButtonBase from '../../components/UI/ButtonBase';
@@ -54,19 +74,19 @@ const ProfileSettings = () => {
}}
elements={[
{
icon: <Google size="24" color="#FFF" style={{minWidth: 24}}/>,
icon: <Google size="24" color="#FFF" style={{ minWidth: 24 }} />,
type: 'text',
title: "Google account", // TODO translate
description: "Liez votre compte Google à ChromaCase", // TODO translate
title: 'Google account', // TODO translate
description: 'Liez votre compte Google à ChromaCase', // TODO translate
data: {
text: user.googleID ? 'Linked' : 'Not linked',
},
},
{
icon: <UserSquare size="24" color="#FFF" style={{minWidth: 24}}/>,
icon: <UserSquare size="24" color="#FFF" style={{ minWidth: 24 }} />,
type: 'text',
title: translate('avatar'),
description: "Changer votre photo de profile", // TODO translate
description: 'Changer votre photo de profile', // TODO translate
data: {
text: translate('changeIt'),
onPress: () => {
@@ -97,10 +117,11 @@ const ProfileSettings = () => {
},
},
{
icon: <SmsEdit size="24" color="#FFF" style={{minWidth: 24}}/>,
icon: <SmsEdit size="24" color="#FFF" style={{ minWidth: 24 }} />,
type: 'sectionDropdown',
title: 'Change email', // TODO translate
description: "Saisissez votre adresse électronique actuelle et définissez votre nouvelle adresse électroniquetion", // TODO translate
title: 'Change email', // TODO translate
description:
'Saisissez votre adresse électronique actuelle et définissez votre nouvelle adresse électroniquetion', // TODO translate
data: {
value: true,
section: [
@@ -108,25 +129,24 @@ const ProfileSettings = () => {
onSubmit={(oldPassword, newPassword) =>
handleChangePassword(oldPassword, newPassword)
}
/>
]
}
/>,
],
},
},
{
icon: <PasswordCheck size="24" color="#FFF" style={{minWidth: 24}}/>,
icon: <PasswordCheck size="24" color="#FFF" style={{ minWidth: 24 }} />,
type: 'sectionDropdown',
title: 'Change password', // TODO translate
description: "Saisissez votre mot de passe actuel et définissez votre nouveau mot de passe", // TODO translate
description:
'Saisissez votre mot de passe actuel et définissez votre nouveau mot de passe', // TODO translate
data: {
value: true,
section: [
<ChangeEmailForm
onSubmit={(oldEmail, newEmail) =>
handleChangeEmail(newEmail)
}
/>
]
}
onSubmit={(oldEmail, newEmail) => handleChangeEmail(newEmail)}
/>,
],
},
},
]}
/>
front/views/settings/SettingsView.tsx
+130 -41
View File
@@ -13,9 +13,33 @@ import GuestToUserView from './GuestToUserView';
import { useQuery } from '../../Queries';
import API from '../../API';
import { RouteProps } from '../../Navigation';
import { PressableAndroidRippleConfig, StyleProp, TextStyle, View, ViewStyle, useWindowDimensions } from 'react-native';
import { TabView, SceneMap, TabBar, NavigationState, Route, SceneRendererProps, TabBarIndicatorProps, TabBarItemProps } from 'react-native-tab-view';
import { HeartEdit, Star1, UserEdit, Notification, SecurityUser, Music, FolderCross } from 'iconsax-react-native';
import {
PressableAndroidRippleConfig,
StyleProp,
TextStyle,
View,
ViewStyle,
useWindowDimensions,
} from 'react-native';
import {
TabView,
SceneMap,
TabBar,
NavigationState,
Route,
SceneRendererProps,
TabBarIndicatorProps,
TabBarItemProps,
} from 'react-native-tab-view';
import {
HeartEdit,
Star1,
UserEdit,
Notification,
SecurityUser,
Music,
FolderCross,
} from 'iconsax-react-native';
import { Scene, Event } from 'react-native-tab-view/lib/typescript/src/types';
import { LinearGradient } from 'expo-linear-gradient';
import PremiumSettings from './SettingsPremiumView';
@@ -38,7 +62,7 @@ const renderScene = SceneMap({
});
const getTabData = (key: string) => {
switch (key){
switch (key) {
case 'profile':
return { index: 0, icon: UserEdit };
case 'premium':
@@ -54,60 +78,125 @@ const getTabData = (key: string) => {
default:
return { index: 6, icon: FolderCross };
}
}
};
const SetttingsNavigator = () => {
const layout = useWindowDimensions();
const [index, setIndex] = React.useState(0);
const [routes] = React.useState<Route[]>([
{key: 'profile', title: 'Profile'},
{key: 'premium', title: 'Premium'},
{key: 'preferences', title: 'Preferences'},
{key: 'notifications', title: 'Notifications'},
{key: 'privacy', title: 'Privacy'},
{key: 'piano', title: 'Piano'},
{ key: 'profile', title: 'Profile' },
{ key: 'premium', title: 'Premium' },
{ key: 'preferences', title: 'Preferences' },
{ key: 'notifications', title: 'Notifications' },
{ key: 'privacy', title: 'Privacy' },
{ key: 'piano', title: 'Piano' },
]);
const renderTabBar = (props: JSX.IntrinsicAttributes & SceneRendererProps & { navigationState: NavigationState<Route>; scrollEnabled?: boolean | undefined; bounces?: boolean | undefined; activeColor?: string | undefined; inactiveColor?: string | undefined; pressColor?: string | undefined; pressOpacity?: number | undefined; getLabelText?: ((scene: Scene<Route>) => string | undefined) | undefined; getAccessible?: ((scene: Scene<Route>) => boolean | undefined) | undefined; getAccessibilityLabel?: ((scene: Scene<Route>) => string | undefined) | undefined; getTestID?: ((scene: Scene<Route>) => string | undefined) | undefined; renderLabel?: ((scene: Scene<Route> & { focused: boolean; color: string; }) => React.ReactNode) | undefined; renderIcon?: ((scene: Scene<Route> & { focused: boolean; color: string; }) => React.ReactNode) | undefined; renderBadge?: ((scene: Scene<Route>) => React.ReactNode) | undefined; renderIndicator?: ((props: TabBarIndicatorProps<Route>) => React.ReactNode) | undefined; renderTabBarItem?: ((props: TabBarItemProps<Route> & { key: string; }) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) | undefined; onTabPress?: ((scene: Scene<Route> & Event) => void) | undefined; onTabLongPress?: ((scene: Scene<Route>) => void) | undefined; tabStyle?: StyleProp<ViewStyle>; indicatorStyle?: StyleProp<ViewStyle>; indicatorContainerStyle?: StyleProp<ViewStyle>; labelStyle?: StyleProp<TextStyle>; contentContainerStyle?: StyleProp<ViewStyle>; style?: StyleProp<ViewStyle>; gap?: number | undefined; testID?: string | undefined; android_ripple?: PressableAndroidRippleConfig | undefined; }) => (
const renderTabBar = (
props: JSX.IntrinsicAttributes &
SceneRendererProps & {
navigationState: NavigationState<Route>;
scrollEnabled?: boolean | undefined;
bounces?: boolean | undefined;
activeColor?: string | undefined;
inactiveColor?: string | undefined;
pressColor?: string | undefined;
pressOpacity?: number | undefined;
getLabelText?: ((scene: Scene<Route>) => string | undefined) | undefined;
getAccessible?: ((scene: Scene<Route>) => boolean | undefined) | undefined;
getAccessibilityLabel?: ((scene: Scene<Route>) => string | undefined) | undefined;
getTestID?: ((scene: Scene<Route>) => string | undefined) | undefined;
renderLabel?:
| ((
scene: Scene<Route> & { focused: boolean; color: string }
) => React.ReactNode)
| undefined;
renderIcon?:
| ((
scene: Scene<Route> & { focused: boolean; color: string }
) => React.ReactNode)
| undefined;
renderBadge?: ((scene: Scene<Route>) => React.ReactNode) | undefined;
renderIndicator?:
| ((props: TabBarIndicatorProps<Route>) => React.ReactNode)
| undefined;
renderTabBarItem?:
| ((
props: TabBarItemProps<Route> & { key: string }
) => React.ReactElement<any, string | React.JSXElementConstructor<any>>)
| undefined;
onTabPress?: ((scene: Scene<Route> & Event) => void) | undefined;
onTabLongPress?: ((scene: Scene<Route>) => void) | undefined;
tabStyle?: StyleProp<ViewStyle>;
indicatorStyle?: StyleProp<ViewStyle>;
indicatorContainerStyle?: StyleProp<ViewStyle>;
labelStyle?: StyleProp<TextStyle>;
contentContainerStyle?: StyleProp<ViewStyle>;
style?: StyleProp<ViewStyle>;
gap?: number | undefined;
testID?: string | undefined;
android_ripple?: PressableAndroidRippleConfig | undefined;
}
) => (
<TabBar
{...props}
style={{backgroundColor: 'rgba(0, 0, 0, 0)', borderBottomWidth: 2, borderColor: 'rgba(255,255,255,0.5)'}}
indicatorStyle={{ backgroundColor: 'white' }}
renderIcon={(scene: Scene<Route> & {
focused: boolean;
color: string;
}) => {
const tabHeader = getTabData(scene.route!.key);
return tabHeader.index == index ?
<tabHeader.icon size="18" color="#6075F9" variant='Bold'/>
: <tabHeader.icon size="18" color="#6075F9"/>
{...props}
style={{
backgroundColor: 'rgba(0, 0, 0, 0)',
borderBottomWidth: 2,
borderColor: 'rgba(255,255,255,0.5)',
}}
renderLabel={({ route, focused, color }) => (
layout.width > 750 ?
<Text style={{color, paddingLeft: 10, overflow: 'hidden'}}>
{route.title}
</Text> : null
)}
tabStyle={{flexDirection: 'row'}}
/>
);
indicatorStyle={{ backgroundColor: 'white' }}
renderIcon={(
scene: Scene<Route> & {
focused: boolean;
color: string;
}
) => {
const tabHeader = getTabData(scene.route!.key);
return tabHeader.index == index ? (
<tabHeader.icon size="18" color="#6075F9" variant="Bold" />
) : (
<tabHeader.icon size="18" color="#6075F9" />
);
}}
renderLabel={({ route, focused, color }) =>
layout.width > 750 ? (
<Text style={{ color, paddingLeft: 10, overflow: 'hidden' }}>
{route.title}
</Text>
) : null
}
tabStyle={{ flexDirection: 'row' }}
/>
);
return (
<View>
<TabView
style={{minHeight: layout.height, height: '100%', paddingBottom: 32}}
renderTabBar={renderTabBar}
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={{ width: layout.width }}
style={{ minHeight: layout.height, height: '100%', paddingBottom: 32 }}
renderTabBar={renderTabBar}
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={{ width: layout.width }}
/>
<LinearGradient
start={{x: 0, y: 0}}
end={{x: 1, y: 1}}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }}
colors={['#101014', '#6075F9']}
style={{top: 0, bottom: 0, right: 0, left: 0, width: '100%', height: '100%', margin: 0, padding: 0, position: 'absolute', zIndex: -2}}
style={{
top: 0,
bottom: 0,
right: 0,
left: 0,
width: '100%',
height: '100%',
margin: 0,
padding: 0,
position: 'absolute',
zIndex: -2,
}}
/>
</View>
);