feat(notifications): add notification preferences (#433)

Closes #44 --------- Co-authored-by: Umberto Pepato <[email protected]>
polito · Feb 1, 2024 · 7a8447c · 7a8447c
1 parent 491caad
commit 7a8447c
Show file tree

Hide file tree

Showing 38 changed files with 872 additions and 374 deletions.
diff --git a/assets/translations/en.json b/assets/translations/en.json
@@ -93,6 +93,7 @@
     "campus": "Campus",
     "cancel": "Cancel",
     "capacity": "Capacity",
+    "career": "Career",
     "cfu": "CFU",
     "classroomsNotSpecified": "Classroom not specified",
     "cleanCourseFiles": "Remove all course files",
@@ -522,7 +523,10 @@
     "reservationPresence": "Reservations"
   },
   "notificationsScreen": {
-    "title": "Notifications archive"
+    "title": "Notifications",
+    "perCourseTitle": "Courses",
+    "globalTitle": "Global",
+    "globalSubtitle": "Important notifications are always active"
   },
   "offeringBachelorScreen": {
     "title": "Bachelor degree"

diff --git a/assets/translations/it.json b/assets/translations/it.json
@@ -93,6 +93,7 @@
     "campus": "Sede",
     "cancel": "Annulla",
     "capacity": "Capacità",
+    "career": "Carriera",
     "cfu": "CFU",
     "classroomsNotSpecified": "Luogo non specificato",
     "cleanCourseFiles": "Rimuovi file dei corsi",
@@ -514,15 +515,18 @@
     "eventStartTime": "Inizio evento",
     "information": "Informazioni",
     "logo": "Logo",
-    "title": "Avvisi & News"
+    "title": "News & Eventi"
   },
   "notifications": {
     "events": "Eventi e iniziative",
     "important": "Importanti",
     "reservationPresence": "Prenotazione presenza"
   },
   "notificationsScreen": {
-    "title": "Archivio notifiche"
+    "title": "Notifiche",
+    "perCourseTitle": "Corsi",
+    "globalTitle": "Globali",
+    "globalSubtitle": "Le notifiche importanti sono sempre attive"
   },
   "offeringBachelorScreen": {
     "title": "Lauree triennali"

diff --git a/lib/ui/components/ListItem.tsx b/lib/ui/components/ListItem.tsx
@@ -39,6 +39,7 @@ export interface ListItemProps extends TouchableHighlightProps {
   titleProps?: TextProps;
   multilineTitle?: boolean;
   unread?: boolean;
+  isInVisibleRange?: boolean;
 }
 
 /**

diff --git a/lib/ui/components/SectionHeader.tsx b/lib/ui/components/SectionHeader.tsx
@@ -20,6 +20,8 @@ import { Text } from './Text';
 interface Props {
   title: string;
   titleStyle?: StyleProp<TextStyle>;
+  subtitle?: string;
+  subtitleStyle?: StyleProp<TextStyle>;
   ellipsizeTitle?: boolean;
   linkTo?: To<any>;
   linkToMoreCount?: number;
@@ -35,6 +37,8 @@ interface Props {
 export const SectionHeader = ({
   title,
   titleStyle,
+  subtitle,
+  subtitleStyle,
   ellipsizeTitle = true,
   accessibilityLabel = undefined,
   linkTo,
@@ -67,6 +71,17 @@ export const SectionHeader = ({
           >
             {title}
           </Text>
+          {subtitle && (
+            <Text
+              accessible={false}
+              variant="secondaryText"
+              style={subtitleStyle}
+              accessibilityRole="header"
+              {...ellipsis}
+            >
+              {subtitle}
+            </Text>
+          )}
         </View>
         {trailingItem
           ? trailingItem

diff --git a/lib/ui/components/Switch.tsx b/lib/ui/components/Switch.tsx
@@ -8,13 +8,16 @@ export const Switch = ({ children, ...rest }: SwitchProps) => {
     <RNSwitch
       trackColor={{
         true: Platform.select({
-          ios: palettes.secondary[500],
-          android: palettes.secondary[dark ? 700 : 300],
+          ios: palettes.primary[dark ? 400 : 500],
+          android: palettes.primary[400],
         }),
         false:
           Platform.OS === 'android' && !dark ? palettes.muted[200] : undefined,
       }}
-      thumbColor={Platform.select({ android: palettes.secondary[500] })}
+      thumbColor={Platform.select({
+        android: palettes.primary[500],
+      })}
+      style={{ opacity: 1 }}
       {...rest}
     >
       {children}

diff --git a/lib/ui/components/TopTabBar.tsx b/lib/ui/components/TopTabBar.tsx
@@ -54,6 +54,7 @@ export const TopTabBar = ({
               testID={options.tabBarTestID}
               onPress={onPress}
               onLongPress={onLongPress}
+              badge={options.tabBarBadge?.() as string | number}
             >
               {label as string}
             </Tab>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,7 +29,7 @@
     "@miblanchard/react-native-slider": "^2.2.0",
     "@openspacelabs/react-native-zoomable-view": "^2.1.5",
     "@orama/orama": "^2.0.0-beta.8",
-    "@polito/api-client": "^1.0.0-ALPHA.56",
+    "@polito/api-client": "^1.0.0-ALPHA.57",
     "@react-native-async-storage/async-storage": "^1.17.11",
     "@react-native-clipboard/clipboard": "^1.12.1",
     "@react-native-community/blur": "^4.3.0",

diff --git a/src/core/components/RootNavigator.tsx b/src/core/components/RootNavigator.tsx
@@ -28,7 +28,7 @@ import { UserNavigator } from '../../features/user/components/UserNavigator';
 import { tabBarStyle } from '../../utils/tab-bar';
 import { usePreferencesContext } from '../contexts/PreferencesContext';
 import { useInitFirebaseMessaging } from '../hooks/messaging';
-import { usePushNotifications } from '../hooks/usePushNotifications';
+import { useNotifications } from '../hooks/useNotifications';
 import { useGetSites } from '../queries/placesHooks';
 import { useGetModalMessages, useGetStudent } from '../queries/studentHooks';
 import { ONBOARDING_STEPS } from '../screens/OnboardingModal';
@@ -45,7 +45,7 @@ export const RootNavigator = () => {
   const { data: student } = useGetStudent();
   const { onboardingStep, updatePreference } = usePreferencesContext();
   const navigation = useNavigation<NativeStackNavigationProp<RootParamList>>();
-  const { getUnreadsCount } = usePushNotifications();
+  const { getUnreadsCount } = useNotifications();
   const campus = useGetCurrentCampus();
   const { data: sites } = useGetSites();
 

diff --git a/src/core/contexts/PreferencesContext.ts b/src/core/contexts/PreferencesContext.ts
@@ -4,7 +4,6 @@ import { PlaceOverview } from '@polito/api-client';
 import { PersonOverview } from '@polito/api-client/models';
 
 import { AgendaTypesFilterState } from '../../features/agenda/types/AgendaTypesFilterState';
-import { UnreadNotifications } from '../types/notifications';
 
 export const editablePreferenceKeys = [
   'lastInstalledVersion',
@@ -16,7 +15,6 @@ export const editablePreferenceKeys = [
   'notifications',
   'favoriteServices',
   'peopleSearched',
-  'unreadNotifications',
   'onboardingStep',
   'emailGuideRead',
   'placesSearched',
@@ -31,7 +29,6 @@ export const objectPreferenceKeys = [
   'notifications',
   'favoriteServices',
   'peopleSearched',
-  'unreadNotifications',
   'onboardingStep',
   'emailGuideRead',
   'placesSearched',
@@ -59,17 +56,6 @@ export interface PreferencesContextBase {
   onboardingStep?: number;
   emailGuideRead?: boolean;
   placesSearched: PlaceOverview[];
-  /**
-   * A map whose keys represent a path to an object or area where the update
-   * occurred and leaf values are the number of unread updates
-   *
-   * @example
-   * {
-   *   "teaching": { "courses": { "12345": { "notices": { "12345": 1 } } } },
-   *   "services": { "tickets": { "12345": 2 } },
-   * }
-   */
-  unreadNotifications: UnreadNotifications;
   agendaScreen: {
     layout: 'weekly' | 'daily';
     filters: AgendaTypesFilterState;

diff --git a/src/core/hooks/messaging.ts b/src/core/hooks/messaging.ts
@@ -2,11 +2,15 @@ import { useEffect } from 'react';
 import { PERMISSIONS, RESULTS, check, request } from 'react-native-permissions';
 
 import messaging from '@react-native-firebase/messaging';
+import { useQueryClient } from '@tanstack/react-query';
 
 import { isEnvProduction } from '../../utils/env';
-import { useUpdateDevicePreferences } from '../queries/studentHooks';
+import {
+  NOTIFICATIONS_QUERY_KEY,
+  useUpdateDevicePreferences,
+} from '../queries/studentHooks';
 import { RemoteMessage } from '../types/notifications';
-import { usePushNotifications } from './usePushNotifications';
+import { useNotifications } from './useNotifications';
 
 const requestNotificationPermission = async () => {
   return await request(PERMISSIONS.ANDROID.POST_NOTIFICATIONS);
@@ -19,7 +23,8 @@ const isNotificationPermissionGranted = async () => {
 };
 
 export const useInitFirebaseMessaging = () => {
-  const { navigateToUpdate, updateUnreadStatus } = usePushNotifications();
+  const queryClient = useQueryClient();
+  const { navigateToUpdate } = useNotifications();
   const preferencesQuery = useUpdateDevicePreferences();
 
   if (isEnvProduction) {
@@ -56,11 +61,11 @@ export const useInitFirebaseMessaging = () => {
           });
 
         const unsubscribeOnMessage = messaging().onMessage(remoteMessage =>
-          updateUnreadStatus(remoteMessage as RemoteMessage),
+          queryClient.invalidateQueries(NOTIFICATIONS_QUERY_KEY),
         );
 
         messaging().setBackgroundMessageHandler(async remoteMessage => {
-          updateUnreadStatus(remoteMessage as RemoteMessage);
+          queryClient.invalidateQueries(NOTIFICATIONS_QUERY_KEY);
         });
 
         return () =>