diff --git a/src/Components/AppShell/NavBar.tsx b/src/Components/AppShell/NavBar.tsx index f9f6c3a0..9507f044 100644 --- a/src/Components/AppShell/NavBar.tsx +++ b/src/Components/AppShell/NavBar.tsx @@ -63,7 +63,7 @@ export default function NavBar({appName, useAuth} : {appName: string, useAuth : - {isAuthenticated && token ? + {isAuthenticated ?
{user.avatar ?
@@ -83,8 +83,10 @@ export default function NavBar({appName, useAuth} : {appName: string, useAuth :
- : + :
+ +
- + + } diff --git a/src/Components/Auth/index.tsx b/src/Components/Auth/index.tsx index a9f62c0e..415ff395 100644 --- a/src/Components/Auth/index.tsx +++ b/src/Components/Auth/index.tsx @@ -1 +1 @@ -export {AuthProviderDirectus, useAuthDirectus} from "./authDirectus" \ No newline at end of file +export {AuthProvider, useAuth} from "./useAuth" \ No newline at end of file diff --git a/src/Components/Auth/authDirectus.tsx b/src/Components/Auth/useAuth.tsx similarity index 58% rename from src/Components/Auth/authDirectus.tsx rename to src/Components/Auth/useAuth.tsx index b8112ff3..c54a1fe5 100644 --- a/src/Components/Auth/authDirectus.tsx +++ b/src/Components/Auth/useAuth.tsx @@ -1,9 +1,10 @@ import { createContext, useState, useContext, useEffect } from "react"; import * as React from "react"; +import { UserApi, UserItem } from "../../types"; type AuthProviderProps = { - directus: any, + userApi: UserApi, children?: React.ReactNode } @@ -15,23 +16,14 @@ type AuthCredentials = { -export type MyUserItem = { - id: string; - avatar: string; - first_name: string; - description: string; - email: string; - password?: string; -} - type AuthContextProps = { isAuthenticated: Boolean, - user: MyUserItem | null; - login: (credentials: AuthCredentials) => Promise, - register: (credentials: AuthCredentials, userName: string) => Promise, + user: UserItem | null; + login: (credentials: AuthCredentials) => Promise, + register: (credentials: AuthCredentials, userName: string) => Promise, loading: Boolean, logout: () => void, - updateUser: (user: MyUserItem) => any, + updateUser: (user: UserItem) => any, token: String | null } @@ -46,82 +38,75 @@ const AuthContext = createContext({ token: "" }); -export const AuthProviderDirectus = ({ directus, children }: AuthProviderProps) => { - const [user, setUser] = useState(null); +export const AuthProvider = ({ userApi, children }: AuthProviderProps) => { + const [user, setUser] = useState(null); const [token, setToken] = useState(null); const [loading, setLoading] = useState(false); const isAuthenticated = !!user; useEffect(() => { - setLoading(true); - loadUserFromDirectus(); + loadUser(); setLoading(false) }, []); - async function loadUserFromDirectus(): Promise { + async function loadUser(): Promise { try { - const token = await directus.auth.token - if (token) { - const me = await directus.users.me.read(); - setUser(me as MyUserItem); + const me = await userApi.getUser(); + setUser(me as UserItem); + const token = await userApi.getToken(); setToken(token); setLoading(false); - return me as MyUserItem; - } - else return undefined; + return me as UserItem; } catch (error) { setLoading(false) return undefined; } } - const login = async (credentials: AuthCredentials): Promise => { + const login = async (credentials: AuthCredentials): Promise => { setLoading(true); try { - const res = await directus.auth.login(credentials); - return (await loadUserFromDirectus()); + const res = await userApi.login(credentials.email, credentials.password); + setToken(res.access_token); + return (await loadUser()); } catch (error: any) { setLoading(false); console.log(error.response.data.error[0]); - return error.response.data.error[0]; }; } - const register = async (credentials: AuthCredentials, userName): Promise => { + const register = async (credentials: AuthCredentials, userName): Promise => { setLoading(true); try { - const res = await directus.users.createOne({email: credentials.email, password: credentials.password, first_name: userName}); + const res = await userApi.register(credentials.email, credentials.password, userName) return (await login(credentials)); } catch (error: any) { setLoading(false); console.log(error); - return error.response.data.error[0]; }; } const logout = async () => { - await directus.auth.logout(); + await userApi.logout(); setUser(null); }; - const updateUser = async (user: MyUserItem) => { + const updateUser = async (user: UserItem) => { setLoading(true); const { id, ...userRest } = user; try { - const res = await directus.users.updateOne(user.id!, userRest) + const res = await userApi.updateUser(userRest); setUser(res as any); setLoading(false); return res as any; } catch (error: any) { setLoading(false); - console.log(error.response.data.error[0]); - return error.response.data.error[0]; } @@ -136,4 +121,4 @@ export const AuthProviderDirectus = ({ directus, children }: AuthProviderProps) ); }; -export const useAuthDirectus = () => useContext(AuthContext); \ No newline at end of file +export const useAuth = () => useContext(AuthContext); \ No newline at end of file diff --git a/src/Components/Map/Layer.tsx b/src/Components/Map/Layer.tsx index 08eea658..ea8b2dd1 100644 --- a/src/Components/Map/Layer.tsx +++ b/src/Components/Map/Layer.tsx @@ -56,8 +56,8 @@ export const Layer = (props: LayerProps) => { }) props.api?.getItems().then(result => { - if (result.data) { - result.data.map(item => { + if (result) { + result.map(item => { if (item.position) { addItem(({ layer: props, api: props.api, ...item })); } diff --git a/src/index.tsx b/src/index.tsx index 478703d7..b5f64a07 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,6 +1,6 @@ -export { UtopiaMap, Layer, Tags, Item, Tag, ItemsApi } from './Components/Map/index'; +export { UtopiaMap, Layer, Tags, Item, Tag } from './Components/Map/index'; export {AppShell, Content, SideBar} from "./Components/AppShell" -export {AuthProviderDirectus, useAuthDirectus} from "./Components/Auth" +export {AuthProvider, useAuth} from "./Components/Auth" export {Settings} from './Components/Profile' export {Quests, Modal} from './Components/Gaming' export {TitleCard, CardPage} from './Components/Templates' diff --git a/src/types.ts b/src/types.ts index 072bc97a..3eec3775 100644 --- a/src/types.ts +++ b/src/types.ts @@ -67,4 +67,22 @@ export interface ItemsApi { createItem?(item : T): Promise, updateItem?(item : T): Promise, deleteItem?(id : number | string): Promise, +} + +export interface UserApi { + register(email: string, password: string, userName: string): Promise, + login(email: string, password: string): Promise, + logout(): Promise, + getUser(): Promise, + getToken(): Promise, + updateUser(user: UserItem): Promise +} + +export type UserItem = { + id?: string; + avatar: string; + first_name: string; + description: string; + email: string; + password?: string; } \ No newline at end of file