Clean on logout the session items which create in layout and private …

…route
wwWallet · Mar 19, 2024 · 4122cdf · 4122cdf
1 parent 35f94d4
commit 4122cdf
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/src/api/index.ts b/src/api/index.ts
@@ -62,7 +62,10 @@ export interface BackendApi {
 export function useApi(): BackendApi {
 	const [appToken, setAppToken, clearAppToken] = useSessionStorage<string | null>("appToken", null);
 	const [sessionState, setSessionState, clearSessionState] = useSessionStorage<SessionState | null>("sessionState", null);
-	const clearSessionStorage = useClearStorages(clearAppToken, clearSessionState);
+	const [, , clearTokenSentInSession] = useSessionStorage<boolean | null>("tokenSentInSession", null);
+	const [, , clearIsMessageNoGrantedVisible] = useSessionStorage<boolean | null>("isMessageNoGrantedVisible", null);
+	const [, , clearIsMessageGrantedVisible] = useSessionStorage<boolean | null>("isMessageGrantedVisible", null);
+	const clearSessionStorage = useClearStorages(clearAppToken, clearSessionState, clearTokenSentInSession, clearIsMessageNoGrantedVisible, clearIsMessageGrantedVisible);
 
 	return useMemo(
 		() => {

diff --git a/src/components/Layout.js b/src/components/Layout.js
@@ -13,9 +13,8 @@ const Layout = ({ children, isPermissionGranted, tokenSentInSession }) => {
 	const [isContentVisible, setIsContentVisible] = useState(false);
 	const [isOpen, setIsOpen] = useState(false);
 	const toggleSidebar = () => setIsOpen(!isOpen);
-	const [isMessageNoGrantedVisible, setIsMessageNoGrantedVisible] = useSessionStorage('isMessageNoGrantedVisible', true);
-	const [isMessageGrantedVisible, setIsMessageGrantedVisible] = useSessionStorage('isMessageGrantedVisible', true);
-
+	const [isMessageNoGrantedVisible, setIsMessageNoGrantedVisible] = useSessionStorage('isMessageNoGrantedVisible', null);
+	const [isMessageGrantedVisible, setIsMessageGrantedVisible] = useSessionStorage('isMessageGrantedVisible', null);
 
 	const handleNavigate = (path) => {
 		if (location.pathname === path) {
@@ -26,11 +25,11 @@ const Layout = ({ children, isPermissionGranted, tokenSentInSession }) => {
 	};
 
 	const handleCloseMessageNoGranted = () => {
-		setIsMessageNoGrantedVisible(false);
+		setIsMessageNoGrantedVisible(true);
 	};
 
 	const handleCloseMessageGranted = () => {
-		setIsMessageGrantedVisible(false);
+		setIsMessageGrantedVisible(true);
 	};
 
 	useEffect(() => {
@@ -80,7 +79,7 @@ const Layout = ({ children, isPermissionGranted, tokenSentInSession }) => {
 				{/* Content */}
 				<div className="flex-grow bg-gray-100 p-6 mt-10 pt-10 sm:mt-0 sm:pt-6 overflow-y-auto">
 					{/* Conditional Notification Message */}
-					{(!isPermissionGranted && isMessageNoGrantedVisible) || (isPermissionGranted && tokenSentInSession !== 'true' && isMessageGrantedVisible) ? (
+					{(!isPermissionGranted && !isMessageNoGrantedVisible) || (isPermissionGranted && tokenSentInSession !== 'true' && !isMessageGrantedVisible) ? (
 						<div className="bg-orange-100 shadow-lg p-4 rounded-lg mb-4 flex items-center">
 							<div className="mr-4 text-orange-500">
 								<FaExclamationTriangle size={24} />