Skip to content

Commit adafbe5

Browse files
szuperazszuperaz
authored
Merge pull request #162 from GetStream/use-app-settings
feat: use app settings for file upload validations #154
2 parents 60a9f05 + a6dfabc commit adafbe5

18 files changed

+334
-47
lines changed

‎docusaurus/docs/Angular/components/message-input.mdx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,9 @@ If no value is provided, it is set from the [`MessageInputConfigService`](../ser
8080
| ------- |
8181
| boolean |
8282

83-
### acceptedFileTypes
83+
### <div class="label caution basic">Caution</div> acceptedFileTypes
84+
85+
**DEPRECATED** use [application settings](https://getstream.io/chat/docs/javascript/app_setting_overview/?language=javascript#file-uploads) instead
8486

8587
You can narrow the accepted file types by providing the [accepted types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept). By default every file type is accepted.
8688

‎docusaurus/docs/Angular/services/chat-client.mdx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,6 @@ Please note that for performance reaasons the client is connected [outside of th
2020

2121
Creates a [`StreamChat`](https://github.com/GetStream/stream-chat-js/blob/668b3e5521339f4e14fc657834531b4c8bf8176b/src/client.ts#L124) instance using the provided `apiKey`, and connects a user with the given `userId` and `userToken`. More info about [connecting users](https://getstream.io/chat/docs/javascript/init_and_users/?language=javascript) can be found in the platform documentation.
2222

23-
:::important
24-
Calling the `init` method creates a new [WebSocket connection](https://getstream.io/chat/docs/javascript/init_and_users/?language=javascript#websocket-connections), you should only call it once.
25-
:::
26-
2723
## notification$
2824

2925
Emits [`Notification`](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/chat-client.service.ts) events, the list of [supported events](https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/chat-client.service.ts) can be found on GitHub. The platform documentation covers [events in detail](https://getstream.io/chat/docs/javascript/event_object/?language=javascript).
@@ -32,10 +28,18 @@ Emits [`Notification`](https://github.com/GetStream/stream-chat-angular/blob/mas
3228

3329
Emits the current connection state of the user (`online` or `offline`)
3430

31+
## appSettings$
32+
33+
Emits the current [application settings](https://getstream.io/chat/docs/javascript/app_setting_overview/?language=javascript). Since getting the application settings is an expensive API call and we don't always need the result, this is not initialized by default, you need to call `getApplicationSettings` to load them.
34+
3535
## flagMessage
3636

3737
Flag the message with the given ID. If you want to know [more about flags](https://getstream.io/chat/docs/javascript/moderation/?language=javascript) check out the platform documentation.
3838

39+
## getApplicationSettings
40+
41+
Loads the current [application settings](https://getstream.io/chat/docs/javascript/app_setting_overview/?language=javascript), if the application settings have already been loaded, it does nothing.
42+
3943
## autcompleteUsers
4044

4145
Returns the autocomplete options for application users, sends a [search request](https://getstream.io/chat/docs/javascript/query_users/?language=javascript#querying-using-the-$autocomplete-operator) with the given search term.

‎docusaurus/docs/Angular/services/message-input-config.mdx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,13 @@ The `MessageInputConfigService` is used to keep a consistent configuration among
1010

1111
The configuration options:
1212

13-
| Name | Type | Description | Default |
14-
| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
15-
| isFileUploadEnabled | boolean | If file upload is enabled, the user can open a file selector from the input. Please note that the user also needs to have the necessary [channel capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript). | true |
16-
| acceptedFileTypes | `string[]` | You can narrow the accepted file types by providing the [accepted types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept). By default every file type is accepted. | undefined |
17-
| isMultipleFileUploadEnabled | boolean | If true, users can select multiple files to upload. | true |
18-
| areMentionsEnabled | boolean | If true, users can mention other users in messages. You also [need to use the `AutocompleteTextarea`](../concepts/opt-in-architecure.mdx) for this feature to work. | true |
19-
| mentionAutocompleteItemTemplate | [`TemplateRef<MentionAutcompleteListItemContext>`](<(https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/types.ts)>) | You can provide your own template for the autocomplete list for user mentions. You also [need to use the `AutocompleteTextarea`](../concepts/opt-in-architecure.mdx) for this feature to work. | - |
20-
| mentionScope | 'application' or 'channel' | The scope for user mentions, either members of the current channel of members of the application | 'channel' |
13+
| Name | Type | Description | Default |
14+
| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
15+
| isFileUploadEnabled | boolean | If file upload is enabled, the user can open a file selector from the input. Please note that the user also needs to have the necessary [channel capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript). | true |
16+
| acceptedFileTypes | `string[]` | **DEPRECATED** use [application settings](https://getstream.io/chat/docs/javascript/app_setting_overview/?language=javascript#file-uploads) instead. You can narrow the accepted file types by providing the [accepted types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept). By default every file type is accepted. | undefined |
17+
| isMultipleFileUploadEnabled | boolean | If true, users can select multiple files to upload. | true |
18+
| areMentionsEnabled | boolean | If true, users can mention other users in messages. You also [need to use the `AutocompleteTextarea`](../concepts/opt-in-architecure.mdx) for this feature to work. | true |
19+
| mentionAutocompleteItemTemplate | [`TemplateRef<MentionAutcompleteListItemContext>`](<(https://github.com/GetStream/stream-chat-angular/blob/master/projects/stream-chat-angular/src/lib/types.ts)>) | You can provide your own template for the autocomplete list for user mentions. You also [need to use the `AutocompleteTextarea`](../concepts/opt-in-architecure.mdx) for this feature to work. | - |
20+
| mentionScope | 'application' or 'channel' | The scope for user mentions, either members of the current channel of members of the application | 'channel' |
2121

2222
If any of these set through the input of a [`MessageInput`](../components/message-input.mdx) component, that will be override the corresponding value in the service.

‎docusaurus/docs/Angular/services/notifications.mdx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,12 @@ Displays a notification for the given amount of time.
1818

1919
### Params:
2020

21-
| Name | Type | Description | Default |
22-
| ------- | -------------------- | ------------------------------------------------------------------- | ------- |
23-
| text | string | The text of the notification | - |
24-
| type | `error` or `success` | The type of the notification | `error` |
25-
| timeout | number | The number of milliseconds while the notification should be visible | 5000ms |
21+
| Name | Type | Description | Default |
22+
| --------------- | -------------------- | ------------------------------------------------------------------- | ------- |
23+
| text | string | The text of the notification | - |
24+
| type | `error` or `success` | The type of the notification | `error` |
25+
| timeout | number | The number of milliseconds while the notification should be visible | 5000ms |
26+
| translateParams | Object | Translation parameters for the `text` | - |
2627

2728
### Returns
2829

@@ -34,10 +35,11 @@ Displays a notification, the notification can be hidden by the [`removeNotificat
3435

3536
### Params:
3637

37-
| Name | Type | Description | Default |
38-
| ---- | -------------------- | ---------------------------- | ------- |
39-
| text | string | The text of the notification | - |
40-
| type | `error` or `success` | The type of the notification | `error` |
38+
| Name | Type | Description | Default |
39+
| --------------- | -------------------- | ------------------------------------- | ------- |
40+
| text | string | The text of the notification | - |
41+
| type | `error` or `success` | The type of the notification | `error` |
42+
| translateParams | Object | Translation parameters for the `text` | - |
4143

4244
### Returns
4345

‎projects/stream-chat-angular/src/assets/i18n/en.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,5 +90,6 @@ export const en = {
9090
'Sending links is not allowed in this conversation',
9191
"You can't send messages in this channel":
9292
"You can't send messages in this channel",
93+
'Unsupported file type: {{type}}': 'Unsupported file type: {{type}}',
9394
},
9495
};

‎projects/stream-chat-angular/src/lib/attachment.service.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Injectable } from '@angular/core';
2+
import { isImageFile } from './is-image-file';
23
import { BehaviorSubject, Observable } from 'rxjs';
34
import { Attachment } from 'stream-chat';
45
import { ChannelService } from './channel.service';
@@ -39,8 +40,7 @@ export class AttachmentService {
3940
const dataFiles: File[] = [];
4041

4142
Array.from(fileList).forEach((file) => {
42-
if (file.type.startsWith('image/') && !file.type.endsWith('.photoshop')) {
43-
// photoshop files begin with 'image/'
43+
if (isImageFile(file)) {
4444
imageFiles.push(file);
4545
} else {
4646
dataFiles.push(file);

‎projects/stream-chat-angular/src/lib/chat-client.service.spec.ts‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,28 @@ describe('ChatClientService', () => {
2626

2727
it('should connect user', () => {
2828
expect(StreamChat.getInstance).toHaveBeenCalledWith(apiKey);
29-
expect(mockChatClient.connectUser).toHaveBeenCalledWith(
30-
{ id: userId },
31-
userToken
29+
const spy = jasmine.createSpy();
30+
service.appSettings$.subscribe(spy);
31+
32+
expect(spy).toHaveBeenCalledWith(undefined);
33+
});
34+
35+
it('should emit app settings, if app settings not yet loaded', async () => {
36+
const spy = jasmine.createSpy();
37+
service.appSettings$.subscribe(spy);
38+
await service.getAppSettings();
39+
40+
expect(spy).toHaveBeenCalledWith(
41+
jasmine.objectContaining({
42+
file_upload_config: jasmine.any(Object),
43+
image_upload_config: jasmine.any(Object),
44+
})
3245
);
46+
47+
mockChatClient.getAppSettings.calls.reset();
48+
await service.getAppSettings();
49+
50+
expect(mockChatClient.getAppSettings).not.toHaveBeenCalled();
3351
});
3452

3553
it('should set SDK information', () => {

‎projects/stream-chat-angular/src/lib/chat-client.service.ts‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ApplicationRef, Injectable, NgZone } from '@angular/core';
2-
import { Observable, ReplaySubject } from 'rxjs';
3-
import { Event, StreamChat } from 'stream-chat';
2+
import { BehaviorSubject, Observable, ReplaySubject } from 'rxjs';
3+
import { AppSettings, Event, StreamChat } from 'stream-chat';
44
import { version } from '../assets/version';
55
import { NotificationService } from './notification.service';
66

@@ -18,9 +18,13 @@ export type Notification = {
1818
export class ChatClientService {
1919
chatClient!: StreamChat;
2020
notification$: Observable<Notification>;
21+
appSettings$: Observable<AppSettings | undefined>;
2122
connectionState$: Observable<'offline' | 'online'>;
2223
private notificationSubject = new ReplaySubject<Notification>(1);
2324
private connectionStateSubject = new ReplaySubject<'offline' | 'online'>(1);
25+
private appSettingsSubject = new BehaviorSubject<AppSettings | undefined>(
26+
undefined
27+
);
2428

2529
constructor(
2630
private ngZone: NgZone,
@@ -29,6 +33,7 @@ export class ChatClientService {
2933
) {
3034
this.notification$ = this.notificationSubject.asObservable();
3135
this.connectionState$ = this.connectionStateSubject.asObservable();
36+
this.appSettings$ = this.appSettingsSubject.asObservable();
3237
}
3338

3439
async init(apiKey: string, userId: string, userToken: string) {
@@ -39,6 +44,7 @@ export class ChatClientService {
3944
`stream-chat-angular-${version}-${this.chatClient.getUserAgent()}`
4045
);
4146
});
47+
this.appSettingsSubject.next(undefined);
4248
this.chatClient.on('notification.added_to_channel', (e) => {
4349
this.notificationSubject.next({
4450
eventType: 'notification.added_to_channel',
@@ -77,6 +83,14 @@ export class ChatClientService {
7783
});
7884
}
7985

86+
async getAppSettings() {
87+
if (this.appSettingsSubject.getValue()) {
88+
return;
89+
}
90+
const settings = await this.chatClient.getAppSettings();
91+
this.appSettingsSubject.next(settings.app || {});
92+
}
93+
8094
async flagMessage(messageId: string) {
8195
await this.chatClient.flagMessage(messageId);
8296
}

‎projects/stream-chat-angular/src/lib/is-image-file.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export const isImageFile = (file: File) => {
2+
// photoshop files begin with 'image/'
3+
return file.type.startsWith('image/') && !file.type.endsWith('.photoshop');
4+
};

‎projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@ export class MessageInputConfigService {
1010
mentionAutocompleteItemTemplate:
1111
| TemplateRef<MentionAutcompleteListItemContext>
1212
| undefined;
13+
/**
14+
* @deprecated https://getstream.io/chat/docs/sdk/angular/services/message-input-config/#overview
15+
*/
1316
acceptedFileTypes: string[] | undefined;
1417
isMultipleFileUploadEnabled: boolean | undefined = true;
1518
mentionScope: 'channel' | 'application' | undefined = 'channel';

0 commit comments

Comments
 (0)