admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Add Twenty Shared & Fix profile image rendering (#8841)

Browse Source 
PR Summary: 

1. Added `Twenty Shared` Package to centralize utilitiies as mentioned
in #8942
2. Optimization of `getImageAbsoluteURI.ts` to handle edge cases


![image](https://github.com/user-attachments/assets/c72a3061-6eba-46b8-85ac-869f06bf23c0)

---------

Co-authored-by: Antoine Moreaux <moreaux.antoine@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Mohammed Abdul Razak Wahab
2024-12-17 13:54:21 +05:30
committed by GitHub
parent 4e329d08b0
commit 08a9db2df6
39 changed files with 453 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
import { styled } from '@linaria/react';
import { isNonEmptyString, isUndefined } from '@sniptt/guards';
import { useContext, useMemo } from 'react';
import { useContext } from 'react';
import { useRecoilState } from 'recoil';
import { invalidAvatarUrlsState } from '@ui/display/avatar/components/states/isInvalidAvatarUrlState';
@ -9,12 +9,9 @@ import { AvatarSize } from '@ui/display/avatar/types/AvatarSize';
import { AvatarType } from '@ui/display/avatar/types/AvatarType';
import { IconComponent } from '@ui/display/icon/types/IconComponent';
import { ThemeContext } from '@ui/theme';
import {
Nullable,
getImageAbsoluteURI,
isDefined,
stringToHslColor,
} from '@ui/utilities';
import { Nullable, stringToHslColor } from '@ui/utilities';
import { REACT_APP_SERVER_BASE_URL } from '@ui/utilities/config';
import { getImageAbsoluteURI } from 'twenty-shared';
const StyledAvatar = styled.div<{
size: AvatarSize;
@ -86,10 +83,12 @@ export const Avatar = ({
invalidAvatarUrlsState,
);
const avatarImageURI = useMemo(
() => (isDefined(avatarUrl) ? getImageAbsoluteURI(avatarUrl) : null),
[avatarUrl],
);
const avatarImageURI = isNonEmptyString(avatarUrl)
? getImageAbsoluteURI({
imageUrl: avatarUrl,
baseUrl: REACT_APP_SERVER_BASE_URL,
})
: null;
const noAvatarUrl = !isNonEmptyString(avatarImageURI);

21
packages/twenty-ui/src/utilities/image/__tests__/getImageAbsoluteURI.test.ts
View File

@ -1,21 +0,0 @@
import { getImageAbsoluteURI } from '../getImageAbsoluteURI';
describe('getImageAbsoluteURI', () => {
it('should return absolute url if the imageUrl is an absolute url', () => {
const imageUrl = 'https://XXX';
const result = getImageAbsoluteURI(imageUrl);
expect(result).toBe(imageUrl);
});
it('should return absolute url if the imageUrl is an absolute unsecure url', () => {
const imageUrl = 'http://XXX';
const result = getImageAbsoluteURI(imageUrl);
expect(result).toBe(imageUrl);
});
it('should return fully formed url if imageUrl is a relative url', () => {
const imageUrl = 'XXX';
const result = getImageAbsoluteURI(imageUrl);
expect(result).toBe('http://localhost:3000/files/XXX');
});
});

11
packages/twenty-ui/src/utilities/image/getImageAbsoluteURI.ts
View File

@ -1,11 +0,0 @@
import { REACT_APP_SERVER_BASE_URL } from '@ui/utilities/config';
export const getImageAbsoluteURI = (imageUrl: string) => {
if (imageUrl.startsWith('https:') || imageUrl.startsWith('http:')) {
return imageUrl;
}
const serverFilesUrl = REACT_APP_SERVER_BASE_URL;
return `${serverFilesUrl}/files/${imageUrl}`;
};

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

@ -6,7 +6,6 @@ export * from './animation/components/AnimatedTextWord';
export * from './animation/components/AnimatedTranslation';
export * from './color/utils/stringToHslColor';
export * from './dimensions/components/ComputeNodeDimensions';
export * from './image/getImageAbsoluteURI';
export * from './isDefined';
export * from './responsive/hooks/useIsMobile';
export * from './screen-size/hooks/useScreenSize';