adding user hooks to replace api

frontend/src/App.tsx

@@ -7,11 +7,9 @@ import { Api } from './api'
 import './scss/app.scss'
 
 const App = () => {
-  const api = new Api({ baseURL: '/api' })
-
   return (
     <BrowserRouter>
-      <AppContextProvider api={api}>
+      <AppContextProvider>
         <UserContextProvider>
           <CoreLayout />
         </UserContextProvider>

frontend/src/contexts/AppContext.tsx

@@ -1,19 +1,51 @@
+import Axios from 'axios'
 import React, { createContext, useContext } from 'react'
-import { Api } from '../api'
 
 type Props = {
   children: React.ReactNode
-  api: Api
-}
-type Context = {
-  api: Api
+  baseURL?: string
+}
+
+type Context = {
+  get: <T>(path: string) => Promise<T>
+  patch: <T>(path: string, body: Partial<T>) => Promise<T>
+  post: <T>(path: string, body: Partial<T>) => Promise<T>
+  create: <T>(path: string, body: Partial<T>) => Promise<T>
+  destroy: (path: string) => Promise<string>
 }
 
-// Just find-replace "AppContext" with whatever context name you like. (ie. DankContext)
 const AppContext = createContext<Context | null>(null)
 
-export const AppContextProvider = ({ api, children }: Props) => {
-  return <AppContext.Provider value={{ api }}>{children}</AppContext.Provider>
+export const AppContextProvider = ({ children, baseURL }: Props) => {
+  const axios = Axios.create({ baseURL })
+
+  async function get<T>(path: string): Promise<T> {
+    const res = await axios.get<T>(path)
+    return res.data
+  }
+  async function patch<T>(path: string, body: Partial<T>) {
+    const res = await axios.patch<T>(path, body)
+    return res.data
+  }
+  async function post<T>(path: string, body: Partial<T>) {
+    const res = await axios.post<T>(path, body)
+    return res.data
+  }
+  async function create<T>(path: string, body: Partial<T>) {
+    // unauthed POST
+    const res = await axios.post<T>(path, body)
+    return res.data
+  }
+  async function destroy(path: string) {
+    const res = await axios.delete<string>(path)
+    return res.data
+  }
+
+  return (
+    <AppContext.Provider value={{ get, patch, post, create, destroy }}>
+      {children}
+    </AppContext.Provider>
+  )
 }
 
 export const useAppContext = () => {

frontend/src/hooks/create/useCreateUser.ts

@@ -0,0 +1,9 @@
+import { useAppContext } from '../../contexts/AppContext'
+import { User } from '../../types'
+
+export const useCreateUser = () => {
+  const api = useAppContext()
+
+  return (body: Omit<User, 'id'>): Promise<User> =>
+    api.post<User>('/users', body)
+}

frontend/src/hooks/getMany/useAccouonts.ts

@@ -0,0 +1,5 @@
+import { Account } from '../../types'
+import { useGet } from '../util/useGet'
+
+export const useAccounts = (userId: string) =>
+  useGet<Account[]>(`/users/${userId}/accounts`)

frontend/src/hooks/getMany/useTransactions.ts

@@ -0,0 +1 @@
+export const useTransactions = () => {}

frontend/src/hooks/getOne/useUser.ts

@@ -0,0 +1,4 @@
+import { User } from '../../types'
+import { useGet } from '../util/useGet'
+
+export const useUser = (id: string) => useGet<User>(`/user/${id}`)

frontend/src/hooks/update/useUpdateUser.ts

@@ -0,0 +1,9 @@
+import { useAppContext } from '../../contexts/AppContext'
+import { User } from '../../types'
+
+export const useUpdateUser = () => {
+  const api = useAppContext()
+
+  return (id: string, body: Partial<User>): Promise<User> =>
+    api.patch<User>(`/users/${id}`, body)
+}

frontend/src/hooks/util/useGet.ts

@@ -0,0 +1,27 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useAppContext } from '../../contexts/AppContext'
+
+type Res<T> = {
+  data: T
+}
+
+export const useGet = <T>(path: string) => {
+  const appContext = useRef(useAppContext())
+  const [data, setData] = useState<T | null>(null)
+
+  const get = useCallback(async () => {
+    // if (appContext.current.mock) return setData(mockGet[path]?.() || null)
+
+    const data = await appContext.current.get<Res<T>>(path)
+    if (!data) return
+
+    setData(data.data)
+  }, [path])
+
+  useEffect(() => {
+    get()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return { data, get }
+}