feat: add server persistence for rosary streak
All checks were successful
CI / update (push) Successful in 1m21s
All checks were successful
CI / update (push) Successful in 1m21s
- Add RosaryStreak MongoDB model for logged-in users - Add /api/glaube/rosary-streak GET/POST endpoints - Sync streak to server when logged in, merge local/server data - Auto-sync when coming back online (PWA offline support) - Falls back to localStorage for guests
This commit is contained in:
@@ -2,7 +2,20 @@
|
||||
import { browser } from '$app/environment';
|
||||
import { getRosaryStreak } from '$lib/stores/rosaryStreak.svelte';
|
||||
|
||||
interface Props {
|
||||
user?: { nickname?: string } | null;
|
||||
}
|
||||
|
||||
let { user = null }: Props = $props();
|
||||
|
||||
const streak = browser ? getRosaryStreak() : null;
|
||||
|
||||
// Sync with server when user is logged in
|
||||
$effect(() => {
|
||||
if (browser && streak) {
|
||||
streak.setLoggedIn(!!user?.nickname);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="streak-container">
|
||||
|
||||
@@ -36,14 +36,59 @@ function saveToStorage(data: StreakData): void {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
|
||||
}
|
||||
|
||||
async function fetchFromServer(): Promise<StreakData | null> {
|
||||
try {
|
||||
const res = await fetch('/api/glaube/rosary-streak');
|
||||
if (res.ok) {
|
||||
return await res.json();
|
||||
}
|
||||
} catch {
|
||||
// Server unavailable, return null
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
async function saveToServer(data: StreakData): Promise<boolean> {
|
||||
try {
|
||||
const res = await fetch('/api/glaube/rosary-streak', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
return res.ok;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// Merge local and server data, preferring the more recent/higher streak
|
||||
function mergeStreakData(local: StreakData, server: StreakData | null): StreakData {
|
||||
if (!server) return local;
|
||||
|
||||
// If same lastPrayed date, take the higher length
|
||||
if (local.lastPrayed === server.lastPrayed) {
|
||||
return local.length >= server.length ? local : server;
|
||||
}
|
||||
|
||||
// Otherwise take whichever was prayed more recently
|
||||
if (!local.lastPrayed) return server;
|
||||
if (!server.lastPrayed) return local;
|
||||
|
||||
return local.lastPrayed > server.lastPrayed ? local : server;
|
||||
}
|
||||
|
||||
class RosaryStreakStore {
|
||||
#length = $state(0);
|
||||
#lastPrayed = $state<string | null>(null);
|
||||
#isLoggedIn = $state(false);
|
||||
#initialized = false;
|
||||
#syncing = $state(false);
|
||||
#pendingSync = false; // Track if we have unsynced changes
|
||||
|
||||
constructor() {
|
||||
if (browser) {
|
||||
this.#init();
|
||||
this.#setupOnlineListener();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -55,6 +100,14 @@ class RosaryStreakStore {
|
||||
this.#initialized = true;
|
||||
}
|
||||
|
||||
#setupOnlineListener() {
|
||||
window.addEventListener('online', () => {
|
||||
if (this.#isLoggedIn && this.#pendingSync) {
|
||||
this.#syncWithServer();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
get length() {
|
||||
return this.#length;
|
||||
}
|
||||
@@ -67,7 +120,52 @@ class RosaryStreakStore {
|
||||
return this.#lastPrayed === getToday();
|
||||
}
|
||||
|
||||
recordPrayer(): void {
|
||||
get isLoggedIn() {
|
||||
return this.#isLoggedIn;
|
||||
}
|
||||
|
||||
get syncing() {
|
||||
return this.#syncing;
|
||||
}
|
||||
|
||||
// Call this when user session is available
|
||||
async setLoggedIn(loggedIn: boolean): Promise<void> {
|
||||
this.#isLoggedIn = loggedIn;
|
||||
|
||||
if (loggedIn && browser) {
|
||||
await this.#syncWithServer();
|
||||
}
|
||||
}
|
||||
|
||||
async #syncWithServer(): Promise<void> {
|
||||
if (this.#syncing) return;
|
||||
this.#syncing = true;
|
||||
|
||||
try {
|
||||
const serverData = await fetchFromServer();
|
||||
const localData: StreakData = { length: this.#length, lastPrayed: this.#lastPrayed };
|
||||
const merged = mergeStreakData(localData, serverData);
|
||||
|
||||
// Update local state
|
||||
this.#length = merged.length;
|
||||
this.#lastPrayed = merged.lastPrayed;
|
||||
saveToStorage(merged);
|
||||
|
||||
// If local had newer data, push to server
|
||||
if (!serverData || merged.length !== serverData.length || merged.lastPrayed !== serverData.lastPrayed) {
|
||||
const success = await saveToServer(merged);
|
||||
this.#pendingSync = !success;
|
||||
} else {
|
||||
this.#pendingSync = false;
|
||||
}
|
||||
} catch {
|
||||
this.#pendingSync = true;
|
||||
} finally {
|
||||
this.#syncing = false;
|
||||
}
|
||||
}
|
||||
|
||||
async recordPrayer(): Promise<void> {
|
||||
const today = getToday();
|
||||
|
||||
// Already prayed today - no change
|
||||
@@ -87,7 +185,15 @@ class RosaryStreakStore {
|
||||
|
||||
this.#length = newLength;
|
||||
this.#lastPrayed = today;
|
||||
saveToStorage({ length: newLength, lastPrayed: today });
|
||||
|
||||
const data: StreakData = { length: newLength, lastPrayed: today };
|
||||
saveToStorage(data);
|
||||
|
||||
// Sync to server if logged in
|
||||
if (this.#isLoggedIn) {
|
||||
const success = await saveToServer(data);
|
||||
this.#pendingSync = !success;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
12
src/models/RosaryStreak.ts
Normal file
12
src/models/RosaryStreak.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import mongoose from 'mongoose';
|
||||
|
||||
const RosaryStreakSchema = new mongoose.Schema(
|
||||
{
|
||||
username: { type: String, required: true, unique: true },
|
||||
length: { type: Number, required: true, default: 0 },
|
||||
lastPrayed: { type: String, default: null } // ISO date string (YYYY-MM-DD)
|
||||
},
|
||||
{ timestamps: true }
|
||||
);
|
||||
|
||||
export const RosaryStreak = mongoose.models.RosaryStreak || mongoose.model("RosaryStreak", RosaryStreakSchema);
|
||||
61
src/routes/api/glaube/rosary-streak/+server.ts
Normal file
61
src/routes/api/glaube/rosary-streak/+server.ts
Normal file
@@ -0,0 +1,61 @@
|
||||
import { json, error, type RequestHandler } from '@sveltejs/kit';
|
||||
import { RosaryStreak } from '../../../../models/RosaryStreak';
|
||||
import { dbConnect } from '../../../../utils/db';
|
||||
|
||||
export const GET: RequestHandler = async ({ locals }) => {
|
||||
const session = await locals.auth();
|
||||
|
||||
if (!session?.user?.nickname) {
|
||||
throw error(401, 'Authentication required');
|
||||
}
|
||||
|
||||
await dbConnect();
|
||||
|
||||
try {
|
||||
const streak = await RosaryStreak.findOne({
|
||||
username: session.user.nickname
|
||||
}).lean();
|
||||
|
||||
return json({
|
||||
length: streak?.length ?? 0,
|
||||
lastPrayed: streak?.lastPrayed ?? null
|
||||
});
|
||||
} catch (e) {
|
||||
throw error(500, 'Failed to fetch rosary streak');
|
||||
}
|
||||
};
|
||||
|
||||
export const POST: RequestHandler = async ({ request, locals }) => {
|
||||
const session = await locals.auth();
|
||||
|
||||
if (!session?.user?.nickname) {
|
||||
throw error(401, 'Authentication required');
|
||||
}
|
||||
|
||||
const { length, lastPrayed } = await request.json();
|
||||
|
||||
if (typeof length !== 'number' || length < 0) {
|
||||
throw error(400, 'Valid streak length required');
|
||||
}
|
||||
|
||||
if (lastPrayed !== null && typeof lastPrayed !== 'string') {
|
||||
throw error(400, 'Invalid lastPrayed format');
|
||||
}
|
||||
|
||||
await dbConnect();
|
||||
|
||||
try {
|
||||
const updated = await RosaryStreak.findOneAndUpdate(
|
||||
{ username: session.user.nickname },
|
||||
{ length, lastPrayed },
|
||||
{ upsert: true, new: true }
|
||||
).lean();
|
||||
|
||||
return json({
|
||||
length: updated.length,
|
||||
lastPrayed: updated.lastPrayed
|
||||
});
|
||||
} catch (e) {
|
||||
throw error(500, 'Failed to update rosary streak');
|
||||
}
|
||||
};
|
||||
@@ -1238,7 +1238,7 @@ l536 389l-209 -629zM1671 934l-370 267l150 436l-378 -271l-371 271q8 -34 15 -68q10
|
||||
<LanguageToggle />
|
||||
</div>
|
||||
|
||||
<StreakCounter />
|
||||
<StreakCounter user={data.session?.user} />
|
||||
</div>
|
||||
|
||||
<div class="rosary-layout">
|
||||
|
||||
Reference in New Issue
Block a user