Use avatar.png instead of base64. (#8450)

* Use avatar.png instead of base64.

* Removed another case of base64 avatar use

packages/features/bookings/components/PeopleFilter.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 
+import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { AnimatedPopover, Avatar } from "@calcom/ui";
@@ -43,10 +44,10 @@ export const PeopleFilter = () => {
       {data &&
         data.map((user) => (
           <div
-            className="item-center focus-within:bg-subtle focus-within:bg-subtle hover:bg-muted flex px-4 py-[6px] hover:cursor-pointer"
+            className="item-center focus-within:bg-subtle hover:bg-muted flex px-4 py-[6px] hover:cursor-pointer"
             key={`${user.id}`}>
             <Avatar
-              imageSrc={user.avatar}
+              imageSrc={WEBAPP_URL + `/${user.username}/avatar.png`}
               size="sm"
               alt={`${user.name} Avatar`}
               gravatarFallbackMd5="fallback"

packages/lib/getEventTypeById.ts

@@ -37,7 +37,6 @@ export default async function getEventTypeById({
     name: true,
     username: true,
     id: true,
-    avatar: true,
     email: true,
     locale: true,
     defaultScheduleId: true,
@@ -306,6 +305,14 @@ export default async function getEventTypeById({
     }
     eventType.users.push(fallbackUser);
   }
+
+  const eventTypeUsers: ((typeof eventType.users)[number] & { avatar: string })[] = eventType.users.map(
+    (user) => ({
+      ...user,
+      avatar: `${CAL_URL}/${user.username}/avatar.png`,
+    })
+  );
+
   const currentUser = eventType.users.find((u) => u.id === userId);
   const t = await getTranslation(currentUser?.locale ?? "en", "common");
   const integrations = await getEnabledApps(credentials);
@@ -324,6 +331,7 @@ export default async function getEventTypeById({
   }
 
   const eventTypeObject = Object.assign({}, eventType, {
+    users: eventTypeUsers,
     periodStartDate: eventType.periodStartDate?.toString() ?? null,
     periodEndDate: eventType.periodEndDate?.toString() ?? null,
     bookingFields: getBookingFieldsWithSystemFields(eventType),
@@ -331,13 +339,15 @@ export default async function getEventTypeById({
 
   const teamMembers = eventTypeObject.team
     ? eventTypeObject.team.members.map((member) => {
-        const user = member.user;
+        const user: typeof member.user & { avatar: string } = {
-        user.avatar = `${CAL_URL}/${user.username}/avatar.png`;
+          ...member.user,
+          avatar: `${CAL_URL}/${member.user.username}/avatar.png`,
+        };
         return { ...user, eventTypes: user.eventTypes.map((evTy) => evTy.slug), membership: member.role };
       })
     : [];
 
-  // Find the current users memebership so we can check role to enable/disable deletion.
+  // Find the current users membership so we can check role to enable/disable deletion.
   // Sets to null if no membership is found - this must mean we are in a none team event type
   const currentUserMembership = eventTypeObject.team?.members.find((el) => el.user.id === userId) ?? null;
 

packages/trpc/server/routers/viewer/eventTypes.ts

@@ -525,32 +525,12 @@ export const eventTypesRouter = router({
       })
     )
     .query(async ({ ctx, input }) => {
-      const user = await ctx.prisma.user.findUnique({
+      return await getEventTypeById({
-        where: {
-          id: ctx.user.id,
-        },
-        select: {
-          id: true,
-          username: true,
-          name: true,
-          startTime: true,
-          endTime: true,
-          bufferTime: true,
-          avatar: true,
-        },
-      });
-      if (!user) {
-        throw new TRPCError({ code: "INTERNAL_SERVER_ERROR" });
-      }
-
-      const res = await getEventTypeById({
         eventTypeId: input.id,
         userId: ctx.user.id,
         prisma: ctx.prisma,
         isTrpcCall: true,
       });
-
-      return res;
     }),
   update: eventOwnerProcedure.input(EventTypeUpdateInput.strict()).mutation(async ({ ctx, input }) => {
     const {

packages/trpc/server/routers/viewer/teams.tsx

@@ -697,7 +697,7 @@ export const viewerTeamsRouter = router({
                 select: {
                   id: true,
                   name: true,
-                  avatar: true,
+                  username: true,
                 },
               },
             },