Browse Source
- 通知：标记已读/全部已读/未读数 api + useNotifications/useUnreadCount hook - 通知收件箱页 app/notifications.tsx + 菜单入口 + 路由注册 - 收藏：收藏/取消收藏 api + 扩展 useFavorites（add/remove/toggle/favoriteIds） - 岗位详情头部接入收藏按钮 - 认证：补 refreshAuthToken / selectIdentity（getCurrentUser/登出/注册已有） - 全量 tsc --noEmit 0 错误master
doublex001
4 weeks ago
9 changed files with 704 additions and 37 deletions
@ -0,0 +1,179 @@ |
|||
import { Ionicons } from '@expo/vector-icons'; |
|||
import { useRouter } from 'expo-router'; |
|||
import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native'; |
|||
import { SafeAreaView } from 'react-native-safe-area-context'; |
|||
import { useNotifications } from '../src/hooks'; |
|||
import { LoadingState, ErrorState, EmptyState } from '../src/components/StateView'; |
|||
import { colors, spacing } from '../src/theme'; |
|||
import type { Notification } from '../src/types'; |
|||
|
|||
const TYPE_ICON: Record<Notification['type'], keyof typeof Ionicons.glyphMap> = { |
|||
offer: 'gift-outline', |
|||
system: 'information-circle-outline', |
|||
promotion: 'megaphone-outline', |
|||
}; |
|||
|
|||
/** |
|||
* 通知收件箱：列表 + 标记已读 + 全部已读。 |
|||
* 来自后端 /notifications（STUDENT 旗下）；点击单条标记已读。 |
|||
*/ |
|||
export default function NotificationsScreen() { |
|||
const router = useRouter(); |
|||
const { items, loading, error, refresh, isEmpty, markRead, markAllRead } = useNotifications(); |
|||
|
|||
const hasUnread = items.some((n) => !n.read); |
|||
|
|||
return ( |
|||
<SafeAreaView style={styles.safeArea} edges={['top']}> |
|||
<View style={styles.header}> |
|||
<Pressable style={styles.headerBtn} onPress={() => router.back()} hitSlop={8}> |
|||
<Ionicons name="chevron-back" size={24} color={colors.textPrimary} /> |
|||
</Pressable> |
|||
<Text style={styles.headerTitle}>通知</Text> |
|||
{hasUnread ? ( |
|||
<Pressable style={styles.markAllBtn} onPress={markAllRead} hitSlop={8}> |
|||
<Text style={styles.markAllText}>全部已读</Text> |
|||
</Pressable> |
|||
) : ( |
|||
<View style={styles.headerBtn} /> |
|||
)} |
|||
</View> |
|||
|
|||
{loading ? ( |
|||
<LoadingState text="加载通知中…" /> |
|||
) : error ? ( |
|||
<ErrorState message="通知加载失败，请重试" onRetry={refresh} /> |
|||
) : isEmpty ? ( |
|||
<EmptyState icon="notifications-off-outline" title="暂无通知" subtitle="系统通知会在这里出现" /> |
|||
) : ( |
|||
<ScrollView |
|||
style={styles.scroll} |
|||
contentContainerStyle={styles.content} |
|||
showsVerticalScrollIndicator={false} |
|||
> |
|||
{items.map((n) => ( |
|||
<Pressable |
|||
key={n.id} |
|||
style={[styles.card, !n.read && styles.cardUnread]} |
|||
onPress={() => markRead(n.id)} |
|||
hitSlop={4} |
|||
> |
|||
<View style={[styles.iconWrap, !n.read && styles.iconWrapUnread]}> |
|||
<Ionicons name={TYPE_ICON[n.type]} size={18} color={colors.primary} /> |
|||
</View> |
|||
<View style={styles.cardBody}> |
|||
<View style={styles.cardTop}> |
|||
<Text style={styles.cardTitle}>{n.title}</Text> |
|||
{!n.read && <View style={styles.dot} />} |
|||
</View> |
|||
<Text style={styles.cardContent} numberOfLines={2}> |
|||
{n.content} |
|||
</Text> |
|||
<Text style={styles.cardTime}>{n.timestamp}</Text> |
|||
</View> |
|||
</Pressable> |
|||
))} |
|||
</ScrollView> |
|||
)} |
|||
</SafeAreaView> |
|||
); |
|||
} |
|||
|
|||
const styles = StyleSheet.create({ |
|||
safeArea: { |
|||
flex: 1, |
|||
backgroundColor: colors.pageBg, |
|||
}, |
|||
header: { |
|||
flexDirection: 'row', |
|||
alignItems: 'center', |
|||
justifyContent: 'space-between', |
|||
paddingHorizontal: spacing.card, |
|||
height: 48, |
|||
backgroundColor: colors.white, |
|||
borderBottomWidth: 1, |
|||
borderBottomColor: colors.borderLight, |
|||
}, |
|||
headerBtn: { |
|||
width: 40, |
|||
height: 40, |
|||
alignItems: 'center', |
|||
justifyContent: 'center', |
|||
}, |
|||
headerTitle: { |
|||
fontSize: 17, |
|||
fontWeight: '700', |
|||
color: colors.textPrimary, |
|||
}, |
|||
markAllBtn: { |
|||
paddingHorizontal: 8, |
|||
height: 32, |
|||
alignItems: 'center', |
|||
justifyContent: 'center', |
|||
}, |
|||
markAllText: { |
|||
fontSize: 13, |
|||
fontWeight: '600', |
|||
color: colors.primary, |
|||
}, |
|||
scroll: { |
|||
flex: 1, |
|||
}, |
|||
content: { |
|||
paddingHorizontal: spacing.card, |
|||
paddingTop: 12, |
|||
paddingBottom: 24, |
|||
}, |
|||
card: { |
|||
flexDirection: 'row', |
|||
backgroundColor: colors.white, |
|||
borderRadius: 8, |
|||
padding: spacing.card, |
|||
marginBottom: spacing.card, |
|||
}, |
|||
cardUnread: { |
|||
backgroundColor: colors.primaryLight, |
|||
}, |
|||
iconWrap: { |
|||
width: 36, |
|||
height: 36, |
|||
borderRadius: 18, |
|||
backgroundColor: colors.pageBg, |
|||
alignItems: 'center', |
|||
justifyContent: 'center', |
|||
marginRight: spacing.card, |
|||
}, |
|||
iconWrapUnread: { |
|||
backgroundColor: colors.white, |
|||
}, |
|||
cardBody: { |
|||
flex: 1, |
|||
}, |
|||
cardTop: { |
|||
flexDirection: 'row', |
|||
alignItems: 'center', |
|||
justifyContent: 'space-between', |
|||
}, |
|||
cardTitle: { |
|||
fontSize: 15, |
|||
fontWeight: '600', |
|||
color: colors.textPrimary, |
|||
}, |
|||
dot: { |
|||
width: 8, |
|||
height: 8, |
|||
borderRadius: 4, |
|||
backgroundColor: colors.primary, |
|||
}, |
|||
cardContent: { |
|||
fontSize: 13, |
|||
color: colors.textSecondary, |
|||
marginTop: 4, |
|||
lineHeight: 18, |
|||
}, |
|||
cardTime: { |
|||
fontSize: 12, |
|||
color: colors.textHint, |
|||
marginTop: 6, |
|||
}, |
|||
}); |
|||
@ -0,0 +1,59 @@ |
|||
/** |
|||
* 通知中心数据 hook：未读数 + 列表 + 标记已读/全部已读。 |
|||
* 未读数单独取（用于 Tab/入口红点），不随列表刷新而丢失。 |
|||
*/ |
|||
import { useCallback, useEffect, useState } from 'react'; |
|||
import { |
|||
fetchNotifications, |
|||
fetchUnreadCount, |
|||
markAllNotificationsRead, |
|||
markNotificationRead, |
|||
} from '../api'; |
|||
import { useAsyncData } from './useAsyncData'; |
|||
|
|||
/** 通知收件箱：列表 + 标记已读 + 全部已读 */ |
|||
export function useNotifications() { |
|||
const { data, loading, error, refresh } = useAsyncData(fetchNotifications); |
|||
const items = data ?? []; |
|||
const isEmpty = !loading && !error && items.length === 0; |
|||
|
|||
const markRead = useCallback( |
|||
async (id: string) => { |
|||
await markNotificationRead(id); |
|||
refresh(); |
|||
}, |
|||
[refresh], |
|||
); |
|||
|
|||
const markAllRead = useCallback(async () => { |
|||
await markAllNotificationsRead(); |
|||
refresh(); |
|||
}, [refresh]); |
|||
|
|||
return { items, loading, error, refresh, isEmpty, markRead, markAllRead }; |
|||
} |
|||
|
|||
/** 未读通知数（红点），独立刷新，供「我的」入口与 Tab 使用 */ |
|||
export function useUnreadCount() { |
|||
const [count, setCount] = useState(0); |
|||
const [loading, setLoading] = useState(false); |
|||
|
|||
const refresh = useCallback(async () => { |
|||
setLoading(true); |
|||
try { |
|||
const n = await fetchUnreadCount(); |
|||
setCount(n); |
|||
} catch { |
|||
// 红点失败静默降级为 0，不阻断主流程
|
|||
setCount(0); |
|||
} finally { |
|||
setLoading(false); |
|||
} |
|||
}, []); |
|||
|
|||
useEffect(() => { |
|||
refresh(); |
|||
}, [refresh]); |
|||
|
|||
return { count, loading, refresh }; |
|||
} |
|||
Loading…
Reference in new issue