Sanitize url before fetching favicon and display letter avatar if it can't be retrieved (#1035)

* Sanitize url before fetching favicon and display letter avatar if it can't be retrieved

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>

* Priorotise www for apple.com domain

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>

* Add requested changes

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>

* Fix the tests

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>

* Change avatar generation strategy

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>

---------

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>
This commit is contained in:
gitstart-twenty
2023-08-03 02:53:56 +08:00
committed by GitHub
parent bfd748e175
commit 2680289ff7
4 changed files with 76 additions and 20 deletions

View File

@ -8,6 +8,7 @@ import {
ViewFieldDefinition,
ViewFieldURLMetadata,
} from '@/ui/table/types/ViewField';
import { sanitizeURL } from '~/utils';
import { GenericEditableURLCellEditMode } from './GenericEditableURLCellEditMode';
@ -33,7 +34,9 @@ export function GenericEditableURLCell({
<EditableCell
editModeHorizontalAlign={editModeHorizontalAlign}
editModeContent={<GenericEditableURLCellEditMode viewField={viewField} />}
nonEditModeContent={<InplaceInputURLDisplayMode value={fieldValue} />}
nonEditModeContent={
<InplaceInputURLDisplayMode value={sanitizeURL(fieldValue)} />
}
></EditableCell>
);
}

View File

@ -1,3 +1,4 @@
import { useEffect, useState } from 'react';
import styled from '@emotion/styled';
import { isNonEmptyString } from '~/utils/isNonEmptyString';
@ -86,6 +87,20 @@ export function Avatar({
type = 'squared',
}: OwnProps) {
const noAvatarUrl = !isNonEmptyString(avatarUrl);
const [isInvalidAvatarUrl, setIsInvalidAvatarUrl] = useState(false);
useEffect(() => {
if (avatarUrl) {
new Promise((resolve) => {
const img = new Image();
img.onload = () => resolve(false);
img.onerror = () => resolve(true);
img.src = getImageAbsoluteURIOrBase64(avatarUrl) as string;
}).then((res) => {
setIsInvalidAvatarUrl(res as boolean);
});
}
}, [avatarUrl]);
return (
<StyledAvatar
@ -95,7 +110,8 @@ export function Avatar({
type={type}
colorId={colorId}
>
{noAvatarUrl && placeholder[0]?.toLocaleUpperCase()}
{(noAvatarUrl || isInvalidAvatarUrl) &&
placeholder[0]?.toLocaleUpperCase()}
</StyledAvatar>
);
}