Merge pull request #3051 from ever-co/3029-improvement-notification--…

…notification-cards-should-disappear-if-user-checked-them feat: should hide ouststanding notification after visit outstating tab
ever-co · Sep 19, 2024 · bbeae2e · bbeae2e
2 parents 3feb121 + e1957ad
commit bbeae2e
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 4 deletions.
diff --git a/apps/web/app/constants.ts b/apps/web/app/constants.ts
@@ -285,6 +285,7 @@ export const TASKS_ESTIMATE_HOURS_MODAL_DATE = 'tasks-estimate-hours-modal-date'
 export const DAILY_PLAN_ESTIMATE_HOURS_MODAL_DATE = 'daily-plan-estimate-hours-modal';
 export const DEFAULT_PLANNED_TASK_ID = 'default-planned-task-id';
 export const LAST_OPTION__CREATE_DAILY_PLAN_MODAL = 'last-option--create-daily-plan-modal';
+export const HAS_VISITED_OUTSTANDING_TAB = 'has-visited-outstanding-tab';
 
 // OAuth provider's keys
 

diff --git a/apps/web/lib/features/team/team-outstanding-notifications.tsx b/apps/web/lib/features/team/team-outstanding-notifications.tsx
@@ -7,6 +7,7 @@ import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
 import { estimatedTotalTime } from '../task/daily-plan';
+import { HAS_VISITED_OUTSTANDING_TAB } from '@app/constants';
 
 interface IEmployeeWithOutstanding {
 	employeeId: string | undefined;
@@ -53,15 +54,22 @@ function UserOutstandingNotification({ outstandingPlans, user }: { outstandingPl
 	useEffect(() => {
 		const checkNotification = () => {
 			const alreadySeen = window && parseInt(window?.localStorage.getItem(DISMISSAL_TIMESTAMP_KEY) || '0', 10);
+			const hasVisitedOutstandingTab =
+				window && JSON.parse(window?.localStorage.getItem(HAS_VISITED_OUTSTANDING_TAB) as string);
 			const currentTime = new Date().getTime();
 
-			if (!alreadySeen || currentTime - alreadySeen > REAPPEAR_INTERVAL) {
+			if (hasVisitedOutstandingTab) {
+				setVisible(false);
+			} else if (!alreadySeen || currentTime - alreadySeen > REAPPEAR_INTERVAL) {
 				setVisible(true);
 			}
 		};
 
 		checkNotification();
-		const intervalId = setInterval(checkNotification, REAPPEAR_INTERVAL);
+		const intervalId = setInterval(function () {
+			window && window?.localStorage.setItem(HAS_VISITED_OUTSTANDING_TAB, JSON.stringify(false));
+			checkNotification();
+		}, REAPPEAR_INTERVAL);
 		return () => clearInterval(intervalId);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
@@ -154,15 +162,22 @@ function ManagerOutstandingUsersNotification({ outstandingTasks }: { outstanding
 		const checkNotification = () => {
 			const alreadySeen =
 				window && parseInt(window?.localStorage.getItem(MANAGER_DISMISSAL_TIMESTAMP_KEY) || '0', 10);
+			const hasVisitedOutstandingTab =
+				window && JSON.parse(window?.localStorage.getItem(HAS_VISITED_OUTSTANDING_TAB) as string);
 			const currentTime = new Date().getTime();
 
-			if (!alreadySeen || currentTime - alreadySeen > REAPPEAR_INTERVAL) {
+			if (hasVisitedOutstandingTab) {
+				setVisible(false);
+			} else if (!alreadySeen || currentTime - alreadySeen > REAPPEAR_INTERVAL) {
 				setVisible(true);
 			}
 		};
 
 		checkNotification();
-		const intervalId = setInterval(checkNotification, REAPPEAR_INTERVAL);
+		const intervalId = setInterval(function () {
+			window && window?.localStorage.setItem(HAS_VISITED_OUTSTANDING_TAB, JSON.stringify(false));
+			checkNotification();
+		}, REAPPEAR_INTERVAL);
 		return () => clearInterval(intervalId);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);

diff --git a/apps/web/lib/features/user-profile-plans.tsx b/apps/web/lib/features/user-profile-plans.tsx
@@ -35,6 +35,7 @@ import { checkPastDate } from 'lib/utils';
 
 import { DottedLanguageObjectStringPaths, useTranslations } from 'next-intl';
 import { useLocalStorageState } from '@app/hooks/useLocalStorageState';
+import { HAS_VISITED_OUTSTANDING_TAB } from '@app/constants';
 
 export type FilterTabs = 'Today Tasks' | 'Future Tasks' | 'Past Tasks' | 'All Tasks' | 'Outstanding';
 type FilterOutstanding = 'ALL' | 'DATE';
@@ -89,6 +90,8 @@ export function UserProfilePlans() {
 		} else if (currentTab === 'Future Tasks') {
 			setCurrentDataDailyPlan(futurePlans);
 			setFilterFuturePlanData(filterDailyPlan(date as any, futurePlans));
+		} else if (currentTab === 'Outstanding') {
+			window.localStorage.setItem(HAS_VISITED_OUTSTANDING_TAB, JSON.stringify(true));
 		}
 	}, [currentTab, setCurrentDataDailyPlan, date, currentDataDailyPlan, futurePlans, pastPlans, sortedPlans]);