refactor(#1): change types and routes

.vscode/settings.json

@@ -3,7 +3,7 @@
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
     "source.fixAll.stylelint": false,
-    // "source.organizeImports": true,
+    "source.organizeImports": true,
     "source.fixAll": true
   },
   "git.autofetch": true,

ios/Chase/Info.plist

@@ -21,7 +21,7 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>17</string>
+	<string>19</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
 	<key>NSAppTransportSecurity</key>

src/app/components/FilledButton/index.tsx

@@ -2,9 +2,11 @@ import React from 'react';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import styled from 'styled-components/native';
 
-type ExtractProps<P> = P extends React.ComponentType<infer T> ? T : never;
 export interface FilledButtonProps
-  extends Pick<ExtractProps<typeof TouchableOpacity>, 'onPress'> {
+  extends Pick<
+    typeof TouchableOpacity extends React.ComponentType<infer T> ? T : never,
+    'onPress'
+  > {
   title: string;
 }
 

src/app/components/FlatButton/index.tsx

@@ -2,9 +2,11 @@ import React from 'react';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import styled from 'styled-components/native';
 
-type ExtractProps<P> = P extends React.ComponentType<infer T> ? T : never;
 export interface FlatButtonProps
-  extends Pick<ExtractProps<typeof TouchableOpacity>, 'onPress'> {
+  extends Pick<
+    typeof TouchableOpacity extends React.ComponentType<infer T> ? T : never,
+    'onPress'
+  > {
   title: string;
 }
 

src/app/pages/HomePage/index.tsx

@@ -1,4 +1,3 @@
-import { StackNavigationProp } from '@react-navigation/stack';
 import moment from 'moment';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -15,6 +14,7 @@ import BottomSheet from 'reanimated-bottom-sheet';
 import styled, { useTheme } from 'styled-components/native';
 import { translations } from '../../../locales/translations';
 import StyledText from '../../components/StyledText';
+import NavigationProps from '../../router';
 import CardPage from '../CardPage';
 import ChaseLogo from './assets/chase-logo.svg';
 import Settings from './assets/settings.svg';
@@ -23,14 +23,9 @@ const { width, height } = Dimensions.get('window');
 
 const logoHeight = width / 14;
 
-export interface HomePageProps {
-  navigation: StackNavigationProp<
-    { Home: undefined; Settings: undefined },
-    'Home'
-  >;
-}
+export interface HomePageProps extends NavigationProps<'Home'> {}
 
-export default function HomePage({ navigation }: HomePageProps) {
+export default function HomePage({ navigation: { navigate } }: HomePageProps) {
   const { i18n, t } = useTranslation();
 
   const insets = useSafeAreaInsets();
@@ -77,7 +72,7 @@ export default function HomePage({ navigation }: HomePageProps) {
   };
 
   const handlePressSettings = () => {
-    navigation.navigate('Settings');
+    navigate('Settings');
   };
 
   return (

src/app/pages/SettingsPage/index.tsx

@@ -6,6 +6,8 @@ import { translations } from '../../../locales/translations';
 import AuthContext from '../../../utils/auth-context';
 import FilledButton from '../../components/FilledButton';
 
+export interface SettingsPageProps {}
+
 export default function SettingsPage() {
   const theme = useTheme();
 

src/app/router.ts

@@ -0,0 +1,17 @@
+import { StackScreenProps } from '@react-navigation/stack';
+import { HomePageProps } from './pages/HomePage/index';
+import { SettingsPageProps } from './pages/SettingsPage';
+import { TransactionsProps } from './pages/TransactionsPage';
+
+type ParamList = {
+  Home?: HomePageProps;
+  Settings?: SettingsPageProps;
+  Transactions?: TransactionsProps;
+};
+
+type NavigationProps<RouteName extends keyof ParamList> = StackScreenProps<
+  ParamList,
+  RouteName
+>;
+
+export default NavigationProps;

src/styles/StyledNavigationContainer.tsx

@@ -3,12 +3,10 @@ import React from 'react';
 import { useColorScheme } from 'react-native';
 import { useTheme } from 'styled-components/native';
 
-type ExtractProps<P> = P extends React.ForwardRefExoticComponent<infer T>
-  ? T
-  : never;
-
 const StyledNavigationContainer: React.FC<
-  ExtractProps<typeof NavigationContainer>
+  typeof NavigationContainer extends React.ForwardRefExoticComponent<infer T>
+    ? T
+    : never
 > = props => {
   const theme = useTheme();