switch to ky

App.tsx

@@ -10,6 +10,7 @@ import { SWRConfig } from "swr";
 
 import AuthContext from "./src/auth";
 import { getStateFromPath } from "./src/getStateFromPath";
+import useClient from "./src/lib/client";
 import { TabParamList } from "./src/lib/NavigatorParamList";
 import Navigator from "./src/Navigator";
 import Login from "./src/pages/login";
@@ -49,29 +50,26 @@ const linking: LinkingOptions<TabParamList> = {
 export default function App() {
   const [isLoading, setIsLoading] = useState(true);
   const [token, setToken] = useState<string | null>(null);
+  const hcb = useClient(token);
 
   const scheme = useColorScheme();
 
   const fetcher = useCallback(
-    (url: string) =>
-      fetch(process.env.EXPO_PUBLIC_API_BASE + url, {
-        headers: { Authorization: `Bearer ${token}` },
-      }).then(async (res) => {
-        const body = await res.json();
-
-        if (!res.ok) {
-          if (body.error === "invalid_auth") {
-            // OAuth token either expired or was revoked
-            setToken("");
-            return;
-          } else {
-            throw body;
-          }
+    async (url: string) => {
+      try {
+        return await hcb(url).json();
+      } catch (error) {
+        if (
+          error.name === "HTTPError" &&
+          (await error.response.json()).error === "invalid_auth"
+        ) {
+          setToken("");
+        } else {
+          throw error;
         }
-
-        return body;
-      }),
-    [token],
+      }
+    },
+    [hcb],
   );
 
   useEffect(() => {

package.json

@@ -41,6 +41,7 @@
     "expo-system-ui": "~2.9.3",
     "expo-web-browser": "~12.8.2",
     "humanize-string": "^3.0.0",
+    "ky": "^1.2.3",
     "lodash": "^4.17.21",
     "react": "18.2.0",
     "react-native": "0.73.4",

src/Navigator.tsx

@@ -37,9 +37,9 @@ const Tab = createBottomTabNavigator<TabParamList>();
 
 export default function Navigator() {
   const { data: missingReceiptData } = useSWR<PaginatedResponse<never>>(
-    `/user/transactions/missing_receipt`,
+    `user/transactions/missing_receipt`,
   );
-  const { data: invitations } = useSWR<Invitation[]>(`/user/invitations`);
+  const { data: invitations } = useSWR<Invitation[]>(`user/invitations`);
 
   const scheme = useColorScheme();
   const { colors: themeColors } = useTheme();
@@ -112,8 +112,8 @@ export default function Navigator() {
                           dismissButtonStyle: "cancel",
                         },
                       ).then(() => {
-                        mutate("/user/organizations");
-                        mutate("/user/invitations");
+                        mutate("user/organizations");
+                        mutate("user/invitations");
                       })
                     }
                   />

src/components/AdminTools.tsx

@@ -16,7 +16,7 @@ export const AdminToolsStyle: ViewStyle = {
 export default function AdminTools(
   props: PropsWithChildren<{ style?: ViewStyle; onPress?: () => void }>,
 ) {
-  const { data: user } = useSWR<User>("/user");
+  const { data: user } = useSWR<User>("user");
 
   if (!user?.admin) return null;
 

src/components/transaction/ReceiptList.tsx

@@ -41,7 +41,7 @@ export default function ReceiptList({
 }) {
   const { params } = useRoute<RouteProp<StackParamList, "Transaction">>();
   const { data: receipts, isLoading } = useSWR<Receipt[]>(
-    `/organizations/${params.orgId}/transactions/${transaction.id}/receipts`,
+    `organizations/${params.orgId}/transactions/${transaction.id}/receipts`,
   );
 
   const { colors: themeColors } = useTheme();

src/components/transaction/types/BankFeeTransaction.tsx

@@ -14,9 +14,7 @@ export default function BankFeeTransaction({
   orgId,
   navigation,
 }: TransactionViewProps) {
-  const { data: organization } = useSWR<Organization>(
-    `/organizations/${orgId}`,
-  );
+  const { data: organization } = useSWR<Organization>(`organizations/${orgId}`);
 
   return (
     <View>

src/components/transaction/types/TransferTransaction.tsx

@@ -18,8 +18,8 @@ export default function TransferTransaction({
   navigation,
   ...props
 }: TransactionViewProps<TransactionTransfer>) {
-  const { data: userOrgs } = useSWR<Organization[]>(`/user/organizations`);
-  const { data: user } = useSWR<User>("/user");
+  const { data: userOrgs } = useSWR<Organization[]>(`user/organizations`);
+  const { data: user } = useSWR<User>("user");
 
   const userInFromOrg =
     user?.admin || userOrgs?.some((org) => org.id == transfer.from.id);

src/lib/client.ts

@@ -0,0 +1,19 @@
+import ky from "ky";
+import { useContext, useMemo } from "react";
+
+import AuthContext from "../auth";
+
+export default function useClient(token?: string | null | undefined) {
+  const { token: _token } = useContext(AuthContext);
+
+  return useMemo(
+    () =>
+      ky.create({
+        prefixUrl: process.env.EXPO_PUBLIC_API_BASE,
+        headers: {
+          Authorization: `Bearer ${token || _token}`,
+        },
+      }),
+    [token, _token],
+  );
+}

src/lib/organization/useTransactions.ts

@@ -14,9 +14,9 @@ export function getKey(orgId: string) {
     if (previousPageData?.has_more === false) return null;
 
     if (index === 0)
-      return `/organizations/${orgId}/transactions?limit=${PAGE_SIZE}`;
+      return `organizations/${orgId}/transactions?limit=${PAGE_SIZE}`;
 
-    return `/organizations/${orgId}/transactions?limit=${PAGE_SIZE}&after=${
+    return `organizations/${orgId}/transactions?limit=${PAGE_SIZE}&after=${
       previousPageData!.data[previousPageData!.data.length - 1].id
     }`;
   };

src/pages/Invitation.tsx

@@ -1,7 +1,7 @@
 import { Ionicons } from "@expo/vector-icons";
 import { useTheme } from "@react-navigation/native";
 import { NativeStackScreenProps } from "@react-navigation/native-stack";
-import { useContext, useEffect } from "react";
+import { useEffect } from "react";
 import {
   View,
   Text,
@@ -13,8 +13,8 @@
 import useSWR, { useSWRConfig } from "swr";
 import useSWRMutation from "swr/mutation";
 
-import AuthContext from "../auth";
 import Button from "../components/Button";
+import useClient from "../lib/client";
 import { StackParamList } from "../lib/NavigatorParamList";
 import Invitation from "../lib/types/Invitation";
 import palette from "../palette";
@@ -28,10 +28,10 @@
     params: { inviteId, invitation: _invitation },
   },
 }: Props) {
-  const { token } = useContext(AuthContext);
+  const hcb = useClient();
 
   const { data: invitation } = useSWR<Invitation>(
-    `/user/invitations/${inviteId}`,
+    `user/invitations/${inviteId}`,
     { fallbackData: _invitation },
   );
 
@@ -43,7 +43,7 @@
         organization: invitation.organization,
       });
     }
   }, [invitation]);
 
   const { mutate } = useSWRConfig();
 
@@ -56,18 +56,8 @@
     never,
     Invitation[]
   >(
-    `/user/invitations`,
-    () =>
-      fetch(
-        process.env.EXPO_PUBLIC_API_BASE +
-          `/user/invitations/${inviteId}/accept`,
-        {
-          method: "POST",
-          headers: {
-            Authorization: `Bearer ${token}`,
-          },
-        },
-      ),
+    `user/invitations`,
+    () => hcb.post(`user/invitations/${inviteId}/accept`).json(),
     {
       populateCache: (_, invitations) =>
         invitations?.filter((i) => i.id != inviteId) || [],
@@ -77,7 +67,7 @@
           orgId: invitation!.organization.id,
           organization: invitation!.organization,
         });
-        mutate(`/user/organizations`);
+        mutate(`user/organizations`);
       },
     },
   );
@@ -89,18 +79,8 @@
     never,
     Invitation[]
   >(
-    `/user/invitations`,
-    () =>
-      fetch(
-        process.env.EXPO_PUBLIC_API_BASE +
-          `/user/invitations/${inviteId}/reject`,
-        {
-          method: "POST",
-          headers: {
-            Authorization: `Bearer ${token}`,
-          },
-        },
-      ),
+    `user/invitations`,
+    () => hcb.post(`user/invitations/${inviteId}/reject`).json(),
     {
       populateCache: (_, invitations) =>
         invitations?.filter((i) => i.id != inviteId) || [],

src/pages/Receipts.tsx

@@ -67,7 +67,7 @@ function Transaction({
         try {
           await fetch(
             process.env.EXPO_PUBLIC_API_BASE +
-              `/organizations/${transaction.organization.id}/transactions/${transaction.id}/receipts`,
+              `organizations/${transaction.organization.id}/transactions/${transaction.id}/receipts`,
             {
               method: "POST",
               headers: {
@@ -143,7 +143,7 @@ type Props = NativeStackScreenProps<
 export default function ReceiptsPage({ navigation: _navigation }: Props) {
   const { data, mutate, isLoading } = useSWR<{
     data: (TransactionCardCharge & { organization: Organization })[];
-  }>("/user/transactions/missing_receipt");
+  }>("user/transactions/missing_receipt");
 
   useFocusEffect(() => {
     mutate();

src/pages/RenameTransaction.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from "@react-navigation/native";
 import { NativeStackScreenProps } from "@react-navigation/native-stack";
-import { useContext, useState } from "react";
+import { useState } from "react";
 import {
   ActivityIndicator,
   StatusBar,
@@ -12,7 +12,7 @@ import useSWR, { useSWRConfig } from "swr";
 import { unstable_serialize } from "swr/infinite";
 import useSWRMutation from "swr/mutation";
 
-import AuthContext from "../auth";
+import useClient from "../lib/client";
 import { StackParamList } from "../lib/NavigatorParamList";
 import { getKey } from "../lib/organization/useTransactions";
 import Transaction from "../lib/types/Transaction";
@@ -26,16 +26,16 @@ export default function RenameTransactionPage({
   },
   navigation,
 }: Props) {
-  const { token } = useContext(AuthContext);
   const { colors: themeColors } = useTheme();
   const { mutate } = useSWRConfig();
+  const hcb = useClient();
 
   const {
     data: memoSuggestions,
     isLoading,
     isValidating,
   } = useSWR<string[]>(
-    `/organizations/${orgId}/transactions/${transaction.id}/memo_suggestions`,
+    `organizations/${orgId}/transactions/${transaction.id}/memo_suggestions`,
     { revalidateOnMount: true },
   );
 
@@ -44,22 +44,13 @@ export default function RenameTransactionPage({
   );
 
   const { trigger } = useSWRMutation(
-    `/organizations/${orgId}/transactions/${transaction.id}`,
+    `organizations/${orgId}/transactions/${transaction.id}`,
     () =>
-      fetch(
-        process.env.EXPO_PUBLIC_API_BASE +
-          `/organizations/${orgId}/transactions/${transaction.id}`,
-        {
-          method: "PATCH",
-          body: JSON.stringify({
-            memo,
-          }),
-          headers: {
-            Authorization: `Bearer ${token}`,
-            "Content-Type": "application/json",
-          },
-        },
-      ).then((res) => res.json()),
+      hcb
+        .patch(`organizations/${orgId}/transactions/${transaction.id}`, {
+          json: { memo },
+        })
+        .json(),
     {
       optimisticData(currentData: Transaction) {
         return { ...currentData, memo };

src/pages/Settings.tsx

@@ -159,7 +159,7 @@ export default function SettingsPage(
     });
   }, []);
 
-  const { data: user } = useSWR<User>("/user");
+  const { data: user } = useSWR<User>("user");
 
   const handleClick = (iconName: string) => {
     AppIcon.setAppIcon(iconName.toString());

src/pages/Transaction.tsx

@@ -42,13 +42,13 @@ export default function TransactionPage({
     Transaction & { organization?: Organization }
   >(
     orgId
-      ? `/organizations/${orgId}/transactions/${transactionId}`
-      : `/transactions/${transactionId}`,
+      ? `organizations/${orgId}/transactions/${transactionId}`
+      : `transactions/${transactionId}`,
     { fallbackData: _transaction },
   );
   const { data: comments } = useSWR<IComment[]>(
     () =>
-      `/organizations/${
+      `organizations/${
         orgId || transaction!.organization!.id
       }/transactions/${transactionId}/comments`,
   );