Reduce Payload for Event-Types[Avoid 500] (#2627)

Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com>

apps/web/next.config.js

@@ -80,6 +80,10 @@ const nextConfig = {
         source: "/:user/avatar.png",
         destination: "/api/user/avatar?username=:user",
       },
+      {
+        source: "/team/:teamname/avatar.png",
+        destination: "/api/user/avatar?teamname=:teamname",
+      },
     ];
   },
   async redirects() {

apps/web/pages/api/user/avatar.ts

@@ -1,31 +1,60 @@
 import crypto from "crypto";
 import type { NextApiRequest, NextApiResponse } from "next";
 
+import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar";
 import prisma from "@lib/prisma";
 import { defaultAvatarSrc } from "@lib/profile";
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   //   const username = req.url?.substring(1, req.url.lastIndexOf("/"));
   const username = req.query.username as string;
-  const user = await prisma.user.findUnique({
-    where: {
-      username: username,
-    },
-    select: {
-      avatar: true,
-      email: true,
-    },
-  });
+  const teamname = req.query.teamname as string;
+  let identity;
+  if (username) {
+    const user = await prisma.user.findUnique({
+      where: {
+        username: username,
+      },
+      select: {
+        avatar: true,
+        email: true,
+      },
+    });
+    identity = {
+      name: username,
+      email: user?.email,
+      avatar: user?.avatar,
+    };
+  } else if (teamname) {
+    const team = await prisma.team.findUnique({
+      where: {
+        slug: teamname,
+      },
+      select: {
+        logo: true,
+      },
+    });
+    identity = {
+      name: teamname,
+      shouldDefaultBeNameBased: true,
+      avatar: team?.logo,
+    };
+  }
 
   const emailMd5 = crypto
     .createHash("md5")
-    .update((user?.email as string) || "guest@example.com")
+    .update((identity?.email as string) || "guest@example.com")
     .digest("hex");
-  const img = user?.avatar;
+  const img = identity?.avatar;
   if (!img) {
+    let defaultSrc = defaultAvatarSrc({ md5: emailMd5 });
+    if (identity?.shouldDefaultBeNameBased) {
+      defaultSrc = getPlaceholderAvatar(null, identity.name);
+    }
     res.writeHead(302, {
-      Location: defaultAvatarSrc({ md5: emailMd5 }),
+      Location: defaultSrc,
     });
+
     res.end();
   } else if (!img.includes("data:image")) {
     res.writeHead(302, {

apps/web/pages/event-types/index.tsx

@@ -18,6 +18,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import React, { Fragment, useEffect, useState } from "react";
 
+import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
 import { Button } from "@calcom/ui";
@@ -452,45 +453,48 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
   );
 };
 
-const EventTypeListHeading = ({ profile, membershipCount }: EventTypeListHeadingProps): JSX.Element => (
-  <div className="mb-4 flex">
-    <Link href="/settings/teams">
-      <a>
-        <Avatar
-          alt={profile?.name || ""}
-          imageSrc={profile?.image || undefined}
-          size={8}
-          className="mt-1 inline ltr:mr-2 rtl:ml-2"
-        />
-      </a>
-    </Link>
-    <div>
+const EventTypeListHeading = ({ profile, membershipCount }: EventTypeListHeadingProps): JSX.Element => {
+  console.log(profile.slug);
+  return (
+    <div className="mb-4 flex">
       <Link href="/settings/teams">
-        <a className="font-bold">{profile?.name || ""}</a>
+        <a>
+          <Avatar
+            alt={profile?.name || ""}
+            imageSrc={`${WEBAPP_URL}/${profile.slug}/avatar.png` || undefined}
+            size={8}
+            className="mt-1 inline ltr:mr-2 rtl:ml-2"
+          />
+        </a>
       </Link>
-      {membershipCount && (
-        <span className="relative -top-px text-xs text-neutral-500 ltr:ml-2 rtl:mr-2">
-          <Link href="/settings/teams">
-            <a>
-              <Badge variant="gray">
-                <UsersIcon className="mr-1 -mt-px inline h-3 w-3" />
-                {membershipCount}
-              </Badge>
-            </a>
-          </Link>
-        </span>
-      )}
-      {profile?.slug && (
-        <Link href={`${process.env.NEXT_PUBLIC_WEBSITE_URL}/${profile.slug}`}>
-          <a className="block text-xs text-neutral-500">{`${process.env.NEXT_PUBLIC_WEBSITE_URL?.replace(
-            "https://",
-            ""
-          )}/${profile.slug}`}</a>
+      <div>
+        <Link href="/settings/teams">
+          <a className="font-bold">{profile?.name || ""}</a>
         </Link>
-      )}
+        {membershipCount && (
+          <span className="relative -top-px text-xs text-neutral-500 ltr:ml-2 rtl:mr-2">
+            <Link href="/settings/teams">
+              <a>
+                <Badge variant="gray">
+                  <UsersIcon className="mr-1 -mt-px inline h-3 w-3" />
+                  {membershipCount}
+                </Badge>
+              </a>
+            </Link>
+          </span>
+        )}
+        {profile?.slug && (
+          <Link href={`${process.env.NEXT_PUBLIC_WEBSITE_URL}/${profile.slug}`}>
+            <a className="block text-xs text-neutral-500">{`${process.env.NEXT_PUBLIC_WEBSITE_URL?.replace(
+              "https://",
+              ""
+            )}/${profile.slug}`}</a>
+          </Link>
+        )}
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 const CreateFirstEventTypeView = ({ canAddEvents, profiles }: CreateEventTypeProps) => {
   const { t } = useLocale();

apps/web/server/routers/viewer.tsx

@@ -137,7 +137,6 @@ const loggedInViewerRouter = createProtectedRouter()
           select: {
             id: true,
             username: true,
-            avatar: true,
             name: true,
           },
         },
@@ -154,7 +153,6 @@ const loggedInViewerRouter = createProtectedRouter()
           startTime: true,
           endTime: true,
           bufferTime: true,
-          avatar: true,
           plan: true,
           teams: {
             where: {
@@ -230,7 +228,6 @@ const loggedInViewerRouter = createProtectedRouter()
         profile: {
           slug: typeof user["username"];
           name: typeof user["name"];
-          image: typeof user["avatar"];
         };
         metadata: {
           membershipCount: number;
@@ -255,7 +252,6 @@ const loggedInViewerRouter = createProtectedRouter()
         profile: {
           slug: user.username,
           name: user.name,
-          image: user.avatar,
         },
         eventTypes: _.orderBy(mergedEventTypes, ["position", "id"], ["desc", "asc"]),
         metadata: {