fix: improve tipping user journey
- Dashboard "Jetzt tippen" opens TipModal directly instead of navigating to /spiele (no more dead-end spielplan) - After tipping, dashboard updates to show "Dein Tipp: X:Y ✓" - Spielplan auto-opens all sections when only 1-2 exist (no more collapsed "Demnächst" as only section) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,6 +1,7 @@
|
|||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate } from 'react-router-dom';
|
||||||
import { api, DashboardData } from '../api/client';
|
import { api, DashboardData, Match } from '../api/client';
|
||||||
|
import TipModal from '../components/TipModal';
|
||||||
import styles from './DashboardPage.module.css';
|
import styles from './DashboardPage.module.css';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
@@ -25,6 +26,7 @@ export default function DashboardPage(_props: Props) {
|
|||||||
const [data, setData] = useState<DashboardData | null>(null);
|
const [data, setData] = useState<DashboardData | null>(null);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [error, setError] = useState(false);
|
const [error, setError] = useState(false);
|
||||||
|
const [tipMatch, setTipMatch] = useState<Match | null>(null);
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -90,7 +92,23 @@ export default function DashboardPage(_props: Props) {
|
|||||||
) : hero.tippable ? (
|
) : hero.tippable ? (
|
||||||
<button
|
<button
|
||||||
className={styles.heroTipBtn}
|
className={styles.heroTipBtn}
|
||||||
onClick={e => { e.stopPropagation(); navigate('/spiele'); }}
|
onClick={e => {
|
||||||
|
e.stopPropagation();
|
||||||
|
setTipMatch({
|
||||||
|
id: hero.match.id,
|
||||||
|
externalId: 0,
|
||||||
|
utcDate: hero.match.utcDate,
|
||||||
|
status: hero.match.status,
|
||||||
|
stage: '',
|
||||||
|
group: null,
|
||||||
|
homeTeam: hero.match.homeTeam,
|
||||||
|
awayTeam: hero.match.awayTeam,
|
||||||
|
score: { home: null, away: null },
|
||||||
|
userTip: null,
|
||||||
|
minutesUntilKickoff: hero.match.minutesUntilKickoff,
|
||||||
|
tippable: true,
|
||||||
|
});
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
Jetzt tippen
|
Jetzt tippen
|
||||||
</button>
|
</button>
|
||||||
@@ -138,6 +156,23 @@ export default function DashboardPage(_props: Props) {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{tipMatch && (
|
||||||
|
<TipModal
|
||||||
|
match={tipMatch}
|
||||||
|
onClose={() => setTipMatch(null)}
|
||||||
|
onSaved={(_matchId, tipHome, tipAway) => {
|
||||||
|
setTipMatch(null);
|
||||||
|
// Update dashboard data to reflect the new tip
|
||||||
|
if (data && data.hero) {
|
||||||
|
setData({
|
||||||
|
...data,
|
||||||
|
hero: { ...data.hero, userTip: { home: tipHome, away: tipAway } },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -81,7 +81,12 @@ export default function MatchesPage() {
|
|||||||
if (allMatches.length > 0) {
|
if (allMatches.length > 0) {
|
||||||
const filteredMatches = allMatches.filter(m => !stageFilter || m.stage === stageFilter);
|
const filteredMatches = allMatches.filter(m => !stageFilter || m.stage === stageFilter);
|
||||||
const sections = groupIntoSections(filteredMatches);
|
const sections = groupIntoSections(filteredMatches);
|
||||||
setOpenSections(new Set(sections.filter(s => s.defaultOpen).map(s => s.key)));
|
// If only 1-2 sections exist, open all of them
|
||||||
|
if (sections.length <= 2) {
|
||||||
|
setOpenSections(new Set(sections.map(s => s.key)));
|
||||||
|
} else {
|
||||||
|
setOpenSections(new Set(sections.filter(s => s.defaultOpen).map(s => s.key)));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}, [allMatches]); // only on initial load
|
}, [allMatches]); // only on initial load
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user