fix(app): fix majority of ts errors

.github/scripts/tsfixme_progress.sh

@@ -0,0 +1,86 @@
+#!/usr/bin/env bash
+# .github/scripts/tsfixme_progress.sh
+
+set -ex
+
+# Measured on 2022-06-24
+INITIAL_COUNT_TSFIXME_FILES=1938
+INITIAL_COUNT_TSFIXME_INSTANCES=8398
+INITIAL_COUNT_TSERROR_INSTANCES=1763
+
+MAGIC_COMMENT_HINT="<!-- tsfixme:progress:comment -->"
+
+# Generated by a previous workflow step
+base_count_tsfixme_instances=$(cat /tmp/base_count_tsfixme_instances)
+base_count_tserror_instances=$(cat /tmp/base_count_tserror_instances)
+base_count_tsfixme_files=$(cat /tmp/base_count_tsfixme_files)
+
+count_tsfixme_instances=$(rg "\\\$TSFixMe" --stats . | rg '.*matches$' | head -1 | awk '{ print $1 }')
+count_tserror_instances=$(rg 'ts-expect-error ts-migrate' --stats . | rg '.*matches$' | head -1 | awk '{ print $1 }')
+count_tsfixme_files=$(rg "\\\$TSFixMe" --stats . | rg '.*matches$' | tail -1 | awk '{ print $1 }')
+
+main() {
+    if [ "$count_tsfixme_files" -gt "$base_count_tsfixme_files" ] || [ "$count_tsfixme_instances" -gt "$base_count_tsfixme_instances" ] || [ "$count_tserror_instances" -gt "$base_count_tserror_instances" ]; then
+        write_comment "$(error_comment)"
+        exit 1
+    elif [ "$count_tsfixme_files" -lt "$base_count_tsfixme_files" ] || [ "$count_tsfixme_instances" -lt "$base_count_tsfixme_instances" ] || [ "$count_tserror_instances" -lt "$base_count_tserror_instances" ]; then
+        write_comment "$(success_comment)"
+    else
+        cleanup_comment
+    fi
+}
+
+success_comment() {
+    echo "$MAGIC_COMMENT_HINT
+## :tada: Amount of \`\$TSFixMe\` decreased!
+$(table)
+"
+}
+
+error_comment() {
+    echo "$MAGIC_COMMENT_HINT
+## :x: Amount of \`\$TSFixMe\` increased!
+$(table)
+"
+}
+
+write_comment() {
+    comment_body="$1"
+
+    magic_comment_id=$(/tmp/hub api "repos/${GITHUB_REPOSITORY}/issues/${PR_NUMBER}/comments?per_page=100" | jq -r ".[] | select(.body | startswith(\"${MAGIC_COMMENT_HINT}\")) | .id" | head -n 1)
+
+    if [ -z "$magic_comment_id" ]; then
+        /tmp/hub api "repos/${GITHUB_REPOSITORY}/issues/${PR_NUMBER}/comments" --raw-field "body=${comment_body}"
+    else
+        /tmp/hub api --method PATCH "repos/${GITHUB_REPOSITORY}/issues/comments/${magic_comment_id}" --raw-field "body=${comment_body}"
+    fi
+}
+
+cleanup_comment() {
+    magic_comment_id=$(/tmp/hub api "repos/${GITHUB_REPOSITORY}/issues/${PR_NUMBER}/comments?per_page=100" | jq -r ".[] | select(.body | startswith(\"${MAGIC_COMMENT_HINT}\")) | .id" | head -n 1)
+    if [ -n "$magic_comment_id" ]; then
+        /tmp/hub api --method DELETE "repos/${GITHUB_REPOSITORY}/issues/comments/${magic_comment_id}"
+    fi
+}
+
+table() {
+    diff_tsfixme_instances=$(printf "%+0.2f" "$(bc -q <<< "scale=4; (($count_tsfixme_instances / $base_count_tsfixme_instances) -1 )  * 100")")
+    progress_tsfixme_instances=$(printf "%0.2f" "$(bc -q <<< "scale=4; (($INITIAL_COUNT_TSFIXME_INSTANCES - $count_tsfixme_instances) / $INITIAL_COUNT_TSFIXME_INSTANCES) * 100")")
+
+    diff_tsfixme_files=$(printf "%+0.2f" "$(bc -q <<< "scale=4; (($count_tsfixme_files / $base_count_tsfixme_files) -1 )  * 100")")
+    progress_tsfixme_files=$(printf "%0.2f" "$(bc -q <<< "scale=4; (($INITIAL_COUNT_TSFIXME_FILES - $count_tsfixme_files) / $INITIAL_COUNT_TSFIXME_FILES)  * 100")")
+
+    diff_tserror_instances=$(printf "%+0.2f" "$(bc -q <<< "scale=4; (($count_tserror_instances / $base_count_tserror_instances) -1 )  * 100")")
+    progress_tserror_instances=$(printf "%0.2f" "$(bc -q <<< "scale=4; (($INITIAL_COUNT_TSERROR_INSTANCES - $count_tserror_instances) / $INITIAL_COUNT_TSERROR_INSTANCES) * 100")")
+
+
+    echo "
+| Count                              | Base Branch                   | This Branch                                           | Cumulative Progress since 2023-11-19                                   |
+|------------------------------------|-------------------------------|-------------------------------------------------------|------------------------------------------------------------------------|
+| \`\$TSFixMe\`                      | $base_count_tsfixme_instances | $count_tsfixme_instances (${diff_tsfixme_instances}%) | ${progress_tsfixme_instances}% (from $INITIAL_COUNT_TSFIXME_INSTANCES) |
+| Files containing \`\$TSFixMe\`     | $base_count_tsfixme_files     | $count_tsfixme_files (${diff_tsfixme_files}%)         | ${progress_tsfixme_files}% (from $INITIAL_COUNT_TSFIXME_FILES)         |
+| \`// ts-expect-error ts-migrate\`  | $base_count_tserror_instances | $count_tserror_instances (${diff_tserror_instances}%) | ${progress_tserror_instances}% (from $INITIAL_COUNT_TSERROR_INSTANCES) |
+"
+}
+
+main

.github/workflows/tsfixme-progress.yml

@@ -0,0 +1,48 @@
+name: $TSFixMe progress
+on:
+    pull_request:
+        types: [opened, synchronize]
+        branches:
+            - main
+
+concurrency:
+    group: tsfixme-progress-{{ github.ref }}
+    cancel-in-progress: true
+
+jobs:
+    tsfixme-progress:
+        runs-on: "ubuntu-latest"
+        steps:
+            - name: Fetch hub
+              run: |
+                  (
+                    cd /tmp
+                    curl -s -L https://github.com/github/hub/releases/download/v2.12.3/hub-linux-amd64-2.12.3.tgz > hub-linux-amd64-2.12.3.tgz
+                    tar xzf hub-linux-amd64-2.12.3.tgz hub-linux-amd64-2.12.3/bin/hub
+                    mv hub-linux-amd64-2.12.3/bin/hub hub
+                  )
+            - name: Install ripgrep
+              run: |
+                  (
+                    cd /tmp 
+                    curl -LO https://github.com/BurntSushi/ripgrep/releases/download/13.0.0/ripgrep_13.0.0_amd64.deb
+                    sudo dpkg -i ripgrep_13.0.0_amd64.deb
+                  )
+            - uses: actions/checkout@v3
+              with:
+                  ref: ${{ github.event.pull_request.base.sha }}
+
+            - name: Count base instances of $TSFixMe
+              run: |
+                  rg "\\\$TSFixMe" --stats . | rg '.*matches$' | head -1 | awk '{ print $1 }' > /tmp/base_count_tsfixme_instances
+                  rg "ts-expect-error ts-migrate" --stats . | rg '.*matches$' | head -1 | awk '{ print $1 }' > /tmp/base_count_tserror_instances
+                  rg "\\\$TSFixMe" --stats . | rg '.*matches$' | tail -1 | awk '{ print $1 }' > /tmp/base_count_tsfixme_files
+            - uses: actions/checkout@v3
+
+            - name: Execute progress script
+              env:
+                  GITHUB_TOKEN: ${{ secrets.FOAM_GITHUB_TOKEN }}
+                  GITHUB_USER: github
+                  PR_NUMBER: ${{ github.event.pull_request.number }}
+              run: |
+                  ./.github/scripts/tsfixme_progress.sh

package.json

@@ -76,6 +76,7 @@
     "jest-expo": "^49.0.0",
     "lint-staged": "^15.0.2",
     "prettier": "^3.0.3",
+    "ts-migrate": "^0.1.35",
     "ts-node": "^10.9.1",
     "typescript": "^5.1.3"
   },

src/components/Header.tsx

@@ -1,36 +1,41 @@
-import { Image, StyleSheet, TouchableOpacity, View } from 'react-native';
-import { useAuthContext } from '../context/AuthContext';
+import { BottomTabHeaderProps } from '@react-navigation/bottom-tabs';
 import {
-  HomeTabsRoutes,
-  HomeTabsScreenProps,
-} from '../navigation/Home/HomeTabs';
+  Image,
+  SafeAreaView,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { useAuthContext } from '../context/AuthContext';
 import { RootRoutes } from '../navigation/RootStack';
 import colors from '../styles/colors';
 import Title from './Title';
 
-interface Props extends HomeTabsScreenProps<HomeTabsRoutes.Top> {
+type BaseProps = {
   title: string;
   showAvatar?: boolean;
-}
+};
+// progress, styleInterpolator
+type Props = BottomTabHeaderProps & BaseProps;
 
-const Header = ({ title, navigation, showAvatar = true }: Props) => {
+export default function Header({
+  title,
+  navigation,
+  showAvatar = true,
+}: Props) {
   const { user } = useAuthContext();
   return (
-    <View style={styles.container}>
+    <SafeAreaView style={styles.container}>
       <Title>{title}</Title>
       {showAvatar && (
         <View style={styles.right}>
           {!user ? (
             <TouchableOpacity
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              // @ts-ignore
               onPress={() => navigation.navigate(RootRoutes.SettingsModal)}
               style={styles.avatar}
             />
           ) : (
             <TouchableOpacity
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              // @ts-ignore
               onPress={() => navigation.navigate(RootRoutes.SettingsModal)}
             >
               <Image
@@ -41,11 +46,9 @@ const Header = ({ title, navigation, showAvatar = true }: Props) => {
           )}
         </View>
       )}
-    </View>
+    </SafeAreaView>
   );
-};
-
-export default Header;
+}
 
 const styles = StyleSheet.create({
   title: {
@@ -57,9 +60,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    paddingTop: 14,
-    paddingRight: 14,
-    marginBottom: 15,
+    backgroundColor: colors.primary,
   },
   avatar: {
     backgroundColor: colors.tag,

src/navigation/Home/HomeTabs.tsx

@@ -3,7 +3,6 @@ import {
   createBottomTabNavigator,
 } from '@react-navigation/bottom-tabs';
 import { NavigationProp } from '@react-navigation/native';
-
 // eslint-disable-next-line no-shadow
 export enum HomeTabsRoutes {
   Following = 'Following',

src/navigation/Home/HomeTabsNavigator.tsx

@@ -1,45 +1,31 @@
 /* eslint-disable react/no-unstable-nested-components */
 import { AntDesign, Feather } from '@expo/vector-icons';
-// import BrowseScreen from '../../screens/BrowseScreen';
+import { BottomTabHeaderProps } from '@react-navigation/bottom-tabs';
+import Header from '../../components/Header';
 import { useAuthContext } from '../../context/AuthContext';
 import FollowingScreen from '../../screens/FollowingScreen';
 import SearchScreen from '../../screens/SearchScreen';
 import TopScreen from '../../screens/TopScreen';
 import colors from '../../styles/colors';
-import { RootRoutes, RootStackScreenProps } from '../RootStack';
 import { HomeTabs, HomeTabsRoutes } from './HomeTabs';
 
-const HomeTabsNavigator = ({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  navigation,
-}: RootStackScreenProps<RootRoutes.Home>) => {
+const HomeTabsNavigator = () => {
   const { auth } = useAuthContext();
   return (
     <HomeTabs.Navigator
-      initialRouteName={HomeTabsRoutes.Following}
+      initialRouteName={
+        auth?.isAuth ? HomeTabsRoutes.Following : HomeTabsRoutes.Top
+      }
       screenOptions={{
         headerTitleAlign: 'left',
-        headerShown: false,
+        // headerShown: false,
         tabBarActiveTintColor: colors.purple,
         tabBarStyle: {
           backgroundColor: colors.primary,
         },
-        // eslint-disable-next-line react/no-unstable-nested-components
-        // headerRight: () => (
-        //   <View>
-        //     <Header title={navigation.} />
-        //     {/* <Text>
-        //       <Entypo
-        //         name="cog"
-        //         size={24}
-        //         color="black"
-        //         onPress={() => {
-        //           navigation.navigate(RootRoutes.SettingsModal);
-        //         }}
-        //       />
-        //     </Text> */}
-        //   </View>
-        // ),
+        headerStyle: {
+          backgroundColor: colors.black,
+        },
       }}
     >
       {auth?.isAuth && (
@@ -50,6 +36,9 @@ const HomeTabsNavigator = ({
             tabBarIcon: () => (
               <Feather name="heart" size={24} color={colors.gray} />
             ),
+            header(props: BottomTabHeaderProps) {
+              return <Header {...props} title="Following" />;
+            },
           }}
         />
       )}
@@ -58,9 +47,15 @@ const HomeTabsNavigator = ({
         name={HomeTabsRoutes.Top}
         component={TopScreen}
         options={{
+          headerStyle: {
+            backgroundColor: colors.black,
+          },
           tabBarIcon: () => (
             <AntDesign name="totop" size={24} color={colors.gray} />
           ),
+          header(props: BottomTabHeaderProps) {
+            return <Header {...props} title="Top" />;
+          },
         }}
       />
       {/* <HomeTabs.Screen name={HomeTabsRoutes.Browse} component={BrowseScreen} /> */}
@@ -71,6 +66,9 @@ const HomeTabsNavigator = ({
           tabBarIcon: () => (
             <Feather name="search" size={24} color={colors.gray} />
           ),
+          header(props: BottomTabHeaderProps) {
+            return <Header {...props} title="Search" />;
+          },
         }}
       />
     </HomeTabs.Navigator>

src/navigation/RootNavigator.tsx

@@ -1,7 +1,10 @@
+/* eslint-disable react/no-unstable-nested-components */
 /* eslint-disable @typescript-eslint/ban-ts-comment */
+import Header from '../components/Header';
 import AuthLoadingScreen from '../screens/authentication/AuthLoading';
 import LoginScreen from '../screens/authentication/LoginScreen';
 import SettingsModal from '../screens/settings/SettingsModal';
+import colors from '../styles/colors';
 import HomeTabsNavigator from './Home/HomeTabsNavigator';
 import { RootRoutes, RootStack } from './RootStack';
 
@@ -17,16 +20,23 @@ const RootNavigator = () => {
         name={RootRoutes.AuthLoading}
         component={AuthLoadingScreen}
       />
-      <RootStack.Screen
-        name={RootRoutes.Home}
-        component={HomeTabsNavigator}
-        options={{}}
-      />
-      <RootStack.Screen
-        name={RootRoutes.SettingsModal}
-        component={SettingsModal}
-      />
-      {/* @ts-ignore */}
+      <RootStack.Screen name={RootRoutes.Home} component={HomeTabsNavigator} />
+      <RootStack.Group screenOptions={{ presentation: 'modal' }}>
+        <RootStack.Screen
+          name={RootRoutes.SettingsModal}
+          component={SettingsModal}
+          options={{
+            headerTitleAlign: 'left',
+            headerStyle: {
+              backgroundColor: colors.black,
+            },
+            header(props) {
+              // @ts-expect-error ts-migrate(2339) FIXME: need to fix this
+              return <Header {...props} title="Settings" />;
+            },
+          }}
+        />
+      </RootStack.Group>
       <RootStack.Screen name={RootRoutes.Login} component={LoginScreen} />
     </RootStack.Navigator>
   );

src/navigation/RootStack.tsx

@@ -26,6 +26,9 @@ export type RootStackParamList = {
   [RootRoutes.Login]: undefined;
 };
 
+// key of RootRoutes
+export type RootRoutesParams = keyof RootStackParamList;
+
 export type RootStackNavigationProp = NavigationProp<RootStackParamList>;
 
 export const RootStack = createStackNavigator<RootStackParamList>();