- added 'add friend' and 'remove member' buttons in the chat members …

…list

- aforementioned 'add friend' feature is now fully implemented on the back-end
- made a large code-quality refactor to apiCalls.js
- some tweaks to the settings screen

src/app/chat-interface/info-tab/info-tab.component.css

@@ -11,7 +11,8 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  /* todo: overflow:scroll; but that doesn't work because of the mat-list, figure out something similar, perhaps paging on the mat-lists */
+  overflow: hidden;
+  /* todo: wrap the 2 lists in a separate div, and make it scrollable */
 }
 
 #server-info > * {
@@ -109,7 +110,7 @@ button {
   right: 0;
   height: auto;
   border-top: 10px solid var(--basecolor);
-
+  background: var(--basecolor-light);
 }
 
 #panel-wrap {
@@ -142,6 +143,29 @@ button {
   border-radius: 4px;
 }
 
+/* IMPORTANT: this styling should be remade into a global style for inline-buttons */
+.friend-list-button {
+  border-radius: 4px !important;
+  box-shadow: none !important;
+  font-size: 28px !important;
+  width: 28px;
+  height: 28px;
+}
+
+.friend-list-button > .mat-icon {
+  font-size: 18px !important;
+  width: 18px;
+  height: 18px;
+}
+
+.green {
+  background-color: var(--infobox-ok);
+}
+
+.red {
+  background-color: var(--infobox-error);
+}
+
 #user-info-text-column-wrapper {
   margin-left: auto;
   display: flex;

src/app/chat-interface/info-tab/info-tab.component.html

@@ -33,6 +33,8 @@ <h3 class="list-header">Chat Members</h3>
           <div class="alignment-wrapper">
             <img class="list-item-img" src="{{member.pfpSourceUrl}}" alt="">
             <span class="list-item-text">{{member.username}}</span>
+            <button mat-mini-fab class="friend-list-button green" (click)="sendFriendRequest(member.id)"><mat-icon>supervisor_account</mat-icon></button>
+            <button mat-mini-fab class="friend-list-button red" (click)="removeFromServer(member.id)"><mat-icon>cancel</mat-icon></button>
           </div>
         </mat-list-item>
       </mat-list>

src/app/chat-interface/info-tab/info-tab.component.ts

@@ -115,6 +115,28 @@ export class InfoTabComponent {
     this.popupHandlerService.displayInviteDetails(inviteId);
   }
 
+  sendFriendRequest(userId: string) {
+    this.http.post('/api/addFriend', {friendId: userId}, {observe: 'response'}).subscribe({
+      next: () => {
+        this.popupHandlerService.dispatch('Successfully sent a friend request!', "ok");
+      },
+      error: (err) => {
+        this.popupHandlerService.dispatchFromResponse(err);
+      }
+    });
+  }
+
+  removeFromServer(userId: string) {
+    this.http.post('/api/removeChatMember', {chatId: this.chatContextService.storedOpenedChatId.value, userId: userId}, {observe: 'response'}).subscribe({
+      next: () => {
+        this.updateChatMemberList();
+      },
+      error: (err) => {
+        this.popupHandlerService.dispatchFromResponse(err);
+      }
+    });
+  }
+
   displayProfileDetails() {
     // todo: placeholder, in future either just display the details or remove this functionality entirely
     this.popupHandlerService.displayUserSettings();

src/app/shared/components/user-settings-dialog/user-settings-dialog.component.html

@@ -14,11 +14,11 @@
     </div>
     <mat-list>
       <mat-list-item>
-        Username: <span class="mono-text-container">{{'Placeholder'}}</span>
+        Username: <span class="mono-text-container">{{ this.userContextService.storedUsername.value }}</span>
       </mat-list-item>
-      <mat-list-item>
+      <!--mat-list-item>
         Last login: <span class="mono-text-container">{{'Placeholder'}}</span>
-      </mat-list-item>
+      </mat-list-item-->
       <mat-list-item>
         Login expiry: <span class="mono-text-container">{{'Placeholder'}}</span>
       </mat-list-item>