From 1904bb8668f142d8456dacc543effc252f1e4e15 Mon Sep 17 00:00:00 2001 From: Elijah Lucian Date: Wed, 14 Apr 2021 18:16:50 -0600 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=95=F0=9F=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 - frontend/src/App.tsx | 14 +++++-- frontend/src/api/data/index.ts | 7 ---- frontend/src/api/data/users.ts | 12 ++++++ frontend/src/api/index.ts | 2 +- frontend/src/contexts/AppContext.tsx | 28 ++++++++++++++ frontend/src/contexts/UserContext.tsx | 32 ++++------------ frontend/src/hooks/useGet.ts | 53 --------------------------- 8 files changed, 59 insertions(+), 91 deletions(-) delete mode 100644 frontend/src/api/data/index.ts create mode 100644 frontend/src/api/data/users.ts create mode 100644 frontend/src/contexts/AppContext.tsx delete mode 100644 frontend/src/hooks/useGet.ts 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 } - } -}