feat: Social page developed and fetch details

client/src/app/app-routing.module.ts

@@ -6,6 +6,7 @@ import { CreateRoomComponent } from './pages/create-room/create-room.component';
 import { GameRoomComponent } from './pages/game-room/game-room.component';
 import { LoginComponent } from './pages/login/login.component';
 import { SignUpComponent } from './pages/sign-up/sign-up.component';
+import { SocialComponent } from './pages/social/social.component';
 
 const routes: Routes = [
   {path: '', component: LoginComponent},
@@ -14,6 +15,7 @@ const routes: Routes = [
   {path: 'game', component: GameRoomComponent },
   {path: 'home', component: HomeComponent },
   {path: 'signUp', component: SignUpComponent },
+  {path: 'social', component: SocialComponent },
 ];
 
 @NgModule({

client/src/app/app.module.ts

@@ -20,6 +20,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 import {ReactiveFormsModule} from '@angular/forms';
 import {MatIconModule} from '@angular/material/icon';
 import {MatButtonModule} from '@angular/material/button';
+import { SocialComponent } from './pages/social/social.component';
 @NgModule({
   declarations: [
     AppComponent,
@@ -30,7 +31,8 @@ import {MatButtonModule} from '@angular/material/button';
     ChessGameComponent,
     SideBarComponent,
     SignUpComponent,
-    LoginComponent
+    LoginComponent,
+    SocialComponent
   ],
   imports: [
     BrowserModule,

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

@@ -44,7 +44,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 routerLink="/social" 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 18">
                    <path d="M14 2a3.963 3.963 0 0 0-1.4.267 6.439 6.439 0 0 1-1.331 6.638A4 4 0 1 0 14 2Zm1 9h-1.264A6.957 6.957 0 0 1 15 15v2a2.97 2.97 0 0 1-.184 1H19a1 1 0 0 0 1-1v-1a5.006 5.006 0 0 0-5-5ZM6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z"/>
                 </svg>

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

@@ -0,0 +1,18 @@
+<app-side-bar></app-side-bar>
+
+<section>
+  <div class="w-100 my-4 flex justify-center items-center">
+    <input
+      type="text"
+      placeholder="Search friends..."
+      class="my-2 w-[500px] pl-4 pr-4 py-2 px-4 text-center text-sm text-slate-900 bg-white border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-sm"
+      (input)="searchFriends($event)"
+    />
+  </div>
+
+  <div>
+    <div *ngFor="let friend of friendsList">
+        <span>{{friend.name}}</span>
+    </div>
+  </div>
+</section>

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

@@ -0,0 +1,50 @@
+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { User } from 'src/app/models/User';
+import { ApiService } from 'src/app/services/api.service';
+import { CommonService } from 'src/app/services/common.service';
+
+@Component({
+  selector: 'app-social',
+  templateUrl: './social.component.html',
+  styleUrls: ['./social.component.scss']
+})
+export class SocialComponent implements OnInit{
+
+  friendsList: User[] = [];
+  allUsers: any;
+  constructor(public apiServ: ApiService, private cs: CommonService){}
+
+  ngOnInit(){
+    if(!this.cs.socialLoaded){
+      this.getAllUsers().then((val: any) => {
+        this.friendsList = this.allUsers;
+        this.cs.socialLoaded = true;
+      })
+    }
+  }
+
+  searchFriends(ev: any){
+    let name = ev.target.value;
+    if(!name){
+      this.friendsList = this.allUsers;
+    }
+
+    this.friendsList = [];
+    for(let user of this.allUsers){
+      let case_sensitive_user_name = user.name.toLowerCase();
+      if(case_sensitive_user_name.includes(name.toLowerCase())){
+        if(!this.friendsList.some(friend => friend.name == user.name)){
+          this.friendsList.push(user);
+        }
+      }
+    }
+  }
+
+
+  getAllUsers() : Promise<any>{
+    return this.apiServ.get("admin/getAllUsers").then((res: any) => {
+      this.allUsers = res;
+    }, (error: any) => console.error(error)
+    )}
+}

client/src/app/services/api.service.ts

@@ -43,4 +43,14 @@ export class ApiService {
     httpHeaders = httpHeaders.append('Access-Control-Allow-Headers', 'Content-Type');
     return this.http.get<User>(`${environment.base_url}/${this.getUser_Url}`, { headers: httpHeaders })
   }
+
+  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<any>(`${environment.base_url}/${endpoint}`, { headers: httpHeaders }).toPromise();
+  }
 }

client/src/app/services/common.service.ts

@@ -6,5 +6,6 @@ import { Injectable } from '@angular/core';
 export class CommonService {
 
   homeLoaded: boolean = false;
+  socialLoaded: boolean = false;
   constructor() { }
 }