BA-2392 RN Notifications: Divide List by Read

packages/components/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @baseapp-frontend/components
 
+## 1.0.30
+
+### Patch Changes
+
+- Native: Dividing notifications into unread/read
+
 ## 1.0.29
 
 ### Patch Changes

packages/components/modules/notifications/native/NotificationsList/Divider/index.tsx

@@ -0,0 +1,24 @@
+import { FC } from 'react'
+
+import { Text } from '@baseapp-frontend/design-system/components/native/typographies'
+import { View } from '@baseapp-frontend/design-system/components/native/views'
+import { useTheme } from '@baseapp-frontend/design-system/providers/native'
+
+import { createStyles } from './styles'
+
+const Divider: FC = () => {
+  const theme = useTheme()
+  const styles = createStyles(theme)
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.line} />
+      <View>
+        <Text variant="caption">Read</Text>
+      </View>
+      <View style={styles.line} />
+    </View>
+  )
+}
+
+export default Divider

packages/components/modules/notifications/native/NotificationsList/Divider/styles.ts

@@ -0,0 +1,25 @@
+import { Theme } from '@baseapp-frontend/design-system/styles/native'
+
+import { StyleSheet } from 'react-native'
+
+export const createStyles = (theme: Theme) =>
+  StyleSheet.create({
+    container: {
+      height: 30,
+      width: '100%',
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+      gap: 16,
+    },
+    line: {
+      height: 1,
+      width: 10,
+      backgroundColor: theme.colors.surface.disabled,
+      flexGrow: 1,
+    },
+    text: {
+      alignItems: 'center',
+    },
+  })

packages/components/modules/notifications/native/NotificationsList/NotificationItem/index.tsx

@@ -10,6 +10,7 @@ import { NotificationItemProps } from './types'
 const NotificationItem: FC<NotificationItemProps> = ({
   notification: notificationRef,
   NotificationItemRenderer = DefaultNotificationItemRenderer,
+  refetch,
 }) => {
   const notification = useFragment(NotificationItemFragment, notificationRef)
 
@@ -18,6 +19,9 @@ const NotificationItem: FC<NotificationItemProps> = ({
   const markAsRead = () => {
     if (notification.unread) {
       commitMutation({
+        // TODO: check whether this is needed (clicking on a notification should navigate to the underlying comment,
+        // so the screen will not remain visible). If needed, check whether we can use optimistic updates
+        onCompleted: refetch,
         variables: {
           input: {
             read: true,

packages/components/modules/notifications/native/NotificationsList/NotificationItem/types.ts

@@ -9,6 +9,7 @@ import { NotificationItemRendererProps } from './NotificationItemRenderer/types'
 export interface NotificationItemProps {
   notification: NotificationItemFragment$key
   NotificationItemRenderer?: FC<NotificationItemRendererProps>
+  refetch: VoidFunction
 }
 
 export interface GenericItemProps {

packages/components/modules/notifications/native/NotificationsList/index.tsx

@@ -16,6 +16,7 @@ import {
   useNotificationsSubscription,
 } from '../../common'
 import { NotificationsNode } from '../../common/types'
+import Divider from './Divider'
 import DefaultEmptyState from './EmptyState'
 import MarkAllAsReadButton from './MarkAllAsReadButton'
 import DefaultNotificationItem from './NotificationItem'
@@ -48,19 +49,24 @@ const NotificationsList: FC<NotificationsListProps> = ({
   )
 
   const refetchNotifications = () => {
-    refetch(options, { fetchPolicy: 'network-only' })
+    refetch(options, { fetchPolicy: 'store-and-network' })
   }
 
-  const renderNotificationItem = (notification: NotificationsNode) => {
+  const renderNotificationItem = (notification: NotificationsNode, index: number) => {
     if (!notification) return null
-
-    // TODO add notifications divider and unread/Read notifications as per design
+    let divider = null
+    if (!notification.unread && index > 0 && notifications[index - 1]?.unread) {
+      divider = <Divider />
+    }
     return (
-      <NotificationItem
-        key={`notification-${notification.id}`}
-        notification={notification}
-        {...NotificationItemProps}
-      />
+      <>
+        {divider}
+        <NotificationItem
+          notification={notification}
+          refetch={refetchNotifications}
+          {...NotificationItemProps}
+        />
+      </>
     )
   }
 
@@ -71,7 +77,7 @@ const NotificationsList: FC<NotificationsListProps> = ({
       <View style={styles.listContainer}>
         <InfiniteScrollerView
           data={notifications}
-          renderItem={({ item }: { item: NotificationsNode }) => renderNotificationItem(item)}
+          renderItem={({ item, index }: { item: NotificationsNode, index: number }) => renderNotificationItem(item, index)}
           estimatedItemSize={134}
           onEndReached={() => {
             if (hasNext) {

packages/components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/components",
   "description": "BaseApp components modules such as comments, notifications, messages, and more.",
-  "version": "1.0.29",
+  "version": "1.0.30",
   "sideEffects": false,
   "scripts": {
     "babel:transpile": "babel modules -d tmp-babel --extensions .ts,.tsx --ignore '**/__tests__/**','**/__storybook__/**'",