Add frontend API client and authentication context
This commit is contained in:
Denis Urs Rudolph
@@ -0,0 +1,245 @@
|
|||||||
|
const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:5000/api';
|
||||||
|
|
||||||
|
// Types
|
||||||
|
export interface User {
|
||||||
|
id: string;
|
||||||
|
email: string;
|
||||||
|
name: string;
|
||||||
|
role: 'Organizer' | 'Participant';
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface AuthResponse {
|
||||||
|
token: string;
|
||||||
|
user: User;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Event {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
eventDate: string;
|
||||||
|
location: string;
|
||||||
|
status: 'Draft' | 'Published' | 'Cancelled' | 'Completed';
|
||||||
|
category?: string;
|
||||||
|
tags: string[];
|
||||||
|
maxParticipants?: number;
|
||||||
|
currentRegistrations: number;
|
||||||
|
createdAt: string;
|
||||||
|
updatedAt: string;
|
||||||
|
organizer: User;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Registration {
|
||||||
|
id: string;
|
||||||
|
eventId: string;
|
||||||
|
eventName: string;
|
||||||
|
eventDate: string;
|
||||||
|
participantId: string;
|
||||||
|
participantName: string;
|
||||||
|
participantEmail: string;
|
||||||
|
status: string;
|
||||||
|
category?: string;
|
||||||
|
emergencyContact?: string;
|
||||||
|
createdAt: string;
|
||||||
|
updatedAt?: string;
|
||||||
|
totalPaid: number;
|
||||||
|
amountDue: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Announcement {
|
||||||
|
id: string;
|
||||||
|
eventId: string;
|
||||||
|
eventName: string;
|
||||||
|
title: string;
|
||||||
|
content: string;
|
||||||
|
authorId: string;
|
||||||
|
authorName: string;
|
||||||
|
createdAt: string;
|
||||||
|
updatedAt?: string;
|
||||||
|
isPublished: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PaymentReport {
|
||||||
|
eventId: string;
|
||||||
|
eventName: string;
|
||||||
|
totalCollected: number;
|
||||||
|
totalPending: number;
|
||||||
|
totalOutstanding: number;
|
||||||
|
totalRegistrations: number;
|
||||||
|
paidRegistrations: number;
|
||||||
|
partialRegistrations: number;
|
||||||
|
unpaidRegistrations: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
// API Client
|
||||||
|
class ApiClient {
|
||||||
|
private token: string | null = null;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
this.token = localStorage.getItem('token');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setToken(token: string) {
|
||||||
|
this.token = token;
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
localStorage.setItem('token', token);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
clearToken() {
|
||||||
|
this.token = null;
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
localStorage.removeItem('token');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getToken(): string | null {
|
||||||
|
return this.token;
|
||||||
|
}
|
||||||
|
|
||||||
|
private async fetch(endpoint: string, options: RequestInit = {}) {
|
||||||
|
const url = `${API_URL}${endpoint}`;
|
||||||
|
const headers: Record<string, string> = {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
...((options.headers as Record<string, string>) || {}),
|
||||||
|
};
|
||||||
|
|
||||||
|
if (this.token) {
|
||||||
|
headers['Authorization'] = `Bearer ${this.token}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await fetch(url, {
|
||||||
|
...options,
|
||||||
|
headers,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const error = await response.json().catch(() => ({ error: 'Unknown error' }));
|
||||||
|
throw new Error(error.error || `HTTP ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (response.status === 204) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Auth
|
||||||
|
async register(email: string, password: string, name: string, role: 'Organizer' | 'Participant' = 'Participant') {
|
||||||
|
const data = await this.fetch('/auth/register', {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify({ email, password, name, role }),
|
||||||
|
});
|
||||||
|
this.setToken(data.token);
|
||||||
|
return data as AuthResponse;
|
||||||
|
}
|
||||||
|
|
||||||
|
async login(email: string, password: string) {
|
||||||
|
const data = await this.fetch('/auth/login', {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify({ email, password }),
|
||||||
|
});
|
||||||
|
this.setToken(data.token);
|
||||||
|
return data as AuthResponse;
|
||||||
|
}
|
||||||
|
|
||||||
|
logout() {
|
||||||
|
this.clearToken();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Events
|
||||||
|
async getEvents(filters?: { category?: string; status?: string; fromDate?: string; toDate?: string }) {
|
||||||
|
const params = new URLSearchParams();
|
||||||
|
if (filters?.category) params.append('category', filters.category);
|
||||||
|
if (filters?.status) params.append('status', filters.status);
|
||||||
|
if (filters?.fromDate) params.append('fromDate', filters.fromDate);
|
||||||
|
if (filters?.toDate) params.append('toDate', filters.toDate);
|
||||||
|
|
||||||
|
const query = params.toString();
|
||||||
|
return this.fetch(`/events${query ? `?${query}` : ''}`) as Promise<Event[]>;
|
||||||
|
}
|
||||||
|
|
||||||
|
async getEvent(id: string) {
|
||||||
|
return this.fetch(`/events/${id}`) as Promise<Event>;
|
||||||
|
}
|
||||||
|
|
||||||
|
async createEvent(event: Partial<Event>) {
|
||||||
|
return this.fetch('/events', {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify(event),
|
||||||
|
}) as Promise<Event>;
|
||||||
|
}
|
||||||
|
|
||||||
|
async updateEvent(id: string, event: Partial<Event>) {
|
||||||
|
return this.fetch(`/events/${id}`, {
|
||||||
|
method: 'PUT',
|
||||||
|
body: JSON.stringify(event),
|
||||||
|
}) as Promise<Event>;
|
||||||
|
}
|
||||||
|
|
||||||
|
async deleteEvent(id: string) {
|
||||||
|
return this.fetch(`/events/${id}`, {
|
||||||
|
method: 'DELETE',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Registrations
|
||||||
|
async createRegistration(eventId: string, category?: string, emergencyContact?: string) {
|
||||||
|
return this.fetch('/registrations', {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify({ eventId, category, emergencyContact }),
|
||||||
|
}) as Promise<Registration>;
|
||||||
|
}
|
||||||
|
|
||||||
|
async getMyRegistrations() {
|
||||||
|
return this.fetch('/registrations/my-registrations') as Promise<Registration[]>;
|
||||||
|
}
|
||||||
|
|
||||||
|
async getEventRegistrations(eventId: string) {
|
||||||
|
return this.fetch(`/registrations/event/${eventId}`) as Promise<Registration[]>;
|
||||||
|
}
|
||||||
|
|
||||||
|
async cancelRegistration(id: string) {
|
||||||
|
return this.fetch(`/registrations/${id}/cancel`, {
|
||||||
|
method: 'POST',
|
||||||
|
}) as Promise<Registration>;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Payments
|
||||||
|
async recordPayment(registrationId: string, amount: number, method: string, transactionId?: string, notes?: string) {
|
||||||
|
return this.fetch('/payments', {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify({ registrationId, amount, method, transactionId, notes }),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async getPaymentReport(eventId: string) {
|
||||||
|
return this.fetch(`/payments/event/${eventId}/report`) as Promise<PaymentReport>;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Announcements
|
||||||
|
async getEventAnnouncements(eventId: string) {
|
||||||
|
return this.fetch(`/announcements/event/${eventId}`) as Promise<Announcement[]>;
|
||||||
|
}
|
||||||
|
|
||||||
|
async createAnnouncement(eventId: string, title: string, content: string) {
|
||||||
|
return this.fetch('/announcements', {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify({ eventId, title, content }),
|
||||||
|
}) as Promise<Announcement>;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dashboard
|
||||||
|
async getOrganizerDashboard() {
|
||||||
|
return this.fetch('/dashboard/organizer');
|
||||||
|
}
|
||||||
|
|
||||||
|
async getParticipantDashboard() {
|
||||||
|
return this.fetch('/dashboard/participant');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const api = new ApiClient();
|
||||||
@@ -0,0 +1,92 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
|
||||||
|
import { api, User, AuthResponse } from './api';
|
||||||
|
|
||||||
|
interface AuthContextType {
|
||||||
|
user: User | null;
|
||||||
|
isLoading: boolean;
|
||||||
|
isAuthenticated: boolean;
|
||||||
|
login: (email: string, password: string) => Promise<void>;
|
||||||
|
register: (email: string, password: string, name: string, role: 'Organizer' | 'Participant') => Promise<void>;
|
||||||
|
logout: () => void;
|
||||||
|
error: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const AuthContext = createContext<AuthContextType | undefined>(undefined);
|
||||||
|
|
||||||
|
export function AuthProvider({ children }: { children: ReactNode }) {
|
||||||
|
const [user, setUser] = useState<User | null>(null);
|
||||||
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Check for existing token on mount
|
||||||
|
const token = api.getToken();
|
||||||
|
if (token) {
|
||||||
|
// Token exists, user is authenticated
|
||||||
|
// In a real app, you might want to validate the token
|
||||||
|
setIsLoading(false);
|
||||||
|
} else {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const login = async (email: string, password: string) => {
|
||||||
|
try {
|
||||||
|
setError(null);
|
||||||
|
setIsLoading(true);
|
||||||
|
const response = await api.login(email, password);
|
||||||
|
setUser(response.user);
|
||||||
|
} catch (err) {
|
||||||
|
setError(err instanceof Error ? err.message : 'Login failed');
|
||||||
|
throw err;
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const register = async (email: string, password: string, name: string, role: 'Organizer' | 'Participant') => {
|
||||||
|
try {
|
||||||
|
setError(null);
|
||||||
|
setIsLoading(true);
|
||||||
|
const response = await api.register(email, password, name, role);
|
||||||
|
setUser(response.user);
|
||||||
|
} catch (err) {
|
||||||
|
setError(err instanceof Error ? err.message : 'Registration failed');
|
||||||
|
throw err;
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const logout = () => {
|
||||||
|
api.logout();
|
||||||
|
setUser(null);
|
||||||
|
setError(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AuthContext.Provider
|
||||||
|
value={{
|
||||||
|
user,
|
||||||
|
isLoading,
|
||||||
|
isAuthenticated: !!user,
|
||||||
|
login,
|
||||||
|
register,
|
||||||
|
logout,
|
||||||
|
error,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</AuthContext.Provider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useAuth() {
|
||||||
|
const context = useContext(AuthContext);
|
||||||
|
if (context === undefined) {
|
||||||
|
throw new Error('useAuth must be used within an AuthProvider');
|
||||||
|
}
|
||||||
|
return context;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user