admin/snakkimo-cmt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix white-page crash in PairForm word detection

Browse Source 
- tokenize(): add try/catch + filter empty/null parts so a bad regex never
  propagates to the React render tree
- Word detection useEffect: wrap entire async block and each per-token fetch
  in try/catch; filter null/malformed word objects out of the map before
  setWordMap() so the render never receives w.id === undefined
- "Erkannte Wörter" sections in PairForm and EditPairForm: filter wordMap
  entries where w?.id is falsy; use (allObjects || []) defensively
- handleCreateWord: only update wordMap when the API response contains w.id
- After successful save in PairForm: reset all text/word state so the form
  starts clean for the next pair

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
admin
2026-05-28 14:55:34 +02:00
parent da3d7319a6
commit 399b59dc87
1 changed files with 70 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/pages/ContentCreation.jsx
View File

@@ -6,15 +6,21 @@ import { STATUS_COLORS } from '../lib/tables';
// ─── Word / placeholder helpers ───────────────────────────────────────────────
function tokenize(text, wordMap) {
const titles = Object.keys(wordMap);
if (!titles.length || !text) return [{ text }];
try {
const titles = Object.keys(wordMap).filter(k => k && k.length > 0);
if (!titles.length || !text) return [{ text: text || '' }];
const escaped = titles.sort((a, b) => b.length - a.length)
.map(t => t.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
.map(t => t.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
.filter(e => e.length > 0);
if (!escaped.length) return [{ text }];
const re = new RegExp(`(${escaped.join('|')})`, 'gi');
return text.split(re).filter(s => s !== '').map(part => ({
return text.split(re).filter(s => s != null && s !== '').map(part => ({
text: part,
word: wordMap[part.toLowerCase()] || null,
}));
} catch {
return [{ text: text || '', word: null }];
}
}
function withPlaceholders(text, wordMap, objectAssignments = {}) {
@@ -206,19 +212,27 @@ function PairForm({ objectId, allObjects, onPairSaved }) {
useEffect(() => {
if (!allText.trim()) { setWordMap({}); return; }
const t = setTimeout(async () => {
try {
const tokens = [...new Set(allText.split(/[\s.,!?;:()\[\]"']+/).filter(w => w.length >= 2))];
if (!tokens.length) return;
const results = await Promise.allSettled(
tokens.map(async w => {
try {
const data = await apiFetch(`/words?search=${encodeURIComponent(w)}&limit=5`);
const candidates = Array.isArray(data) ? data : [];
const match = candidates.find(word => fuzzyMatch(w, word[`titel_${lang}`] || word.titel_de || ''));
const candidates = Array.isArray(data) ? data.filter(Boolean) : [];
const match = candidates.find(word => word && word.id && fuzzyMatch(w, word[`titel_${lang}`] || word.titel_de || ''));
return match ? { key: w.toLowerCase(), word: match } : null;
} catch { return null; }
})
);
const map = {};
results.forEach(r => { if (r.status === 'fulfilled' && r.value) map[r.value.key] = r.value.word; });
results.forEach(r => {
if (r.status === 'fulfilled' && r.value && r.value.key && r.value.word?.id) {
map[r.value.key] = r.value.word;
}
});
setWordMap(map);
} catch { /* ignore word detection errors */ }
}, 600);
return () => clearTimeout(t);
}, [allText, lang]);
@@ -228,7 +242,7 @@ function PairForm({ objectId, allObjects, onPairSaved }) {
setCreatingWord(true);
try {
const w = await apiPost('/words', { [`titel_${lang}`]: wordInput.trim() });
setWordMap(prev => ({ ...prev, [selection.trim().toLowerCase()]: w }));
if (w?.id) setWordMap(prev => ({ ...prev, [selection.trim().toLowerCase()]: w }));
setWordInput('');
} catch (e) { alert('Fehler: ' + e.message); }
finally { setCreatingWord(false); }
@@ -287,6 +301,9 @@ function PairForm({ objectId, allObjects, onPairSaved }) {
});
await apiLink(`/objects/${objectId}/pairs/${pair.id}`);
setType(''); setYesNoAnswer(null);
setQuestion(''); setPositive(''); setNegative('');
setWordMap({}); setObjectAssignments({});
setPositiveWords([]); setNegativeWords([]);
setSavedFlash(true); setTimeout(() => setSavedFlash(false), 2000);
onPairSaved(pair);
} catch (e) { alert('Fehler: ' + e.message); }
@@ -384,8 +401,9 @@ function PairForm({ objectId, allObjects, onPairSaved }) {
{Object.keys(wordMap).length > 0 && (
<div className="space-y-1.5 pt-1">
<span className="text-xs font-semibold text-slate-400 uppercase tracking-wide">Erkannte Wörter</span>
{Object.entries(wordMap).map(([title, w]) => {
const matchingObjs = allObjects.filter(o => o._words?.some(ow => ow.id === w.id));
{Object.entries(wordMap).filter(([, w]) => w?.id).map(([title, w]) => {
const safeObjects = Array.isArray(allObjects) ? allObjects : [];
const matchingObjs = safeObjects.filter(o => o._words?.some(ow => ow.id === w.id));
const assigned = objectAssignments[w.id] || '';
return (
<div key={w.id} className="flex items-center gap-2">
@@ -395,7 +413,7 @@ function PairForm({ objectId, allObjects, onPairSaved }) {
className={`flex-1 text-xs border rounded px-1.5 py-0.5 bg-white focus:outline-none focus:ring-1 focus:ring-indigo-400 ${assigned ? 'border-indigo-400 text-indigo-700 bg-indigo-50' : 'border-slate-200 text-slate-500'}`}>
<option value="">— nur Wort ({{wordId}})</option>
{matchingObjs.map(obj => {
const idx = allObjects.indexOf(obj);
const idx = safeObjects.indexOf(obj);
const labels = (obj._words || []).slice(0, 3).map(ow => ow.titel_de || ow.id).join(', ');
return <option key={obj.id} value={obj.id}>Objekt #{idx + 1}{labels ? ` — ${labels}` : ''}</option>;
})}
@@ -491,19 +509,27 @@ function EditPairForm({ pair, allObjects, onSaved, onCancel, onDeleted }) {
useEffect(() => {
if (!allText.trim()) { setWordMap({}); return; }
const t = setTimeout(async () => {
try {
const tokens = [...new Set(allText.split(/[\s.,!?;:()\[\]"']+/).filter(w => w.length >= 2))];
if (!tokens.length) return;
const results = await Promise.allSettled(
tokens.map(async w => {
try {
const data = await apiFetch(`/words?search=${encodeURIComponent(w)}&limit=5`);
const candidates = Array.isArray(data) ? data : [];
const match = candidates.find(word => fuzzyMatch(w, word[`titel_${lang}`] || word.titel_de || ''));
const candidates = Array.isArray(data) ? data.filter(Boolean) : [];
const match = candidates.find(word => word && word.id && fuzzyMatch(w, word[`titel_${lang}`] || word.titel_de || ''));
return match ? { key: w.toLowerCase(), word: match } : null;
} catch { return null; }
})
);
const map = {};
results.forEach(r => { if (r.status === 'fulfilled' && r.value) map[r.value.key] = r.value.word; });
results.forEach(r => {
if (r.status === 'fulfilled' && r.value && r.value.key && r.value.word?.id) {
map[r.value.key] = r.value.word;
}
});
setWordMap(map);
} catch { /* ignore word detection errors */ }
}, 600);
return () => clearTimeout(t);
}, [allText, lang]);
@@ -513,7 +539,7 @@ function EditPairForm({ pair, allObjects, onSaved, onCancel, onDeleted }) {
setCreatingWord(true);
try {
const w = await apiPost('/words', { [`titel_${lang}`]: wordInput.trim() });
setWordMap(prev => ({ ...prev, [selection.trim().toLowerCase()]: w }));
if (w?.id) setWordMap(prev => ({ ...prev, [selection.trim().toLowerCase()]: w }));
setWordInput('');
} catch (e) { alert('Fehler: ' + e.message); }
finally { setCreatingWord(false); }
@@ -663,8 +689,9 @@ function EditPairForm({ pair, allObjects, onSaved, onCancel, onDeleted }) {
{Object.keys(wordMap).length > 0 && (
<div className="space-y-1.5 pt-1">
<span className="text-xs font-semibold text-slate-400 uppercase tracking-wide">Erkannte Wörter</span>
{Object.entries(wordMap).map(([title, w]) => {
const matchingObjs = allObjects.filter(o => o._words?.some(ow => ow.id === w.id));
{Object.entries(wordMap).filter(([, w]) => w?.id).map(([title, w]) => {
const safeObjects = Array.isArray(allObjects) ? allObjects : [];
const matchingObjs = safeObjects.filter(o => o._words?.some(ow => ow.id === w.id));
const assigned = objectAssignments[w.id] || '';
return (
<div key={w.id} className="flex items-center gap-2">
@@ -674,7 +701,7 @@ function EditPairForm({ pair, allObjects, onSaved, onCancel, onDeleted }) {
className={`flex-1 text-xs border rounded px-1.5 py-0.5 bg-white focus:outline-none focus:ring-1 focus:ring-amber-400 ${assigned ? 'border-amber-400 text-amber-700 bg-amber-50' : 'border-slate-200 text-slate-500'}`}>
<option value="">— nur Wort</option>
{matchingObjs.map(obj => {
const idx = allObjects.indexOf(obj);
const idx = safeObjects.indexOf(obj);
const labels = (obj._words || []).slice(0, 3).map(ow => ow.titel_de || ow.id).join(', ');
return <option key={obj.id} value={obj.id}>Objekt #{idx + 1}{labels ? ` — ${labels}` : ''}</option>;
})}