144 lines
3.9 KiB
TypeScript
144 lines
3.9 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
import AuthModal from './AuthModal'
|
|
|
|
interface User {
|
|
id: number
|
|
username: string
|
|
email: string
|
|
}
|
|
|
|
export default function Nav() {
|
|
const [user, setUser] = useState<User | null>(null)
|
|
const [showAuthModal, setShowAuthModal] = useState(false)
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
checkAuth()
|
|
}, [])
|
|
|
|
const checkAuth = async () => {
|
|
try {
|
|
const response = await fetch('/api/auth/session', {
|
|
credentials: 'include',
|
|
})
|
|
if (response.ok) {
|
|
const data = await response.json()
|
|
setUser(data.user)
|
|
}
|
|
} catch (error) {
|
|
console.error('Error checking auth:', error)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const handleLogin = (loggedInUser: User) => {
|
|
setUser(loggedInUser)
|
|
setShowAuthModal(false)
|
|
}
|
|
|
|
const handleLogout = async () => {
|
|
try {
|
|
await fetch('/api/auth/logout', {
|
|
method: 'POST',
|
|
credentials: 'include',
|
|
})
|
|
setUser(null)
|
|
} catch (error) {
|
|
console.error('Error logging out:', error)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<nav>
|
|
<div className="brand">
|
|
<a href="/" style={{ display: 'inline-block', textDecoration: 'none' }}>
|
|
<img src="/header.jpg" alt="420Deals.ch" style={{ height: '40px', width: 'auto' }} />
|
|
</a>
|
|
</div>
|
|
<div className="links">
|
|
<a href="#drop">Drop</a>
|
|
<a href="#past">Past Drops</a>
|
|
<a href="#community">Community</a>
|
|
{!loading && (
|
|
user ? (
|
|
<>
|
|
<span style={{ color: 'var(--muted)', fontSize: '14px', marginLeft: '48px' }}>
|
|
{user.username}
|
|
</span>
|
|
<a
|
|
href="/orders"
|
|
style={{
|
|
background: 'transparent',
|
|
border: '1px solid var(--border)',
|
|
color: 'var(--text)',
|
|
padding: '8px 16px',
|
|
borderRadius: '8px',
|
|
fontSize: '14px',
|
|
marginLeft: '12px',
|
|
lineHeight: '1',
|
|
boxSizing: 'border-box',
|
|
display: 'inline-block',
|
|
textDecoration: 'none',
|
|
cursor: 'pointer',
|
|
}}
|
|
>
|
|
Orders
|
|
</a>
|
|
<button
|
|
onClick={handleLogout}
|
|
style={{
|
|
background: 'transparent',
|
|
border: '1px solid #e57373',
|
|
color: '#e57373',
|
|
padding: '8px 16px',
|
|
borderRadius: '8px',
|
|
cursor: 'pointer',
|
|
fontSize: '14px',
|
|
marginLeft: '12px',
|
|
lineHeight: '1',
|
|
boxSizing: 'border-box',
|
|
display: 'inline-block',
|
|
}}
|
|
>
|
|
Logout
|
|
</button>
|
|
</>
|
|
) : (
|
|
<button
|
|
onClick={() => setShowAuthModal(true)}
|
|
style={{
|
|
padding: '8px 16px',
|
|
fontSize: '14px',
|
|
background: '#0a7931',
|
|
color: '#fff',
|
|
border: 'none',
|
|
borderRadius: '8px',
|
|
cursor: 'pointer',
|
|
fontWeight: 500,
|
|
marginLeft: '48px',
|
|
lineHeight: '1',
|
|
boxSizing: 'border-box',
|
|
display: 'inline-block',
|
|
}}
|
|
>
|
|
Login
|
|
</button>
|
|
)
|
|
)}
|
|
</div>
|
|
</nav>
|
|
|
|
<AuthModal
|
|
isOpen={showAuthModal}
|
|
onClose={() => setShowAuthModal(false)}
|
|
onLogin={handleLogin}
|
|
/>
|
|
</>
|
|
)
|
|
}
|
|
|