Updating lists on FrontEnd from MongoDB using mongoose and react

Question

I'm building a website where users can choose a seat on a plane in realtime. On the home page they choose their seat number which is then sent to a mongoDB databse using mongoose. However when a user selects a seat I don't want other users to be able to select the same seat from the list as it is occupied.
What am I supposed to do to only show available seats in the dropdown list on the homepage? I was thinking about using socket but I've had difficulties finding a way to know what seats are available and which are not based on the exisiting users in the mongo database collection.
I'm using react and am relatively new to coding.
Thank you for your help!

I am assuming that you are handling this logic using NodeJS correct me if I am wrong.. And to be clear are you trying to find a way of figuring out the seats that are not occupied? — Ntshembo Hlongwane, Nov 08 '20 at 17:17
yes I'm using Nodejs. Yes exactly to then put that list in a dropdown on the homepage — martin senlis, Nov 08 '20 at 17:45
For adding real time to your application you can check this answer that I gave https://stackoverflow.com/questions/64657070/keep-fetching-data-up-to-date/64658083#64658083 — Ntshembo Hlongwane, Nov 08 '20 at 18:32

score 0 · Answer 1 · answered Nov 08 '20 at 18:22

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

Updating lists on FrontEnd from MongoDB using mongoose and react

1 Answers1