0

I have two functions that call to a db via an endpoint, to change a value of an entry. Once the change has been made it's never displayed until the page is refreshed with window.location.reload(); I am changing the state of the icons enabled is green and red is disabled. I am doing that like so:

{segment.enabled ? (<EmojiHappyIcon className="h-6 w-6 text-green-400 hover:cursor-pointer hover:text-gray-500" onClick={() => audienceEnableType(segment.audience_id)}/>) : (<EmojiSadIcon className="h-6 w-6 text-red-400 hover:cursor-pointer hover:text-gray-500" onClick={() => audienceEnableType(segment.audience_id)}/>)}

segment.enabled is changed by the following via onClick via the icons above.

async function enableAudience(audience_id, segment) {
  try {
    const audienceEnableRepsonse = await fetch(
      `http://localhost:8000/edit-audience/${audience_id}`,
      {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          segment: segment.segment,
          enabled: true,
        }),
      }
    );

    if (audienceEnableRepsonse.status === 200) {
      window.location.reload();
    }
  } catch (error) {
    console.error(error);
  }
}

async function disableAudience(audience_id, segment) {
  try {
    const audienceEnableRepsonse = await fetch(
      `http://localhost:8000/edit-audience/${audience_id}`,
      {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          segment: segment.segment,
          enabled: false,
        }),
      }
    );

    if (audienceEnableRepsonse.status === 200) {
      window.location.reload();
    }
  } catch (error) {
    console.error(error);
  }
}

These are then run conditionally like so:

function audienceEnableType(audience_id) {
    segments.map((segment) => {
      if (audience_id === segment.audience_id && segment.enabled === false) {
        enableAudience(audience_id, segment);
      } else {
        disableAudience(audience_id, segment);
      }
    });
  }

I am thinking of ways I can better the user experience here. I was thinking of using a toggle. Like the one headless.ui has here as this should call the endpoint and make the relevant change, with the switch displaying on / off without the need for refreshing the page.

Having said that. The switch seems it only takes one prop enabled I am thinking I could use the state to fire off the functions that call the api.

<Switch
   checked={enabled}
   onChange={setEnabled}
   ...

Can anyone shed more light on to how I can resolve the UX. The code works perfectly well but I would like to seek some advice on to how to improve the experience here.

mrpbennett
  • 1,527
  • 15
  • 40
  • Im a bit confused on what the question really is. But based on what I see. You dont need 2 methods to enable/disable audience. Both the network calls are identical, the only difference is the enabled property which is the the value u get from the onChange method on the switch. – blessanm86 Mar 06 '22 at 16:41
  • Yes this what I was asking really. I wanted to clean up the code and give a better user experience. The way you have described it, seems the switch is the way to go. – mrpbennett Mar 06 '22 at 19:03

0 Answers0