Commented or reacted posts can be opened in a new tap

frontend/src/views/Home.vue

@@ -70,7 +70,7 @@
 			<!-- User post section -->
 			<section
 				id="userpost"
-				v-for="post in posts"
+				v-for="post in usersPosts"
 				:key="post.post_id"
 			>
 				<UserPost
@@ -86,7 +86,7 @@
 					:postDate="post.creation_date"
                               :textualPost="post.textual_post"
 
-                              :isPostIdEqualToUserIdOrIsAdmin="post.id === user[0].id ||user[0].isAdmin == 'true'"
+                              :isPostIdEqualToUserIdOrIsAdmin="post.id === user[0].id || user[0].isAdmin == 'true'"
                               :isPostIdEqualToUserId="post.id === user[0].id"
 
                               :isPostImageUrlNotUndefined="post.image_url != undefined"
@@ -129,25 +129,27 @@
 				myFile: null,
 				imagePreview: null,
                         nothingAdded: false,
-
+				usersPosts: [],
 			};
 		},
 		computed: {
 			...mapState(['posts', 'user', 'successResMsg']),
 		},
+		created() {
+			this.$store.dispatch('getOneUser');
+			this.$store.dispatch('getAllPosts');
+		},
 		mounted() {
 			const user = JSON.parse(localStorage.getItem('user'));
 			if (!user) {
 				this.$router.push({ name: 'Entry' });
 			}
-			this.$store.dispatch('getOneUser');
-			this.$store.dispatch('getAllPosts');
                   setTimeout(() => {
 				this.setUser();
-			}, 100);
+			}, 200);
 		},
 		methods: {
-			// Sets user's welcome message and user's image
+			// Sets user's welcome message, user's image ans users posts!
 			setUser() {
 				const onLoadPage = JSON.parse(
 					localStorage.getItem('onLoadPage')
@@ -165,6 +167,15 @@
 				if (this.user[0].imageUrl != undefined) {
 					this.userImage = this.user[0].imageUrl;
 				}
+				if(this.$route.query.id) {
+					for(let i = 0; i < this.posts.length; i++) {
+						if(this.posts[i].post_id == this.$route.query.id) {
+							this.usersPosts.push(this.posts[i]);
+						}
+					}
+				} else {
+					this.usersPosts = this.posts
+				}		
 			},
 			onFileChange(event) {
 				let image = event.target.files[0];

frontend/src/views/Notification.vue

@@ -1,13 +1,17 @@
 <template>
       <div id="notification">
             <Header />
+		<ServerMsg 
+			v-if="alertMsg !== null"
+			:successResMsg="alertMsg"
+		/>
 		 <h1>Notifications</h1>
             <main class="notif-wrapper" v-if="userNotifs !== null">
 			<div v-for="(parentVal, parentPro, index) in userNotifs" :key="index">
 				<div class="notif-message-group" v-for="(childVal, childPro, index) in parentVal" :key="index">
-					<p>{{ childVal }}</p>
+					<p @click="openTargetedPostInNewTap(childPro)" aria-label="click to go to the reacted or commented post" aria-role="bouton">{{ childVal }}</p>
 					<button >
-						<font-awesome-icon icon="trash-alt" :color="secondaryColor" size="lg" @click="removeOneNotif(parentPro)"/>
+						<font-awesome-icon icon="trash-alt" :color="secondaryColor" size="lg" @click="removeOneNotif(parentPro)" aria-role="bouton"/>
 						<small>Remove it</small>
 					</button>
 				</div>
@@ -22,18 +26,21 @@
 
 <script>
 	import Header from '../components/Header.vue';
+	import ServerMsg from '../components/ServerMsg.vue';
 
 	import { mapState } from 'vuex';
 
 	export default {
 		name: 'Notification',
 		components: {
 			Header,
+			ServerMsg,
 		},
 		data() {
 			return {
 				notifications: JSON.parse(localStorage.getItem('notifications')),
 				userNotifs: null,
+				alertMsg: null,
 			}
 		},
 		mounted() {
@@ -54,24 +61,39 @@
 				
 				for(let acualUser in this.notifications) {
 					if(acualUser == this.user[0].id) {
-						this.userNotifs = this.notifications[acualUser]
+						this.userNotifs = this.notifications[acualUser];
 					}
 				}
 			},
 			removeOneNotif(parentProAsNotifId) {
-
-					delete this.notifications[this.user[0].id][parentProAsNotifId];
-					if( Object.entries(this.notifications[this.user[0].id]).length === 0) {
-						delete this.notifications[this.user[0].id];
-					}
+				delete this.notifications[this.user[0].id][parentProAsNotifId];
+				if( Object.entries(this.notifications[this.user[0].id]).length === 0) {
+					delete this.notifications[this.user[0].id];
+				}
 				localStorage.setItem('notifications', JSON.stringify(this.notifications));
-				this.findCurrentUserNotif();			
+				this.findCurrentUserNotif();	
+				setTimeout(() => {
+					this.alertMsg = 'Notifiction has been deleted';
+				}, 800);
+				setTimeout(() => {
+					this.alertMsg = null;
+				}, 4000);			
 			},
 			removeAllNotifs() {
 				delete this.notifications[this.user[0].id];
 				localStorage.setItem('notifications', JSON.stringify(this.notifications));
-				location.reload();	
+				this.userNotifs = null;
+				setTimeout(() => {
+					this.alertMsg = 'All your notifictions have been deleted';
+				}, 800);
+				setTimeout(() => {
+					this.alertMsg = null;
+				}, 4000);	
 			},
+			openTargetedPostInNewTap(childProAsPostId) {
+				const route = this.$router.resolve({path: '/', query: {id: childProAsPostId}})
+				window.open(route.href, '_blank');
+			}
 		},
 	};
 </script>
@@ -99,6 +121,7 @@
 				border-radius: 15px;
 				background-color: rgb($primary_color, 0.7);
 				align-self:auto;
+				cursor: pointer;
 			}
 		}