#3074-refactored notifications for route change

src/backend/src/controllers/users.controllers.ts

@@ -205,7 +205,7 @@ export default class UsersController {
 
   static async removeUserNotification(req: Request, res: Response, next: NextFunction) {
     try {
-      const { notificationId } = req.params;
+      const { notificationId } = req.body;
       const { organization, currentUser } = req;
 
       const unreadNotifications = await UsersService.removeUserNotification(

src/backend/src/routes/users.routes.ts

@@ -56,6 +56,6 @@ userRouter.post(
 );
 userRouter.get('/notifications/current-user', UsersController.getUserUnreadNotifications);
 userRouter.get('/announcements/current-user', UsersController.getUserUnreadAnnouncements);
-userRouter.post('/notifications/:notificationId/remove', UsersController.removeUserNotification);
+userRouter.post('/notifications/remove', nonEmptyString(body('notificationId')), UsersController.removeUserNotification);
 
 export default userRouter;

src/frontend/src/apis/users.api.ts

@@ -164,15 +164,15 @@ export const getManyUserTasks = (userIds: string[]) => {
 /*
  * Gets all unread notifications of the user with the given id
  */
-export const getNotifications = (id: string) => {
-  return axios.get<Notification[]>(apiUrls.userNotifications(id), {
+export const getNotifications = () => {
+  return axios.get<Notification[]>(apiUrls.userNotifications(), {
     transformResponse: (data) => JSON.parse(data)
   });
 };
 
 /*
  * Removes a notification from the user with the given id
  */
-export const removeNotification = (userId: string, notificationId: string) => {
-  return axios.post<Notification[]>(apiUrls.userRemoveNotifications(userId), { notificationId });
+export const removeNotification = (notificationId: string) => {
+  return axios.post<Notification[]>(apiUrls.userRemoveNotifications(), { notificationId });
 };

src/frontend/src/components/NotificationAlert.tsx

@@ -1,17 +1,13 @@
 import { Box } from '@mui/material';
 import React, { useEffect, useState } from 'react';
-import { Notification, User } from 'shared';
+import { Notification } from 'shared';
 import NotificationCard from './NotificationCard';
 import { useRemoveUserNotification, useUserNotifications } from '../hooks/users.hooks';
 import { useHistory } from 'react-router-dom';
 
-interface NotificationAlertProps {
-  user: User;
-}
-
-const NotificationAlert: React.FC<NotificationAlertProps> = ({ user }) => {
-  const { data: notifications, isLoading: notificationsIsLoading } = useUserNotifications(user.userId);
-  const { mutateAsync: removeNotification, isLoading: removeIsLoading } = useRemoveUserNotification(user.userId);
+const NotificationAlert: React.FC = () => {
+  const { data: notifications, isLoading: notificationsIsLoading } = useUserNotifications();
+  const { mutateAsync: removeNotification, isLoading: removeIsLoading } = useRemoveUserNotification();
   const [currentNotification, setCurrentNotification] = useState<Notification>();
   const history = useHistory();
 

src/frontend/src/components/NotificationCard.tsx

@@ -37,6 +37,7 @@ const NotificationCard: React.FC<NotificationCardProps> = ({ notification, remov
           onClick={async () => await onClick(notification)}
           sx={{
             display: 'flex',
+            alignItems: 'center',
             gap: 1,
             cursor: !!notification.eventLink ? 'pointer' : 'default'
           }}

src/frontend/src/hooks/users.hooks.ts

@@ -269,9 +269,9 @@ export const useManyUserTasks = (userIds: string[]) => {
  * @param userId id of user to get unread notifications from
  * @returns
  */
-export const useUserNotifications = (userId: string) => {
-  return useQuery<Notification[], Error>(['users', userId, 'notifications'], async () => {
-    const { data } = await getNotifications(userId);
+export const useUserNotifications = () => {
+  return useQuery<Notification[], Error>(['users', 'notifications'], async () => {
+    const { data } = await getNotifications();
     return data;
   });
 };
@@ -281,17 +281,17 @@ export const useUserNotifications = (userId: string) => {
  * @param userId id of user to get unread notifications from
  * @returns
  */
-export const useRemoveUserNotification = (userId: string) => {
+export const useRemoveUserNotification = () => {
   const queryClient = useQueryClient();
   return useMutation<Notification[], Error, Notification>(
-    ['users', userId, 'notifications', 'remove'],
+    ['users', 'notifications', 'remove'],
     async (notification: Notification) => {
-      const { data } = await removeNotification(userId, notification.notificationId);
+      const { data } = await removeNotification(notification.notificationId);
       return data;
     },
     {
       onSuccess: () => {
-        queryClient.invalidateQueries(['users', userId, 'notifications']);
+        queryClient.invalidateQueries(['users', 'notifications']);
       }
     }
   );

src/frontend/src/pages/HomePage/Home.tsx

@@ -18,7 +18,7 @@ const Home = () => {
   const [onMemberHomePage, setOnMemberHomePage] = useState(false);
   return (
     <>
-      {!onMemberHomePage && <NotificationAlert user={user} />}
+      {!onMemberHomePage && <NotificationAlert />}
       {isGuest(user.role) && !onMemberHomePage ? (
         <IntroGuestHomePage user={user} setOnMemberHomePage={setOnMemberHomePage} />
       ) : isMember(user.role) ? (

src/frontend/src/utils/urls.ts

@@ -26,8 +26,8 @@ const userScheduleSettings = (id: string) => `${usersById(id)}/schedule-settings
 const userScheduleSettingsSet = () => `${users()}/schedule-settings/set`;
 const userTasks = (id: string) => `${usersById(id)}/tasks`;
 const manyUserTasks = () => `${users()}/tasks/get-many`;
-const userNotifications = (id: string) => `${usersById(id)}/notifications`;
-const userRemoveNotifications = (id: string) => `${usersById(id)}/notifications/remove`;
+const userNotifications = () => `${users()}/notifications/current-user`;
+const userRemoveNotifications = () => `${users()}/notifications/remove`;
 
 /**************** Projects Endpoints ****************/
 const projects = () => `${API_URL}/projects`;