// screens-my-outfits.jsx — the signed-in user's saved outfits, loaded from the
// Supabase `outfits` table (see supabase/schema.sql).
//
// Row Level Security scopes the query to the current user, so this only ever
// shows rows that user owns — which is what makes the per-row Edit / Publish /
// Delete actions safe to render here: the list is the owner's list. Every
// action still goes through a call that re-checks ownership server-side
// (`user_id = auth.uid()` in the policy, or inside the SECURITY DEFINER
// publish/unpublish functions), so the UI is a convenience, never the thing
// standing between one account and another's rows.
const { useState: useStateMO, useEffect: useEffectMO } = React;
function MyOutfitsScreen({ go }) {
const session = useSession();
const [outfits, setOutfits] = useStateMO([]);
const [loading, setLoading] = useStateMO(true);
const [error, setError] = useStateMO(null);
// { id, action } while a row action is in flight — one at a time, so a
// double-click can't fire two deletes.
const [busy, setBusy] = useStateMO(null);
const [status, setStatus] = useStateMO(null);
const load = async () => {
setLoading(true);
setError(null);
const res = await MBOutfits.list();
if (res.error) { setError(res.error); setOutfits([]); }
else setOutfits(res.outfits);
setLoading(false);
};
useEffectMO(() => {
if (!session) { setLoading(false); return; }
load();
}, [session && session.id]);
const patchRow = (id, patch) =>
setOutfits(prev => prev.map(o => (o.id === id ? { ...o, ...patch } : o)));
const remove = async (id) => {
setBusy({ id, action: 'delete' });
setStatus(null); setError(null);
const res = await MBOutfits.remove(id);
setBusy(null);
if (res.error) { setError(res.error); return; }
// events cascades from outfits, so this takes the outfit's recorded
// activity with it, and its public URL stops resolving.
setOutfits(prev => prev.filter(o => o.id !== id));
setStatus('Outfit deleted, along with its link and its recorded activity.');
};
const publish = async (outfit) => {
setBusy({ id: outfit.id, action: 'publish' });
setStatus(null); setError(null);
const res = await MBOutfits.publish(outfit.id);
setBusy(null);
if (res.error) { setError(res.error); return; }
patchRow(outfit.id, { published: true, slug: res.slug });
setStatus('Published. Anyone with the link can see this outfit.');
};
const unpublish = async (outfit) => {
setBusy({ id: outfit.id, action: 'unpublish' });
setStatus(null); setError(null);
const res = await MBOutfits.unpublish(outfit.id);
setBusy(null);
if (res.error) { setError(res.error); return; }
// The slug is kept, so publishing again restores the same URL.
patchRow(outfit.id, { published: false });
setStatus('Unpublished. The public link no longer works.');
};
// ─── Signed out ───────────────────────────────────────────────────────────
if (!session) {
return (
go({ name: 'login' }) }}
secondary={{ label: 'Create an account', onClick: () => go({ name: 'signup' }) }}
/>
);
}
return (
)}
);
}
// ─── Card ───────────────────────────────────────────────────────────────────
// The board is still the click target for opening an outfit; the owner actions
// sit below it and stop their own clicks so neither swallows the other.
function SavedOutfitCard({ outfit, onOpen, onPublish, onUnpublish, onDelete, busy, disabled }) {
const [confirm, setConfirm] = useStateMO(false);
const items = outfit.items || [];
const when = outfit.created_at
? new Date(outfit.created_at).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
: '';
const locked = disabled || !!busy;
return (