Files
fotospiel-app/resources/js/guest/services/photosApi.ts

245 lines
6.8 KiB
TypeScript

import { getDeviceId } from '../lib/device';
export type UploadError = Error & {
code?: string;
status?: number;
meta?: Record<string, unknown>;
};
function getCsrfToken(): string | null {
// Method 1: Meta tag (preferred for SPA)
const metaToken = document.querySelector('meta[name="csrf-token"]');
if (metaToken) {
return (metaToken as HTMLMetaElement).getAttribute('content') || null;
}
// Method 2: XSRF-TOKEN cookie (Sanctum fallback)
const name = 'XSRF-TOKEN=';
const decodedCookie = decodeURIComponent(document.cookie);
const ca = decodedCookie.split(';');
for (let i = 0; i < ca.length; i++) {
const c = ca[i].trimStart();
if (c.startsWith(name)) {
const token = c.substring(name.length);
try {
// Decode base64 if needed
return decodeURIComponent(atob(token));
} catch {
return token;
}
}
}
console.warn('No CSRF token found - API requests may fail');
return null;
}
function getCsrfHeaders(): Record<string, string> {
const token = getCsrfToken();
const headers: Record<string, string> = {
'X-Device-Id': getDeviceId(),
'Accept': 'application/json',
};
if (token) {
headers['X-CSRF-TOKEN'] = token;
headers['X-XSRF-TOKEN'] = token;
}
return headers;
}
export async function likePhoto(id: number): Promise<number> {
const headers = getCsrfHeaders();
const res = await fetch(`/api/v1/photos/${id}/like`, {
method: 'POST',
credentials: 'include',
headers: {
...headers,
'Content-Type': 'application/json',
},
});
if (!res.ok) {
let payload: any = null;
try {
payload = await res.clone().json();
} catch {}
if (res.status === 419) {
const error: UploadError = new Error('CSRF token mismatch. Please refresh the page and try again.');
error.code = 'csrf_mismatch';
error.status = res.status;
throw error;
}
const error: UploadError = new Error(
payload?.error?.message ?? `Like failed: ${res.status}`
);
error.code = payload?.error?.code ?? 'like_failed';
error.status = res.status;
if (payload?.error?.meta) {
error.meta = payload.error.meta as Record<string, unknown>;
}
throw error;
}
const json = await res.json();
return json.likes_count ?? json.data?.likes_count ?? 0;
}
type UploadOptions = {
onProgress?: (percent: number) => void;
signal?: AbortSignal;
maxRetries?: number;
onRetry?: (attempt: number) => void;
};
export async function uploadPhoto(
eventToken: string,
file: File,
taskId?: number,
emotionSlug?: string,
options: UploadOptions = {}
): Promise<number> {
const formData = new FormData();
formData.append('photo', file, file.name || `photo-${Date.now()}.jpg`);
if (taskId) formData.append('task_id', taskId.toString());
if (emotionSlug) formData.append('emotion_slug', emotionSlug);
formData.append('device_id', getDeviceId());
const maxRetries = options.maxRetries ?? 2;
const url = `/api/v1/events/${encodeURIComponent(eventToken)}/upload`;
const headers = getCsrfHeaders();
const attemptUpload = (attempt: number): Promise<any> =>
new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.withCredentials = true;
xhr.responseType = 'json';
Object.entries(headers).forEach(([key, value]) => {
xhr.setRequestHeader(key, value);
});
if (options.signal) {
const onAbort = () => xhr.abort();
options.signal.addEventListener('abort', onAbort, { once: true });
}
xhr.upload.onprogress = (event) => {
if (event.lengthComputable && options.onProgress) {
const percent = Math.min(99, Math.round((event.loaded / event.total) * 100));
options.onProgress(percent);
}
};
xhr.onload = () => {
const status = xhr.status;
const payload = xhr.response ?? null;
if (status >= 200 && status < 300) {
resolve(payload);
return;
}
const error: UploadError = new Error(
payload?.error?.message ?? `Upload failed: ${status}`
);
error.code = payload?.error?.code ?? (status === 0 ? 'network_error' : 'upload_failed');
error.status = status;
if (payload?.error?.meta) {
error.meta = payload.error.meta as Record<string, unknown>;
}
reject(error);
};
xhr.onerror = () => {
const error: UploadError = new Error('Network error during upload');
error.code = 'network_error';
reject(error);
};
xhr.ontimeout = () => {
const error: UploadError = new Error('Upload timed out');
error.code = 'timeout';
reject(error);
};
xhr.send(formData);
});
for (let attempt = 0; attempt <= maxRetries; attempt++) {
try {
const json = await attemptUpload(attempt + 1);
return json?.photo_id ?? json?.id ?? json?.data?.id ?? 0;
} catch (error) {
const err = error as UploadError;
if (attempt < maxRetries && (err.code === 'network_error' || (err.status ?? 0) >= 500)) {
options.onRetry?.(attempt + 1);
const delay = 300 * (attempt + 1);
await new Promise((resolve) => setTimeout(resolve, delay));
continue;
}
// Map CSRF mismatch specifically for caller handling
if ((err.status ?? 0) === 419) {
err.code = 'csrf_mismatch';
}
// Flag common validation failure for file size/validation
if ((err.status ?? 0) === 422 && !err.code) {
err.code = 'validation_error';
}
throw err;
}
}
throw new Error('Upload failed after retries');
}
export async function createPhotoShareLink(eventToken: string, photoId: number): Promise<{ slug: string; url: string; expires_at?: string }> {
const headers = getCsrfHeaders();
const res = await fetch(`/api/v1/events/${encodeURIComponent(eventToken)}/photos/${photoId}/share`, {
method: 'POST',
credentials: 'include',
headers,
});
if (!res.ok) {
let payload: any = null;
try {
payload = await res.clone().json();
} catch {}
const error: UploadError = new Error(payload?.error?.message ?? 'Share link creation failed');
error.code = payload?.error?.code ?? 'share_failed';
error.status = res.status;
throw error;
}
return res.json();
}
export async function fetchPhotoShare(slug: string) {
const res = await fetch(`/api/v1/photo-shares/${encodeURIComponent(slug)}`, {
headers: { Accept: 'application/json' },
});
if (!res.ok) {
const payload = await res.json().catch(() => null);
const error: UploadError = new Error(payload?.error?.message ?? 'Share link unavailable');
error.code = payload?.error?.code ?? 'share_unavailable';
error.status = res.status;
throw error;
}
return res.json();
}