#9533

Committed 05 Dec 2024 02:27PM UTC coverage: 5.947%. First build

Build # #9533

Build Type

Pull #7254

travis-ci

Pull Request Pull Request #7254: In-app Notifications v1 for Beta Testers

Run Details

194 of 10628 branches covered (1.83%)

Branch coverage included in aggregate %.

40 of 177 new or added lines in 15 files covered. (22.6%)

1532 of 18394 relevant lines covered (8.33%)

0.19 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/src/main/inAppNotifications/useInAppNotifications.ts

import { NotificationEventInAppState, NotificationEvent } from '@/core/apollo/generated/graphql-schema';
import {
  useInAppNotificationsQuery,
  useInAppNotificationsUnreadCountQuery,
  useUpdateNotificationStateMutation,
  useMarkNotificationsAsReadMutation,
} from '@/core/apollo/generated/apollo-hooks';
import { useInAppNotificationsContext } from './InAppNotificationsContext';
import { ApolloCache } from '@apollo/client';
import { InAppNotificationModel } from './model/InAppNotificationModel';
import { mapInAppNotificationToModel } from './util/mapInAppNotificationToModel';
import { useMemo, useCallback, useEffect, useRef } from 'react';
import { TagCategoryValues, error as logError } from '@/core/logging/sentry/log';
import { getNotificationTypesForFilter } from './notificationFilters';

export const IN_APP_NOTIFICATIONS_PAGE_SIZE = 10;

// Update the cache as refetching all could be expensive
const updateNotificationsCache = (
  cache: ApolloCache<unknown>,
  ids: string[],
  newState: NotificationEventInAppState
) => {
  // Modify individual notification objects in the cache
  ids.forEach(id => {
    cache.modify({
      id: cache.identify({ __typename: 'InAppNotification', id }),
      fields: {
        state: () => newState,
      },
    });
  });
};

// The set of notification event types currently being retrieved
export const NOTIFICATION_EVENT_TYPES: NotificationEvent[] = [];

export const useInAppNotifications = () => {
  const { isEnabled, isOpen, selectedFilter } = useInAppNotificationsContext();
  const prevIsOpenRef = useRef(isOpen);
  const prevFilterRef = useRef(selectedFilter);

  const [updateState] = useUpdateNotificationStateMutation();
  const [markAsRead] = useMarkNotificationsAsReadMutation();

  // Get the notification types based on the selected filter
  const notificationTypes = useMemo(() => getNotificationTypesForFilter(selectedFilter), [selectedFilter]);

  const { data, loading, error, fetchMore, refetch } = useInAppNotificationsQuery({
    variables: {
      types: notificationTypes,
      first: IN_APP_NOTIFICATIONS_PAGE_SIZE,
    },
    skip: !isEnabled || !isOpen,
  });

  // Refetch notifications when the dialog is opened OR when the filter changes
  useEffect(() => {
    const filterChanged = prevFilterRef.current !== selectedFilter;
    const dialogOpened = isEnabled && isOpen && !prevIsOpenRef.current;

    if ((dialogOpened || filterChanged) && refetch) {
      refetch();
    }

    prevIsOpenRef.current = isOpen;
    prevFilterRef.current = selectedFilter;
  }, [isOpen, isEnabled, selectedFilter, refetch]);

  const { data: unreadCountData } = useInAppNotificationsUnreadCountQuery({
    skip: !isEnabled,
  });

  // Memoize the filtered and mapped notifications to avoid unnecessary re-processing
  const notificationsInApp = useMemo(() => {
    const notifications: InAppNotificationModel[] = [];

    for (const notificationData of data?.me?.notifications?.inAppNotifications ?? []) {
      if (notificationData.state === NotificationEventInAppState.Archived) {
        continue; // Skip archived notifications
      }

      const notification = mapInAppNotificationToModel(notificationData);
      if (notification) {
        notifications.push(notification);
      } else {
        logError('Broken InAppNotification', {
          category: TagCategoryValues.NOTIFICATIONS,
          label: `id=${notificationData?.id}, type=${notificationData?.type}`,
        });
      }
    }

    return notifications;
  }, [data?.me?.notifications?.inAppNotifications]);

  // Calculate total unread count from the dedicated query
  const unreadCount = useMemo(() => {
    return unreadCountData?.me?.notificationsUnreadCount ?? 0;
  }, [unreadCountData?.me?.notificationsUnreadCount]);

  // Check if there are more notifications to load
  const hasMore = useMemo(() => {
    return data?.me?.notifications?.pageInfo?.hasNextPage ?? false;
  }, [data?.me?.notifications?.pageInfo?.hasNextPage]);

  // Function to fetch more notifications
  const fetchMoreNotifications = useCallback(async () => {
    if (!hasMore || loading) {
      return;
    }

    try {
      await fetchMore({
        variables: {
          types: notificationTypes,
          first: IN_APP_NOTIFICATIONS_PAGE_SIZE,
          after: data?.me?.notifications?.pageInfo?.endCursor,
        },
        updateQuery: (prev, { fetchMoreResult }) => {
          if (!fetchMoreResult) return prev;

          return {
            ...prev,
            me: {
              ...prev.me,
              notifications: {
                ...fetchMoreResult.me.notifications,
                inAppNotifications: [
                  ...(prev.me?.notifications?.inAppNotifications ?? []),
                  ...(fetchMoreResult.me?.notifications?.inAppNotifications ?? []),
                ],
              },
            },
          };
        },
      });
    } catch (error) {
      console.error('Failed to fetch more notifications:', error);
    }
  }, [fetchMore, hasMore, loading, data?.me?.notifications?.pageInfo?.endCursor, notificationTypes]);

  const updateNotificationState = useCallback(
    async (id: string, status: NotificationEventInAppState) => {
      try {
        await updateState({
          variables: {
            ID: id,
            state: status,
          },
          update: (cache, result) => {
            if (result?.data?.updateNotificationState === status) {
              updateNotificationsCache(cache, [id], status);
            }
          },
        });
      } catch (error) {
        console.error('Failed to update notification state:', error);
      }
    },
    [updateState]
  );

  const markNotificationsAsRead = useCallback(async () => {
    try {
      await markAsRead({
        variables: {
          types: notificationTypes as NotificationEvent[],
        },
        update: (_, result) => {
          if (result?.data?.markNotificationsAsRead) {
            // far simpler than updating the cache manually
            refetch?.();
          }
        },
      });
    } catch (error) {
      console.error('Failed to mark notifications as read:', error);
    }
  }, [markAsRead, notificationTypes, refetch]);

  return {
    notificationsInApp,
    unreadCount,
    isLoading: loading,
    updateNotificationState,
    markNotificationsAsRead,
    fetchMore: fetchMoreNotifications,
    hasMore,
    error,
  };
};

