diff --git a/package-lock.json b/package-lock.json index d0859ef2..c909ff29 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "license": "MIT", "dependencies": { "@heroicons/react": "^2.0.17", - "leaflet": "^1.9.3", + "leaflet": "^1.9.4", "react-leaflet": "^4.2.1", "react-leaflet-cluster": "^2.1.0", "react-router-dom": "^6.11.2", @@ -2523,9 +2523,9 @@ } }, "node_modules/leaflet": { - "version": "1.9.3", - "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.3.tgz", - "integrity": "sha512-iB2cR9vAkDOu5l3HAay2obcUHZ7xwUBBjph8+PGtmW/2lYhbLizWtG7nTeYht36WfOslixQF9D/uSIzhZgGMfQ==" + "version": "1.9.4", + "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz", + "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==" }, "node_modules/leaflet.markercluster": { "version": "1.5.3", diff --git a/package.json b/package.json index b8194673..729bcaa0 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,7 @@ }, "dependencies": { "@heroicons/react": "^2.0.17", - "leaflet": "^1.9.3", + "leaflet": "^1.9.4", "react-leaflet": "^4.2.1", "react-leaflet-cluster": "^2.1.0", "react-router-dom": "^6.11.2", diff --git a/src/Components/AppShell/AppShell.tsx b/src/Components/AppShell/AppShell.tsx index 01ae03d7..2b22ad3d 100644 --- a/src/Components/AppShell/AppShell.tsx +++ b/src/Components/AppShell/AppShell.tsx @@ -3,7 +3,7 @@ import NavBar from './NavBar' import { BrowserRouter } from 'react-router-dom' import { ToastContainer } from 'react-toastify' -export function AppShell({ name, useAuth, children }) { +export function AppShell({ appName, useAuth, children }) { return ( - +
{children}
diff --git a/src/Components/AppShell/NavBar.tsx b/src/Components/AppShell/NavBar.tsx index 18257f94..f9f6c3a0 100644 --- a/src/Components/AppShell/NavBar.tsx +++ b/src/Components/AppShell/NavBar.tsx @@ -5,12 +5,28 @@ import { toast } from "react-toastify"; import QuestionMarkIcon from '@heroicons/react/24/outline/QuestionMarkCircleIcon' import * as React from "react"; -export default function NavBar({name, useAuth} : {name: string, useAuth : any}) { +export default function NavBar({appName, useAuth} : {appName: string, useAuth : any}) { const [email, setEmail] = useState(""); + const [userName, setUserName] = useState(""); const [password, setPassword] = useState(""); - const { isAuthenticated, user, login, loading, logout, token } = useAuth(); + const { isAuthenticated, user, login, register, loading, logout, token } = useAuth(); + + const onRegister = () => { + toast.promise( + register({ email: email, password: password}, userName), + { + success: { + render({data}){ + return `Hi ${data?.first_name}` + }, + // other options + icon: "✌️", + }, + error: 'Error' + }); + } const onLogin = () => { toast.promise( @@ -39,7 +55,7 @@ export default function NavBar({name, useAuth} : {name: string, useAuth : any})
-

{name}

+

{appName}

@@ -49,11 +65,11 @@ export default function NavBar({name, useAuth} : {name: string, useAuth : any}) {isAuthenticated && token ?
-
+ {user.avatar ?
-
-
+
+
: <>}
{user?.first_name}
: -
- -
-
- setEmail(e.target.value)} className="tw-input tw-input-bordered tw-w-full tw-max-w-xs" /> - setPassword(e.target.value)} className="tw-input tw-input-bordered tw-w-full tw-max-w-xs" /> -
- +
+
+ +
+
+ setEmail(e.target.value)} className="tw-input tw-input-bordered tw-w-full tw-max-w-xs" /> + setPassword(e.target.value)} className="tw-input tw-input-bordered tw-w-full tw-max-w-xs" /> +
+ +
+
+
+
+
+ +
+
+ setUserName(e.target.value)} className="tw-input tw-input-bordered tw-w-full tw-max-w-xs" /> + setEmail(e.target.value)} className="tw-input tw-input-bordered tw-w-full tw-max-w-xs" /> + setPassword(e.target.value)} className="tw-input tw-input-bordered tw-w-full tw-max-w-xs" /> +
+ +
diff --git a/src/Components/Auth/authDirectus.tsx b/src/Components/Auth/authDirectus.tsx index d9ad079b..b8112ff3 100644 --- a/src/Components/Auth/authDirectus.tsx +++ b/src/Components/Auth/authDirectus.tsx @@ -28,6 +28,7 @@ type AuthContextProps = { isAuthenticated: Boolean, user: MyUserItem | null; login: (credentials: AuthCredentials) => Promise, + register: (credentials: AuthCredentials, userName: string) => Promise, loading: Boolean, logout: () => void, updateUser: (user: MyUserItem) => any, @@ -38,6 +39,7 @@ const AuthContext = createContext({ isAuthenticated: false, user: null, login: () => Promise.reject(), + register: () => Promise.reject(), loading: false, logout: () => { }, updateUser: () => Promise.reject(), @@ -87,6 +89,18 @@ export const AuthProviderDirectus = ({ directus, children }: AuthProviderProps) }; } + 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}); + return (await login(credentials)); + } catch (error: any) { + setLoading(false); + console.log(error); + + return error.response.data.error[0]; + }; + } const logout = async () => { @@ -96,9 +110,10 @@ export const AuthProviderDirectus = ({ directus, children }: AuthProviderProps) const updateUser = async (user: MyUserItem) => { setLoading(true); + const { id, ...userRest } = user; try { - const res = await directus.users.updateOne(user.id!, user) + const res = await directus.users.updateOne(user.id!, userRest) setUser(res as any); setLoading(false); return res as any; @@ -115,7 +130,7 @@ export const AuthProviderDirectus = ({ directus, children }: AuthProviderProps) return ( {children} diff --git a/src/Components/Map/UtopiaMap.tsx b/src/Components/Map/UtopiaMap.tsx index 2aa2eec9..c874c5b9 100644 --- a/src/Components/Map/UtopiaMap.tsx +++ b/src/Components/Map/UtopiaMap.tsx @@ -39,7 +39,6 @@ function MapEventListener(props: MapEventListenerProps) { // for refreshing map on resize (needs to be implemented) const mapDivRef = React.createRef(); -/** This is a description of the foo function. */ function UtopiaMap({ height = "500px", width = "100%", diff --git a/src/Components/Profile/Settings.tsx b/src/Components/Profile/Settings.tsx index 4172b6bd..47d168a6 100644 --- a/src/Components/Profile/Settings.tsx +++ b/src/Components/Profile/Settings.tsx @@ -1,5 +1,5 @@ import { useEffect, useState } from 'react' -import TitleCard from '../TitleCard' +import {TitleCard} from '../Templates/TitleCard' import InputText from '../Input/InputText' import TextAreaInput from '../Input/TextAreaInput' import { toast } from 'react-toastify'; diff --git a/src/Components/Templates/CardPage.tsx b/src/Components/Templates/CardPage.tsx new file mode 100644 index 00000000..f7099f01 --- /dev/null +++ b/src/Components/Templates/CardPage.tsx @@ -0,0 +1,27 @@ +import { Link } from "react-router-dom" +import * as React from "react" +import {TitleCard} from "./TitleCard" + + +export function CardPage({title,children} : { + title: string, + children?: React.ReactNode, +}) { + + + return ( +
+
+
+
    +
  • Home
    • +
  • FAQ
    • +
+
+ + {children} + +
+
+ ) +} diff --git a/src/Components/TitleCard.tsx b/src/Components/Templates/TitleCard.tsx similarity index 85% rename from src/Components/TitleCard.tsx rename to src/Components/Templates/TitleCard.tsx index 6b617e7a..abacda06 100644 --- a/src/Components/TitleCard.tsx +++ b/src/Components/Templates/TitleCard.tsx @@ -1,4 +1,4 @@ -import Subtitle from "./Typography/Subtitle" +import Subtitle from "../Typography/Subtitle" import * as React from "react" interface TitleCardProps { @@ -9,7 +9,7 @@ interface TitleCardProps { TopSideButtons?: any } - function TitleCard({title, children, topMargin, TopSideButtons} : TitleCardProps){ + export function TitleCard({title, children, topMargin, TopSideButtons} : TitleCardProps){ return(
@@ -33,6 +33,3 @@ interface TitleCardProps { ) } - - - export default TitleCard \ No newline at end of file diff --git a/src/Components/Templates/index.tsx b/src/Components/Templates/index.tsx new file mode 100644 index 00000000..14848776 --- /dev/null +++ b/src/Components/Templates/index.tsx @@ -0,0 +1,2 @@ +export {CardPage} from './CardPage' +export {TitleCard} from './TitleCard' diff --git a/src/index.tsx b/src/index.tsx index 796364ae..478703d7 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -3,6 +3,8 @@ export {AppShell, Content, SideBar} from "./Components/AppShell" export {AuthProviderDirectus, useAuthDirectus} from "./Components/Auth" export {Settings} from './Components/Profile' export {Quests, Modal} from './Components/Gaming' +export {TitleCard, CardPage} from './Components/Templates' + import "./index.css" declare global {