From 7ce83542e24d6e21167955c6735962694c4fbbfd Mon Sep 17 00:00:00 2001 From: "GitStart-Cal.com" <121884634+gitstart-calcom@users.noreply.github.com> Date: Sat, 21 Jan 2023 17:26:49 +0545 Subject: [PATCH] [CAL-811] Avatar icon not redirecting user back to the main page (#6586) * Remove cursor-pointer, remove old Avatar* files * Fixed styling for checkedSelect + some cleanup Co-authored-by: gitstart-calcom Co-authored-by: Alex van Andel --- apps/web/components/booking/UserAvatars.tsx | 2 +- apps/web/components/ui/Avatar.tsx | 51 --------------- apps/web/components/ui/AvatarGroup.tsx | 47 -------------- apps/web/components/ui/AvatarSSR.tsx | 62 ------------------- apps/web/components/ui/form/CheckedSelect.tsx | 6 +- apps/web/pages/[user].tsx | 6 +- packages/ui/components/avatar/Avatar.tsx | 26 +++++--- packages/ui/components/avatar/AvatarGroup.tsx | 2 + 8 files changed, 26 insertions(+), 176 deletions(-) delete mode 100644 apps/web/components/ui/Avatar.tsx delete mode 100644 apps/web/components/ui/AvatarGroup.tsx delete mode 100644 apps/web/components/ui/AvatarSSR.tsx diff --git a/apps/web/components/booking/UserAvatars.tsx b/apps/web/components/booking/UserAvatars.tsx index c34bda5216..cae3b95300 100644 --- a/apps/web/components/booking/UserAvatars.tsx +++ b/apps/web/components/booking/UserAvatars.tsx @@ -36,7 +36,7 @@ export const UserAvatars = ({ href?: string; }[] } - size="sm" + size={users.length <= 1 ? "lg" : "sm"} truncateAfter={props.truncateAfter} /> ); diff --git a/apps/web/components/ui/Avatar.tsx b/apps/web/components/ui/Avatar.tsx deleted file mode 100644 index 44373297f7..0000000000 --- a/apps/web/components/ui/Avatar.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import * as AvatarPrimitive from "@radix-ui/react-avatar"; -import * as Tooltip from "@radix-ui/react-tooltip"; - -import { Maybe } from "@calcom/trpc/server"; - -import classNames from "@lib/classNames"; -import { defaultAvatarSrc } from "@lib/profile"; - -export type AvatarProps = { - className?: string; - size?: number; - imageSrc?: Maybe; - title?: string; - alt: string; - gravatarFallbackMd5?: string; -}; - -/** - * @deprecated Use AvatarSSR instead. Once, there is no usage of Avatar, AvatarSSR can be renamed. - */ -export default function Avatar(props: AvatarProps) { - const { imageSrc, gravatarFallbackMd5, size, alt, title } = props; - const className = classNames("rounded-full", props.className, size && `h-${size} w-${size}`); - const avatar = ( - - - - {gravatarFallbackMd5 && ( - // eslint-disable-next-line @next/next/no-img-element - {alt} - )} - - - ); - - return title ? ( - - {avatar} - - - {title} - - - ) : ( - <>{avatar} - ); -} diff --git a/apps/web/components/ui/AvatarGroup.tsx b/apps/web/components/ui/AvatarGroup.tsx deleted file mode 100644 index acaaf90557..0000000000 --- a/apps/web/components/ui/AvatarGroup.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import Link from "next/link"; -import React from "react"; - -import classNames from "@lib/classNames"; - -import { AvatarSSR } from "@components/ui/AvatarSSR"; - -export type AvatarGroupProps = { - border?: string; // this needs to be the color of the parent container background, i.e.: border-white dark:border-gray-900 - size: number; - truncateAfter?: number; - items: { - image: string; - title?: string; - alt?: string; - href?: string; - }[]; - className?: string; -}; - -export const AvatarGroup = function AvatarGroup(props: AvatarGroupProps) { - return ( -
    - {props.items.slice(0, props.truncateAfter).map((item, idx) => { - if (item.image != null) { - const avatar = ( - - ); - - return ( -
  • - {item.href ? {avatar} : avatar} -
    • - ); - } - })} -
- ); -}; - -export default AvatarGroup; diff --git a/apps/web/components/ui/AvatarSSR.tsx b/apps/web/components/ui/AvatarSSR.tsx deleted file mode 100644 index 4543cf23fa..0000000000 --- a/apps/web/components/ui/AvatarSSR.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { User } from "@prisma/client"; -import * as Tooltip from "@radix-ui/react-tooltip"; - -import classNames from "@lib/classNames"; - -export type AvatarProps = ( - | { - user: Pick & { emailMd5?: string }; - } - | { - user?: null; - imageSrc: string; - } -) & { - className?: string; - size?: number; - title?: string; - href?: string; - alt: string; -}; - -// defaultAvatarSrc from profile.tsx can't be used as it imports crypto -function defaultAvatarSrc(md5: string) { - return `https://www.gravatar.com/avatar/${md5}?s=160&d=mp&r=PG`; -} - -// An SSR Supported version of Avatar component. -export function AvatarSSR(props: AvatarProps) { - const { size, title } = props; - - let imgSrc = ""; - let alt: string = props.alt; - - if (props.user) { - const user = props.user; - const nameOrUsername = user.name || user.username || ""; - alt = alt || nameOrUsername; - - if (user.avatar) { - imgSrc = user.avatar; - } else if (user.emailMd5) { - imgSrc = defaultAvatarSrc(user.emailMd5); - } - } else { - imgSrc = props.imageSrc; - } - - const className = classNames("rounded-full", props.className, size && `h-${size} w-${size}`); - - const avatar = imgSrc ? {alt} : null; - return title ? ( - - {avatar} - - - {title} - - - ) : ( - <>{avatar} - ); -} diff --git a/apps/web/components/ui/form/CheckedSelect.tsx b/apps/web/components/ui/form/CheckedSelect.tsx index 640425e691..0ff26baa40 100644 --- a/apps/web/components/ui/form/CheckedSelect.tsx +++ b/apps/web/components/ui/form/CheckedSelect.tsx @@ -2,9 +2,8 @@ import React from "react"; import { Props } from "react-select"; import { useLocale } from "@calcom/lib/hooks/useLocale"; -import { Icon } from "@calcom/ui"; +import { Icon, Avatar } from "@calcom/ui"; -import Avatar from "@components/ui/Avatar"; import Select from "@components/ui/form/Select"; type CheckedSelectOption = { @@ -43,7 +42,8 @@ export const CheckedSelect = ({ {value.map((option) => (
diff --git a/apps/web/pages/[user].tsx b/apps/web/pages/[user].tsx index 268d1194f7..91f0b44ad0 100644 --- a/apps/web/pages/[user].tsx +++ b/apps/web/pages/[user].tsx @@ -26,13 +26,11 @@ import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calco import prisma from "@calcom/prisma"; import { baseEventTypeSelect } from "@calcom/prisma/selects"; import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils"; -import { Icon, HeadSeo, AvatarGroup } from "@calcom/ui"; +import { Icon, HeadSeo, AvatarGroup, Avatar } from "@calcom/ui"; import { inferSSRProps } from "@lib/types/inferSSRProps"; import { EmbedProps } from "@lib/withEmbedSsr"; -import { AvatarSSR } from "@components/ui/AvatarSSR"; - import { ssrInit } from "@server/lib/ssr"; export default function User(props: inferSSRProps & EmbedProps) { @@ -132,7 +130,7 @@ export default function User(props: inferSSRProps & E )}> {isSingleUser && ( // When we deal with a single user, not dynamic group
- +

