Fix code smells (#154)

* Fix various code smells * Rename label for development channel * Encapsulate nested React components
ConjuringCoffee · Nov 18, 2023 · 1cf5f7c · 1cf5f7c
1 parent 18e3ac1
commit 1cf5f7c
Show file tree

Hide file tree

Showing 10 changed files with 40 additions and 31 deletions.
diff --git a/src/Hooks/useInitialFetchStatus.ts b/src/Hooks/useInitialFetchStatus.ts
@@ -81,14 +81,11 @@ export const useInitialFetchStatus = (): [InitialFetchStatus] => {
     useEffect(
         () => {
             if (!localLoaded || connectionStatus.status === LoadingStatus.IDLE || connectionStatus.status === LoadingStatus.LOADING) {
-                // Still unknown
                 return;
             } else if (connectionStatus.status === LoadingStatus.ERROR || profiles.length === 0) {
                 setInitialFetchStatus(InitialFetchStatus.SETUP_REQUIRED);
-            } else {
-                if (budgetsFetchStatus.status === LoadingStatus.SUCCESSFUL) {
-                    setInitialFetchStatus(InitialFetchStatus.READY);
-                }
+            } else if (budgetsFetchStatus.status === LoadingStatus.SUCCESSFUL) {
+                setInitialFetchStatus(InitialFetchStatus.READY);
             }
         },
         [localLoaded, connectionStatus, profiles, budgetsFetchStatus, initialFetchStatus],

diff --git a/src/Screens/AmountsScreen/AmountView.tsx b/src/Screens/AmountsScreen/AmountView.tsx
@@ -11,7 +11,6 @@ import { MyStackNavigationProp, StackParameterList } from '../../Navigation/Scre
 import { selectCategoryCombos } from '../../redux/features/categoryCombos/categoryCombosSlice';
 
 type Props<T extends keyof StackParameterList> = {
-    key: number,
     index: number,
     amountText: string,
     payerBudgetId: string,

diff --git a/src/Screens/AmountsScreen/SplitPercentInput.tsx b/src/Screens/AmountsScreen/SplitPercentInput.tsx
@@ -18,7 +18,7 @@ export const SplitPercentInput = ({ setSplitPercentToPayer, ...props }: Props) =
         return null;
     }
 
-    const value = String(props.splitPercentToPayer || '');
+    const value = String(props.splitPercentToPayer ?? '');
 
     return (
         <TextInput

diff --git a/src/Screens/InitialScreen/AccessTokenListItem.tsx b/src/Screens/InitialScreen/AccessTokenListItem.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
 import { List } from 'react-native-paper';
 import { LoadingStatus } from '../../Helper/LoadingStatus';
 import { useAutomaticConnectionTest } from '../../Hooks/useAutomaticConnectionTest';
@@ -22,16 +22,18 @@ export const AccessTokenListItem = <T extends keyof StackParameterList>({ naviga
         [navigation],
     );
 
-    const icon = useMemo(
-        () => connectionStatus.status === LoadingStatus.SUCCESSFUL ? ICON_CONNECTION_OK : ICON_CONNECTION_NOT_OK,
+    const listIcon = useCallback(
+        (props: object) => {
+            const icon = connectionStatus.status === LoadingStatus.SUCCESSFUL ? ICON_CONNECTION_OK : ICON_CONNECTION_NOT_OK;
+            return <List.Icon {...props} icon={icon} />;
+        },
         [connectionStatus],
     );
 
     return (
         <List.Item
             title='Connect YNAB account'
-            // eslint-disable-next-line react/no-unstable-nested-components
-            left={(props) => <List.Icon {...props} icon={icon} />}
+            left={listIcon}
             onPress={navigateToAccessTokenScreen}
         />
     );

diff --git a/src/Screens/InitialScreen/ProfileListItem.tsx b/src/Screens/InitialScreen/ProfileListItem.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
 import { List } from 'react-native-paper';
 import { useAppSelector } from '../../Hooks/useAppSelector';
 import { ScreenNames } from '../../Navigation/ScreenNames';
@@ -27,16 +27,18 @@ export const ProfileListItem = <T extends keyof StackParameterList>({ navigation
         [navigation, profiles],
     );
 
-    const icon = useMemo(
-        () => profiles.length ? ICON_PROFILE_EXISTS : ICON_PROFILE_MISSING,
+    const listIcon = useCallback(
+        (props: object) => {
+            const icon = profiles.length ? ICON_PROFILE_EXISTS : ICON_PROFILE_MISSING;
+            return <List.Icon {...props} icon={icon} />;
+        },
         [profiles],
     );
 
     return (
         <List.Item
             title='Set up profile'
-            // eslint-disable-next-line react/no-unstable-nested-components
-            left={(props) => <List.Icon {...props} icon={icon} />}
+            left={listIcon}
             onPress={navigateToProfileSettings}
         />
     );

diff --git a/src/Screens/Settings/CategoryCombos/ChooseCategoryListItem.tsx b/src/Screens/Settings/CategoryCombos/ChooseCategoryListItem.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { List } from 'react-native-paper';
 import { ScreenNames } from '../../../Navigation/ScreenNames';
 import { MyStackNavigationProp, StackParameterList } from '../../../Navigation/ScreenParameters';
@@ -50,12 +50,16 @@ export const ChooseCategoryListItem = <T extends keyof StackParameterList>({ sel
         [categoryName, selectedCategoryId],
     );
 
+    const listIcon = useCallback(
+        (props: object) => (<List.Icon {...props} icon={icon} />),
+        [icon],
+    );
+
     return (
         <List.Item
             title={title}
             description={`Category from ${displayBudgetName}`}
-            // eslint-disable-next-line react/no-unstable-nested-components
-            left={(props) => <List.Icon {...props} icon={icon} />}
+            left={listIcon}
             onPress={() => {
                 props.navigation.navigate(ScreenNames.CATEGORY_SCREEN, {
                     budgetId: props.budgetId,

diff --git a/src/Screens/Settings/CategoryCombos/CreateCategoryComboScreen/CreateCategoryComboScreen.tsx b/src/Screens/Settings/CategoryCombos/CreateCategoryComboScreen/CreateCategoryComboScreen.tsx
@@ -26,7 +26,7 @@ export const CreateCategoryComboScreen = ({ navigation }: MyStackScreenProps<Scr
     const [name, setName] = useState<string>('');
     const [categoryIdFirstProfile, setCategoryIdFirstProfile] = useState<string | undefined>(undefined);
     const [categoryIdSecondProfile, setCategoryIdSecondProfile] = useState<string | undefined>(undefined);
-    const readyToSave = name.length > 0 && categoryIdFirstProfile && categoryIdSecondProfile ? true : false;
+    const readyToSave = name.length > 0 && categoryIdFirstProfile;
 
     const saveAndNavigate = useCallback(
         () => {

diff --git a/src/Screens/Settings/CategoryCombos/EditCategoryComboScreen/EditCategoryComboScreen.tsx b/src/Screens/Settings/CategoryCombos/EditCategoryComboScreen/EditCategoryComboScreen.tsx
@@ -32,7 +32,7 @@ export const EditCategoryComboScreen = ({ navigation, route }: MyStackScreenProp
 
     const [navigateBack] = useNavigateBack(navigation);
 
-    const readyToSave = name.length > 0 && categoryIdFirstProfile && categoryIdSecondProfile ? true : false;
+    const readyToSave = name.length > 0 && categoryIdFirstProfile && categoryIdSecondProfile;
 
     const onSelectDeletion = useCallback(
         (): void => {

diff --git a/src/Screens/Settings/DevelopmentSettingsScreen/DevelopmentSettingsScreen.tsx b/src/Screens/Settings/DevelopmentSettingsScreen/DevelopmentSettingsScreen.tsx
@@ -78,7 +78,7 @@ export const DevelopmentSettingsScreen = ({ navigation }: MyStackScreenProps<Scr
         [isDevelopmentMode, latestUpdate],
     );
 
-    const releaseChannel = useMemo(
+    const channel = useMemo(
         (): string => {
             if (Updates.channel && Updates.channel.length > 0) {
                 return Updates.channel;
@@ -107,16 +107,14 @@ export const DevelopmentSettingsScreen = ({ navigation }: MyStackScreenProps<Scr
     );
 
     const onPressUpdate = useMemo(
-        () => latestUpdate && latestUpdate.isAvailable ? updateApp : undefined,
+        () => latestUpdate?.isAvailable ? updateApp : undefined,
         [latestUpdate, updateApp],
     );
 
     const onDeleteButtonPress = useCallback(
         async () => {
             await dispatch(deleteAllCategoryCombos());
             await dispatch(deleteAllProfiles());
-            // TODO: Delete access token
-            // TODO: Delete display settings
         },
         [dispatch],
     );
@@ -130,8 +128,8 @@ export const DevelopmentSettingsScreen = ({ navigation }: MyStackScreenProps<Scr
                 description={isDevelopmentMode ? 'Development' : 'Release'}
             />
             <List.Item
-                title='Release Channel'
-                description={releaseChannel}
+                title='Channel'
+                description={channel}
             />
             <List.Item
                 title='Date of current update'
@@ -147,7 +145,7 @@ export const DevelopmentSettingsScreen = ({ navigation }: MyStackScreenProps<Scr
                 mode='contained'
                 disabled={!isDevelopmentMode}
             >
-                Delete all data
+                Delete profiles and category combos
             </Button>
         </ScrollView>
     );

diff --git a/src/Screens/Settings/Profiles/ChooseBudgetListItem.tsx b/src/Screens/Settings/Profiles/ChooseBudgetListItem.tsx
@@ -28,12 +28,19 @@ export const ChooseBudgetListItem = (props: Props) => {
 
     const budgetName = props.selectedBudgetId ? budgets.find((budget) => budget.id === props.selectedBudgetId)?.name : undefined;
 
+    const listIcon = useCallback(
+        (props: object) => {
+            const icon = budgetName ? ICON_BUDGET_SET : ICON_BUDGET_NOT_SET;
+            return <List.Icon {...props} icon={icon} />;
+        },
+        [budgetName],
+    );
+
     return (
         <>
             <List.Item
                 title={budgetName ?? 'No budget selected'}
-                // eslint-disable-next-line react/no-unstable-nested-components
-                left={(props) => <List.Icon {...props} icon={budgetName ? ICON_BUDGET_SET : ICON_BUDGET_NOT_SET} />}
+                left={listIcon}
                 onPress={showModal}
             />
             <BudgetSelectModalPortal