Skip to content

Commit 383a7e4

Browse files
author
Dan Carbonell
committed
pr comments and test updates
1 parent c73a7eb commit 383a7e4

File tree

7 files changed

+45
-44
lines changed

7 files changed

+45
-44
lines changed

‎src/components/Attachment/Attachment.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@ const Attachment = (props) => {
3434
return null;
3535
}
3636

37-
const Giphy = props.Giphy ? props.Giphy : Card;
38-
const UrlPreview = props.UrlPreview ? props.UrlPreview : Card;
37+
const Giphy = props?.Giphy || Card;
38+
const UrlPreview = props?.UrlPreview || Card;
3939
const cardProps = {
4040
Header: CardHeader ? CardHeader : undefined,
4141
Cover: CardCover ? CardCover : undefined,
@@ -59,7 +59,6 @@ const Attachment = (props) => {
5959
type = 'media';
6060
} else {
6161
type = 'card';
62-
// extra = 'no-image';
6362
}
6463

6564
if (type === 'image') {

‎src/components/Attachment/AttachmentActions.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ const AttachmentActions = ({ actions, actionHandler, id }) => (
5555
buttonStyle={action.style}
5656
key={`${id}-${action.value}`}
5757
onPress={() => actionHandler(action.name, action.value)}
58-
testID='attachment-actions-button'
58+
testID={`attachment-actions-button-${action.name}`}
5959
>
6060
<ActionButtonText buttonStyle={action.style}>
6161
{action.text}

‎src/components/Attachment/Card.js‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,14 @@ import { themed } from '../../styles/theme';
99
import { makeImageCompatibleUrl } from '../../utils';
1010

1111
const Container = styled.TouchableOpacity`
12-
border-top-left-radius: 16px;
13-
border-top-right-radius: 16px;
14-
overflow: hidden;
12+
background-color: ${({ theme }) => theme.colors.light};
1513
border-bottom-left-radius: ${({ alignment }) =>
1614
alignment === 'right' ? 16 : 2};
1715
border-bottom-right-radius: ${({ alignment }) =>
1816
alignment === 'left' ? 16 : 2};
19-
background-color: ${({ theme }) => theme.colors.light};
17+
border-top-left-radius: 16px;
18+
border-top-right-radius: 16px;
19+
overflow: hidden;
2020
width: 250px;
2121
${({ theme }) => theme.message.card.container.css}
2222
`;
@@ -110,12 +110,7 @@ const Card = (props) => {
110110
<Footer {...props} />
111111
) : (
112112
<CardFooter>
113-
<View
114-
style={{
115-
backgroundColor: 'transparent',
116-
flexDirection: 'column',
117-
}}
118-
>
113+
<View style={{ backgroundColor: 'transparent' }}>
119114
{title && <FooterTitle>{title}</FooterTitle>}
120115
{text && <FooterDescription>{text}</FooterDescription>}
121116
<FooterLink>{trimUrl(title_link || og_scrape_url)}</FooterLink>

‎src/components/Attachment/FileAttachment.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -77,9 +77,7 @@ const FileAttachment = ({
7777
mimeType={attachment.mime_type}
7878
/>
7979
<FileDetails>
80-
<FileTitle ellipsizeMode='tail' numberOfLines={2}>
81-
{attachment.title}
82-
</FileTitle>
80+
<FileTitle numberOfLines={2}>{attachment.title}</FileTitle>
8381
<FileSize>{attachment.file_size} KB</FileSize>
8482
</FileDetails>
8583
</FileContainer>

‎src/components/Attachment/FileAttachmentGroup.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ const FileAttachmentGroup = (props) => {
1313
alignment,
1414
AttachmentActions,
1515
AttachmentFileIcon,
16-
files,
1716
FileAttachment,
17+
files,
1818
handleAction,
1919
messageId,
2020
} = props;

‎src/components/Attachment/Gallery.js‎

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -14,47 +14,50 @@ const Single = styled.TouchableOpacity`
1414
border-top-left-radius: 16px;
1515
border-top-right-radius: 16px;
1616
border-bottom-left-radius: ${({ alignment }) =>
17-
alignment === 'right' ? 16 : 2};
17+
alignment === 'right' ? 16 : 2}px;
1818
border-bottom-right-radius: ${({ alignment }) =>
19-
alignment === 'left' ? 16 : 2};
19+
alignment === 'left' ? 16 : 2}px;
2020
height: 200px;
2121
overflow: hidden;
22-
width: ${({ theme }) => theme.message.gallery.width};
22+
width: ${({ theme }) => theme.message.gallery.width}px;
2323
${({ theme }) => theme.message.gallery.single.css}
2424
`;
2525

2626
const GalleryContainer = styled.View`
2727
border-radius: 16px;
2828
border-bottom-right-radius: ${({ alignment }) =>
29-
alignment === 'left' ? 16 : 2};
29+
alignment === 'left' ? 16 : 2}px;
3030
border-bottom-left-radius: ${({ alignment }) =>
31-
alignment === 'right' ? 16 : 2};
31+
alignment === 'right' ? 16 : 2}px;
3232
flex-direction: row;
3333
flex-wrap: wrap;
3434
height: ${({ theme, length }) =>
3535
length >= 4
3636
? theme.message.gallery.doubleSize
3737
: length === 3
3838
? theme.message.gallery.halfSize
39-
: theme.message.gallery.size};
39+
: theme.message.gallery.size}px;
4040
overflow: hidden;
41-
width: ${({ theme }) => theme.message.gallery.width};
41+
width: ${({ theme }) => theme.message.gallery.width}px;
4242
${({ theme }) => theme.message.gallery.galleryContainer.css}
4343
`;
4444

4545
const ImageContainer = styled.TouchableOpacity`
4646
height: ${({ theme, length }) =>
47-
length !== 3 ? theme.message.gallery.size : theme.message.gallery.halfSize};
47+
length !== 3
48+
? theme.message.gallery.size
49+
: theme.message.gallery.halfSize}px;
4850
width: ${({ theme, length }) =>
49-
length !== 3 ? theme.message.gallery.size : theme.message.gallery.halfSize};
51+
length !== 3
52+
? theme.message.gallery.size
53+
: theme.message.gallery.halfSize}px;
5054
${({ theme }) => theme.message.gallery.imageContainer.css}
5155
`;
5256

5357
const HeaderContainer = styled.View`
58+
flex: 1;
5459
flex-direction: row;
5560
justify-content: flex-end;
56-
position: absolute;
57-
width: 100%;
5861
z-index: 1000;
5962
${({ theme }) => theme.message.gallery.header.container.css}
6063
`;
@@ -92,10 +95,10 @@ const Gallery = ({ alignment, images }) => {
9295
const [viewerModalImageIndex, setViewerModalImageIndex] = useState(0);
9396
const [viewerModalOpen, setViewerModalOpen] = useState(false);
9497

95-
if (!images || !images.length) return null;
98+
if (!images?.length) return null;
9699

97-
const galleryImages = [...images].map((i) => ({
98-
url: makeImageCompatibleUrl(i.image_url || i.thumb_url),
100+
const galleryImages = [...images].map((image) => ({
101+
url: makeImageCompatibleUrl(image.image_url || image.thumb_url),
99102
}));
100103

101104
if (galleryImages.length === 1) {
@@ -111,7 +114,7 @@ const Gallery = ({ alignment, images }) => {
111114
<Image
112115
resizeMode='cover'
113116
source={{ uri: galleryImages[0].url }}
114-
style={{ height: '100%', width: '100%' }}
117+
style={{ flex: 1 }}
115118
/>
116119
</Single>
117120
<Modal
@@ -156,20 +159,18 @@ const Gallery = ({ alignment, images }) => {
156159
{...additionalTouchableProps}
157160
>
158161
{i === 3 && galleryImages.length > 4 ? (
159-
<View style={{ width: '100%', height: '100%' }}>
162+
<View style={{ flex: 1 }}>
160163
<Image
161164
resizeMode='cover'
162165
source={{ uri: galleryImages[3].url }}
163-
style={{ width: '100%', height: '100%' }}
166+
style={{ flex: 1 }}
164167
/>
165168
<View
166169
style={{
167170
alignItems: 'center',
168171
backgroundColor: 'rgba(0,0,0,0.69)',
169-
height: '100%',
172+
flex: 1,
170173
justifyContent: 'center',
171-
position: 'absolute',
172-
width: '100%',
173174
}}
174175
>
175176
<Text
@@ -187,7 +188,7 @@ const Gallery = ({ alignment, images }) => {
187188
<Image
188189
resizeMode='cover'
189190
source={{ uri: image.url }}
190-
style={{ width: '100%', height: '100%' }}
191+
style={{ flex: 1 }}
191192
/>
192193
)}
193194
</ImageContainer>

‎src/components/Attachment/__tests__/Attachment.test.js‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -72,8 +72,8 @@ describe('Attachment', () => {
7272

7373
it('should render Gallery component if image does not have title_link or og_scrape_url', async () => {
7474
const attachment = generateImageAttachment({
75-
title_link: undefined,
7675
og_scrape_url: undefined,
76+
title_link: undefined,
7777
});
7878
const { getByTestId } = render(getAttachmentComponent({ attachment }));
7979

@@ -98,16 +98,24 @@ describe('Attachment', () => {
9898

9999
it('should call actionHandler on click', async () => {
100100
const actionHandler = jest.fn();
101+
const action = generateAttachmentAction();
101102
const { getByTestId } = render(
102103
getActionComponent({
103-
actions: [generateAttachmentAction()],
104+
actions: [action],
104105
actionHandler,
105106
}),
106107
);
107108

108-
await waitForElement(() => getByTestId('attachment-actions-button'));
109-
fireEvent.press(getByTestId('attachment-actions-button'));
110-
fireEvent.press(getByTestId('attachment-actions-button'));
109+
await waitForElement(() =>
110+
getByTestId(`attachment-actions-button-${action.name}`),
111+
);
112+
113+
expect(getByTestId('attachment-actions')).toContainElement(
114+
getByTestId(`attachment-actions-button-${action.name}`),
115+
);
116+
117+
fireEvent.press(getByTestId(`attachment-actions-button-${action.name}`));
118+
fireEvent.press(getByTestId(`attachment-actions-button-${action.name}`));
111119

112120
await wait(() => {
113121
expect(actionHandler).toHaveBeenCalledTimes(2);

0 commit comments

Comments
 (0)