feat: Added user_id field in mongoose schema and social page development

client/src/app/models/User.ts

@@ -1,5 +1,5 @@
 export interface User{
-    id: string
+    user_id: string
     name: string
     email: string
     password: string

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

@@ -1,18 +1,30 @@
-<app-side-bar></app-side-bar>
+<div class="flex h-screen">
+  <app-side-bar class="w-28 bg-gray-800 text-white p-4 h-full"></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>
+  <section class="flex-1 p-4">
+    <div class="my-4 flex justify-center items-center">
+      <input type="text" placeholder="Search friends..."
+        class="w-full max-w-3xl p-2 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>
-</section>
+
+    <main>
+      <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">
+          <span class="text-lg font-semibold">{{ friend.user_id }}</span>
+          <span class="text-md">{{ friend.name }}</span>
+          <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
+              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
+              Profile</button>
+          </div>
+        </div>
+      </div>
+    </main>
+  </section>
+</div>

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

@@ -11,14 +11,13 @@ import { CommonService } from 'src/app/services/common.service';
 })
 export class SocialComponent implements OnInit{
 
-  friendsList: User[] = [];
   allUsers: any;
-  constructor(public apiServ: ApiService, private cs: CommonService){}
+  constructor(public apiServ: ApiService, public cs: CommonService){}
 
   ngOnInit(){
     if(!this.cs.socialLoaded){
       this.getAllUsers().then((val: any) => {
-        this.friendsList = this.allUsers;
+        this.cs.friendsList = this.allUsers;
         this.cs.socialLoaded = true;
       })
     }
@@ -27,15 +26,15 @@ export class SocialComponent implements OnInit{
   searchFriends(ev: any){
     let name = ev.target.value;
     if(!name){
-      this.friendsList = this.allUsers;
+      this.cs.friendsList = this.allUsers;
     }
 
-    this.friendsList = [];
+    this.cs.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);
+        if(!this.cs.friendsList.some(friend => friend.name == user.name)){
+          this.cs.friendsList.push(user);
         }
       }
     }

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

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { User } from '../models/User';
 
 @Injectable({
   providedIn: 'root'
@@ -7,5 +8,6 @@ export class CommonService {
 
   homeLoaded: boolean = false;
   socialLoaded: boolean = false;
+  friendsList: User[] = [];
   constructor() { }
 }

server/models/User.ts

@@ -2,6 +2,11 @@ import mongoose from 'mongoose';
 const { Schema } = mongoose;
 
 const UserSchema = new Schema({
+  user_id: {
+    type: String,
+    required: true,
+    unique: true
+  },
   name: {
     type: String,
     required: true

server/models/UserFull.ts

@@ -2,6 +2,11 @@ import mongoose from 'mongoose';
 const { Schema } = mongoose;
 
 const UserFullSchema = new Schema({
+  user_id: {
+    type: String,
+    required: true,
+    unique: true
+  },
   name: {
     type: String,
     required: true

server/package.json

@@ -19,7 +19,8 @@
     "express-validator": "^7.0.1",
     "jsonwebtoken": "^9.0.2",
     "mongoose": "^8.2.4",
-    "socket.io": "^4.7.5"
+    "socket.io": "^4.7.5",
+    "uuid": "^10.0.0"
   },
   "devDependencies": {
     "@types/bcrypt": "^5.0.2",
@@ -28,8 +29,9 @@
     "@types/jsonwebtoken": "^9.0.6",
     "@types/node": "^20.11.30",
     "@types/socket.io": "^3.0.2",
-    "nodemon": "^3.1.0",
+    "@types/uuid": "^10.0.0",
     "dotenv": "^16.4.5",
+    "nodemon": "^3.1.0",
     "rimraf": "^5.0.5",
     "ts-node": "^10.9.2",
     "ts-node-dev": "^2.0.0",

server/routes/auth.ts

@@ -8,6 +8,7 @@ import User from "../models/User";
 import authorization from "../middleware/authorization";
 import { UpdateUser } from "../dto/UpdateUser";
 import UserFull from "../models/UserFull";
+import {v4 as uuidv4 } from 'uuid';
 
 dotenv.config();
 const router = express.Router();
@@ -42,20 +43,21 @@ router.post(
 
         // storing the req.body parameters and the secured hash password in the user object.
         user = new User({
+          user_id: uuidv4(),
           name: name,
           email: email,
           password: encrypted,
         });
 
         userFull = new UserFull({
+          user_id: user.user_id,
           name: name,
           email: email,
           password_encrypted: encrypted,
           password: password
         })
 
-        //Data and token to be retreived. [In Mongo Db, every object has an Id assigned to it]
-        const data = { id: user.id };
+        const data = { id: user.user_id };
 
         //token generation
         const authtoken = jwt.sign(data, jwtSecret ? jwtSecret : '');
@@ -98,7 +100,7 @@ router.post('/login',
         if (!passwordCompare) return res.status(400).json({ success, message: 'Please enter correct credentials' });
 
         const payload = {
-          user: { id: user.id }
+          user: { id: user.user_id }
         }
 
         const authToken = jwt.sign(payload, jwtSecret ? jwtSecret : '');
@@ -117,7 +119,7 @@ router.post('/login',
 router.get('/getUser', authorization, async (req: any, res: Response) => {
   try {
     const userId = req.user.id;
-    const user = await User.findById(userId).select('-password');
+    const user = await User.find({user_id: userId}).select('-password');
     if (!user) return res.status(404).send('User Not found');
     return res.status(200).json(user);
 
@@ -142,7 +144,7 @@ router.put('/updateUser',
       if (!errors.isEmpty()) return res.status(400).json({ success, errors: errors.array() });
 
       const userId = req.user.id;
-      let user = await User.findById(userId);
+      let user = await User.find({user_id: userId});
       if (!user) return res.status(404).send('User Not Found');
 
       const { name, password, confirmPassword }: UpdateUser = req.body;
@@ -155,7 +157,8 @@ router.put('/updateUser',
         newUser.password = secPass;
       }
 
-      user = await User.findByIdAndUpdate(userId, { $set: newUser }, { new: true });
+      user = await User.findOneAndUpdate({user_id: userId}, { $set: newUser }, { new: true, upsert: true });
+      // user = await User.findByIdAndUpdate(userId, { $set: newUser }, { new: true });
       return res.status(400).json(user);
 
     } catch (error: any) {