Linting and Prettier formatting (#139)

* Linting and Prettier formatting * fix tsc errors * fix minor runtime error * fix useEffect errors * prettier * disable no-console rule
hackclub · Jan 19, 2025 · 5dac326 · 5dac326
1 parent 10e6e06
commit 5dac326
Show file tree

Hide file tree

Showing 36 changed files with 1,439 additions and 1,121 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -46,7 +46,6 @@ module.exports = {
     ],
     "@typescript-eslint/no-non-null-assertion": "off",
     "react/no-unescaped-entities": "off",
-    "no-console": "warn",
   },
   globals: {
     fetch: "readonly",

diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -1,7 +1,9 @@
 ## Summary of the problem
+
 <!-- Why these changes are being made? What problem does it solve? Link any related issues to provide more details. -->
 
 ## Describe your changes
+
 <!-- Explain your thought process to the solution and provide a quick summary of the changes. -->
 
 ## Checklist

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -1,11 +1,11 @@
 name: CI
 on:
   push:
-      branches:
-        - '**'
+    branches:
+      - "**"
   pull_request:
     branches:
-      - '**'
+      - "**"
 jobs:
   eslint:
     name: ESLint

diff --git a/App.tsx b/App.tsx
@@ -53,20 +53,20 @@ const linking: LinkingOptions<TabParamList> = {
 
 export default function App() {
   const [fontsLoaded] = useFonts({
-    'JetBrainsMono-Regular': require('./assets/fonts/JetBrainsMono-Regular.ttf'),
-    'JetBrainsMono-Bold': require('./assets/fonts/JetBrainsMono-Bold.ttf'),
-    'Consolas-Bold': require('./assets/fonts/CONSOLAB.ttf'),
-    'Damion': require('./assets/fonts/Damion-Regular.ttf'),
+    "JetBrainsMono-Regular": require("./assets/fonts/JetBrainsMono-Regular.ttf"),
+    "JetBrainsMono-Bold": require("./assets/fonts/JetBrainsMono-Bold.ttf"),
+    "Consolas-Bold": require("./assets/fonts/CONSOLAB.ttf"),
+    Damion: require("./assets/fonts/Damion-Regular.ttf"),
   });
 
   const [isLoading, setIsLoading] = useState(true);
   const [token, setToken] = useState<string | null>(null);
   const hcb = useClient(token);
   const scheme = useColorScheme();
-  useStripeTerminal()
-  
+  useStripeTerminal();
+
   const fetcher = useCallback(
-    async (url: string, options: any) => {
+    async (url: string, options: RequestInit) => {
       try {
         return await hcb(url, options).json();
       } catch (error) {
@@ -114,7 +114,8 @@ export default function App() {
 
       <SWRConfig
         value={{
-          provider: asyncStorageProvider, fetcher
+          provider: asyncStorageProvider,
+          fetcher,
         }}
       >
         <SafeAreaProvider>

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -1,4 +1,5 @@
 # Contributing
+
 Thank you for choosing to contribute to HCB Mobile! Please follow the guidelines before on how to contribute.
 
 - Use the PR template

diff --git a/README.md b/README.md
@@ -58,4 +58,5 @@ EXPO_PUBLIC_CLIENT_ID=<uid field from the Doorkeeper app>
    - Bonus task: painfully watch Gradle attempt to work
 
 ## Contributing
-Please see [CONTRIBUTING.md](CONTRIBUTING.md).
+
+Please see [CONTRIBUTING.md](CONTRIBUTING.md).
diff --git a/app.config.js b/app.config.js
@@ -65,24 +65,24 @@ export default {
       [
         "@stripe/stripe-terminal-react-native",
         {
-          "bluetoothBackgroundMode": true,
-          "locationWhenInUsePermission": "Location access is required in order to accept payments.",
-          "bluetoothPeripheralPermission": "Bluetooth access is required in order to connect to supported bluetooth card readers.",
-          "bluetoothAlwaysUsagePermission": "This app uses Bluetooth to connect to supported card readers."
-        }
+          bluetoothBackgroundMode: true,
+          locationWhenInUsePermission:
+            "Location access is required in order to accept payments.",
+          bluetoothPeripheralPermission:
+            "Bluetooth access is required in order to connect to supported bluetooth card readers.",
+          bluetoothAlwaysUsagePermission:
+            "This app uses Bluetooth to connect to supported card readers.",
+        },
       ],
       [
         "expo-build-properties",
         {
           android: {
-            minSdkVersion: 26
-          }
+            minSdkVersion: 26,
+          },
         },
       ],
-      [
-        "expo-alternate-app-icons",
-        appIcons
-      ]
+      ["expo-alternate-app-icons", appIcons],
     ],
   },
-};
+};
diff --git a/env.d.ts b/env.d.ts
@@ -1,7 +1,7 @@
 declare namespace NodeJS {
-    interface ProcessEnv {
-        EXPO_PUBLIC_API_BASE: string;
-        EXPO_PUBLIC_CLIENT_ID: string;
-        EXPO_PUBLIC_STRIPE_API_KEY: string;
-    }
-}
+  interface ProcessEnv {
+    EXPO_PUBLIC_API_BASE: string;
+    EXPO_PUBLIC_CLIENT_ID: string;
+    EXPO_PUBLIC_STRIPE_API_KEY: string;
+  }
+}
diff --git a/src/Navigator.tsx b/src/Navigator.tsx
@@ -22,15 +22,15 @@ import Home from "./pages/index";
 import InvitationPage from "./pages/Invitation";
 import OrganizationPage from "./pages/organization";
 import AccountNumberPage from "./pages/organization/AccountNumber";
+import OrganizationDonationPage from "./pages/organization/Donation";
+import ProcessDonationPage from "./pages/organization/ProcessDonation";
 import OrganizationSettingsPage from "./pages/organization/Settings";
 import TransferPage from "./pages/organization/transfer";
 import ReceiptsPage from "./pages/Receipts";
 import RenameTransactionPage from "./pages/RenameTransaction";
 import SettingsPage from "./pages/Settings";
 import TransactionPage from "./pages/Transaction";
 import { palette } from "./theme";
-import OrganizationDonationPage from "./pages/organization/Donation";
-import ProcessDonationPage from "./pages/organization/ProcessDonation";
 
 const Stack = createNativeStackNavigator<StackParamList>();
 const CardsStack = createNativeStackNavigator<CardsStackParamList>();
@@ -202,7 +202,7 @@ export default function Navigator() {
             <CardsStack.Screen
               name="Card"
               component={CardPage}
-              options={({ route }) => ({
+              options={() => ({
                 title: "Card",
               })}
             />

diff --git a/src/cacheProvider.ts b/src/cacheProvider.ts
@@ -1,34 +1,34 @@
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import { AppState } from 'react-native';
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { AppState } from "react-native";
 
 export default function asyncStorageProvider() {
   const map = new Map();
   // Initialize the map with data from AsyncStorage
   (async () => {
     try {
-      const appCache = await AsyncStorage.getItem('app-cache');
+      const appCache = await AsyncStorage.getItem("app-cache");
       if (appCache) {
-        JSON.parse(appCache).forEach(([key, value]) => {
+        JSON.parse(appCache).forEach(([key, value]: [string, unknown]) => {
           map.set(key, value);
         });
       }
     } catch (error) {
-      console.error('Error initializing asyncStorageProvider:', error);
+      console.error("Error initializing asyncStorageProvider:", error);
     }
   })();
   // Save the map to AsyncStorage before the app goes to the background
   const saveAppCache = async () => {
     try {
       const appCache = JSON.stringify(Array.from(map.entries()));
-      await AsyncStorage.setItem('app-cache', appCache);
+      await AsyncStorage.setItem("app-cache", appCache);
     } catch (error) {
-      console.error('Error saving asyncStorageProvider cache:', error);
+      console.error("Error saving asyncStorageProvider cache:", error);
     }
   };
-  AppState.addEventListener('change', (nextAppState) => {
-    if (nextAppState === 'background' || nextAppState === 'inactive') {
+  AppState.addEventListener("change", (nextAppState) => {
+    if (nextAppState === "background" || nextAppState === "inactive") {
       saveAppCache();
     }
   });
   return map;
-}
+}
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -46,11 +46,17 @@ export default function Button(
 ) {
   return (
     <Pressable
-      style={{ ...styles.button, ...(props.style as object), ...(props.disabled ? {
-        backgroundColor: palette.muted,
-        borderColor: palette.muted,
-        opacity: 0.6
-      } : {}) }}
+      style={{
+        ...styles.button,
+        ...(props.style as object),
+        ...(props.disabled
+          ? {
+              backgroundColor: palette.muted,
+              borderColor: palette.muted,
+              opacity: 0.6,
+            }
+          : {}),
+      }}
       onPress={() => props.onPress && props.onPress()}
       disabled={props.loading || props.disabled}
     >

diff --git a/src/components/PaymentCard.tsx b/src/components/PaymentCard.tsx
@@ -1,5 +1,6 @@
 import { useTheme } from "@react-navigation/native";
 import Constants from "expo-constants";
+// @ts-expect-error will be removed later
 import * as Geopattern from "geopattern";
 import { useEffect, useRef, useState } from "react";
 import {
@@ -38,21 +39,21 @@ export default function PaymentCard({
 }: ViewProps & {
   card: Card;
   details?: CardDetails;
-  onCardLoad?: (cardId: string, dimensions: { width: number; height: number }) => void;
+  onCardLoad?: (
+    cardId: string,
+    dimensions: { width: number; height: number },
+  ) => void;
 }) {
   const { colors: themeColors, dark } = useTheme();
 
-  console.log("PaymentCard", card);
-
   const patternForMeasurements = Geopattern.generate(card.id, {
     scalePattern: 1.1,
     grayscale: card.status != "active",
   }).toSvg();
 
   const pattern = Geopattern.generate(card.id, {
     scalePattern: 1.1,
-    grayscale:
-      card.status == "active" ? false : true,
+    grayscale: card.status == "active" ? false : true,
   }).toDataUri();
 
   const extractDimensions = (svg: string) => {
@@ -74,12 +75,11 @@ export default function PaymentCard({
     card.type = "virtual";
   }
 
-
   useEffect(() => {
     if (onCardLoad) {
       onCardLoad(card.id, { width: svgWidth, height: svgHeight });
     }
-  }, []);
+  }, [card.id, onCardLoad, svgHeight, svgWidth]);
 
   useEffect(() => {
     const subscription = AppState.addEventListener(
@@ -122,11 +122,14 @@ export default function PaymentCard({
           }}
         >
           {Constants.platform?.android ? (
-            <SvgXml xml={patternForMeasurements} width={svgWidth} height={svgHeight} />
+            <SvgXml
+              xml={patternForMeasurements}
+              width={svgWidth}
+              height={svgHeight}
+            />
           ) : (
             <SvgUri uri={pattern} width={svgWidth} height={svgHeight} />
-          )
-          }
+          )}
         </View>
       )}
 
@@ -158,7 +161,7 @@ export default function PaymentCard({
         <View>
           <Text
             style={{
-              color: 'white',
+              color: "white",
               fontFamily: "Consolas-Bold",
               fontSize: 18,
               width: 180,