From c4ca2e509e07a46bbdf71d8516651e5974b05320 Mon Sep 17 00:00:00 2001 From: mathysPaul Date: Tue, 19 Sep 2023 18:23:31 +0200 Subject: [PATCH] Fixing redesign-settings prettier & lint => CI --- front/API.ts | 1 - front/App.tsx | 5 +- front/components/GtkUI/Element.tsx | 7 +- front/components/GtkUI/ElementList.tsx | 6 -- front/components/GtkUI/ElementTypes.tsx | 2 +- front/components/GtkUI/RawElement.tsx | 15 +--- front/components/UI/ButtonBase.tsx | 6 +- front/components/UI/InteractiveBase.tsx | 4 +- front/components/UI/SettingsBase.tsx | 10 +-- front/components/UI/TextFieldBase.tsx | 2 +- front/components/forms/changeEmailForm.tsx | 11 +-- front/components/forms/changePasswordForm.tsx | 11 +-- front/views/settings/NotificationView.tsx | 4 +- front/views/settings/PreferencesView.tsx | 15 +--- front/views/settings/PrivacyView.tsx | 4 +- front/views/settings/SettingsPremiumView.tsx | 20 +---- front/views/settings/SettingsProfileView.tsx | 35 +-------- front/views/settings/SettingsView.tsx | 73 ++----------------- 18 files changed, 35 insertions(+), 196 deletions(-) diff --git a/front/API.ts b/front/API.ts index 4d72ce5..37184d3 100644 --- a/front/API.ts +++ b/front/API.ts @@ -7,7 +7,6 @@ import LessonHistory from './models/LessonHistory'; import Song, { SongHandler } from './models/Song'; import { SongHistoryHandler, SongHistoryItem, SongHistoryItemHandler } from './models/SongHistory'; import User, { UserHandler } from './models/User'; -import Constants from 'expo-constants'; import store from './state/Store'; import { Platform } from 'react-native'; import { en } from './i18n/Translations'; diff --git a/front/App.tsx b/front/App.tsx index 8ceb4fb..6bee3ff 100644 --- a/front/App.tsx +++ b/front/App.tsx @@ -17,10 +17,7 @@ const queryClient = new QueryClient(QueryRules); export default function App() { SplashScreen.preventAutoHideAsync(); setTimeout(SplashScreen.hideAsync, 500); - - const [fontsLoaded] = useFonts({ - Lexend: require('./assets/fonts/Lexend-VariableFont_wght.ttf'), - }); + useFonts({ Lexend: require('./assets/fonts/Lexend-VariableFont_wght.ttf') }); return ( diff --git a/front/components/GtkUI/Element.tsx b/front/components/GtkUI/Element.tsx index 5c336af..3931438 100644 --- a/front/components/GtkUI/Element.tsx +++ b/front/components/GtkUI/Element.tsx @@ -1,13 +1,12 @@ -import React, { useRef, useState } from 'react'; +import React, { useState } from 'react'; import { ElementProps } from './ElementTypes'; import { RawElement } from './RawElement'; -import { Pressable, IPressableProps, View, Text, Wrap, Column } from 'native-base'; -import { Animated, StyleSheet } from 'react-native'; +import { View, Column } from 'native-base'; +import { StyleSheet } from 'react-native'; import InteractiveBase from '../UI/InteractiveBase'; export const Element = (props: T) => { let actionFunction: (() => void) | null | undefined = null; - const dropdownAnimator = useRef(new Animated.Value(1)).current; const [dropdownValue, setDropdownValue] = useState(false); switch (props.type) { diff --git a/front/components/GtkUI/ElementList.tsx b/front/components/GtkUI/ElementList.tsx index d96d466..b651d7f 100644 --- a/front/components/GtkUI/ElementList.tsx +++ b/front/components/GtkUI/ElementList.tsx @@ -1,12 +1,8 @@ import React from 'react'; import { StyleProp, ViewStyle } from 'react-native'; import { Element } from './Element'; -import useColorScheme from '../../hooks/colorScheme'; import { ElementProps } from './ElementTypes'; - import { Box, Column, Divider } from 'native-base'; -import InteractiveBase from '../UI/InteractiveBase'; -import { StyleSheet } from 'react-native'; type ElementListProps = { elements: ElementProps[]; @@ -14,8 +10,6 @@ type ElementListProps = { }; const ElementList = ({ elements, style }: ElementListProps) => { - const colorScheme = useColorScheme(); - // const isDark = colorScheme === 'dark'; const elementStyle = { borderRadius: 10, shadowOpacity: 0.3, diff --git a/front/components/GtkUI/ElementTypes.tsx b/front/components/GtkUI/ElementTypes.tsx index f936417..7ed5e74 100644 --- a/front/components/GtkUI/ElementTypes.tsx +++ b/front/components/GtkUI/ElementTypes.tsx @@ -1,4 +1,4 @@ -import { Select, Switch, Text, Icon, Row, Slider, Box } from 'native-base'; +import { Select, Switch, Text, Icon, Row, Slider } from 'native-base'; import { MaterialIcons } from '@expo/vector-icons'; import { useWindowDimensions } from 'react-native'; diff --git a/front/components/GtkUI/RawElement.tsx b/front/components/GtkUI/RawElement.tsx index 938618a..8dc43cf 100644 --- a/front/components/GtkUI/RawElement.tsx +++ b/front/components/GtkUI/RawElement.tsx @@ -1,16 +1,5 @@ import React from 'react'; -import { - Box, - Button, - Column, - Icon, - Popover, - Row, - Text, - Wrap, - useBreakpointValue, -} from 'native-base'; -import useColorScheme from '../../hooks/colorScheme'; +import { Box, Button, Column, Icon, Popover, Row, Text, useBreakpointValue } from 'native-base'; import { Ionicons } from '@expo/vector-icons'; import { ElementProps } from './ElementTypes'; import { @@ -27,8 +16,6 @@ type RawElementProps = { export const RawElement = ({ element }: RawElementProps) => { const { title, icon, type, helperText, description, disabled, data } = element; - const colorScheme = useColorScheme(); - const isDark = colorScheme === 'dark'; const screenSize = useBreakpointValue({ base: 'small', md: 'big' }); const isSmallScreen = screenSize === 'small'; return ( diff --git a/front/components/UI/ButtonBase.tsx b/front/components/UI/ButtonBase.tsx index bf06cae..d67757e 100644 --- a/front/components/UI/ButtonBase.tsx +++ b/front/components/UI/ButtonBase.tsx @@ -1,18 +1,15 @@ import React, { useState } from 'react'; import { StyleSheet, ActivityIndicator, View, Image, StyleProp, ViewStyle } from 'react-native'; -import Ionicons from '@expo/vector-icons/Ionicons'; import InteractiveBase from './InteractiveBase'; import { Text, useTheme } from 'native-base'; -// import { BlurView } from 'expo-blur'; interface ButtonProps { title?: string; style?: StyleProp; - onPress?: () => Promise; + onPress?: () => Promise; isDisabled?: boolean; icon?: (size: string, color: string) => React.ReactNode; iconImage?: string; - isCollapsed?: boolean; type: 'filled' | 'outlined' | 'menu'; } @@ -23,7 +20,6 @@ const ButtonBase: React.FC = ({ isDisabled, icon, iconImage, - isCollapsed, type = 'filled', }) => { const { colors } = useTheme(); diff --git a/front/components/UI/InteractiveBase.tsx b/front/components/UI/InteractiveBase.tsx index 0f12b4b..f38823b 100644 --- a/front/components/UI/InteractiveBase.tsx +++ b/front/components/UI/InteractiveBase.tsx @@ -4,7 +4,7 @@ import { Animated, StyleSheet, StyleProp, ViewStyle } from 'react-native'; interface InteractiveBaseProps { children?: React.ReactNode; - onPress?: () => Promise; + onPress?: () => Promise; isDisabled?: boolean; isOutlined?: boolean; style?: StyleProp; @@ -229,7 +229,7 @@ const InteractiveBase: React.FC = ({ shadowOpacity: shadowOpacityValue, shadowRadius: shadowRadiusValue, elevation: elevationValue, - }, + }, ]} > React.ReactNode; title: string; description?: string; - onPress?: () => Promise; + onPress?: () => Promise; children?: React.ReactNode; } diff --git a/front/components/UI/TextFieldBase.tsx b/front/components/UI/TextFieldBase.tsx index f330833..345c2b2 100644 --- a/front/components/UI/TextFieldBase.tsx +++ b/front/components/UI/TextFieldBase.tsx @@ -1,5 +1,5 @@ import { Eye, EyeSlash } from 'iconsax-react-native'; -import React, { useState, useEffect } from 'react'; +import React, { useState } from 'react'; import { View, TouchableOpacity, StyleSheet, StyleProp, ViewStyle } from 'react-native'; import InteractiveBase from './InteractiveBase'; import { Input } from 'native-base'; diff --git a/front/components/forms/changeEmailForm.tsx b/front/components/forms/changeEmailForm.tsx index 8b4768c..23650ec 100644 --- a/front/components/forms/changeEmailForm.tsx +++ b/front/components/forms/changeEmailForm.tsx @@ -1,16 +1,7 @@ import React from 'react'; import { translate } from '../../i18n/i18n'; import { string } from 'yup'; -import { - FormControl, - Input, - Stack, - WarningOutlineIcon, - Box, - Button, - useToast, - Flex, -} from 'native-base'; +import { useToast, Flex } from 'native-base'; import TextFormField from '../UI/TextFormField'; import ButtonBase from '../UI/ButtonBase'; import { Sms } from 'iconsax-react-native'; diff --git a/front/components/forms/changePasswordForm.tsx b/front/components/forms/changePasswordForm.tsx index c51e589..d2428ad 100644 --- a/front/components/forms/changePasswordForm.tsx +++ b/front/components/forms/changePasswordForm.tsx @@ -1,16 +1,7 @@ import React from 'react'; import { translate } from '../../i18n/i18n'; import { string } from 'yup'; -import { - FormControl, - Input, - Stack, - WarningOutlineIcon, - Box, - Button, - useToast, - Flex, -} from 'native-base'; +import { useToast, Flex } from 'native-base'; import TextFormField from '../UI/TextFormField'; import { Lock1 } from 'iconsax-react-native'; import ButtonBase from '../UI/ButtonBase'; diff --git a/front/views/settings/NotificationView.tsx b/front/views/settings/NotificationView.tsx index faf0ace..508b95b 100644 --- a/front/views/settings/NotificationView.tsx +++ b/front/views/settings/NotificationView.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { Center, Flex, Heading } from 'native-base'; -import { translate, Translate } from '../../i18n/i18n'; +import { Flex } from 'native-base'; +import { translate } from '../../i18n/i18n'; import ElementList from '../../components/GtkUI/ElementList'; import useUserSettings from '../../hooks/userSettings'; import { LoadingView } from '../../components/Loading'; diff --git a/front/views/settings/PreferencesView.tsx b/front/views/settings/PreferencesView.tsx index 6f30723..f2b2abc 100644 --- a/front/views/settings/PreferencesView.tsx +++ b/front/views/settings/PreferencesView.tsx @@ -1,22 +1,13 @@ import React from 'react'; import { useDispatch } from 'react-redux'; -import { Center, Flex, Heading } from 'native-base'; +import { Flex } from 'native-base'; import { useLanguage } from '../../state/LanguageSlice'; -import { AvailableLanguages, DefaultLanguage, translate, Translate } from '../../i18n/i18n'; +import { AvailableLanguages, DefaultLanguage, translate } from '../../i18n/i18n'; 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 { Brush2, Colorfilter, LanguageSquare, Rank, Sound } from 'iconsax-react-native'; const PreferencesView = () => { const dispatch = useDispatch(); diff --git a/front/views/settings/PrivacyView.tsx b/front/views/settings/PrivacyView.tsx index df2599b..5a6c89d 100644 --- a/front/views/settings/PrivacyView.tsx +++ b/front/views/settings/PrivacyView.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Center, Flex, Heading } from 'native-base'; +import { Flex } from 'native-base'; import { translate } from '../../i18n/i18n'; import ElementList from '../../components/GtkUI/ElementList'; import { useDispatch } from 'react-redux'; @@ -7,7 +7,7 @@ import { RootState, useSelector } from '../../state/Store'; import { updateSettings } from '../../state/SettingsSlice'; import useUserSettings from '../../hooks/userSettings'; import { LoadingView } from '../../components/Loading'; -import { Driver, Driver2, Like1, Shop } from 'iconsax-react-native'; +import { Driver, Like1, Shop } from 'iconsax-react-native'; const PrivacyView = () => { const dispatch = useDispatch(); diff --git a/front/views/settings/SettingsPremiumView.tsx b/front/views/settings/SettingsPremiumView.tsx index 9487b74..915fce4 100644 --- a/front/views/settings/SettingsPremiumView.tsx +++ b/front/views/settings/SettingsPremiumView.tsx @@ -1,32 +1,16 @@ 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 } from 'native-base'; -import TextButton from '../../components/TextButton'; +import { Flex } from 'native-base'; import { LoadingView } from '../../components/Loading'; import ElementList from '../../components/GtkUI/ElementList'; import { translate } from '../../i18n/i18n'; 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 { LinearGradient } from 'expo-linear-gradient'; +import { Designtools, Magicpen, Star1 } from 'iconsax-react-native'; // Too painful to infer the settings-only, typed navigator. Gave up // eslint-disable-next-line @typescript-eslint/no-explicit-any const PremiumSettings = () => { const userQuery = useQuery(API.getUserInfo); - const dispatch = useDispatch(); if (!userQuery.data || userQuery.isLoading) { return ; diff --git a/front/views/settings/SettingsProfileView.tsx b/front/views/settings/SettingsProfileView.tsx index 64d2ecb..45b2517 100644 --- a/front/views/settings/SettingsProfileView.tsx +++ b/front/views/settings/SettingsProfileView.tsx @@ -1,40 +1,12 @@ 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 TextButton from '../../components/TextButton'; +import { Flex, Toast } from 'native-base'; import { LoadingView } from '../../components/Loading'; import ElementList from '../../components/GtkUI/ElementList'; import { translate } from '../../i18n/i18n'; 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 { LinearGradient } from 'expo-linear-gradient'; -import TextFormField from '../../components/UI/TextFormField'; -import ButtonBase from '../../components/UI/ButtonBase'; +import { Google, PasswordCheck, SmsEdit, UserSquare } from 'iconsax-react-native'; import ChangeEmailForm from '../../components/forms/changeEmailForm'; import ChangePasswordForm from '../../components/forms/changePasswordForm'; @@ -52,7 +24,6 @@ const handleChangePassword = async (oldPassword: string, newPassword: string): P // eslint-disable-next-line @typescript-eslint/no-explicit-any const ProfileSettings = () => { const userQuery = useQuery(API.getUserInfo); - const dispatch = useDispatch(); if (!userQuery.data || userQuery.isLoading) { return ; @@ -126,6 +97,7 @@ const ProfileSettings = () => { value: true, section: [ handleChangePassword(oldPassword, newPassword) } @@ -143,6 +115,7 @@ const ProfileSettings = () => { value: true, section: [ handleChangeEmail(newEmail)} />, ], diff --git a/front/views/settings/SettingsView.tsx b/front/views/settings/SettingsView.tsx index bad81a1..1dc6b1b 100644 --- a/front/views/settings/SettingsView.tsx +++ b/front/views/settings/SettingsView.tsx @@ -1,26 +1,10 @@ -import React, { useMemo } from 'react'; -import { Center, Text, Heading, Box, Row } from 'native-base'; -import { translate } from '../../i18n/i18n'; -import createTabRowNavigator from '../../components/navigators/TabRowNavigator'; -import { MaterialCommunityIcons, FontAwesome5 } from '@expo/vector-icons'; -import ChangePasswordForm from '../../components/forms/changePasswordForm'; -import ChangeEmailForm from '../../components/forms/changeEmailForm'; +import React from 'react'; +import { Center, Text } from 'native-base'; import ProfileSettings from './SettingsProfileView'; import NotificationsView from './NotificationView'; import PrivacyView from './PrivacyView'; import PreferencesView from './PreferencesView'; -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 { View, useWindowDimensions } from 'react-native'; import { TabView, SceneMap, @@ -28,8 +12,6 @@ import { NavigationState, Route, SceneRendererProps, - TabBarIndicatorProps, - TabBarItemProps, } from 'react-native-tab-view'; import { HeartEdit, @@ -40,7 +22,7 @@ import { Music, FolderCross, } from 'iconsax-react-native'; -import { Scene, Event } from 'react-native-tab-view/lib/typescript/src/types'; +import { Scene } from 'react-native-tab-view/lib/typescript/src/types'; import { LinearGradient } from 'expo-linear-gradient'; import PremiumSettings from './SettingsPremiumView'; @@ -94,50 +76,7 @@ const SetttingsNavigator = () => { ]); const renderTabBar = ( - props: JSX.IntrinsicAttributes & - SceneRendererProps & { - navigationState: NavigationState; - scrollEnabled?: boolean | undefined; - bounces?: boolean | undefined; - activeColor?: string | undefined; - inactiveColor?: string | undefined; - pressColor?: string | undefined; - pressOpacity?: number | undefined; - getLabelText?: ((scene: Scene) => string | undefined) | undefined; - getAccessible?: ((scene: Scene) => boolean | undefined) | undefined; - getAccessibilityLabel?: ((scene: Scene) => string | undefined) | undefined; - getTestID?: ((scene: Scene) => string | undefined) | undefined; - renderLabel?: - | (( - scene: Scene & { focused: boolean; color: string } - ) => React.ReactNode) - | undefined; - renderIcon?: - | (( - scene: Scene & { focused: boolean; color: string } - ) => React.ReactNode) - | undefined; - renderBadge?: ((scene: Scene) => React.ReactNode) | undefined; - renderIndicator?: - | ((props: TabBarIndicatorProps) => React.ReactNode) - | undefined; - renderTabBarItem?: - | (( - props: TabBarItemProps & { key: string } - ) => React.ReactElement>) - | undefined; - onTabPress?: ((scene: Scene & Event) => void) | undefined; - onTabLongPress?: ((scene: Scene) => void) | undefined; - tabStyle?: StyleProp; - indicatorStyle?: StyleProp; - indicatorContainerStyle?: StyleProp; - labelStyle?: StyleProp; - contentContainerStyle?: StyleProp; - style?: StyleProp; - gap?: number | undefined; - testID?: string | undefined; - android_ripple?: PressableAndroidRippleConfig | undefined; - } + props: SceneRendererProps & { navigationState: NavigationState } ) => ( { ); }} - renderLabel={({ route, focused, color }) => + renderLabel={({ route, color }) => layout.width > 750 ? ( {route.title}