From eb4272921dc8ffbe4ef2f5802c24010fc326e654 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Do=C4=9Fa=20Kayra=20Y=C4=B1lmazarslan?=
 <94742646+Noxtrah@users.noreply.github.com>
Date: Sun, 26 May 2024 14:56:39 +0300
Subject: [PATCH] Profil-icon update

---
 scripts/dashboard.js     | 67 +++++++++++++++++++++++++++++++++++++++-
 scripts/userDashboard.js | 40 +++++-------------------
 styles/dashboard.css     |  8 +++++
 styles/userDashboard.css |  1 +
 4 files changed, 82 insertions(+), 34 deletions(-)

diff --git a/scripts/dashboard.js b/scripts/dashboard.js
index 2f90e28..73322fb 100644
--- a/scripts/dashboard.js
+++ b/scripts/dashboard.js
@@ -538,6 +538,13 @@ document.addEventListener('DOMContentLoaded', function () {
     if (JWTAccessToken != null) {
         // Change the text of the anchor element
         logInLink.textContent = "Log-Out";
+        logInLink.addEventListener('click', function(event) {
+            // Prevent default action
+            event.preventDefault();
+            sessionStorage.removeItem('accessToken');
+            sessionStorage.removeItem('refreshToken');
+            window.location.href = 'logIn.html';
+        });
     }
 
     fetchData(0)
@@ -755,4 +762,62 @@ async function getMaxPage() {
         console.error('Error fetching maximum page:', error);
         return null; // Return null in case of error
     }
-}
\ No newline at end of file
+}
+
+// Function to 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
+    });
+}
+
+
+function updateUserProfileLink(userPhotoUrl, userName) {
+    const iconElements = document.getElementsByClassName('profile-icon');
+    if (iconElements.length > 0) {
+        const iconElement = iconElements[0]; // Get the first element in the collection
+
+        // Create a new img element
+        const imgElement = document.createElement('img');
+        imgElement.setAttribute('src', userPhotoUrl);
+        imgElement.setAttribute('alt', userName);
+        imgElement.classList.add('profile-photo');
+
+        // Replace the ion-icon element with the new img element
+        iconElement.replaceWith(imgElement);
+    }
+}
+
+
+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);
+}
+
+initUserProfileUpdate();
+
diff --git a/scripts/userDashboard.js b/scripts/userDashboard.js
index 2da95cd..3d3f62f 100644
--- a/scripts/userDashboard.js
+++ b/scripts/userDashboard.js
@@ -288,6 +288,9 @@ const createRecipeElement = async (recipe) => {
         } else {
             star.textContent = '☆';
         }
+        star.onmouseover = () => hoverStar(star);
+        const clickHandler = () => setRating(i, starContainer, recipe);
+        star.onclick = clickHandler;
         starContainer.appendChild(star);
     }
     ratingDiv.appendChild(starContainer);
@@ -731,9 +734,10 @@ const displayDashboard = async (recipes) => {
 async function fetchData(key = 0) {
     const JWTAccessToken = sessionStorage.getItem('accessToken');
     let apiUrl = 'https://recipiebeckend.azurewebsites.net/recipesUser/home-user-dashboard';
-    if (key !== undefined) {
-      apiUrl += `?key=${key}`;
-    }
+    // const apiUrl = 'https://run.mocky.io/v3/f162c031-dcc1-4794-bd22-e0b52a55a61d';
+    // if (key !== undefined) {
+    //   apiUrl += `?key=${key}`;
+    // }
   
     const headers = {
       'Content-Type': 'application/json',
@@ -874,36 +878,6 @@ window.onload = function () {
     setupBackButton(); // Call setupBackButton after generateUserRecipeBoxes
 };
 
-
-// async function displayPage(startPage) {
-//     const maxPage = await getMaxPage();
-//     if (typeof startPage !== 'number' || startPage < 0 || startPage >= maxPage) {
-//         console.error(`Invalid startPage value: ${startPage}`);
-//         startPage = 0;  // Set a default valid startPage value
-//     }
-
-//     if (typeof maxPage !== 'number' || maxPage <= 0) {
-//         console.error(`Invalid maxPagePages value: ${maxPage}`);
-//         maxPage = 1;  // Set a default valid maxPagePages value
-//     }
-
-//     $('#pagination-demo').twbsPagination('destroy');
-//     $('#pagination-demo').twbsPagination({
-//         startPage: startPage + 1, // twbsPagination uses 1-based index
-//         totalPages: maxPage,
-//         visiblePages: 5,
-//         next: 'Next',
-//         prev: 'Prev',
-//         onPageClick: function (event, page) {
-//             fetchData(page - 1);
-//             console.log("Page =", page - 1);
-//         }
-//     });
-// }
-
-// displayPage(0, 2);
-
-
 async function getMaxPage() {
     const apiUrl = 'https://recipiebeckend.azurewebsites.net/recipes/get-max-page'; // Replace this URL with your actual API endpoint
 
diff --git a/styles/dashboard.css b/styles/dashboard.css
index af0d484..6cdbb92 100644
--- a/styles/dashboard.css
+++ b/styles/dashboard.css
@@ -1963,6 +1963,14 @@ input[type="radio"],
   margin-left: 42px;
 }
 
+.profile-photo{
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  margin-left: 42px;
+  margin-right: 2px;
+}
+
 .profile-dropdown {
   position: relative;
   display: inline-block;
diff --git a/styles/userDashboard.css b/styles/userDashboard.css
index e92b171..6b9e1a9 100644
--- a/styles/userDashboard.css
+++ b/styles/userDashboard.css
@@ -426,6 +426,7 @@ header {
       /* Kalp simgesini büyütmek için */
       font-size: 20px; /* İstenilen boyuta göre */
       color: rgb(33, 31, 34);
+      /* cursor: pointer; */
     }
 
     .recipe p {