{nameOrUsername} {user.verified && ( diff --git a/packages/ui/components/avatar/Avatar.tsx b/packages/ui/components/avatar/Avatar.tsx index 4fddcc1a96..ed9446b1f8 100644 --- a/packages/ui/components/avatar/Avatar.tsx +++ b/packages/ui/components/avatar/Avatar.tsx @@ -1,5 +1,6 @@ import * as AvatarPrimitive from "@radix-ui/react-avatar"; import * as Tooltip from "@radix-ui/react-tooltip"; +import Link from "next/link"; import classNames from "@calcom/lib/classNames"; import { defaultAvatarSrc } from "@calcom/lib/defaultAvatarImage"; @@ -9,10 +10,11 @@ import { Maybe } from "@trpc/server"; export type AvatarProps = { className?: string; - size: "xs" | "sm" | "md" | "mdLg" | "lg"; + size: "xs" | "sm" | "md" | "mdLg" | "lg" | "xl"; imageSrc?: Maybe; title?: string; alt: string; + href?: string; gravatarFallbackMd5?: string; fallback?: React.ReactNode; accepted?: boolean; @@ -25,20 +27,24 @@ const sizesPropsBySize = { md: "w-8 h-8", // 32px mdLg: "w-10 h-10", //40px lg: "w-16 h-16", // 64px + xl: "w-24 h-24", // 96px } as const; export function Avatar(props: AvatarProps) { - const { imageSrc, gravatarFallbackMd5, size, alt, title } = props; - const sizeClassname = sizesPropsBySize[size]; - const rootClass = classNames("rounded-full aspect-square ", sizeClassname); - const avatar = ( + const { imageSrc, gravatarFallbackMd5, size, alt, title, href } = props; + const rootClass = classNames("aspect-square rounded-full", sizesPropsBySize[size]); + let avatar = ( <> - + <> {props.fallback && !gravatarFallbackMd5 && props.fallback} @@ -62,6 +68,10 @@ export function Avatar(props: AvatarProps) { ); + if (href) { + avatar = {avatar}; + } + return title ? ( diff --git a/packages/ui/components/avatar/AvatarGroup.tsx b/packages/ui/components/avatar/AvatarGroup.tsx index b6bc736153..91cdb952d8 100644 --- a/packages/ui/components/avatar/AvatarGroup.tsx +++ b/packages/ui/components/avatar/AvatarGroup.tsx @@ -8,6 +8,7 @@ export type AvatarGroupProps = { image: string; title?: string; alt?: string; + href?: string; }[]; className?: string; accepted?: boolean; @@ -51,6 +52,7 @@ export const AvatarGroup = function AvatarGroup(props: AvatarGroupProps) { alt={item.alt || ""} accepted={props.accepted} size={props.size} + href={item.href} /> );