wibu/mobile-darmasaba
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: tambah fitur tandai terbaca per notifikasi dan ekstrak styles

Browse Source 
- Tambah fungsi handleMarkOneRead untuk tandai satu notifikasi terbaca tanpa navigasi
- Tambah tombol "Tandai dibaca" pada tiap notifikasi yang belum terbaca
- Buat notification.styles.ts dengan 8 class styles untuk notification screen
- Daftarkan NotificationStyles ke constants/styles/index.ts
This commit is contained in:
amaliadwiy
2026-05-18 11:27:49 +08:00
parent ecb3d3953b
commit 90419b5d15
3 changed files with 64 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
app/(application)/notification.tsx
View File

@@ -136,6 +136,17 @@ export default function Notification() {
}
}
async function handleMarkOneRead(id: string) {
try {
const hasil = await decryptToken(String(token?.current))
await apiReadOneNotification({ user: hasil, id: id })
await queryClient.invalidateQueries({ queryKey: ['notifications'] })
dispatch(setUpdateNotification(!updateNotification))
} catch (error) {
console.error(error)
}
}
return (
<SafeAreaView style={[Styles.flex1, { backgroundColor: colors.background }]}>
<Stack.Screen
@@ -174,7 +185,8 @@ export default function Notification() {
onCancel={() => setShowConfirm(false)}
/>
<View style={[Styles.flex1, Styles.ph15, { paddingTop: 10 }]}>
<View style={[Styles.flex1, Styles.ph15, Styles.notifContainer]}>
{isLoading ? (
[0, 1, 2, 3, 4].map((_, i) => <SkeletonTwoItem key={i} />)
) : flatData.length === 0 ? (
@@ -203,11 +215,11 @@ export default function Notification() {
renderItem={({ item }) => {
if (item._type === 'header') {
return (
<View style={[Styles.rowItemsCenter, { marginTop: 16, marginBottom: 8 }]}>
<Text style={{ fontSize: 11, fontWeight: '600', color: colors.dimmed, letterSpacing: 0.6, textTransform: 'uppercase' }}>
<View style={[Styles.rowItemsCenter, Styles.notifHeaderRow]}>
<Text style={[Styles.notifDateText, { color: colors.dimmed }]}>
{item.date}
</Text>
<View style={{ flex: 1, height: 1, backgroundColor: colors.icon + '20', marginLeft: 8 }} />
<View style={[Styles.notifDateSeparator, { backgroundColor: colors.icon + '20' }]} />
</View>
)
}
@@ -217,37 +229,20 @@ export default function Notification() {
return (
<Pressable
onPress={() => handleReadNotification(item.id, item.category, item.idContent)}
style={({ pressed }) => [{
flexDirection: 'row',
alignItems: 'center',
borderRadius: 10,
borderWidth: 1,
style={({ pressed }) => [Styles.notifItemRow, {
borderColor: colors.icon + '20',
backgroundColor: pressed
? colors.icon + '10'
: item.isRead
? colors.icon + '10'
: colors.card,
paddingHorizontal: 12,
paddingVertical: 10,
marginBottom: 6,
}]}
>
{/* Colored icon */}
<View style={{
width: 42,
height: 42,
borderRadius: 21,
backgroundColor: color + '20',
alignItems: 'center',
justifyContent: 'center',
flexShrink: 0,
}}>
<View style={[Styles.notifIconContainer, { backgroundColor: color + '20' }]}>
<Feather name={icon} size={20} color={color} />
</View>
{/* Content */}
<View style={[Styles.flex1, { marginLeft: 10 }]}>
<View style={[Styles.flex1, Styles.notifContent]}>
<View style={[Styles.rowSpaceBetween, Styles.itemsCenter]}>
<View style={[Styles.flex1, Styles.mr10]}>
<Text
@@ -257,6 +252,20 @@ export default function Notification() {
{item.title}
</Text>
</View>
{!item.isRead && (
<Pressable
onPress={(e) => {
e.stopPropagation()
handleMarkOneRead(item.id)
}}
hitSlop={8}
style={({ pressed }) => ({ opacity: pressed ? 0.5 : 1, flexShrink: 0 })}
>
<Text style={Styles.notifMarkReadText}>
Tandai dibaca
</Text>
</Pressable>
)}
</View>
<Text
style={[Styles.textMediumNormal, { color: item.isRead ? colors.dimmed : colors.text, opacity: item.isRead ? 0.7 : 1 }]}