From 1af8209b99ea5fa3e307044a82828feb6fa27960 Mon Sep 17 00:00:00 2001 From: Elijah Lucian Date: Mon, 12 Jul 2021 21:43:21 -0600 Subject: [PATCH] adding user hooks to replace api --- frontend/package-lock.json | 16 ------- frontend/package.json | 1 - frontend/src/App.tsx | 4 +- frontend/src/contexts/AppContext.tsx | 48 +++++++++++++++---- frontend/src/hooks/create/useCreateUser.ts | 9 ++++ frontend/src/hooks/getMany/useAccouonts.ts | 5 ++ frontend/src/hooks/getMany/useTransactions.ts | 1 + frontend/src/hooks/getOne/useUser.ts | 4 ++ frontend/src/hooks/update/useUpdateUser.ts | 9 ++++ frontend/src/hooks/util/useGet.ts | 27 +++++++++++ frontend/yarn.lock | 7 +-- 11 files changed, 97 insertions(+), 34 deletions(-) create mode 100644 frontend/src/hooks/create/useCreateUser.ts create mode 100644 frontend/src/hooks/getMany/useAccouonts.ts create mode 100644 frontend/src/hooks/getMany/useTransactions.ts create mode 100644 frontend/src/hooks/getOne/useUser.ts create mode 100644 frontend/src/hooks/update/useUpdateUser.ts create mode 100644 frontend/src/hooks/util/useGet.ts diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 3bcaa27..5fa7f84 100644 --- a/frontend/package-lock.json +++ b/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", diff --git a/frontend/package.json b/frontend/package.json index 447a73c..43d1837 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index c1a9ff5..5159905 100644 --- a/frontend/src/App.tsx +++ b/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 ( - + diff --git a/frontend/src/contexts/AppContext.tsx b/frontend/src/contexts/AppContext.tsx index d5f9215..68b6c8a 100644 --- a/frontend/src/contexts/AppContext.tsx +++ b/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: (path: string) => Promise + patch: (path: string, body: Partial) => Promise + post: (path: string, body: Partial) => Promise + create: (path: string, body: Partial) => Promise + destroy: (path: string) => Promise } -// Just find-replace "AppContext" with whatever context name you like. (ie. DankContext) const AppContext = createContext(null) -export const AppContextProvider = ({ api, children }: Props) => { - return {children} +export const AppContextProvider = ({ children, baseURL }: Props) => { + const axios = Axios.create({ baseURL }) + + async function get(path: string): Promise { + const res = await axios.get(path) + return res.data + } + async function patch(path: string, body: Partial) { + const res = await axios.patch(path, body) + return res.data + } + async function post(path: string, body: Partial) { + const res = await axios.post(path, body) + return res.data + } + async function create(path: string, body: Partial) { + // unauthed POST + const res = await axios.post(path, body) + return res.data + } + async function destroy(path: string) { + const res = await axios.delete(path) + return res.data + } + + return ( + + {children} + + ) } export const useAppContext = () => { diff --git a/frontend/src/hooks/create/useCreateUser.ts b/frontend/src/hooks/create/useCreateUser.ts new file mode 100644 index 0000000..d20e820 --- /dev/null +++ b/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): Promise => + api.post('/users', body) +} diff --git a/frontend/src/hooks/getMany/useAccouonts.ts b/frontend/src/hooks/getMany/useAccouonts.ts new file mode 100644 index 0000000..7e447f5 --- /dev/null +++ b/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(`/users/${userId}/accounts`) diff --git a/frontend/src/hooks/getMany/useTransactions.ts b/frontend/src/hooks/getMany/useTransactions.ts new file mode 100644 index 0000000..c65c43c --- /dev/null +++ b/frontend/src/hooks/getMany/useTransactions.ts @@ -0,0 +1 @@ +export const useTransactions = () => {} diff --git a/frontend/src/hooks/getOne/useUser.ts b/frontend/src/hooks/getOne/useUser.ts new file mode 100644 index 0000000..05b6d01 --- /dev/null +++ b/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/${id}`) diff --git a/frontend/src/hooks/update/useUpdateUser.ts b/frontend/src/hooks/update/useUpdateUser.ts new file mode 100644 index 0000000..cb3060f --- /dev/null +++ b/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): Promise => + api.patch(`/users/${id}`, body) +} diff --git a/frontend/src/hooks/util/useGet.ts b/frontend/src/hooks/util/useGet.ts new file mode 100644 index 0000000..2d1e8f8 --- /dev/null +++ b/frontend/src/hooks/util/useGet.ts @@ -0,0 +1,27 @@ +import { useCallback, useEffect, useRef, useState } from 'react' +import { useAppContext } from '../../contexts/AppContext' + +type Res = { + data: T +} + +export const useGet = (path: string) => { + const appContext = useRef(useAppContext()) + const [data, setData] = useState(null) + + const get = useCallback(async () => { + // if (appContext.current.mock) return setData(mockGet[path]?.() || null) + + const data = await appContext.current.get>(path) + if (!data) return + + setData(data.data) + }, [path]) + + useEffect(() => { + get() + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []) + + return { data, get } +} diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 2590e43..2d05ba7 100644 --- a/frontend/yarn.lock +++ b/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"