admin/changemaker.lite
1
0
Fork 0
Code Issues Packages Projects Releases 31 Wiki Activity

Add Referrals navigation button to volunteer social feed page

Browse Source 
Bunker Admin
This commit is contained in:
bunker-admin 2026-03-05 09:37:04 -07:00
parent 5642a24c8f
commit 46d7912854
1 changed files with 49 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
admin/src/pages/volunteer/SocialFeedPage.tsx
View File

@ -1,6 +1,6 @@
import { useEffect, useState } from 'react';
import { Typography, Skeleton, Empty, Pagination, Button, Space, Card, List } from 'antd';
import { TeamOutlined, CompassOutlined, TrophyOutlined } from '@ant-design/icons';
import { Typography, Skeleton, Empty, Pagination, Button, Space, Card, List, Tag } from 'antd';
import { TeamOutlined, CompassOutlined, TrophyOutlined, FlagOutlined, ThunderboltOutlined, GiftOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { api } from '@/lib/api';
import FeedCard from '@/components/social/FeedCard';
@ -26,12 +26,14 @@ export default function SocialFeedPage() {
const [items, setItems] = useState<FeedItem[]>([]);
const [pagination, setPagination] = useState<PaginationMeta | null>(null);
const [topVolunteers, setTopVolunteers] = useState<LeaderboardEntry[]>([]);
const [activeChallenge, setActiveChallenge] = useState<{ id: string; title: string; teamName: string; score: number } | null>(null);
const [loading, setLoading] = useState(true);
const [page, setPage] = useState(1);
useEffect(() => {
loadFeed(page);
loadTopVolunteers();
loadActiveChallenge();
}, [page]);
const loadFeed = async (p: number) => {
@ -52,6 +54,22 @@ export default function SocialFeedPage() {
} catch {}
};
const loadActiveChallenge = async () => {
try {
const { data } = await api.get('/social/challenges', { params: { status: 'ACTIVE' } });
const challenges = data.challenges || [];
for (const c of challenges) {
try {
const { data: teamData } = await api.get(`/social/challenges/${c.id}/my-team`);
if (teamData.team) {
setActiveChallenge({ id: c.id, title: c.title, teamName: teamData.team.name, score: teamData.team.score });
break;
}
} catch {}
}
} catch {}
};
return (
<div style={{ padding: '12px 0' }}>
<Space style={{ width: '100%', justifyContent: 'space-between', marginBottom: 12 }}>
@ -63,9 +81,38 @@ export default function SocialFeedPage() {
<Button size="small" icon={<TeamOutlined />} onClick={() => navigate('/volunteer/friends')}>
Friends
</Button>
<Button size="small" icon={<GiftOutlined />} onClick={() => navigate('/volunteer/referrals')}>
Referrals
</Button>
</Space>
</Space>
{activeChallenge && (
<Card
size="small"
style={{
marginBottom: 12,
borderLeft: '3px solid #52c41a',
cursor: 'pointer',
}}
onClick={() => navigate(`/volunteer/challenges/${activeChallenge.id}`)}
>
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<ThunderboltOutlined style={{ color: '#52c41a', fontSize: 18 }} />
<div style={{ flex: 1 }}>
<Typography.Text strong style={{ fontSize: 13 }}>
<FlagOutlined style={{ marginRight: 4 }} />
Active Challenge: {activeChallenge.title}
</Typography.Text>
<Typography.Text type="secondary" style={{ display: 'block', fontSize: 12 }}>
Team "{activeChallenge.teamName}" — {activeChallenge.score} pts
</Typography.Text>
</div>
<Tag color="green">LIVE</Tag>
</div>
</Card>
)}
<FriendSuggestions limit={5} />
{topVolunteers.length > 0 && (