refactor

app/(auth)/sign-in.tsx

@@ -4,23 +4,21 @@ import { defaultFontSize, defaultFontWeight } from "@/style/defaultStyle";
 import { useRouter } from "expo-router";
 import React, { useState } from "react";
 import {
-  Alert,
+  ActivityIndicator,
   KeyboardAvoidingView,
+  Platform,
   ScrollView,
   StyleSheet,
-  TextInput,
-  View,
   Text,
-  Platform,
+  TextInput,
   TouchableOpacity,
-  ActivityIndicator,
+  View,
 } from "react-native";
 
 const SignInScreen = () => {
   const [email, setEmail] = useState<string>("");
   const [password, setPassword] = useState<string>("");
   const [loading, setLoading] = useState<boolean>(false);
-  const { push } = useRouter();
 
   const signInWithEmail = async () => {
     setLoading(true);

app/(modal)/payment-modal.tsx

@@ -1,9 +1,9 @@
-import React, { useEffect } from "react";
-import { Platform, StyleSheet, Text, TextInput, View, SafeAreaView, TouchableOpacity } from "react-native";
-import { usePayment } from "../hooks/usePayment";
-import { useLocalSearchParams, useNavigation } from "expo-router";
 import { Colors } from "@/constants/Colors";
 import { defaultFontSize } from "@/style/defaultStyle";
+import { useLocalSearchParams, useNavigation } from "expo-router";
+import React, { useEffect } from "react";
+import { Platform, SafeAreaView, StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native";
+import { usePayment } from "../hooks/usePayment";
 
 export default function PaymentModalScreen() {
   const { payments, addPayment, updatePayment, setName, setAmount, name, amount, fetchPaymentsAll } = usePayment();

app/(tabs)/_layout.tsx

@@ -1,7 +1,7 @@
-import { Tabs } from "expo-router";
-import React from "react";
 import { TabBarIcon } from "@/components/navigation/TabBarIcon";
 import { Colors } from "@/constants/Colors";
+import { Tabs } from "expo-router";
+import React from "react";
 
 export default function TabLayout() {
   return (

app/(tabs)/index.tsx

@@ -1,16 +1,16 @@
-import { View, Text, FlatList, TouchableOpacity, Alert, StyleSheet } from "react-native";
-import { AntDesign } from "@expo/vector-icons";
-import type { FC } from "react";
-import type { Couple, Payment as PaymentRow } from "@/types/Row";
-import { usePayment } from "../hooks/usePayment";
 import { Colors } from "@/constants/Colors";
-import { useRouter } from "expo-router";
-import type { ExpoRouter } from "expo-router/types/expo-router";
+import { supabase } from "@/lib/supabase";
 import { defaultFontSize, defaultShadowColor } from "@/style/defaultStyle";
+import type { Couple, Payment as PaymentRow } from "@/types/Row";
+import { AntDesign } from "@expo/vector-icons";
 import dayjs from "dayjs";
-import { useInvoice } from "../hooks/useInvoice";
-import { supabase } from "@/lib/supabase";
+import { useRouter } from "expo-router";
+import type { ExpoRouter } from "expo-router/types/expo-router";
+import type { FC } from "react";
+import { Alert, FlatList, StyleSheet, Text, TouchableOpacity, View } from "react-native";
 import { useCouple } from "../hooks/useCouple";
+import { useInvoice } from "../hooks/useInvoice";
+import { usePayment } from "../hooks/usePayment";
 
 const HomeScreen: FC = () => {
   const { payments, isRefreshing, fetchPaymentsAll, deletePayment } = usePayment();

app/(tabs)/past-invoices.tsx

@@ -1,21 +1,21 @@
-import { useRouter } from "expo-router";
-import { useEffect, useState, type FC } from "react";
-import { View, Text, TouchableOpacity, FlatList, ActivityIndicator, StyleSheet } from "react-native";
-import dayjs from "dayjs";
+import { defaultFontSize, defaultShadowColor } from "@/style/defaultStyle";
+import type { Invoice } from "@/types/Row";
 import { MaterialIcons } from "@expo/vector-icons";
+import dayjs from "dayjs";
+import { useRouter } from "expo-router";
+import type { ExpoRouter } from "expo-router/types/expo-router";
+import { type FC, useEffect, useState } from "react";
+import { ActivityIndicator, FlatList, StyleSheet, Text, TouchableOpacity, View } from "react-native";
 import { useInvoice } from "../hooks/useInvoice";
 import { usePayment } from "../hooks/usePayment";
-import type { ExpoRouter } from "expo-router/types/expo-router";
-import type { Invoice } from "@/types/Row";
-import { defaultFontSize, defaultShadowColor } from "@/style/defaultStyle";
 
 const PastInvoicesScreen = () => {
-  const { invoices, isRefreshing, fetchInvoices } = useInvoice();
+  const { invoices, isRefreshing, fetchInvoicesAll } = useInvoice();
   const { push } = useRouter();
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   useEffect(() => {
-    fetchInvoices();
+    fetchInvoicesAll();
   }, []);
 
   return (
@@ -32,7 +32,7 @@ const PastInvoicesScreen = () => {
         ItemSeparatorComponent={() => <View style={{ height: 4 }} />}
         ListEmptyComponent={() => <Text>No items</Text>}
         contentContainerStyle={{ paddingBottom: 100 }}
-        onRefresh={fetchInvoices}
+        onRefresh={fetchInvoicesAll}
         refreshing={isRefreshing}
       />
     </View>
@@ -46,12 +46,12 @@ type MonthlyInvoiceProps = {
 
 const MonthlyInvoice: FC<MonthlyInvoiceProps> = ({ invoice, routerPush }) => {
   const [totalAmount, setTotalAmount] = useState<number | null>(null);
-  const { getTotalPayment } = usePayment();
+  const { fetchPaymentTotal } = usePayment();
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   useEffect(() => {
     const fetchData = async () => {
-      const totalAmount = await getTotalPayment(invoice.id);
+      const totalAmount = await fetchPaymentTotal(invoice.id);
       setTotalAmount(totalAmount);
     };
     fetchData();

app/_layout.tsx

@@ -24,7 +24,7 @@ export default function RootLayout() {
   }, [loaded]);
 
   const authState = () => {
-    supabase.auth.onAuthStateChange((event, session) => {
+    supabase.auth.onAuthStateChange((event, _session) => {
       switch (event) {
         case "SIGNED_IN":
           push({ pathname: "/" });

app/hooks/useInvoice.ts

@@ -1,23 +1,23 @@
+import { dev_monthly_invoices } from "@/constants/Table";
 import { supabase } from "@/lib/supabase";
-import { useAtom } from "jotai";
-import { useState, useCallback } from "react";
-import { invoiceAtom } from "../state/invoice.state";
 import type { Invoice } from "@/types/Row";
-import { dev_monthly_invoices } from "@/constants/Table";
 import dayjs from "dayjs";
+import { useAtom } from "jotai";
+import { useCallback, useState } from "react";
+import { invoiceAtom } from "../state/invoice.state";
 
 export const useInvoice = () => {
   const [invoices, setInvoices] = useAtom(invoiceAtom);
   const [isRefreshing, setIsRefreshing] = useState<boolean>(false);
 
-  const getCurrentMonthInvoice = useCallback((invoices: Invoice[]): Invoice | undefined => {
+  const fetchCurrentMonthInvoice = useCallback((invoices: Invoice[]): Invoice | undefined => {
     return invoices.find(
       (invoice) =>
         dayjs(invoice.created_at).month() === dayjs().month() && dayjs(invoice.created_at).year() === dayjs().year(),
     );
   }, []);
 
-  const getActiveInvoice = async () => {
+  const fetchActiveInvoice = async () => {
     const { data, error } = await supabase.from(dev_monthly_invoices).select("*").eq("active", true);
 
     if (error) throw error;
@@ -99,7 +99,7 @@ export const useInvoice = () => {
     fetchInvoicesAll,
     fetchInvoiceByCoupleId,
     addInvoice,
-    getActiveInvoice,
+    fetchActiveInvoice,
     unActiveInvoicesAll,
     turnInvoicePaid,
   };

app/hooks/usePayment.ts

@@ -1,13 +1,13 @@
 import { dev_payments } from "@/constants/Table";
 import { supabase } from "@/lib/supabase";
+import type { Invoice, Payment } from "@/types/Row";
 import dayjs from "dayjs";
 import { useRouter } from "expo-router";
 import { useAtom } from "jotai";
-import { useEffect, useState, useCallback } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { paymentsAtom } from "../state/payment.state";
-import type { Invoice, Payment } from "@/types/Row";
-import { useInvoice } from "./useInvoice";
 import { useCouple } from "./useCouple";
+import { useInvoice } from "./useInvoice";
 
 export const usePayment = () => {
   const [payments, setPayments] = useAtom(paymentsAtom);
@@ -147,7 +147,7 @@ export const usePayment = () => {
     [fetchPaymentsAll],
   );
 
-  const fetchPaymentToal = async (monthly_invoice_id: Payment["monthly_invoice_id"]) => {
+  const fetchPaymentTotal = async (monthly_invoice_id: Payment["monthly_invoice_id"]) => {
     const { data, error } = await supabase
       .from(dev_payments)
       .select("amount")
@@ -180,7 +180,7 @@ export const usePayment = () => {
     fetchPaymentById,
     updatePayment,
     deletePayment,
-    fetchPaymentToal,
+    fetchPaymentTotal,
     fetchPaymentsByMonthlyInvoiceId,
   };
 };

app/past-invoice-details.tsx

@@ -1,16 +1,16 @@
-import { useLocalSearchParams, useNavigation } from "expo-router";
-import { useEffect, useState } from "react";
-import { StyleSheet, View, Text, FlatList } from "react-native";
-import dayjs from "dayjs";
 import { Colors } from "@/constants/Colors";
+import { defaultFontSize, defaultShadowColor } from "@/style/defaultStyle";
 import type { Payment } from "@/types/Row";
+import dayjs from "dayjs";
+import { useLocalSearchParams, useNavigation } from "expo-router";
+import { useEffect, useState } from "react";
+import { FlatList, StyleSheet, Text, View } from "react-native";
 import { usePayment } from "./hooks/usePayment";
-import { defaultFontSize, defaultShadowColor } from "@/style/defaultStyle";
 
 export default function PastInvoiceDetailsScreen() {
   const [payments, setPayments] = useState<Payment[]>([]);
   const { id, date } = useLocalSearchParams();
-  const { getPaymentsByMonthlyInvoiceId } = usePayment();
+  const { fetchPaymentsByMonthlyInvoiceId } = usePayment();
   const { setOptions } = useNavigation();
   useEffect(() => {
     if (typeof date === "string") {
@@ -22,7 +22,7 @@ export default function PastInvoiceDetailsScreen() {
   useEffect(() => {
     (async () => {
       if (typeof id === "string") {
-        const data = await getPaymentsByMonthlyInvoiceId(Number(id));
+        const data = await fetchPaymentsByMonthlyInvoiceId(Number(id));
         if (data) {
           setPayments(data);
         }

lib/supabase.ts

@@ -1,7 +1,7 @@
 import "react-native-url-polyfill/auto";
+import type { Database } from "@/types/supabase";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { createClient } from "@supabase/supabase-js";
-import type { Database } from "@/types/supabase";
 
 const supabaseUrl = "https://jqovxmsueffhddmyqcew.supabase.co";
 const supabaseKey = process.env.EXPO_PUBLIC_SUPABASE_KEY;