From 30c222e214d6a2fb98d85bbe7d7f1b705df944aa Mon Sep 17 00:00:00 2001
From: Mehdi Messaadi <mehdimessaadi14@gmail.com>
Date: Wed, 24 Jul 2024 16:23:48 +0100
Subject: [PATCH 1/3] [#530]: Profile avatar now either uses Github profile
 picture, or capitalized 1st letter of username if the former is not
 applicable.

---
 frontend/src/components/Avatar/index.jsx      |  7 +--
 .../src/components/Navigation/UserMenu.jsx    | 44 ++++++++++++++++++-
 2 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Avatar/index.jsx b/frontend/src/components/Avatar/index.jsx
index 71709c4d..1cf8446b 100644
--- a/frontend/src/components/Avatar/index.jsx
+++ b/frontend/src/components/Avatar/index.jsx
@@ -25,11 +25,12 @@ function Avatar({ username }) {
           style={{
             fontSize: '20px',
             fontWeight: 300,
-            letterSpacing: '-2px',
+            // letterSpacing: '-2px',
             pointerEvents: 'none',
           }}
-          x="20%"
-          y="50%"
+          x="50%"
+          y="52%"
+          textAnchor="middle"
         >
           {username}
         </text>
diff --git a/frontend/src/components/Navigation/UserMenu.jsx b/frontend/src/components/Navigation/UserMenu.jsx
index c527653c..059a6199 100644
--- a/frontend/src/components/Navigation/UserMenu.jsx
+++ b/frontend/src/components/Navigation/UserMenu.jsx
@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -26,6 +27,31 @@ function UserMenu() {
     dispatch(actions.openModal({ type: 'newSnippet' }));
   };
 
+  // The following code checks if the Github profile picture exists
+  const imageExists = (url) => {
+    return new Promise((resolve) => {
+      const img = new Image();
+      img.onload = () => resolve(true);
+      img.onerror = () => resolve(false);
+      img.src = url;
+    });
+  };
+
+  const [githubImageExists, setGithubExists] = useState(false);
+
+  useEffect(() => {
+    const url = `https://github.com/${username}.png`;
+    imageExists(url).then((exists) => setGithubExists(exists));
+  }, [username]);
+
+  //This function takes the first letter of the username and converts it to uppercase
+  const capitalizeFirstLetter = (string) => {
+    return string.charAt(0).toUpperCase();
+  }
+
+  console.log("Mehdi: ", capitalizeFirstLetter("Mehdi"));
+
+
   return (
     <Dropdown align="end" as="li" title="User Menu">
       <Dropdown.Toggle
@@ -34,7 +60,23 @@ function UserMenu() {
         variant="link"
       >
         <div className="logo-height">
-          <Avatar username={username} />
+          {githubImageExists ? (
+            <img
+              alt="Github Profile"
+              src={`https://github.com/${username}.png`}
+              style={{
+                position: 'relative',
+                width: '32px',
+                height: '32px',
+                borderRadius: '50%',
+              }}
+            />
+          )
+            : (
+              <Avatar username={capitalizeFirstLetter(username)} />
+            )}
+
+
         </div>
         <span className="visually-hidden">{tPA('header')}</span>
       </Dropdown.Toggle>

From 69c3510501f290ef9e44af2f2e94b4732465ea5f Mon Sep 17 00:00:00 2001
From: Mehdi Messaadi <mehdimessaadi14@gmail.com>
Date: Wed, 24 Jul 2024 16:32:57 +0100
Subject: [PATCH 2/3] [#530]: Deleted a console log and an unnecessary comment.

---
 frontend/src/components/Avatar/index.jsx        | 1 -
 frontend/src/components/Navigation/UserMenu.jsx | 3 ---
 2 files changed, 4 deletions(-)

diff --git a/frontend/src/components/Avatar/index.jsx b/frontend/src/components/Avatar/index.jsx
index 1cf8446b..6ab65e41 100644
--- a/frontend/src/components/Avatar/index.jsx
+++ b/frontend/src/components/Avatar/index.jsx
@@ -25,7 +25,6 @@ function Avatar({ username }) {
           style={{
             fontSize: '20px',
             fontWeight: 300,
-            // letterSpacing: '-2px',
             pointerEvents: 'none',
           }}
           x="50%"
diff --git a/frontend/src/components/Navigation/UserMenu.jsx b/frontend/src/components/Navigation/UserMenu.jsx
index 059a6199..03b57c0a 100644
--- a/frontend/src/components/Navigation/UserMenu.jsx
+++ b/frontend/src/components/Navigation/UserMenu.jsx
@@ -49,9 +49,6 @@ function UserMenu() {
     return string.charAt(0).toUpperCase();
   }
 
-  console.log("Mehdi: ", capitalizeFirstLetter("Mehdi"));
-
-
   return (
     <Dropdown align="end" as="li" title="User Menu">
       <Dropdown.Toggle

From 61269eb0e7ccf7077de6f0df8337410dc23a8aad Mon Sep 17 00:00:00 2001
From: Mehdi Messaadi <mehdimessaadi14@gmail.com>
Date: Thu, 25 Jul 2024 15:16:06 +0100
Subject: [PATCH 3/3] [#530]: Fixed lint and prettier errors.

---
 frontend/src/components/Avatar/index.jsx        |  2 +-
 frontend/src/components/Navigation/UserMenu.jsx | 13 +++++--------
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/Avatar/index.jsx b/frontend/src/components/Avatar/index.jsx
index 6ab65e41..9fb3cca8 100644
--- a/frontend/src/components/Avatar/index.jsx
+++ b/frontend/src/components/Avatar/index.jsx
@@ -27,9 +27,9 @@ function Avatar({ username }) {
             fontWeight: 300,
             pointerEvents: 'none',
           }}
+          textAnchor="middle"
           x="50%"
           y="52%"
-          textAnchor="middle"
         >
           {username}
         </text>
diff --git a/frontend/src/components/Navigation/UserMenu.jsx b/frontend/src/components/Navigation/UserMenu.jsx
index 03b57c0a..ec9c4d98 100644
--- a/frontend/src/components/Navigation/UserMenu.jsx
+++ b/frontend/src/components/Navigation/UserMenu.jsx
@@ -44,10 +44,10 @@ function UserMenu() {
     imageExists(url).then((exists) => setGithubExists(exists));
   }, [username]);
 
-  //This function takes the first letter of the username and converts it to uppercase
+  // This function takes the first letter of the username and converts it to uppercase
   const capitalizeFirstLetter = (string) => {
     return string.charAt(0).toUpperCase();
-  }
+  };
 
   return (
     <Dropdown align="end" as="li" title="User Menu">
@@ -68,12 +68,9 @@ function UserMenu() {
                 borderRadius: '50%',
               }}
             />
-          )
-            : (
-              <Avatar username={capitalizeFirstLetter(username)} />
-            )}
-
-
+          ) : (
+            <Avatar username={capitalizeFirstLetter(username)} />
+          )}
         </div>
         <span className="visually-hidden">{tPA('header')}</span>
       </Dropdown.Toggle>