Fix: Profile update refresh issues (#8570)

* profile update refresh fixes

* updated avatar based on logged in user

* lint & types check fixes

* fixed settings layout to fetch udpated session

* pushing the 8448 changes to separate PR

* removing hook not required

* Removed extra code

---------

Co-authored-by: Keyur Patel <keyur.patel@difx.io>
Co-authored-by: Alan <alannnc@gmail.com>

packages/features/settings/layouts/SettingsLayout.tsx

@@ -12,6 +12,7 @@ import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { MembershipRole, UserPermissionRole } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";
+import useAvatarQuery from "@calcom/trpc/react/hooks/useAvatarQuery";
 import type { VerticalTabItemProps } from "@calcom/ui";
 import { Badge, Button, ErrorBoundary, Skeleton, useMeta, VerticalTabItem } from "@calcom/ui";
 import {
@@ -105,14 +106,16 @@ const adminRequiredKeys = ["admin"];
 
 const useTabs = () => {
   const session = useSession();
+  const { data: user } = trpc.viewer.me.useQuery();
+  const { data: avatar } = useAvatarQuery();
 
   const isAdmin = session.data?.user.role === UserPermissionRole.ADMIN;
 
   tabs.map((tab) => {
-    if (tab.name === "my_account") {
-      tab.name = session.data?.user?.name || "my_account";
+    if (tab.href === "/settings/my-account") {
+      tab.name = user?.name || "my_account";
       tab.icon = undefined;
-      tab.avatar = WEBAPP_URL + "/" + session.data?.user?.username + "/avatar.png";
+      tab.avatar = avatar?.avatar || WEBAPP_URL + "/" + session?.data?.user?.username + "/avatar.png";
     }
     return tab;
   });

packages/features/shell/Shell.tsx

@@ -24,6 +24,7 @@ import getBrandColours from "@calcom/lib/getBrandColours";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { isKeyInObject } from "@calcom/lib/isKeyInObject";
 import { trpc } from "@calcom/trpc/react";
+import useAvatarQuery from "@calcom/trpc/react/hooks/useAvatarQuery";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
 import type { SVGComponent } from "@calcom/types/SVGComponent";
 import {
@@ -246,8 +247,9 @@ export default function Shell(props: LayoutProps) {
 
 function UserDropdown({ small }: { small?: boolean }) {
   const { t } = useLocale();
-  const query = useMeQuery();
-  const user = query.data;
+  const { data: user } = useMeQuery();
+  const { data: avatar } = useAvatarQuery();
+
   useEffect(() => {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     //@ts-ignore
@@ -294,7 +296,7 @@ function UserDropdown({ small }: { small?: boolean }) {
                 // eslint-disable-next-line @next/next/no-img-element
                 <img
                   className="rounded-full"
-                  src={WEBAPP_URL + "/" + user.username + "/avatar.png"}
+                  src={avatar?.avatar || WEBAPP_URL + "/" + user.username + "/avatar.png"}
                   alt={user.username || "Nameless User"}
                 />
               }

packages/trpc/react/hooks/useAvatarQuery.ts

@@ -0,0 +1,13 @@
+import { trpc } from "../trpc";
+
+export function useAvatarQuery() {
+  const avatarQuery = trpc.viewer.avatar.useQuery(undefined, {
+    retry(failureCount) {
+      return failureCount > 3;
+    },
+  });
+
+  return avatarQuery;
+}
+
+export default useAvatarQuery;