Index: jobvista-frontend/src/views/applications/ApplicationsByJobAd.js
===================================================================
--- jobvista-frontend/src/views/applications/ApplicationsByJobAd.js	(revision 28b3398dcd7f9cfd044c2cb7923434b06037fee2)
+++ jobvista-frontend/src/views/applications/ApplicationsByJobAd.js	(revision befb98800bd9171fa5ce8a5f29287e549f0ff5aa)
@@ -1,9 +1,12 @@
-import {useDispatch} from "react-redux";
+import {useDispatch, useSelector} from "react-redux";
 import {useEffect, useState} from "react";
 import {useParams} from "react-router";
 import {ApplicationActions} from "../../redux/actions/applicationActions";
-import {ViewApplicationDetails} from "./ViewApplicationDetails";
+import {ApplicationDetailsModal} from "./ApplicationDetailsModal";
 import "./Applications.css"
 import Select from "react-select";
+import {sortElementsBy} from "../../utils/utils";
+import {JobSeekerActions} from "../../redux/actions/JobSeekerActions";
+import {notifyAppStatusUpdate} from "../../utils/toastUtils";
 
 export const ApplicationsByJobAd = () => {
@@ -11,15 +14,58 @@
     const dispatch = useDispatch();
     let {advertisement_id} = useParams();
+
     const [applicationsByJobAd, setApplicationsByJobAd] = useState([]);
+    let applicationsByJobAdState = useSelector(state => state.appl.applicationsByJobAdId)
+    const [dispatched, setDispatched] = useState(false);
+
+    const [profilePics, setProfilePics] = useState({});
+    let profilePicsState = useSelector(state => state.images.profilePictures)
+    const [profilePicsDispatched, setProfilePicsDispatched] = useState(false);
+
     const [jobAdTitle, setJobAdTitle] = useState("");
 
     useEffect(() => {
-        dispatch(ApplicationActions.fetchApplicationsByJobAdId(advertisement_id, (success, reponse) => {
-            if (success && reponse.data.length > 0) {
-                setApplicationsByJobAd(reponse.data)
-                setJobAdTitle(reponse.data[0].jobAdTitle)
+        if(!dispatched && (applicationsByJobAdState.length === 0 || applicationsByJobAdState.length === 1)) {
+            dispatch(ApplicationActions.fetchApplicationsByJobAdId(advertisement_id, (success, reponse) => {
+                if (success && reponse.data.length > 0) {
+                    setApplicationsByJobAd(sortElementsBy(reponse.data, "submittedOn"))
+                    setJobAdTitle(reponse.data[0].jobAdTitle)
+                }
+                setDispatched(true)
+                console.log("Fetch applications by job ad GET")
+            }))
+        } else {
+            setApplicationsByJobAd(sortElementsBy(applicationsByJobAdState, "submittedOn"));
+            if(applicationsByJobAdState.length > 0) {
+                setJobAdTitle(applicationsByJobAdState[0].jobAdTitle)
+            }
+
+        }
+
+    }, [applicationsByJobAdState])
+
+    useEffect(() => {
+        if(dispatched && !profilePicsDispatched) {
+            applicationsByJobAd.forEach(app => {
+                if(app.jobSeekerId && !profilePics[app.jobSeekerId]) {
+                    fetchProfilePic(app.jobSeekerId)
+                }
+            })
+            setProfilePicsDispatched(true);
+            console.log("Fetch all profile pics GET")
+        } else if(profilePicsDispatched) {
+            setProfilePics(profilePicsState)
+            console.log("Fetch all profile pics STATE")
+        }
+    }, [dispatched])
+
+    const fetchProfilePic = (jobSeekerId) => {
+        dispatch(JobSeekerActions.downloadProfilePic(jobSeekerId, (success, response) => {
+            if(success) {
+                setProfilePics(prevState => ({...prevState, [jobSeekerId]: response}))
             }
         }))
-    }, [])
+    }
+
 
     const options = [
@@ -37,5 +83,6 @@
         dispatch(ApplicationActions.updateApplicationStatus(id, selectedOption.value, (success, response) => {
             if(success) {
-                console.log("Status updated.")
+                // console.log("Status updated.")
+                notifyAppStatusUpdate()
             }
         }))
@@ -43,16 +90,23 @@
 
 
-    return (<div className="applications-container">
+    return (<div className="custom-container">
         <div className="application-title">
             {jobAdTitle ?
-                <h1>Applications for <span>{jobAdTitle}</span></h1> :
+                <h3>Applications for <b>{jobAdTitle}</b></h3> :
                 <h1></h1>
             }
-
         </div>
 
         {applicationsByJobAd && applicationsByJobAd.map((application, index) => (
             <div className="application-card">
-                <div className="left-box">
+                <div className="app-job-seeker-pic">
+                    <img
+                        // loading gif
+                        src={profilePicsState[application.jobSeekerId]}
+                        alt=""
+                        width={75} height={75}
+                    />
+                </div>
+                <div className="app-info">
                     <span>Submitted on <b>{new Date(application.submittedOn).toLocaleString('default', {
                         day: 'numeric',
@@ -60,13 +114,10 @@
                         year: 'numeric'
                     })}</b></span>
-                    <br/><br/>
                     <div className="contact-info">
                         <div className="contact-item">
                             <i className="fa-solid fa-user"></i> <span>{application.jobSeekerName}</span>
-                        </div>
-                        <div className="contact-item">
+                        </div> <div className="contact-item">
                             <i className="fa-solid fa-envelope"></i> <span>{application.jobSeekerEmail}</span>
-                        </div>
-                        <div className="contact-item">
+                        </div> <div className="contact-item">
                             <i className="fa-solid fa-phone"></i> <span>{application.jobSeekerPhoneNumber}</span>
                         </div>
@@ -74,6 +125,6 @@
                 </div>
 
-                <div className="right-box">
-                    <ViewApplicationDetails application={application}/>
+                <div className="app-status">
+                    <ApplicationDetailsModal application={application}/>
                     <div className="select">
                         <Select options={options}  onChange={(selectedOption) => handleChangeStatus(selectedOption, application.id)} defaultValue={handleDefaultStatus(application.status)}/>
