Merge pull request #216 from dancier/feature/improvements

Feature/improvements

.gitignore

@@ -27,6 +27,7 @@ speed-measure-plugin*.json
 *.launch
 .settings/
 *.sublime-workspace
+.fleet/
 
 # IDE - VSCode
 .vscode/*

package.json

@@ -31,9 +31,9 @@
  "@angular/router": "^16.1.4",
  "@ngneat/until-destroy": "^9.2.2",
  "@ngrx/component-store": "^16.1.0",
- "@state-adapt/angular": "^1.2.1",
- "@state-adapt/core": "^1.2.1",
- "@state-adapt/rxjs": "^1.2.1",
+ "@state-adapt/angular": "^2.0.5",
+ "@state-adapt/core": "^2.0.5",
+ "@state-adapt/rxjs": "^2.0.5",
  "bootstrap-icons": "^1.11.2",
  "date-fns": "^2.29.3",
  "hammerjs": "^2.0.8",

src/app/chat/data-access/chat-state.adapter.ts

@@ -74,27 +74,30 @@ export const chatStateAdapter = createAdapter<ChatAdaptState>()({
  activeChatId: chatId,
  }),
 
- chatMessagesFetched: (state, { messages, chatId }: MessagesWithChatId) => ({
- ...state,
- newMessageSent: false,
- chats: state.chats.map((chat) => {
- // only add new messages to active chat
- if (chat.id !== chatId) return chat;
- return {
- ...chat,
- messages: [
- ...chat.messages.map((message) => {
- const updatedMessage = messages.find((m) => m.id === message.id);
- if (!updatedMessage) return message;
- return updateMessage(message, updatedMessage);
- }),
- ...messages.filter(
- (message) => !chat.messages.find((m) => m.id === message.id)
- ),
- ],
- };
- }),
- }),
+ chatMessagesFetched: (state, { messages, chatId }: MessagesWithChatId) => {
+ messages.sort((a, b) => a.createdAt.getTime() - b.createdAt.getTime());
+ return {
+ ...state,
+ newMessageSent: false,
+ chats: state.chats.map((chat) => {
+ // only add new messages to active chat
+ if (chat.id !== chatId) return chat;
+ return {
+ ...chat,
+ messages: [
+ ...chat.messages.map((message) => {
+ const updatedMessage = messages.find((m) => m.id === message.id);
+ if (!updatedMessage) return message;
+ return updateMessage(message, updatedMessage);
+ }),
+ ...messages.filter(
+ (message) => !chat.messages.find((m) => m.id === message.id)
+ ),
+ ],
+ };
+ }),
+ };
+ },
 
  openChatWith: (state, dancerId: string) => ({
  ...state,
@@ -128,8 +131,28 @@ export const chatStateAdapter = createAdapter<ChatAdaptState>()({
  ...state,
  }),
 
- setMessagesAsRead: (state, _chatId: string) => ({
+ setMessagesAsRead: (state, { chatId, profileId }) => ({
+ ...state,
+ chats: state.chats.map((chat) => {
+ if (chat.id !== chatId) return chat;
+ return {
+ ...chat,
+ lastMessage: chat.lastMessage
+ ? {
+ ...chat.lastMessage,
+ readByParticipants: [
+ ...(chat.lastMessage.readByParticipants || []),
+ profileId,
+ ],
+ }
+ : null,
+ };
+ }),
+ }),
+
+ profileIdChanged: (state, profileId: string | undefined) => ({
  ...state,
+ ownProfileId: profileId,
  }),
 
  selectors: {
@@ -156,6 +179,16 @@ export const chatStateAdapter = createAdapter<ChatAdaptState>()({
  return activeChat?.participants ?? [];
  },
  newMessageSent: (state) => state.newMessageSent,
+ activeChatUnreadMessages: (state) => {
+ const activeChat = state.chats.find(
+ (chat) => chat.id === state.activeChatId
+ );
+ if (!activeChat) return [];
+ return activeChat.messages.filter(
+ (message) =>
+ message.readByParticipants && message.readByParticipants.length < 2
+ );
+ },
  },
 });
 
@@ -180,24 +213,9 @@ function updateChat(
 ): SingleChatState {
  // for each property in newChat, update oldChat, only if they are different
  if (
- JSON.stringify(oldChat.lastMessage) === JSON.stringify(newChat.lastMessage)
+ JSON.stringify(oldChat.lastMessage) !== JSON.stringify(newChat.lastMessage)
  ) {
  oldChat.lastMessage = newChat.lastMessage;
  }
  return oldChat;
-
- // Object.keys(newChat).forEach((key: string) => {
- // const keyOfChat = key as keyof SingleChatState;
- // if (keyOfChat !== 'messages' && newChat[keyOfChat] !== oldChat[keyOfChat]) {
- // console.log(
- // 'updating',
- // keyOfChat,
- // newChat[keyOfChat],
- // oldChat[keyOfChat]
- // );
- // const newValue = newChat[keyOfChat];
- // oldChat[keyOfChat] = newValue as any;
- // }
- // });
- return oldChat;
 }

src/app/chat/data-access/chat-state.service.ts

@@ -5,12 +5,14 @@ import { getRequestSources, Source, toSource } from '@state-adapt/rxjs';
 import { ChatMessage, ChatParticipant } from './chat.types';
 import { toSignal } from '@angular/core/rxjs-interop';
 import {
- distinct,
+ debounceTime,
+ distinctUntilChanged,
  filter,
  map,
  merge,
  of,
  switchMap,
+ throttleTime,
  withLatestFrom,
 } from 'rxjs';
 import { HttpErrorResponse } from '@angular/common/http';
@@ -36,6 +38,7 @@ export type ChatAdaptState = {
  openChatWithParticipantId: string | null;
  chatCreated: boolean;
  newMessageSent: boolean;
+ ownProfileId: string | undefined;
 };
 
 @Injectable()
@@ -64,6 +67,11 @@ export class ChatStateService {
 
  sendMessage$ = new Source<string>('[Chat] sendMessage');
 
+ profileIdChanged$ = this.profileService.profile$.pipe(
+ map((profile) => profile?.id),
+ toSource('[Chat] profileChanged')
+ );
+
  // Adapters
  //
  private readonly initialState: ChatAdaptState = {
@@ -74,18 +82,20 @@ export class ChatStateService {
  openChatWithParticipantId: null,
  chatCreated: false,
  newMessageSent: false,
+ ownProfileId: undefined,
  };
 
- private chatStore = adapt(
- [this.storePath, this.initialState, chatStateAdapter],
- (store) => {
+ private chatStore = adapt(this.initialState, {
+ path: this.storePath,
+ adapter: chatStateAdapter,
+ sources: (store) => {
  const timerService = inject(TimerService);
  const chatHttpService = inject(ChatHttpService);
 
  const fetchChatsSources = getRequestSources(
  '[Chat] fetchChats',
  merge(
- timerService.interval('chatFetchTrigger', 10000),
+ timerService.interval('chatFetchTrigger', 20000),
  store.chatCreated$.pipe(filter((hasCreated) => !!hasCreated))
  ).pipe(
  startWith(-1),
@@ -97,6 +107,7 @@ export class ChatStateService {
  '[Chat] fetchParticipantDetails',
  store.participantsWithNoDetails$.pipe(
  filter((participants) => participants.length > 0),
+ debounceTime(250),
  map((participants: ChatParticipant[]) =>
  participants.map((p) => p.id)
  ),
@@ -110,7 +121,8 @@ export class ChatStateService {
  '[Chat] fetchMessages',
  merge(
  timerService.interval('chatMessagesFetchTrigger', 5000),
- store.activeChatId$.pipe(distinct())
+ store.activeChatId$.pipe(distinctUntilChanged()),
+ store.newMessageSent$.pipe(filter((hasSent) => !!hasSent))
  ).pipe(
  switchMap(() => store.activeChatId$),
  filter((chatId) => chatId !== null),
@@ -157,30 +169,24 @@ export class ChatStateService {
  )
  );
 
- const setMessagesAsReadSource = store.activeChatId$.pipe(
- filter((chatId) => chatId !== null),
- filter(() => this.profileService.getProfile()?.id !== undefined),
- distinct(),
- switchMap((chatId) =>
- store.chats$.pipe(
- map((chats) => chats.find((chat) => chat.id === chatId)),
- filter((chat) => chat !== undefined),
- map((chat) => ({
- chatId: chat!.id,
- unreadMessages: chat!.messages.filter(
- (message) =>
- !message.readByParticipants?.includes(
- this.profileService.getProfile()!.id!
- )
- ),
- }))
- )
- ),
- switchMap(({ chatId, unreadMessages }) => {
+ const distinctUnreadMessages = store.activeChatUnreadMessages$.pipe(
+ distinctUntilChanged<ChatMessage[]>(
+ (curr, prev) => JSON.stringify(curr) === JSON.stringify(prev)
+ )
+ );
+
+ const setMessagesAsReadSource = distinctUnreadMessages.pipe(
+ filter((messages) => messages.length > 0),
+ withLatestFrom(store.activeChatId$),
+ throttleTime(250),
+ switchMap(([unreadMessages, chatId]) => {
  for (const message of unreadMessages) {
  chatHttpService.setMessageAsRead(message.id).subscribe();
  }
- return of(chatId);
+ return of({
+ chatId: chatId,
+ profileId: this.profileService.getProfile()!.id!,
+ });
  }),
  toSource('[Chat] setMessagesAsRead')
  );
@@ -200,10 +206,11 @@ export class ChatStateService {
  messageSent: sendMessageSource.success$,
  messageSentError: sendMessageSource.error$,
  setMessagesAsRead: setMessagesAsReadSource,
+ profileIdChanged: this.profileIdChanged$,
  reset: this.userLoggedOut$,
  };
- }
- );
+ },
+ });
 
  // Selectors
  // public signals for components to consume