Worked on user-images

Noxtrah · May 26, 2024 · 5595e34 · 5595e34
1 parent eb42729
commit 5595e34
Show file tree

Hide file tree

Showing 3 changed files with 125 additions and 16 deletions.
diff --git a/scripts/dashboard.js b/scripts/dashboard.js
@@ -395,7 +395,7 @@ const displayDashboard = async (recipes) => {
 // Function to fetch data from the API
 async function fetchData(key = 0) {
     const JWTAccessToken = sessionStorage.getItem('accessToken');
-   // let apiUrl = 'https://recipiebeckend.azurewebsites.net/recipes/home';
+   let apiUrl = 'https://recipiebeckend.azurewebsites.net/recipes/home';
     if (key !== undefined) {
       apiUrl += `?key=${key}`;
     }
@@ -805,16 +805,39 @@ function updateUserProfileLink(userPhotoUrl, userName) {
 }
 
 
+// function initUserProfileUpdate() {
+//     function handleError(error) {
+//         console.error('Error fetching user data:', error);
+//     }
+
+//     fetchUserData()
+//         .then(data => {
+//             const userPhotoUrl = data.userPhoto;
+//             const userName = `${data.name} ${data.lastName}`;
+//             updateUserProfileLink(userPhotoUrl, userName);
+//         })
+//         .catch(handleError);
+// }
+
+function insertUsername(username) {
+    const h2Element = document.querySelector('article h2');
+    if (h2Element) {
+        h2Element.textContent = `Hello, ${username}`;
+    }
+}
+
 function initUserProfileUpdate() {
     function handleError(error) {
         console.error('Error fetching user data:', error);
     }
-
     fetchUserData()
         .then(data => {
             const userPhotoUrl = data.userPhoto;
             const userName = `${data.name} ${data.lastName}`;
+            const username = data.username; // Get the username from the response
+
             updateUserProfileLink(userPhotoUrl, userName);
+            insertUsername(username); // Insert the username into the <h2> tag
         })
         .catch(handleError);
 }

diff --git a/scripts/userDashboard.js b/scripts/userDashboard.js
@@ -338,7 +338,13 @@ userInfoDiv.classList.add('user-info');
 // User Image
 const userImgDiv = document.createElement('ion-icon');
 userImgDiv.classList.add('user-img');
-userImgDiv.setAttribute('name', 'person-circle-outline');
+if(recipe.userPhotoPath == null){
+    userImgDiv.setAttribute('name', 'person-circle-outline');
+}else{
+    userImgDiv.setAttribute('name', recipe.userPhotoPath);
+}
+// userInfoDiv.appendChild(userImgDiv)
+// userImgDiv.setAttribute('name', 'person-circle-outline');
 userInfoDiv.appendChild(userImgDiv);
 
 // Username with link
@@ -735,9 +741,9 @@ async function fetchData(key = 0) {
     const JWTAccessToken = sessionStorage.getItem('accessToken');
     let apiUrl = 'https://recipiebeckend.azurewebsites.net/recipesUser/home-user-dashboard';
     // const apiUrl = 'https://run.mocky.io/v3/f162c031-dcc1-4794-bd22-e0b52a55a61d';
-    // if (key !== undefined) {
-    //   apiUrl += `?key=${key}`;
-    // }
+    if (key !== undefined) {
+      apiUrl += `?key=${key}`;
+    }
 
     const headers = {
       'Content-Type': 'application/json',
@@ -930,4 +936,83 @@ function reportRecipe(userRecipeId, reportCause, extraNotes) {
         console.error('Response status:', error.response.status);
         console.error('Response body:', error.response.body);
     });
-  }
+  }
+
+//   function fetchUserProfileData() {
+//     const apiUrl = 'https://recipiebeckend.azurewebsites.net/user/user-profile-info'; // Replace this URL with your actual API endpoint
+
+//     const JWTAccessToken = sessionStorage.getItem('accessToken');
+
+//     const headers = {
+//         'Content-Type': 'application/json',
+//         'Authorization': JWTAccessToken,
+//     };
+
+//     return fetch(apiUrl, { // Return the fetch promise
+//         method: 'GET',
+//         headers: headers,
+//     })
+//     .then(response => {
+//         if (!response.ok) {
+//             throw new Error(`Network response was not ok (status: ${response.status})`);
+//         }
+//         return response.json(); // Assuming the response is JSON
+//     });
+// }
+
+// function updateUserIcon(userPhotoUrl) {
+//     const userImgElements = document.getElementsByClassName('user-img');
+//     if (userImgElements.length > 0) {
+//         const userImgDiv = userImgElements[0]; // Access the first element with the class 'user-img'
+
+//         // Create a new img element
+//         const imgElement = document.createElement('img');
+//         imgElement.setAttribute('src', userPhotoUrl);
+//         imgElement.classList.add('profile-photo');
+
+//         // Replace the ion-icon element with the new img element
+//         userImgDiv.replaceWith(imgElement);
+//     }
+// }
+
+// // Fetch user data
+// function fetchUserData() {
+//     const apiUrl = 'https://recipiebeckend.azurewebsites.net/user/user-profile-info'; // Replace this URL with your actual API endpoint
+
+//     const JWTAccessToken = sessionStorage.getItem('accessToken');
+
+//     const headers = {
+//         'Content-Type': 'application/json',
+//         'Authorization': JWTAccessToken,
+//     };
+
+//     return fetch(apiUrl, { // Return the fetch promise
+//         method: 'GET',
+//         headers: headers,
+//     })
+//     .then(response => {
+//         if (!response.ok) {
+//             throw new Error(`Network response was not ok (status: ${response.status})`);
+//         }
+//         return response.json(); // Assuming the response is JSON
+//     });
+// }
+
+// // Handle errors
+// function handleError(error) {
+//     console.error('Error fetching user data:', error);
+// }
+
+// // Initialize the user icon update process
+// function initUserIconUpdate() {
+//     fetchUserData()
+//         .then(data => {
+//             const userPhotoUrl = data.userPhoto;
+//             console.log('User Photo URL:', userPhotoUrl);
+//             updateUserIcon(userPhotoUrl);
+//         })
+//         .catch(handleError);
+// }
+
+// // Start the process
+// initUserIconUpdate();
diff --git a/templates/dashboard.html b/templates/dashboard.html
@@ -193,17 +193,18 @@
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             text-align: center;">
+            <h2></h2>
             <h1
               style="  font-weight:bold;
-  min-block-size: 100%;
-  min-inline-size: 100%;
-  box-sizing: border-box;
-  display: grid;
-  place-content: center;
-  font-family: system-ui;
-  font-size: min(200%, 5vmin); font-size: 6vmin;
-  line-height: 1.1;">
-                                Explore Recipies</h1>
+              min-block-size: 100%;
+              min-inline-size: 100%;
+              box-sizing: border-box;
+              display: grid;
+              place-content: center;
+              font-family: system-ui;
+              font-size: min(200%, 5vmin); font-size: 6vmin;
+              line-height: 1.1;">
+              Explore Recipies</h1>
             </article>
           </div>
         </div>