feat: inbox modal and social changes

src/app/app.module.ts

@@ -21,6 +21,8 @@ import {ReactiveFormsModule} from '@angular/forms';
 import {MatIconModule} from '@angular/material/icon';
 import {MatButtonModule} from '@angular/material/button';
 import { SocialComponent } from './pages/social/social.component';
+import { MatDialogModule } from '@angular/material/dialog';
+import { InboxComponent } from './components/inbox/inbox.component';
 @NgModule({
   declarations: [
     AppComponent,
@@ -32,7 +34,8 @@ import { SocialComponent } from './pages/social/social.component';
     SideBarComponent,
     SignUpComponent,
     LoginComponent,
-    SocialComponent
+    SocialComponent,
+    InboxComponent
   ],
   imports: [
     BrowserModule,
@@ -45,7 +48,8 @@ import { SocialComponent } from './pages/social/social.component';
     MatFormFieldModule,
     ReactiveFormsModule,
     MatIconModule,
-    MatButtonModule
+    MatButtonModule,
+    MatDialogModule
   ],
   providers: [ApiService],
   bootstrap: [AppComponent]

src/app/components/inbox/inbox.component.html

@@ -0,0 +1,6 @@
+<h2 mat-dialog-title>Modal Title</h2>
+<mat-dialog-content>
+  </mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button (click)="onNoClick()">Close</button>
+</mat-dialog-actions>

src/app/components/inbox/inbox.component.ts

@@ -0,0 +1,20 @@
+import { Component, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-inbox',
+  templateUrl: './inbox.component.html',
+  styleUrls: ['./inbox.component.scss']
+})
+export class InboxComponent {
+
+  constructor(
+    public dialogRef: MatDialogRef<InboxComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any
+  ) { }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+}

src/app/components/side-bar/side-bar.component.html

@@ -35,7 +35,7 @@
             </a>
           </li>
           <li>
-             <a routerLink="/home" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
+             <a (click)="openInbox()" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
                 <svg class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                    <path d="m17.418 3.623-.018-.008a6.713 6.713 0 0 0-2.4-.569V2h1a1 1 0 1 0 0-2h-2a1 1 0 0 0-1 1v2H9.89A6.977 6.977 0 0 1 12 8v5h-2V8A5 5 0 1 0 0 8v6a1 1 0 0 0 1 1h8v4a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-4h6a1 1 0 0 0 1-1V8a5 5 0 0 0-2.582-4.377ZM6 12H4a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2Z"/>
                 </svg>

src/app/components/side-bar/side-bar.component.ts

@@ -1,4 +1,6 @@
 import { Component } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { InboxComponent } from '../inbox/inbox.component';
 
 @Component({
   selector: 'app-side-bar',
@@ -7,4 +9,15 @@ import { Component } from '@angular/core';
 })
 export class SideBarComponent {
 
+  constructor(public dialog: MatDialog) { }
+
+  openInbox(): void {
+    const dialogRef = this.dialog.open(InboxComponent, {
+      width: '250px', // Adjust the width as needed
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      console.log(`Dialog result: ${result}`);
+    });
+  }
 }

src/app/pages/home/home.component.ts

@@ -11,14 +11,14 @@ export class HomeComponent {
 
   constructor(private router: Router,
     private apiServ: ApiService,
-    private cs: CommonService
+    private cs: CommonService,
   ) {}
 
   ngOnInit(): void {
     if(!this.cs.homeLoaded){
-      this.apiServ.getUser().subscribe({
+      this.apiServ.gets('auth/getUser').subscribe({
         next: (response) => {
-          console.log(response);
+          this.cs.getUser = response;
           this.cs.homeLoaded = true;
         },
         error: err => console.error('Observable emitted an error: ' + err)
@@ -31,4 +31,5 @@ export class HomeComponent {
   navigateTo(route: string) {
     this.router.navigate([`/${route}`]);
   }
+
 }

src/app/pages/social/social.component.html

@@ -8,7 +8,7 @@
         (input)="searchFriends($event)" />
     </div>
 
-    <main>
+    <main class="displayFriends">
       <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
         <div *ngFor="let friend of cs.friendsList"
           class="flex flex-col border border-solid p-4 rounded-md bg-white shadow-md">
@@ -17,7 +17,7 @@
           <span class="text-sm text-gray-600">{{ friend.email }}</span>
           <div class="mt-4 flex gap-2">
             <button
-              class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400">Send
+              class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400" (click)="sendRequest(friend)">Send
               Friend Request</button>
             <button
               class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400">View

src/app/pages/social/social.component.scss

@@ -0,0 +1,9 @@
+.displayFriends{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+    margin-left: 370px;
+}

src/app/pages/social/social.component.ts

@@ -23,6 +23,12 @@ export class SocialComponent implements OnInit{
     }
   }
 
+  getAllUsers() : Promise<any>{
+    return this.apiServ.get("admin/getAllUsers").then((res: any) => {
+      this.allUsers = res;
+    }, (error: any) => console.error(error))
+  }
+
   searchFriends(ev: any){
     let name = ev.target.value;
     if(!name){
@@ -40,10 +46,16 @@ export class SocialComponent implements OnInit{
     }
   }
 
+  sendRequest(friend: User){
+    const body = { friendId: friend.user_id }
+    this.apiServ.posts('social/sendFriendRequest', body).subscribe({
+      next: (response) => {
+        console.log(response);
+      },
+      error: (error) => console.error(error)
+    });
+  }
+
+
 
-  getAllUsers() : Promise<any>{
-    return this.apiServ.get("admin/getAllUsers").then((res: any) => {
-      this.allUsers = res;
-    }, (error: any) => console.error(error)
-    )}
 }

src/app/services/api.service.ts

@@ -16,16 +16,8 @@ export class ApiService {
 
   signUp_Url: string = 'auth/signUp';
   login_Url: string = 'auth/login';
-  getUser_Url: string = 'auth/getUser';
   authToken: string = '';
 
-  httpHeaders: HttpHeaders = new HttpHeaders({
-    'auth-token': this.authToken,
-    'Content-Type': 'application/json',
-    'Accept': 'application/json',
-    'Access-Control-Allow-Headers': 'Content-Type'
-});
-
   public signUp(signUp: SignUp): Observable<SignUpResponse>{
     return this.http.post<SignUpResponse>(`${environment.base_url}/${this.signUp_Url}`, signUp);
   }
@@ -34,23 +26,43 @@ export class ApiService {
     return this.http.post<any>(`${environment.base_url}/${this.login_Url}`, login);
   }
 
-  public getUser(): Observable<User>{
+  public get(endpoint: any): Promise<any>{
     let authorizationToken = JSON.parse(sessionStorage.getItem('authToken') || '');
     let httpHeaders: HttpHeaders = new HttpHeaders();
     httpHeaders = httpHeaders.append('auth-token', authorizationToken.authToken);
     httpHeaders = httpHeaders.append('Content-Type', 'application/json');
     httpHeaders = httpHeaders.append('Accept', 'application/json');
     httpHeaders = httpHeaders.append('Access-Control-Allow-Headers', 'Content-Type');
-    return this.http.get<User>(`${environment.base_url}/${this.getUser_Url}`, { headers: httpHeaders })
+    return this.http.get<any>(`${environment.base_url}/${endpoint}`, { headers: httpHeaders }).toPromise();
   }
 
-  public get(endpoint: any): Promise<any>{
+  public gets(endpoint: any): Observable<any>{
     let authorizationToken = JSON.parse(sessionStorage.getItem('authToken') || '');
     let httpHeaders: HttpHeaders = new HttpHeaders();
     httpHeaders = httpHeaders.append('auth-token', authorizationToken.authToken);
     httpHeaders = httpHeaders.append('Content-Type', 'application/json');
     httpHeaders = httpHeaders.append('Accept', 'application/json');
     httpHeaders = httpHeaders.append('Access-Control-Allow-Headers', 'Content-Type');
-    return this.http.get<any>(`${environment.base_url}/${endpoint}`, { headers: httpHeaders }).toPromise();
+    return this.http.get<any>(`${environment.base_url}/${endpoint}`, { headers: httpHeaders });
+  }
+
+  public post(endpoint: any, body: any): Promise<any>{
+    let authorizationToken = JSON.parse(sessionStorage.getItem('authToken') || '');
+    let httpHeaders: HttpHeaders = new HttpHeaders();
+    httpHeaders = httpHeaders.append('auth-token', authorizationToken.authToken);
+    httpHeaders = httpHeaders.append('Content-Type', 'application/json');
+    httpHeaders = httpHeaders.append('Accept', 'application/json');
+    httpHeaders = httpHeaders.append('Access-Control-Allow-Headers', 'Content-Type');
+    return this.http.post<User>(`${environment.base_url}/${endpoint}`, body, { headers: httpHeaders }).toPromise();
+  }
+
+  public posts(endpoint: any, body: any): Observable<any>{
+    let authorizationToken = JSON.parse(sessionStorage.getItem('authToken') || '');
+    let httpHeaders: HttpHeaders = new HttpHeaders();
+    httpHeaders = httpHeaders.append('auth-token', authorizationToken.authToken);
+    httpHeaders = httpHeaders.append('Content-Type', 'application/json');
+    httpHeaders = httpHeaders.append('Accept', 'application/json');
+    httpHeaders = httpHeaders.append('Access-Control-Allow-Headers', 'Content-Type');
+    return this.http.post<any>(`${environment.base_url}/${endpoint}`, body, { headers: httpHeaders })
   }
 }

src/app/services/common.service.ts

@@ -9,5 +9,6 @@ export class CommonService {
   homeLoaded: boolean = false;
   socialLoaded: boolean = false;
   friendsList: User[] = [];
+  getUser!: User;
   constructor() { }
 }

src/environments/environment.ts

@@ -1,5 +1,5 @@
 export const environment = {
     prod: true,
-    // base_url: 'http://localhost:3000/api',
-    base_url: 'https://95425fa1-57d5-4d6e-8005-951b873c76e6-00-ysn689cq5siv.spock.replit.dev',
+    base_url: 'http://localhost:3000/api',
+    // base_url: 'https://95425fa1-57d5-4d6e-8005-951b873c76e6-00-ysn689cq5siv.spock.replit.dev',
 }