openchat | Open Source messaging platform where people can send | Socket library

the issue is at your switch route. React-router-dom will pick the first Route that has a path that satisfies desired path /chats/openchats, but not necessary an exact match. /chats satisfies the condition, because any /chats/something contains /chats.

you can overcome this by passing a exact prop to your Route component. this way you are explicitly stating that it must be an exact match to this route be picked:

Not sure how it ever worked, but you need to either pass the router location in as a prop, or use withRouter when exporting your Header component, e.g. in your Header component file have

You could ditch the state and onClick handlers/callbacks and use the pathname to derive the "active" color directly.

Give your chat-container following style:

My suggestion would be to use different models for the data layer (firebase database) and the presentation layer (frontend). For example:

Let's call the models in the database ChatRemoteModel and UserRemoteModel.

I think your best bet going forward is to use the samples provided by the webchat team. The minimizable webchat sample is a good example.

I think creating the scripts tag dynamically could help you. Please try this

Quote from documentation:

The google.script.run API allows 10 concurrent calls to server functions.

google.script.run

You have a google.script.run call in a for loop. Subsequent google.script.run calls in the for loop don't wait until the previous call is complete before making another call to the server. That results in multiple concurrent calls to the same server function.

What is happening, is that your client side code is running faster than the Google Apps Script server code is running, so before the server function getChats has completed, it's being called again. And when that happens, the previous values in the variables get overwritten.

The server function getChats(position,row) isn't running separate, individual instances of the function. Before the first run instance is complete, the function is being called again. You're trying to run multiple instances of the same function concurrently.

As indicated by the documentation quote, there can only be 10 concurrent calls to the server at a time. If you were calling 10 different function names, then that would be different. All 10 functions with different names would run independently. But, creating lots of identical functions with different names isn't a good solution.

You could use LockService.

Quote from documentation:

Prevents concurrent access to sections of code. This can be useful when you have multiple users or processes modifying a shared resource and want to prevent collisions.

But depending upon how many times google.script.run is called, and how long the code runs, you could run into hitting quota limits. There are short term and long term limits. Even if the code is under the long term limit, you could easily hit short term limits because of calling SpreadsheetApp.openById multiple times in rapid succession.

So, what should you do? You could pass all the data to the server function at once, instead of once on every loop.

Before looking for a solution try to understand if the "show" status must belong to chat or to his father(Chain - of - responsibility pattern) Once you understand this, here are some possible solutions

Using props: