adding user hooks to replace api

frontend/package-lock.json

@@ -8,7 +8,6 @@
       "version": "0.1.0",
       "dependencies": {
         "@dank-inc/data-buddy": "^0.2.0",
-        "@dank-inc/use-get": "^0.3.3",
         "@testing-library/react": "^11.1.0",
         "@testing-library/user-event": "^12.1.10",
         "@types/node": "^12.0.0",
@@ -1588,15 +1587,6 @@
       "resolved": "https://registry.npmjs.org/@dank-inc/lewps/-/lewps-0.10.1.tgz",
       "integrity": "sha512-hGybsClbMGKb+6v281JRifz9codj2TakcPe+pC4/EOXvgxu3iCYz4h5TFio7eUZzysLz6iGyIN9XmoUhc766Sw=="
     },
-    "node_modules/@dank-inc/use-get": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/@dank-inc/use-get/-/use-get-0.3.3.tgz",
-      "integrity": "sha512-eYiYe29NRRhIIZ08j5/ajo48OXXhcBNpl3ct2+L891ACKwy4ZxHsEJKl4lieSG/vctNo8Zlu+x9X10oqf3+4Yw==",
-      "license": "ISC",
-      "peerDependencies": {
-        "react": "^17.0.2"
-      }
-    },
     "node_modules/@eslint/eslintrc": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.0.tgz",
@@ -22879,12 +22869,6 @@
       "resolved": "https://registry.npmjs.org/@dank-inc/lewps/-/lewps-0.10.1.tgz",
       "integrity": "sha512-hGybsClbMGKb+6v281JRifz9codj2TakcPe+pC4/EOXvgxu3iCYz4h5TFio7eUZzysLz6iGyIN9XmoUhc766Sw=="
     },
-    "@dank-inc/use-get": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/@dank-inc/use-get/-/use-get-0.3.3.tgz",
-      "integrity": "sha512-eYiYe29NRRhIIZ08j5/ajo48OXXhcBNpl3ct2+L891ACKwy4ZxHsEJKl4lieSG/vctNo8Zlu+x9X10oqf3+4Yw==",
-      "requires": {}
-    },
     "@eslint/eslintrc": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.0.tgz",

frontend/package.json

@@ -4,7 +4,6 @@
   "private": true,
   "dependencies": {
     "@dank-inc/data-buddy": "^0.2.0",
-    "@dank-inc/use-get": "^0.3.3",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "@types/node": "^12.0.0",

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 }
+}

frontend/yarn.lock

@@ -1212,11 +1212,6 @@
   "resolved" "https://registry.npmjs.org/@dank-inc/lewps/-/lewps-0.10.1.tgz"
   "version" "0.10.1"
 
-"@dank-inc/use-get@^0.3.3":
-  "integrity" "sha512-eYiYe29NRRhIIZ08j5/ajo48OXXhcBNpl3ct2+L891ACKwy4ZxHsEJKl4lieSG/vctNo8Zlu+x9X10oqf3+4Yw=="
-  "resolved" "https://registry.npmjs.org/@dank-inc/use-get/-/use-get-0.3.3.tgz"
-  "version" "0.3.3"
-
 "@eslint/eslintrc@^0.4.0":
   "integrity" "sha512-2ZPCc+uNbjV5ERJr+aKSPRwZgKd2z11x0EgLvb1PURmUrn9QNRXFqje0Ldq454PfAVyaJYyrDvvIKSFP4NnBog=="
   "resolved" "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.0.tgz"
@@ -10173,7 +10168,7 @@
   optionalDependencies:
     "fsevents" "^2.1.3"
 
-"react@*", "react@^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0", "react@^17.0.1", "react@^17.0.2", "react@>= 16", "react@>= 16.9.0", "react@>=15", "react@>=16.0.0", "react@>=16.9.0", "react@17.0.2":
+"react@*", "react@^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0", "react@^17.0.1", "react@>= 16", "react@>= 16.9.0", "react@>=15", "react@>=16.0.0", "react@>=16.9.0", "react@17.0.2":
   "integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA=="
   "resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
   "version" "17.0.2"