1	import { NotificationEventInAppState, NotificationEvent } from '@/core/apollo/generated/graphql-schema';
2	import {
3	useInAppNotificationsQuery,
4	useInAppNotificationsUnreadCountQuery,
5	useUpdateNotificationStateMutation,
6	useMarkNotificationsAsReadMutation,
7	} from '@/core/apollo/generated/apollo-hooks';
8	import { useInAppNotificationsContext } from './InAppNotificationsContext';
9	import { ApolloCache } from '@apollo/client';
10	import { InAppNotificationModel } from './model/InAppNotificationModel';
11	import { mapInAppNotificationToModel } from './util/mapInAppNotificationToModel';
12	import { useMemo, useCallback, useEffect, useRef } from 'react';
13	import { TagCategoryValues, error as logError } from '@/core/logging/sentry/log';
14	import { getNotificationTypesForFilter } from './notificationFilters';
15
16	export const IN_APP_NOTIFICATIONS_PAGE_SIZE = 10;
17
NEW 18	// Update the cache as refetching all could be expensive	×
19	const updateNotificationsCache = (
20	cache: ApolloCache<unknown>,
21	ids: string[],
22	newState: NotificationEventInAppState
23	) => {
24	// Modify individual notification objects in the cache
25	ids.forEach(id => {
26	cache.modify({
27	id: cache.identify({ __typename: 'InAppNotification', id }),
28	fields: {
29	state: () => newState,
30	},
31	});
32	});
33	};
34
35	// The set of notification event types currently being retrieved
36	export const NOTIFICATION_EVENT_TYPES: NotificationEvent[] = [];
37
38	export const useInAppNotifications = () => {
39	const { isEnabled, isOpen, selectedFilter } = useInAppNotificationsContext();
40	const prevIsOpenRef = useRef(isOpen);
41	const prevFilterRef = useRef(selectedFilter);
42
43	const [updateState] = useUpdateNotificationStateMutation();
44	const [markAsRead] = useMarkNotificationsAsReadMutation();
45
46	// Get the notification types based on the selected filter
47	const notificationTypes = useMemo(() => getNotificationTypesForFilter(selectedFilter), [selectedFilter]);
48
49	const { data, loading, error, fetchMore, refetch } = useInAppNotificationsQuery({
50	variables: {
51	types: notificationTypes,
52	first: IN_APP_NOTIFICATIONS_PAGE_SIZE,
53	},
54	skip: !isEnabled \|\| !isOpen,
55	});
56
57	// Refetch notifications when the dialog is opened OR when the filter changes
58	useEffect(() => {
59	const filterChanged = prevFilterRef.current !== selectedFilter;
60	const dialogOpened = isEnabled && isOpen && !prevIsOpenRef.current;
61
62	if ((dialogOpened \|\| filterChanged) && refetch) {
63	refetch();
64	}
65
66	prevIsOpenRef.current = isOpen;
67	prevFilterRef.current = selectedFilter;
68	}, [isOpen, isEnabled, selectedFilter, refetch]);
69
70	const { data: unreadCountData } = useInAppNotificationsUnreadCountQuery({
71	skip: !isEnabled,
72	});
73
74	// Memoize the filtered and mapped notifications to avoid unnecessary re-processing
75	const notificationsInApp = useMemo(() => {
76	const notifications: InAppNotificationModel[] = [];
77
78	for (const notificationData of data?.me?.notifications?.inAppNotifications ?? []) {
79	if (notificationData.state === NotificationEventInAppState.Archived) {
80	continue; // Skip archived notifications
81	}
82
83	const notification = mapInAppNotificationToModel(notificationData);
84	if (notification) {
85	notifications.push(notification);
86	} else {
87	logError('Broken InAppNotification', {
88	category: TagCategoryValues.NOTIFICATIONS,
89	label: `id=${notificationData?.id}, type=${notificationData?.type}`,
NEW 90	});	×
NEW 91	}	×
NEW 92	}	×
93
NEW 94	return notifications;	×
95	}, [data?.me?.notifications?.inAppNotifications]);
NEW 96		×
97	// Calculate total unread count from the dedicated query
98	const unreadCount = useMemo(() => {
99	return unreadCountData?.me?.notificationsUnreadCount ?? 0;
100	}, [unreadCountData?.me?.notificationsUnreadCount]);
101
102	// Check if there are more notifications to load
NEW 103	const hasMore = useMemo(() => {	×
NEW 104	return data?.me?.notifications?.pageInfo?.hasNextPage ?? false;	×
NEW 105	}, [data?.me?.notifications?.pageInfo?.hasNextPage]);	×
106
107	// Function to fetch more notifications
NEW 108	const fetchMoreNotifications = useCallback(async () => {	×
109	if (!hasMore \|\| loading) {
110	return;
NEW 111	}	×
NEW 112		×
113	try {	×
NEW 114	await fetchMore({	×
NEW 115	variables: {	×
116	types: notificationTypes,
117	first: IN_APP_NOTIFICATIONS_PAGE_SIZE,
118	after: data?.me?.notifications?.pageInfo?.endCursor,
NEW 119	},	×
NEW 120	updateQuery: (prev, { fetchMoreResult }) => {	×
121	if (!fetchMoreResult) return prev;
122
123	return {
124	...prev,
125	me: {
126	...prev.me,
127	notifications: {
128	...fetchMoreResult.me.notifications,
NEW 129	inAppNotifications: [	×
130	...(prev.me?.notifications?.inAppNotifications ?? []),
131	...(fetchMoreResult.me?.notifications?.inAppNotifications ?? []),
132	],
133	},
134	},
135	};
136	},
137	});
138	} catch (error) {
139	console.error('Failed to fetch more notifications:', error);
140	}
141	}, [fetchMore, hasMore, loading, data?.me?.notifications?.pageInfo?.endCursor, notificationTypes]);
142
143	const updateNotificationState = useCallback(
144	async (id: string, status: NotificationEventInAppState) => {
145	try {
146	await updateState({
147	variables: {
148	ID: id,
149	state: status,
150	},
151	update: (cache, result) => {
152	if (result?.data?.updateNotificationState === status) {
153	updateNotificationsCache(cache, [id], status);
154	}
155	},
156	});
157	} catch (error) {
158	console.error('Failed to update notification state:', error);
159	}
160	},
161	[updateState]
162	);
163
164	const markNotificationsAsRead = useCallback(async () => {
165	try {
166	await markAsRead({
167	variables: {
168	types: notificationTypes as NotificationEvent[],
169	},
170	update: (_, result) => {
171	if (result?.data?.markNotificationsAsRead) {
172	// far simpler than updating the cache manually
173	refetch?.();
174	}
175	},
176	});
177	} catch (error) {
178	console.error('Failed to mark notifications as read:', error);
179	}
180	}, [markAsRead, notificationTypes, refetch]);
181
182	return {
183	notificationsInApp,
184	unreadCount,
185	isLoading: loading,
186	updateNotificationState,
187	markNotificationsAsRead,
188	fetchMore: fetchMoreNotifications,
189	hasMore,
190	error,
191	};
192	};

alkem-io / client-web / #9533

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous