From f9a05ddf04c475bc0f6b43c4a4149bf2118d4a5f Mon Sep 17 00:00:00 2001
From: Jonathan Irhodia <jonathanirhodia@gmail.com>
Date: Fri, 8 Mar 2024 18:37:40 +0100
Subject: [PATCH] feat: improved user avatar (#293)

---
 packages/frontend/package.json                |  4 ++-
 packages/frontend/src/layout/MobileLayout.tsx |  5 ++--
 .../profile/UserSettings.tsx                  |  5 +++-
 .../frontend/src/mobile-pages/superfeed.tsx   | 10 +++++++
 yarn.lock                                     | 26 ++++++++++++++++++-
 5 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index 139734c7..1847e01a 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -43,6 +43,7 @@
     "firebase": "10.0.0",
     "html2canvas": "1.4.1",
     "ionicons": "7.1.2",
+    "md5": "2.3.0",
     "moment": "2.29.4",
     "query-string": "8.1.0",
     "react": "18.2.0",
@@ -75,6 +76,7 @@
     "@testing-library/react-hooks": "8.0.1",
     "@testing-library/user-event": "14.4.3",
     "@types/chroma-js": "2.4.0",
+    "@types/md5": "2.3.5",
     "@types/react-beautiful-dnd": "13.1.4",
     "@types/react-router": "5.1.20",
     "@types/react-router-dom": "5.3.3",
@@ -95,4 +97,4 @@
     "vite-plugin-pwa": "0.19.2",
     "vite-plugin-svgr": "3.2.0"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/frontend/src/layout/MobileLayout.tsx b/packages/frontend/src/layout/MobileLayout.tsx
index 5be840e0..8fba56c9 100644
--- a/packages/frontend/src/layout/MobileLayout.tsx
+++ b/packages/frontend/src/layout/MobileLayout.tsx
@@ -3,13 +3,14 @@ import { NavHeader } from "src/mobile-components/navigation/NavHeader";
 
 const MobileLayout: FC<{
     children: ReactNode;
+    avatar?: string;
     onScroll?: () => void;
     onSearchHandleClick?: () => void;
-}> = ({ children, onScroll, onSearchHandleClick }) => {
+}> = ({ children, onScroll, avatar, onSearchHandleClick }) => {
     return (
         <div className="h-screen" onScroll={onScroll}>
             <NavHeader
-                avatar={undefined}
+                avatar={avatar}
                 onSearchHandleClick={onSearchHandleClick}
             />
             {children}
diff --git a/packages/frontend/src/mobile-components/profile/UserSettings.tsx b/packages/frontend/src/mobile-components/profile/UserSettings.tsx
index cd5104d1..6733caf7 100644
--- a/packages/frontend/src/mobile-components/profile/UserSettings.tsx
+++ b/packages/frontend/src/mobile-components/profile/UserSettings.tsx
@@ -1,5 +1,6 @@
 import { FC, useState } from "react";
 import { twMerge } from "@alphaday/ui-kit";
+import md5 from "md5";
 import { Link, useHistory } from "react-router-dom";
 import { TUserProfile } from "src/api/types";
 import { Logger } from "src/api/utils/logging";
@@ -43,7 +44,9 @@ const AuthenticatedSection: FC<{ profile: TUserProfile | undefined }> = ({
         <div className="flex flex-col flex-start w-full items-start mb-4">
             <div className="flex">
                 <img
-                    src="	https://tailwindui.com/img/avatar-3.jpg"
+                    src={`https://www.gravatar.com/avatar/${md5(
+                        profile?.user.email ?? "Guest"
+                    ).toString()}?d=retro`}
                     alt="username"
                     className="mr-3 w-[60px] h-[60px] rounded-full border border-solid border-green-400"
                 />
diff --git a/packages/frontend/src/mobile-pages/superfeed.tsx b/packages/frontend/src/mobile-pages/superfeed.tsx
index d12fbea4..8270162d 100644
--- a/packages/frontend/src/mobile-pages/superfeed.tsx
+++ b/packages/frontend/src/mobile-pages/superfeed.tsx
@@ -1,6 +1,8 @@
 import { useState } from "react";
 import { IonPage } from "@ionic/react";
+import md5 from "md5";
 import { useParams } from "react-router-dom";
+import { useAccount } from "src/api/hooks";
 import AuthPromptContainer from "src/containers/dialogs/AuthPromptContainer";
 import MobileLayout from "src/layout/MobileLayout";
 import SuperfeedContainer from "src/mobile-containers/SuperfeedContainer";
@@ -8,6 +10,7 @@ import UserFiltersContainer from "src/mobile-containers/UserFiltersContainer";
 
 const SuperfeedPage: React.FC = () => {
     const { tags } = useParams<{ tags?: string }>();
+    const { userProfile } = useAccount();
     const [showFeedFilters, setshowFeedFilters] = useState(false);
     const [showSearchBar, setShowSearchBar] = useState(false);
     const toggleFeedFilters = () => setshowFeedFilters(!showFeedFilters);
@@ -15,6 +18,13 @@ const SuperfeedPage: React.FC = () => {
     return (
         <IonPage>
             <MobileLayout
+                avatar={
+                    userProfile?.user.email
+                        ? `https://www.gravatar.com/avatar/${md5(
+                              userProfile.user.email
+                          ).toString()}?d=retro`
+                        : undefined
+                }
                 onSearchHandleClick={() => setShowSearchBar((show) => !show)}
             >
                 <UserFiltersContainer
diff --git a/yarn.lock b/yarn.lock
index ec26f0ec..9695d3de 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5417,6 +5417,11 @@
   resolved "https://registry.yarnpkg.com/@types/long/-/long-4.0.2.tgz#b74129719fc8d11c01868010082d483b7545591a"
   integrity sha512-MqTGEo5bj5t157U6fA/BiDynNkn0YknVdh48CMPkTSpFTVmvao5UQmm7uEF6xBEo7qIMAlY/JSleYaE6VOdpaA==
 
+"@types/md5@2.3.5":
+  version "2.3.5"
+  resolved "https://registry.yarnpkg.com/@types/md5/-/md5-2.3.5.tgz#481cef0a896e3a5dcbfc5a8a8b02c05958af48a5"
+  integrity sha512-/i42wjYNgE6wf0j2bcTX6kuowmdL/6PE4IVitMpm2eYKBUuYCprdcWVK+xEF0gcV6ufMCRhtxmReGfc6hIK7Jw==
+
 "@types/mdast@^3.0.0":
   version "3.0.12"
   resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.12.tgz#beeb511b977c875a5b0cc92eab6fcac2f0895514"
@@ -8132,6 +8137,11 @@ chardet@^0.7.0:
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
+charenc@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/charenc/-/charenc-0.0.2.tgz#c0a1d2f3a7092e03774bfa83f14c0fc5790a8667"
+  integrity sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==
+
 check-error@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.2.tgz#574d312edd88bb5dd8912e9286dd6c0aed4aac82"
@@ -8689,6 +8699,11 @@ cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
+crypt@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/crypt/-/crypt-0.0.2.tgz#88d7ff7ec0dfb86f713dc87bbb42d044d3e6c41b"
+  integrity sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==
+
 crypto-browserify@^3.0.0:
   version "3.12.0"
   resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec"
@@ -11636,7 +11651,7 @@ is-boolean-object@^1.1.0:
     call-bind "^1.0.2"
     has-tostringtag "^1.0.0"
 
-is-buffer@^1.1.0:
+is-buffer@^1.1.0, is-buffer@~1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
   integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
@@ -12662,6 +12677,15 @@ md5.js@^1.3.4:
     inherits "^2.0.1"
     safe-buffer "^5.1.2"
 
+md5@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/md5/-/md5-2.3.0.tgz#c3da9a6aae3a30b46b7b0c349b87b110dc3bda4f"
+  integrity sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==
+  dependencies:
+    charenc "0.0.2"
+    crypt "0.0.2"
+    is-buffer "~1.1.6"
+
 mdast-util-definitions@^5.0.0:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/mdast-util-definitions/-/mdast-util-definitions-5.1.2.tgz#9910abb60ac5d7115d6819b57ae0bcef07a3f7a7"