Fixing redesign-settings prettier & lint => CI

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';

front/App.tsx

@@ -17,10 +17,7 @@ const queryClient = new QueryClient(QueryRules);
 export default function App() {
 	SplashScreen.preventAutoHideAsync();
 	setTimeout(SplashScreen.hideAsync, 500);
-
+	useFonts({ Lexend: require('./assets/fonts/Lexend-VariableFont_wght.ttf') });
-	const [fontsLoaded] = useFonts({
-		Lexend: require('./assets/fonts/Lexend-VariableFont_wght.ttf'),
-	});
 
 	return (
 		<Provider store={store}>

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 { View, Column } from 'native-base';
-import { Animated, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
 import InteractiveBase from '../UI/InteractiveBase';
 
 export const Element = <T extends ElementProps>(props: T) => {
 	let actionFunction: (() => void) | null | undefined = null;
-	const dropdownAnimator = useRef(new Animated.Value(1)).current;
 	const [dropdownValue, setDropdownValue] = useState(false);
 
 	switch (props.type) {

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,

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';
 

front/components/GtkUI/RawElement.tsx

@@ -1,16 +1,5 @@
 import React from 'react';
-import {
+import { Box, Button, Column, Icon, Popover, Row, Text, useBreakpointValue } from 'native-base';
-	Box,
-	Button,
-	Column,
-	Icon,
-	Popover,
-	Row,
-	Text,
-	Wrap,
-	useBreakpointValue,
-} from 'native-base';
-import useColorScheme from '../../hooks/colorScheme';
 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 (

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<ViewStyle>;
-	onPress?: () => Promise<any>;
+	onPress?: () => Promise<void>;
 	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<ButtonProps> = ({
 	isDisabled,
 	icon,
 	iconImage,
-	isCollapsed,
 	type = 'filled',
 }) => {
 	const { colors } = useTheme();

front/components/UI/InteractiveBase.tsx

@@ -4,7 +4,7 @@ import { Animated, StyleSheet, StyleProp, ViewStyle } from 'react-native';
 
 interface InteractiveBaseProps {
 	children?: React.ReactNode;
-	onPress?: () => Promise<any>;
+	onPress?: () => Promise<void>;
 	isDisabled?: boolean;
 	isOutlined?: boolean;
 	style?: StyleProp<ViewStyle>;
@@ -229,7 +229,7 @@ const InteractiveBase: React.FC<InteractiveBaseProps> = ({
 							shadowOpacity: shadowOpacityValue,
 							shadowRadius: shadowRadiusValue,
 							elevation: elevationValue,
-					  },
+						},
 			]}
 		>
 			<Pressable

front/components/UI/SettingsBase.tsx

@@ -1,15 +1,13 @@
-import React, { useState } from 'react';
+import React from 'react';
-import { StyleSheet, ActivityIndicator, View, Image } from 'react-native';
+import { StyleSheet, View } from 'react-native';
-// import Ionicons from '@expo/vector-icons/Ionicons';
 import InteractiveBase from './InteractiveBase';
-import { Text, useTheme } from 'native-base';
+import { Text } from 'native-base';
-// import { BlurView } from 'expo-blur';
 
 interface SettingProps {
 	icon: (size: number, color: string) => React.ReactNode;
 	title: string;
 	description?: string;
-	onPress?: () => Promise<any>;
+	onPress?: () => Promise<void>;
 	children?: React.ReactNode;
 }
 

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';

front/components/forms/changeEmailForm.tsx

@@ -1,16 +1,7 @@
 import React from 'react';
 import { translate } from '../../i18n/i18n';
 import { string } from 'yup';
-import {
+import { useToast, Flex } from 'native-base';
-	FormControl,
-	Input,
-	Stack,
-	WarningOutlineIcon,
-	Box,
-	Button,
-	useToast,
-	Flex,
-} from 'native-base';
 import TextFormField from '../UI/TextFormField';
 import ButtonBase from '../UI/ButtonBase';
 import { Sms } from 'iconsax-react-native';

front/components/forms/changePasswordForm.tsx

@@ -1,16 +1,7 @@
 import React from 'react';
 import { translate } from '../../i18n/i18n';
 import { string } from 'yup';
-import {
+import { useToast, Flex } from 'native-base';
-	FormControl,
-	Input,
-	Stack,
-	WarningOutlineIcon,
-	Box,
-	Button,
-	useToast,
-	Flex,
-} from 'native-base';
 import TextFormField from '../UI/TextFormField';
 import { Lock1 } from 'iconsax-react-native';
 import ButtonBase from '../UI/ButtonBase';

front/views/settings/NotificationView.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Center, Flex, Heading } from 'native-base';
+import { Flex } from 'native-base';
-import { translate, Translate } from '../../i18n/i18n';
+import { translate } from '../../i18n/i18n';
 import ElementList from '../../components/GtkUI/ElementList';
 import useUserSettings from '../../hooks/userSettings';
 import { LoadingView } from '../../components/Loading';

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 {
+import { Brush2, Colorfilter, LanguageSquare, Rank, Sound } from 'iconsax-react-native';
-	Brush,
-	Brush2,
-	Colorfilter,
-	LanguageSquare,
-	Rank,
-	Ranking,
-	Sound,
-	Star1,
-} from 'iconsax-react-native';
 
 const PreferencesView = () => {
 	const dispatch = useDispatch();

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();

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 { Flex } from 'native-base';
-import TextButton from '../../components/TextButton';
 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 { Designtools, Magicpen, Star1 } from 'iconsax-react-native';
-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';
 
 // 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 <LoadingView />;

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 {
+import { Flex, Toast } from 'native-base';
-	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';
 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 { Google, PasswordCheck, 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';
 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 <LoadingView />;
@@ -126,6 +97,7 @@ const ProfileSettings = () => {
 							value: true,
 							section: [
 								<ChangePasswordForm
+									key={'ChangePasswordForm'}
 									onSubmit={(oldPassword, newPassword) =>
 										handleChangePassword(oldPassword, newPassword)
 									}
@@ -143,6 +115,7 @@ const ProfileSettings = () => {
 							value: true,
 							section: [
 								<ChangeEmailForm
+									key={'ChangeEmailForm'}
 									onSubmit={(oldEmail, newEmail) => handleChangeEmail(newEmail)}
 								/>,
 							],

front/views/settings/SettingsView.tsx

@@ -1,26 +1,10 @@
-import React, { useMemo } from 'react';
+import React from 'react';
-import { Center, Text, Heading, Box, Row } from 'native-base';
+import { Center, Text } 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 ProfileSettings from './SettingsProfileView';
 import NotificationsView from './NotificationView';
 import PrivacyView from './PrivacyView';
 import PreferencesView from './PreferencesView';
-import GuestToUserView from './GuestToUserView';
+import { View, useWindowDimensions } from 'react-native';
-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,
@@ -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 &
+		props: SceneRendererProps & { navigationState: NavigationState<Route> }
-			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}
@@ -160,7 +99,7 @@ const SetttingsNavigator = () => {
 					<tabHeader.icon size="18" color="#6075F9" />
 				);
 			}}
-			renderLabel={({ route, focused, color }) =>
+			renderLabel={({ route, color }) =>
 				layout.width > 750 ? (
 					<Text style={{ color, paddingLeft: 10, overflow: 'hidden' }}>
 						{route.title}