Jede Idee bekommt ihre eigene Seite mit der Unterhaltung aus dem Thread
Vorbild windrose.support: Klick auf eine Idee, und man sieht sie ganz — Stand, Begruendung, wer sie eingereicht hat, und darunter, was dazu geschrieben wurde. Der Unterschied bleibt, wo geschrieben wird. Die Beitraege sind aus dem Discord-Thread gespiegelt, nicht hier getippt. Deshalb fuehrt der einzige Knopf am Ende in den Thread und nicht in ein Formular. Ein zweiter Ort fuer dieselbe Unterhaltung waere genau das, was ich beim Konzept als das Falsche bezeichnet habe. Bisher wurde nur mitgezaehlt. Jetzt landen die Beitraege in einer eigenen Tabelle — mit Bearbeiten und Loeschen, sonst stuende auf der Webseite fuer immer, was in Discord laengst zurueckgenommen wurde. Reine Bild-Posts ohne Text bleiben draussen, die haetten hier nichts zu sagen. Der Kommentar-Zaehler wird jetzt aus der Tabelle gezaehlt statt in einer Spalte mitgefuehrt. Eine Wahrheit statt zwei, die auseinanderlaufen koennen — dieselbe Ueberlegung wie beim Zuspruch. Nebenbei geprueft, weil es haette schiefgehen koennen: /api/wishes/suche und /api/wishes/:id liegen auf derselben Ebene. Der Router bevorzugt die feste Route vor der mit Platzhalter — nachgestellt mit find-my-way, nicht aus dem Gedaechtnis behauptet. Geprueft: im Browser die Seite mit drei Beitraegen und die ohne (kein Thread, keine Begruendung, Hinweis statt Liste), der Weg von der Roadmap dorthin ohne Neuladen, Migration erneut durchgespielt. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
@@ -1,4 +1,5 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { apiGet, apiPost } from '../api.js';
|
||||
import { Markdown } from '../markdown.jsx';
|
||||
import { SkeletonCards } from '../components/Skeleton.jsx';
|
||||
@@ -289,7 +290,7 @@ export default function Roadmap() {
|
||||
) : (
|
||||
<span className="wish-score with-icon"><IconThumbsUp size={14} /> {w.score}</span>
|
||||
)}
|
||||
<span className="wish-idea">
|
||||
<Link className="wish-idea" to={`/wunsch/${w.id}`}>
|
||||
<span className="wish-schilder">
|
||||
{status !== 'offen' && (
|
||||
<span className={`wish-status ${status}`}>{t(WISH_STATUS[status])}</span>
|
||||
@@ -304,7 +305,7 @@ export default function Roadmap() {
|
||||
{w.status_grund && (
|
||||
<span className="wish-grund">{w.status_grund}</span>
|
||||
)}
|
||||
</span>
|
||||
</Link>
|
||||
{/* Geredet wird im Thread unter dem Post — der
|
||||
Zähler führt direkt dorthin */}
|
||||
{w.thread_url && (
|
||||
|
||||
@@ -0,0 +1,150 @@
|
||||
// Ein Wunsch für sich: Idee, Stand, Begründung — und darunter, was im
|
||||
// Discord-Thread dazu geschrieben wurde.
|
||||
//
|
||||
// Die Beiträge sind gespiegelt, nicht abgetippt: geschrieben wird weiter in
|
||||
// Discord, hier steht nur mit, was dort steht. Deshalb führt jeder Weg zum
|
||||
// Mitreden in den Thread und nicht in ein Formular.
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useParams, Link } from 'react-router-dom';
|
||||
import { apiGet, apiPost } from '../api.js';
|
||||
import { SkeletonCards } from '../components/Skeleton.jsx';
|
||||
import { IconThumbsUp, IconMessage, IconArrowLeft } from '../icons.jsx';
|
||||
import { useT, useFmt } from '../i18n.jsx';
|
||||
|
||||
const WISH_STATUS = {
|
||||
offen: 'wish.offen',
|
||||
geplant: 'wish.geplant',
|
||||
in_arbeit: 'wish.inArbeit',
|
||||
umgesetzt: 'wish.umgesetzt',
|
||||
abgelehnt: 'wish.abgelehnt',
|
||||
};
|
||||
|
||||
export default function WunschDetail() {
|
||||
const { id } = useParams();
|
||||
const { t } = useT();
|
||||
const { datum } = useFmt();
|
||||
const [daten, setDaten] = useState(null);
|
||||
const [fehler, setFehler] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setDaten(null);
|
||||
setFehler(false);
|
||||
apiGet(`/api/wishes/${id}`).then(setDaten).catch(() => setFehler(true));
|
||||
window.scrollTo(0, 0);
|
||||
}, [id]);
|
||||
|
||||
async function vote() {
|
||||
try {
|
||||
const res = await apiPost(`/api/wishes/${id}/vote`);
|
||||
setDaten((d) => ({
|
||||
...d,
|
||||
wunsch: {
|
||||
...d.wunsch,
|
||||
voted: res.voted,
|
||||
score: d.wunsch.score + (res.voted ? 1 : -1),
|
||||
},
|
||||
}));
|
||||
} catch { /* nicht angemeldet oder kein Member — der Knopf bleibt einfach */ }
|
||||
}
|
||||
|
||||
const w = daten?.wunsch;
|
||||
const status = w?.status ?? 'offen';
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="page-header">
|
||||
<div className="page-bg-text">IDEE</div>
|
||||
<div className="page-header-grid" aria-hidden="true" />
|
||||
<div className="page-header-content">
|
||||
<div className="page-tag">{t('wunsch.tag')}</div>
|
||||
<h1 className="page-title">{w?.idea ?? '…'}</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="content">
|
||||
<Link className="btn btn-ghost wd-zurueck" to="/roadmap">
|
||||
<IconArrowLeft size={14} /> {t('wunsch.back')}
|
||||
</Link>
|
||||
|
||||
{fehler && <p className="notice">{t('wunsch.notFound')}</p>}
|
||||
{!fehler && !daten && <SkeletonCards n={2} />}
|
||||
|
||||
{w && (
|
||||
<>
|
||||
<div className={`card wd-kopf st-${status}`}>
|
||||
<div className="wd-zeile">
|
||||
{daten.canVote ? (
|
||||
<button
|
||||
className={`wish-vote with-icon${w.voted ? ' voted' : ''}`}
|
||||
onClick={vote}
|
||||
title={w.voted ? t('roadmap.unvote') : t('roadmap.vote')}
|
||||
>
|
||||
<IconThumbsUp size={15} /> {w.score}
|
||||
</button>
|
||||
) : (
|
||||
<span className="wish-score with-icon"><IconThumbsUp size={15} /> {w.score}</span>
|
||||
)}
|
||||
<div className="wd-schilder">
|
||||
<span className={`wish-status ${status}`}>{t(WISH_STATUS[status])}</span>
|
||||
{w.kategorie && (
|
||||
<span className="wish-area">{w.kategorie_emoji} {w.kategorie}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<p className="wd-idee">{w.idea}</p>
|
||||
<div className="wd-meta">
|
||||
<span>{t('wunsch.by', w.author ?? '—')}</span>
|
||||
<span>{datum(w.created_at, { day: '2-digit', month: '2-digit', year: 'numeric' })}</span>
|
||||
</div>
|
||||
{w.status_grund && (
|
||||
<div className="wd-antwort">
|
||||
<span className="wd-antwort-kopf">{t('wunsch.teamSays')}</span>
|
||||
{w.status_grund}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="roadmap-group">
|
||||
<h2 className="settings-title">
|
||||
{daten.kommentare.length === 1
|
||||
? t('wunsch.oneComment')
|
||||
: t('wunsch.comments', daten.kommentare.length)}
|
||||
</h2>
|
||||
|
||||
{daten.kommentare.length === 0 && (
|
||||
<p className="notice">{t('wunsch.noComments')}</p>
|
||||
)}
|
||||
|
||||
{daten.kommentare.map((k) => (
|
||||
<div className="wd-komm" key={k.message_id}>
|
||||
{k.avatar
|
||||
? <img className="wd-avatar" src={k.avatar} alt="" loading="lazy" />
|
||||
: <span className="wd-avatar leer" />}
|
||||
<div className="wd-komm-text">
|
||||
<div className="wd-komm-kopf">
|
||||
<span className="wd-komm-name">{k.author}</span>
|
||||
<span className="wd-komm-zeit">
|
||||
{datum(k.created_at, {
|
||||
day: '2-digit', month: '2-digit',
|
||||
hour: '2-digit', minute: '2-digit',
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
<p className="wd-komm-inhalt">{k.content}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Geschrieben wird in Discord — hier steht nur mit, was dort steht */}
|
||||
{w.thread_url && (
|
||||
<a className="btn wd-mitreden" href={w.thread_url} target="_blank" rel="noreferrer">
|
||||
<IconMessage size={14} /> {t('wunsch.joinThread')}
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user