twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-11-26 13:42:44 +03:00
Code Issues Packages Projects Releases Wiki Activity

Favicons are being re-rendered on hover (#5849)

Browse Source 
### Description

Favicons are being re-rendered on hover

### Refs

#3523

### Demo


https://www.loom.com/share/e3944d940a014283af8c26baac1fed57?sid=e3e96a81-3a54-4969-8602-99c64bb3ffe7

Fixes #3523

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
gitstart-twenty 2024-06-19 07:34:42 -04:00 committed by GitHub
parent 96da777107
commit 64b456912a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/twenty-front/src/modules/object-record/components/RecordChip.tsx
View File

@ -2,7 +2,6 @@ import { EntityChip, EntityChipVariant } from 'twenty-ui';
import { useMapToObjectRecordIdentifier } from '@/object-metadata/hooks/useMapToObjectRecordIdentifier';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
export type RecordChipProps = {
objectNameSingular: string;
@ -28,9 +27,7 @@ export const RecordChip = ({
entityId={record.id}
name={objectRecordIdentifier.name}
avatarType={objectRecordIdentifier.avatarType}
avatarUrl={
getImageAbsoluteURIOrBase64(objectRecordIdentifier.avatarUrl) || ''
}
avatarUrl={objectRecordIdentifier.avatarUrl ?? ''}
linkToEntity={objectRecordIdentifier.linkToShowPage}
className={className}
variant={variant}

3
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ChipFieldDisplay.tsx
View File

@ -1,7 +1,6 @@
import { EntityChip } from 'twenty-ui';
import { useChipFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useChipFieldDisplay';
import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
export const ChipFieldDisplay = () => {
const { recordValue, generateRecordChipData } = useChipFieldDisplay();
@ -17,7 +16,7 @@ export const ChipFieldDisplay = () => {
entityId={recordValue.id}
name={recordChipData.name as any}
avatarType={recordChipData.avatarType}
avatarUrl={getImageAbsoluteURIOrBase64(recordChipData.avatarUrl) ?? ''}
avatarUrl={recordChipData.avatarUrl ?? ''}
linkToEntity={recordChipData.linkToShowPage}
/>
);

13
packages/twenty-ui/src/display/avatar/components/Avatar.tsx
View File

@ -1,7 +1,8 @@
import { useState } from 'react';
import { isNonEmptyString, isUndefined } from '@sniptt/guards';
import clsx from 'clsx';
import { useRecoilState } from 'recoil';
import { invalidAvatarUrlsState } from '@ui/display/avatar/components/states/isInvalidAvatarUrlState';
import { Nullable, stringToHslColor } from '@ui/utilities';
import styles from './Avatar.module.css';
@ -55,16 +56,20 @@ export const Avatar = ({
color,
backgroundColor,
}: AvatarProps) => {
const [isInvalidAvatarUrl, setIsInvalidAvatarUrl] = useState(false);
const [invalidAvatarUrls, setInvalidAvatarUrls] = useRecoilState(
invalidAvatarUrlsState,
);
const noAvatarUrl = !isNonEmptyString(avatarUrl);
const placeholderChar = placeholder?.[0]?.toLocaleUpperCase();
const showPlaceholder = noAvatarUrl || isInvalidAvatarUrl;
const showPlaceholder = noAvatarUrl || invalidAvatarUrls.includes(avatarUrl);
const handleImageError = () => {
setIsInvalidAvatarUrl(true);
if (isNonEmptyString(avatarUrl)) {
setInvalidAvatarUrls((prev) => [...prev, avatarUrl]);
}
};
const fixedColor = color ?? stringToHslColor(entityId ?? '', 75, 25);

6
packages/twenty-ui/src/display/avatar/components/states/isInvalidAvatarUrlState.ts Normal file
View File

@ -0,0 +1,6 @@
import { atom } from 'recoil';
export const invalidAvatarUrlsState = atom<string[]>({
key: 'invalidAvatarUrlsState',
default: [],
});

1
packages/twenty-ui/src/display/index.ts
View File

@ -1,5 +1,6 @@
export * from './avatar/components/Avatar';
export * from './avatar/components/AvatarGroup';
export * from './avatar/components/states/isInvalidAvatarUrlState';
export * from './checkmark/components/AnimatedCheckmark';
export * from './checkmark/components/Checkmark';
export * from './chip/components/Chip';