From 4e2692511353d15911d35951dc4f21774fcb9add Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=A9ment=20Le=20Bihan?= Date: Wed, 5 Apr 2023 00:37:45 +0200 Subject: [PATCH] moved and reformat with tab SettingsView and updated view s with amaury's forms --- front/API.ts | 3 +- front/Navigation.tsx | 2 +- front/views/SettingsView.tsx | 290 ----------------------- front/views/settings/SettingsView.tsx | 324 +++++++++++++++++++------- 4 files changed, 248 insertions(+), 371 deletions(-) delete mode 100644 front/views/SettingsView.tsx diff --git a/front/API.ts b/front/API.ts index 2c59a5f..91854de 100644 --- a/front/API.ts +++ b/front/API.ts @@ -419,12 +419,11 @@ export default class API { ]; } - public static async updateUserEmail(oldEmail: string, newEmail: string): Promise { + public static async updateUserEmail(newEmail: string): Promise { const rep = await API.fetch({ route: "/auth/me", method: "PUT", body: { - oldEmail: oldEmail, email: newEmail, }, }); diff --git a/front/Navigation.tsx b/front/Navigation.tsx index 71efac4..91d7be7 100644 --- a/front/Navigation.tsx +++ b/front/Navigation.tsx @@ -7,7 +7,7 @@ import SongLobbyView from './views/SongLobbyView'; import AuthenticationView from './views/AuthenticationView'; import HomeView from './views/HomeView'; import SearchView from './views/SearchView'; -import SetttingsNavigator from './views/SettingsView'; +import SetttingsNavigator from './views/settings/SettingsView'; import { useQuery } from 'react-query'; import API from './API'; import PlayView from './views/PlayView'; diff --git a/front/views/SettingsView.tsx b/front/views/SettingsView.tsx deleted file mode 100644 index 26c7b19..0000000 --- a/front/views/SettingsView.tsx +++ /dev/null @@ -1,290 +0,0 @@ -import React from 'react'; -import { View } from 'react-native'; -import { Center, Button, Text, Switch, Slider, Select, Heading, Box } from "native-base"; -import { createNativeStackNavigator } from '@react-navigation/native-stack'; -import { unsetAccessToken } from '../state/UserSlice'; -import { useDispatch } from "react-redux"; -import { RootState, useSelector } from '../state/Store'; -import { useLanguage } from "../state/LanguageSlice"; -import { SettingsState, updateSettings } from '../state/SettingsSlice'; -import { AvailableLanguages, translate, Translate } from "../i18n/i18n"; -import TextButton from '../components/TextButton'; -import createTabRowNavigator from '../components/navigators/TabRowNavigator'; -import { FontAwesome } from '@expo/vector-icons'; - -import API from '../API'; - - -const SettingsStack = createNativeStackNavigator(); - -const handleChangeEmail = async (newEmail: string): Promise => { - try { - let response = await API.updateUserCredentials("email", newEmail); - return response as string; - } catch (error) { - return ("error: " + error); - } -} - -const handleChangePassword = async (oldPassword: string, newPassword: string): Promise => { - try { - let response = await API.updateUserCredentials("password", newPassword); - return response as string; - } catch (error) { - return ("error: " + error); - } -} - -const MainView = ({navigation}) => { - const dispatch = useDispatch(); - - return ( -
- - - - - - - - - - - - - -
- ) -} - -export const PreferencesView = ({navigation}) => { - const dispatch = useDispatch(); - const language: AvailableLanguages = useSelector((state: RootState) => state.language.value); - const settings = useSelector((state: RootState) => (state.settings.settings as SettingsState)); - return ( -
- - - - navigation.navigate('Main')} style={{ margin: 10 }} - translate={{ translationKey: 'backBtn' }} - /> - - - - - - - - - - - - - - Color blind mode - { dispatch(updateSettings({ colorBlind: enabled })) }} - /> - - - - Mic volume - { dispatch(updateSettings({ micLevel: value })) }} - > - - - - - - - - - - -
- ) -} - -const NotificationsView = ({navigation}) => { - const dispatch = useDispatch(); - const settings: SettingsState = useSelector((state: RootState) => state.settings); - return ( -
- - - - - navigation.navigate('Main')} translate = {{ - translationKey: 'backBtn' - }} /> - - Push notifications - { dispatch(updateSettings({ enablePushNotifications: value })) }} - /> - - - Email notifications - { dispatch(updateSettings({ enableMailNotifications: value })) }} - /> - - - Training reminder - { dispatch(updateSettings({ enableLessongsReminders: value })) }} - /> - - - New songs - { dispatch(updateSettings({ enableReleaseAlerts: value })) }} - /> - -
- ) -} - -export const PrivacyView = ({navigation}) => { - return ( -
- - - - - - - - Data Collection - - - - - Custom Adds - - - - - Recommendations - - -
- ) -} - -export const ChangePasswordView = ({navigation}) => { - return ( -
- - ChangePassword -
- ) -} - -export const ChangeEmailView = ({navigation}) => { - return ( -
- -
- ) -} - -export const GoogleAccountView = ({navigation}) => { - return ( -
- - GoogleAccount -
- ) -} - -const TabRow = createTabRowNavigator(); - -const SetttingsNavigator = () => { - return ( - - {/* I'm doing this to be able to land on the summary of settings when clicking on settings and directly to the - wanted settings page if needed so I need to do special work with the 0 index */} - - - - - - - - - - - - - - - - - - - - - - - - ) -} - -export default SetttingsNavigator; \ No newline at end of file diff --git a/front/views/settings/SettingsView.tsx b/front/views/settings/SettingsView.tsx index f75957b..42cd4bf 100644 --- a/front/views/settings/SettingsView.tsx +++ b/front/views/settings/SettingsView.tsx @@ -1,113 +1,281 @@ import React from 'react'; -import { Center, Button, Text, Heading } from "native-base"; +import { View } from 'react-native'; +import { Center, Button, Text, Switch, Slider, Select, Heading, Box } from "native-base"; import { createNativeStackNavigator } from '@react-navigation/native-stack'; -import { unsetUserToken } from '../../state/UserSlice'; +import { unsetAccessToken } from '../../state/UserSlice'; import { useDispatch } from "react-redux"; -import { translate } from "../../i18n/i18n"; -import API from '../../API'; -import PreferencesView from './PreferencesView'; -import NotificationsView from './NotificationView'; -import PrivacyView from './PrivacyView'; +import { RootState, useSelector } from '../../state/Store'; +import { useLanguage } from "../../state/LanguageSlice"; +import { SettingsState, updateSettings } from '../../state/SettingsSlice'; +import { AvailableLanguages, translate, Translate } from "../../i18n/i18n"; +import TextButton from '../../components/TextButton'; +import createTabRowNavigator from '../../components/navigators/TabRowNavigator'; +import { FontAwesome } from '@expo/vector-icons'; import ChangePasswordForm from '../../components/forms/changePasswordForm'; import ChangeEmailForm from '../../components/forms/changeEmailForm'; +import API, { APIError } from '../../API'; + + const SettingsStack = createNativeStackNavigator(); -const handleChangeEmail = async (oldEmail: string, newEmail: string): Promise => { - try { - let response = await API.updateUserEmail(oldEmail, newEmail); - return response.email; - } catch (error) { - return ("error: " + error); - } +const handleChangeEmail = async (newEmail: string): Promise => { + try { + let response = await API.updateUserEmail(newEmail); + return translate('emailChanged'); + } catch (e) { + throw e; + } } const handleChangePassword = async (oldPassword: string, newPassword: string): Promise => { - try { - let response = await API.updateUserPassword(oldPassword, newPassword); - return response.email; - } catch (error) { - return ("error: " + error); - } + try { + let response = await API.updateUserPassword(oldPassword, newPassword); + return translate('passwordChanged'); + } catch (e) { + throw e; + } } const MainView = ({navigation}) => { - const dispatch = useDispatch(); + const dispatch = useDispatch(); - return ( -
- + return ( +
+ - + - + - + - + - + - -
- ) + +
+ ) } -const ChangePasswordView = ({navigation}) => { - return ( -
- {translate('changePassword')} - handleChangePassword(oldPassword, newPassword)}/> - -
- ) +export const PreferencesView = ({navigation}) => { + const dispatch = useDispatch(); + const language: AvailableLanguages = useSelector((state: RootState) => state.language.value); + const settings = useSelector((state: RootState) => (state.settings.settings as SettingsState)); + return ( +
+ + + + + + + + + + + + + + + + + Color blind mode + { dispatch(updateSettings({ colorBlind: enabled })) }} + /> + + + + Mic volume + { dispatch(updateSettings({ micLevel: value })) }} + > + + + + + + + + + + +
+ ) } -const ChangeEmailView = ({navigation}) => { - return ( -
+const NotificationsView = ({navigation}) => { + const dispatch = useDispatch(); + const settings: SettingsState = useSelector((state: RootState) => state.settings); + return ( +
+ + + + + + Push notifications + { dispatch(updateSettings({ enablePushNotifications: value })) }} + /> + + + Email notifications + { dispatch(updateSettings({ enableMailNotifications: value })) }} + /> + + + Training reminder + { dispatch(updateSettings({ enableLessongsReminders: value })) }} + /> + + + New songs + { dispatch(updateSettings({ enableReleaseAlerts: value })) }} + /> + +
+ ) +} + +export const PrivacyView = ({navigation}) => { + return ( +
+ + + + + + Data Collection + + + + + Custom Adds + + + + + Recommendations + + +
+ ) +} + +export const ChangePasswordView = ({navigation}) => { + return ( +
+ {translate('changePassword')} + handleChangePassword(oldPassword, newPassword)}/> +
+ ) +} + +export const ChangeEmailView = ({navigation}) => { + return ( +
{translate('changeEmail')} - handleChangeEmail(oldEmail, newEmail)}/> - + handleChangeEmail(newEmail)}/>
- ) + ) } -const GoogleAccountView = ({navigation}) => { - return ( -
- - GoogleAccount -
- ) +export const GoogleAccountView = ({navigation}) => { + return ( +
+ GoogleAccount +
+ ) } +const TabRow = createTabRowNavigator(); + const SetttingsNavigator = () => { - return ( - - - - - - - - - - ) + return ( + + {/* I'm doing this to be able to land on the summary of settings when clicking on settings and directly to the + wanted settings page if needed so I need to do special work with the 0 index */} + + + + + + + + + + + + + + + + + + + + + + + + ) } export default SetttingsNavigator; \ No newline at end of file