How to turn comma separator in queryString to pipe separator only at the end

Question

So i currently have an API i'm hitting with queryParams. The params are colour and i'm calling the api like this:

{apiUrl}?firstQuery=someQuery&colour=Blue,Green

Where the above request will request items with Blue and Green colours from the server.

Now sometimes the colours can get a bit tricky and cause me problems, specially long colours that already have commas in the colour description/text itself.

Here is a list of the long/problematic colours:

const coloursWithCommas = [
    'Red, Blue, Yellow and Green Play of Colour',
    'Red, Green, Blue And Orange Play Of Colour',
    'Orange With Green, Red, Yellow And Blue Play Of Colour',
    'Green, Blue And Yellow Play Of Colour',
    'Purple-Red, White and Blue-Green',
  ];

As you can see in my API call that i need a comma separator to be able to send multiple colours at once but there are colours that already have commas in it. Therefore this request fails to get the desired colours: {apiUrl}?firstQuery=someQuery&colour=Blue,Green,Red, Blue, Yellow and Green Play of Colour

As you can see that i'm trying to get 3 different colours in 1 request which is Blue, Green and Red, Blue, Yellow and Green Play of Colour

To combat this issue the API now accepts | pipe separator instead of comma to send multiple colours whilst respecting each colour value that contains commas.

So now the new api call is:

{apiUrl}?firstQuery=someQuery&colour=Blue|Green|Red, Blue, Yellow and Green Play of Colour|Purple-Red, White and Blue-Green

This would successfully return me Blue, Green, Red, Blue, Yellow and Green Play of Colour,Purple-Red, White and Blue-Green

I have written this helper function:

const convertCommaToPipe = (queryInput) => {
  let queryStringName = queryInput.split('=')[0];
  let queryString = queryInput.split('=')[1];

  const coloursWithCommas = [
    'Red, Blue, Yellow and Green Play of Colour',
    'Red, Green, Blue And Orange Play Of Colour',
    'Orange With Green, Red, Yellow And Blue Play Of Colour',
    'Green, Blue And Yellow Play Of Colour',
    'Purple-Red, White and Blue-Green',
  ];

  if(!coloursWithCommas.includes(queryString)){
    queryString = queryString.replace(',', '|');
  } else{
    const longColourIndex = coloursWithCommas.findIndex((text) => text === queryString);
    queryString = coloursWithCommas[longColourIndex] + '|';
  }

  return queryStringName + '=' + queryString;
}

So that I can be able turn a queryString from: colour=Blue,Green, Blue And Yellow Play Of Colour,Orange With Green, Red, Yellow And Blue Play Of Colour

to:

&colour=Blue|Green, Blue And Yellow Play Of Colour|Orange With Green, Red, Yellow And Blue Play Of Colour

The queryInput from the helper function will always start with colour=Blue or colour=Green, Blue And Yellow Play Of Colour and it will then build/append one at time and it can then have the full query like colour=Blue,Green,Red, Blue, Yellow and Green Play of Colour give that the user has clicked on those 3 colours.

It won't be receiving all the colour queries at once, it will be appended as the user clicks the UI. That seems to be what's causing my function to not fully work 100%. Please advise the best way to achieve what i'm trying to given the circumstances.

Answer 1

I would suggest you change the API it self(assuming it's ur API). You should use PUT or POST and pass the colors as array of string.