From 9ce32f92f4caca0f1e20a8d907842bd785c9bca2 Mon Sep 17 00:00:00 2001 From: caiodasilva2005 Date: Fri, 20 Dec 2024 18:25:41 -0500 Subject: [PATCH] #3074-refactored notifications for route change --- src/backend/src/controllers/users.controllers.ts | 2 +- src/backend/src/routes/users.routes.ts | 2 +- src/frontend/src/apis/users.api.ts | 8 ++++---- src/frontend/src/components/NotificationAlert.tsx | 12 ++++-------- src/frontend/src/components/NotificationCard.tsx | 1 + src/frontend/src/hooks/users.hooks.ts | 14 +++++++------- src/frontend/src/pages/HomePage/Home.tsx | 2 +- src/frontend/src/utils/urls.ts | 4 ++-- 8 files changed, 21 insertions(+), 24 deletions(-) diff --git a/src/backend/src/controllers/users.controllers.ts b/src/backend/src/controllers/users.controllers.ts index b3fee931c2..baa0d9228a 100644 --- a/src/backend/src/controllers/users.controllers.ts +++ b/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( diff --git a/src/backend/src/routes/users.routes.ts b/src/backend/src/routes/users.routes.ts index 96be49828c..b859968e5a 100644 --- a/src/backend/src/routes/users.routes.ts +++ b/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; diff --git a/src/frontend/src/apis/users.api.ts b/src/frontend/src/apis/users.api.ts index 5a91bff5fd..4999c8cb66 100644 --- a/src/frontend/src/apis/users.api.ts +++ b/src/frontend/src/apis/users.api.ts @@ -164,8 +164,8 @@ export const getManyUserTasks = (userIds: string[]) => { /* * Gets all unread notifications of the user with the given id */ -export const getNotifications = (id: string) => { - return axios.get(apiUrls.userNotifications(id), { +export const getNotifications = () => { + return axios.get(apiUrls.userNotifications(), { transformResponse: (data) => JSON.parse(data) }); }; @@ -173,6 +173,6 @@ export const getNotifications = (id: string) => { /* * Removes a notification from the user with the given id */ -export const removeNotification = (userId: string, notificationId: string) => { - return axios.post(apiUrls.userRemoveNotifications(userId), { notificationId }); +export const removeNotification = (notificationId: string) => { + return axios.post(apiUrls.userRemoveNotifications(), { notificationId }); }; diff --git a/src/frontend/src/components/NotificationAlert.tsx b/src/frontend/src/components/NotificationAlert.tsx index 581d849ef0..668c0f3cfd 100644 --- a/src/frontend/src/components/NotificationAlert.tsx +++ b/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 = ({ 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(); const history = useHistory(); diff --git a/src/frontend/src/components/NotificationCard.tsx b/src/frontend/src/components/NotificationCard.tsx index 1e4cfb4c02..38dd994029 100644 --- a/src/frontend/src/components/NotificationCard.tsx +++ b/src/frontend/src/components/NotificationCard.tsx @@ -37,6 +37,7 @@ const NotificationCard: React.FC = ({ notification, remov onClick={async () => await onClick(notification)} sx={{ display: 'flex', + alignItems: 'center', gap: 1, cursor: !!notification.eventLink ? 'pointer' : 'default' }} diff --git a/src/frontend/src/hooks/users.hooks.ts b/src/frontend/src/hooks/users.hooks.ts index 32279217f9..ffc7a65d75 100644 --- a/src/frontend/src/hooks/users.hooks.ts +++ b/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(['users', userId, 'notifications'], async () => { - const { data } = await getNotifications(userId); +export const useUserNotifications = () => { + return useQuery(['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( - ['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']); } } ); diff --git a/src/frontend/src/pages/HomePage/Home.tsx b/src/frontend/src/pages/HomePage/Home.tsx index 76db11f05a..f76ecc0e4c 100644 --- a/src/frontend/src/pages/HomePage/Home.tsx +++ b/src/frontend/src/pages/HomePage/Home.tsx @@ -18,7 +18,7 @@ const Home = () => { const [onMemberHomePage, setOnMemberHomePage] = useState(false); return ( <> - {!onMemberHomePage && } + {!onMemberHomePage && } {isGuest(user.role) && !onMemberHomePage ? ( ) : isMember(user.role) ? ( diff --git a/src/frontend/src/utils/urls.ts b/src/frontend/src/utils/urls.ts index d50675ed69..99c9d82c82 100644 --- a/src/frontend/src/utils/urls.ts +++ b/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`;