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

Fixing redesign-settings prettier & lint => CI

Browse Source
This commit is contained in:
mathysPaul
2023-09-19 18:23:31 +02:00
parent 1abfbf391f
commit c4ca2e509e
18 changed files with 35 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
front/API.ts
View File

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

5
front/App.tsx
View File

@@ -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 (
<Provider store={store}>

7
front/components/GtkUI/Element.tsx
View File

@@ -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 = <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) {

6
front/components/GtkUI/ElementList.tsx
View File

@@ -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,

2
front/components/GtkUI/ElementTypes.tsx
View File

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

15
front/components/GtkUI/RawElement.tsx
View File

@@ -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 (

6
front/components/UI/ButtonBase.tsx
View File

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

4
front/components/UI/InteractiveBase.tsx
View File

@@ -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

10
front/components/UI/SettingsBase.tsx
View File

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

2
front/components/UI/TextFieldBase.tsx
View File

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

11
front/components/forms/changeEmailForm.tsx
View File

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

11
front/components/forms/changePasswordForm.tsx
View File

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

4
front/views/settings/NotificationView.tsx
View File

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

15
front/views/settings/PreferencesView.tsx
View File

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

4
front/views/settings/PrivacyView.tsx
View File

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

20
front/views/settings/SettingsPremiumView.tsx
View File

@@ -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 <LoadingView />;

35
front/views/settings/SettingsProfileView.tsx
View File

@@ -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 <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)}
/>,
],

73
front/views/settings/SettingsView.tsx
View File

@@ -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<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;
}
props: SceneRendererProps & { navigationState: NavigationState<Route> }
) => (
<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}