sschuhmann/rehearshalhub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: avatar stale state, nginx intercept, and dev tooling

Browse Source 
Frontend (SettingsPage):
- Sync avatarUrl state via useEffect when me.avatar_url changes after
  background refetch, so profile section never shows stale avatar
- Invalidate ["comments"] after upload/generate/remove so SongPage
  comment avatars update immediately instead of waiting for staleTime
- Fix Remove button: was sending avatar_url: undefined which JSON.stringify
  drops entirely, so the server never cleared it; now sends ""

nginx:
- Change /api/ and /ws/ locations to use ^~ prefix so the static-asset
  regex rule (~* \.(png|svg|ico)$) cannot intercept API paths; PNG/SVG
  avatar uploads were returning 404 from nginx in production
- Merge nc-scan 300s timeout into ^~ /api/v1/bands/ block
- Add client_max_body_size 10m (default 1MB was silently rejecting
  uploads before they reached FastAPI)

Dev tooling:
- Add docker-compose.dev.yml for hot-reload development workflow
- Add Taskfile.yml with dev, test, lint, migrate, and shell tasks

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Mistral Vibe
2026-03-30 20:41:32 +02:00
parent cd6fabb31c
commit cd1d098ca4
4 changed files with 215 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
web/src/pages/SettingsPage.tsx
View File

@@ -1,4 +1,4 @@
import { useState } from "react";
import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { api } from "../api/client";
@@ -44,6 +44,12 @@ function SettingsForm({ me, onBack }: { me: MemberRead; onBack: () => void }) {
const [saved, setSaved] = useState(false);
const [error, setError] = useState<string | null>(null);
// Keep local avatarUrl in sync when the server-side value changes (e.g. after
// a background refetch or a change made on another device).
useEffect(() => {
setAvatarUrl(me.avatar_url ?? "");
}, [me.avatar_url]);
// Image resizing function
const resizeImage = (file: File, maxWidth: number, maxHeight: number): Promise<File> => {
return new Promise((resolve, reject) => {
@@ -216,6 +222,7 @@ function SettingsForm({ me, onBack }: { me: MemberRead; onBack: () => void }) {
setAvatarUrl(response.avatar_url || '');
qc.invalidateQueries({ queryKey: ['me'] });
qc.invalidateQueries({ queryKey: ['comments'] });
} catch (err) {
console.error("Upload failed:", err);
let errorMessage = 'Failed to upload avatar. Please try again.';
@@ -271,6 +278,7 @@ function SettingsForm({ me, onBack }: { me: MemberRead; onBack: () => void }) {
await updateSettings({ avatar_url: newAvatarUrl });
setAvatarUrl(newAvatarUrl);
qc.invalidateQueries({ queryKey: ["me"] });
qc.invalidateQueries({ queryKey: ["comments"] });
console.log("Avatar updated successfully");
} catch (err) {
@@ -306,9 +314,10 @@ function SettingsForm({ me, onBack }: { me: MemberRead; onBack: () => void }) {
<button
onClick={async () => {
try {
await updateSettings({ avatar_url: undefined });
await updateSettings({ avatar_url: "" });
setAvatarUrl("");
qc.invalidateQueries({ queryKey: ["me"] });
qc.invalidateQueries({ queryKey: ["comments"] });
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to remove avatar');
}