Fix applications route to render application by id (#782)

Author: vinit717

applications/script.js

@@ -4,6 +4,7 @@ import {
   getIsSuperUser,
   showToast,
   updateApplication,
+  getApplicationById,
 } from './utils.js';
 let nextLink;
 let isDataLoading = false;
@@ -271,8 +272,33 @@ async function renderApplicationCards(next, status, isInitialRender) {
   });
 }
 
+async function renderApplicationById(id) {
+  noApplicationFoundText.classList.add('hidden');
+  changeLoaderVisibility({ hide: false });
+  isDataLoading = true;
+
+  try {
+    const application = await getApplicationById(id);
+
+    if (!application) {
+      return noApplicationFoundText.classList.remove('hidden');
+    }
+
+    const applicationCard = createApplicationCard({ application });
+    applicationContainer.appendChild(applicationCard);
+    applicationContainer.classList.add('center');
+  } catch (error) {
+    console.error('Error fetching application by user ID:', error);
+    noApplicationFoundText.classList.remove('hidden');
+  } finally {
+    isDataLoading = false;
+    changeLoaderVisibility({ hide: true });
+  }
+}
+
 (async function renderCardsInitial() {
   changeLoaderVisibility({ hide: false });
+
   const isSuperUser = await getIsSuperUser();
   if (!isSuperUser) {
     const unAuthorizedText = createElement({
@@ -284,8 +310,19 @@ async function renderApplicationCards(next, status, isInitialRender) {
     changeLoaderVisibility({ hide: true });
     return;
   }
-  await renderApplicationCards('', status, true);
-  addIntersectionObserver();
+
+  const queryString = window.location.search;
+  const urlParams = new URLSearchParams(queryString);
+  const applicationId = urlParams.get('id');
+
+  if (applicationId) {
+    await renderApplicationById(applicationId);
+  } else {
+    await renderApplicationCards('', status, true);
+    addIntersectionObserver();
+  }
+
+  changeLoaderVisibility({ hide: true });
 })();
 
 const intersectionObserver = new IntersectionObserver(async (entries) => {

applications/style.css

@@ -48,7 +48,7 @@ body {
 .container {
   max-width: 1100px;
   margin: 0 auto;
-  padding: 2.5rem;
+  padding: 2rem;
   overflow-y: auto;
 }
 
@@ -144,13 +144,16 @@ body {
 
 .application-container {
   display: flex;
-  margin-top: 30px;
   flex-wrap: wrap;
   justify-content: space-between;
   padding-bottom: 10px;
   gap: 25px;
 }
 
+.application-container.center {
+  justify-content: center;
+}
+
 .application-card {
   border-radius: 15px;
   box-shadow: var(--elevation-1);

applications/utils.js

@@ -40,6 +40,28 @@ async function getApplications({ applicationStatus, size = 5, next = '' }) {
   }
 }
 
+async function getApplicationById(applicationId) {
+  try {
+    const res = await fetch(`${BASE_URL}/applications/${applicationId}`, {
+      method: 'GET',
+      credentials: 'include',
+      headers: {
+        'Content-type': 'application/json',
+      },
+    });
+
+    if (!res.ok) {
+      const error = await res.json();
+      throw error;
+    }
+
+    const data = await res.json();
+    return data.application;
+  } catch (error) {
+    throw error;
+  }
+}
+
 async function getIsSuperUser() {
   try {
     const res = await fetch(`${BASE_URL}/users/self`, {
@@ -104,6 +126,7 @@ function showToast({ message, type }) {
 export {
   createElement,
   getApplications,
+  getApplicationById,
   updateApplication,
   getIsSuperUser,
   showToast,