[Solved]-Updating lists on FrontEnd from MongoDB using mongoose and react-Reactjs

So here is a possible solution that I you could explore(I am sure there surely is more solutions but currently when writing this, this is the solution I can think of).

• So I am assuming maybe you have user model and lets say the models is looking somewhat like this below:

const userSchema = mongoose.Schema({
   
    username:{type:String, required:true},
    email:{type:String, required:true, email},
    password:{type:String, required:true}

})
const userModel = mongoose.model('userModel', userSchema);

• So we have our user models all set and we uniquely can indentify a user by the _id given by mongoose or email that we set as unique.

So now we need a plane trip model:

const planeTripSchema = mongoose.Schema({
   
    from:{type:String, required:true},
    to:{type:String, required:true},
    seats:{type:Array, required:true}
});

const planeTrip = mongoose.model('planeTrip', planeTripSchema);

• Now we have a plane trip model.
• So now how I can you handle that you have different seats within your array of seat

Implementation when creating plane trip to set up unique value to identify each sit:

• So first I would install uuid npm i uuid or yarn add uuid
• So now this is dependent on how many people this flight can take lets assume that it takes 10 people.

So this way might not be the most efficient solution but this what I am thinking currently when writing this

• So now you aim to have 10 seats set before you can save the flight trip

• So then what you do is you can have 10 variables seat1-seat10(This is where this solution become inefficient) and call he uuid lib to get unique identifier(will give back unique number)

• Then below is how you then instantiate new flight

const newFlight = new planeTrip({
    
    from:'New York',
    to:'Washington DC',
    seats:[
        
        {
            occupied:false
            seat_id:<use the variable you made when using uuid for seat1-10
            seat_number:1 // You can then populate each sit number self from 1-10 on each entry but id you'll get fom uuid
            person:"",
        }
        //So you can do this 10 time because plane supports 10 seats in this exampl

    ]

}) 

• So now when you save the document to mongoDB you have seats that you can uniquely identify

So now how then do you handle occupied sits:

• So now in client side when you make a request to get flight sit details you will use javaScript map to map through seats array and then check if occupied === true as we wrote there above

• So it's true then you can leave as is

• Else if it false you can use CSS to then underline over the seat number

• Meaning that your css class must also some ternary operations

• And a normal user definitely will know that it's occupied

• Then when user clicks on the available sit you then sit through the sit number and sit id that would be available easily when you mapping through the seats array

• Not forgetting you also have to send through the email of the user because in our example here we uniquely identify our users with email

• Then at the back-end only thing you do is update ocupied of the sit ID that you got from client from false to true

• You also update the person from empty string to email received from client

So this is a possible solution that can be improved if you sit down and think it through but at least I gave you a starting point of which direction to take but I believe this solution can be improved to being more efficient than this