diff --git a/README.md b/README.md
index fb2b5e3..af77df9 100644
--- a/README.md
+++ b/README.md
@@ -20,11 +20,9 @@ python manage.py createsuperuser --email admin@example.com --username admin --pa
# Frontend
-- [x] useGet hook
- [x] User context
- [x] auth api
- [ ] user crud api (new user flow)
-- [ ] socket hook
# Backend
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 8b5eec4..b45e22f 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,14 +1,22 @@
import { BrowserRouter } from 'react-router-dom'
import { UserContextProvider } from './contexts/UserContext'
import { CoreLayout } from './app/CoreLayout'
+import { AppContextProvider } from './contexts/AppContext'
+import { Api } from './api'
+import { users } from './api/data/users'
+
import './scss/app.scss'
const App = () => {
+ const api = new Api({ mock: true, users })
+
return (
-
-
-
+
+
+
+
+
)
}
diff --git a/frontend/src/api/data/index.ts b/frontend/src/api/data/index.ts
deleted file mode 100644
index 0b3ea0d..0000000
--- a/frontend/src/api/data/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { User } from '../../types'
-
-export const mockUser: User = {
- id: '4242-4242-4242-4242',
- username: 'TestUser42',
- email: 'testuser@email.com',
-}
diff --git a/frontend/src/api/data/users.ts b/frontend/src/api/data/users.ts
new file mode 100644
index 0000000..435ab55
--- /dev/null
+++ b/frontend/src/api/data/users.ts
@@ -0,0 +1,12 @@
+import { DataBuddy } from '@dank-inc/data-buddy'
+import { User } from '../../types'
+
+const userRecords: User[] = [
+ {
+ id: '42',
+ username: 'TestUser42',
+ email: 'testuser@email.com',
+ },
+]
+
+export const users = new DataBuddy(userRecords)
diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts
index d2644a5..79443bd 100644
--- a/frontend/src/api/index.ts
+++ b/frontend/src/api/index.ts
@@ -51,7 +51,7 @@ export class Api {
}
}
-export const logOut = () => {
+export const logOut = async () => {
wipeJWT()
// axios -> delete session?
}
diff --git a/frontend/src/contexts/AppContext.tsx b/frontend/src/contexts/AppContext.tsx
new file mode 100644
index 0000000..d5f9215
--- /dev/null
+++ b/frontend/src/contexts/AppContext.tsx
@@ -0,0 +1,28 @@
+import React, { createContext, useContext } from 'react'
+import { Api } from '../api'
+
+type Props = {
+ children: React.ReactNode
+ api: Api
+}
+type Context = {
+ api: Api
+}
+
+// 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 useAppContext = () => {
+ const context = useContext(AppContext)
+
+ if (!context)
+ throw new Error(
+ 'AppContext must be called from within the AppContextProvider',
+ )
+
+ return context
+}
diff --git a/frontend/src/contexts/UserContext.tsx b/frontend/src/contexts/UserContext.tsx
index 19eaae9..06589bf 100644
--- a/frontend/src/contexts/UserContext.tsx
+++ b/frontend/src/contexts/UserContext.tsx
@@ -11,7 +11,8 @@ import { message } from 'antd'
import { useHistory } from 'react-router'
import { User } from '../types'
-import { getLoggedInUser, logIn, logOut } from '../api'
+import { useAppContext } from './AppContext'
+import { logOut } from '../api'
type Props = {
children: React.ReactNode
@@ -27,36 +28,17 @@ type Context = {
const UserContext = createContext(null)
export const UserContextProvider = ({ children }: Props) => {
+ const { api } = useAppContext()
const history = useHistory()
const [user, setUser] = useState(null)
- useEffect(() => {
- const login = async () => {
- try {
- // const res = axios.post('/dj-rest-auth/login', {
- // email: 'blah',
- // password: 'blah',
- // })
- const user = await getLoggedInUser()
- if (!user) throw new Error()
- setUser(user)
-
- message.success(`logged in as ${user?.username}`, 0.5)
- } catch {
- // this can possibly be handled better
- message.error('Login Failed')
- window.location.reload()
- }
- }
-
- login()
- }, [])
-
const handleLogin = async (username: string, password: string) => {
try {
- const user = await logIn(username, password)
- if (!user) throw new Error('Problem logging in!')
+ const { id } = await api.login(username, password)
+ if (!id) throw new Error('Problem logging in!')
+ const user = await api.getUser(id)
+
setUser(user)
message.success(`logged in as ${user?.username}`, 0.5)
} catch (err) {
diff --git a/frontend/src/hooks/useGet.ts b/frontend/src/hooks/useGet.ts
deleted file mode 100644
index 6fb322c..0000000
--- a/frontend/src/hooks/useGet.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { useCallback, useEffect, useState } from 'react'
-import Axios from 'axios'
-import { setHeaders } from '../utils/jwt'
-
-type Options = {
- subscribe: boolean
-}
-
-export type Response =
- | {
- data: T
- loading: false
- error: false
- refetch: () => void
- }
- | {
- data: null
- loading: false
- error: true
- refetch: () => void
- }
- | {
- data: null
- loading: true
- error: false
- refetch: () => void
- }
-
-export const useGet = (path: string, options?: Options): Response => {
- const [data, setData] = useState(null)
- const [error, setError] = useState(false)
-
- const get = useCallback(async () => {
- try {
- const { data } = await Axios.get(`/api/${path}`, { ...setHeaders() })
- setData(data)
- } catch (err) {
- setError(true)
- }
- }, [path])
-
- useEffect(() => {
- get()
- }, [get])
-
- if (data) {
- return { data, loading: false, error: false, refetch: get }
- } else if (error) {
- return { data: null, loading: false, error: true, refetch: get }
- } else {
- return { data: null, loading: true, error: false, refetch: get }
- }
-}