Unlock seamless workflows and faster delivery with our latest releases – get the details

Issue with custom action not resetting variables when switching microsites

2 replies
Last updated: Sep 30, 2022
I have a custom action built. It is a Publish button that is attached to the corresponding Netlify build hook. We have several microsites within our Sanity studio, and each microsite has its own Publish button that kicks off a deploy. In my action code I get the microsite id that then sets the necessary variables for the site deploy. However, when I bounce around to different microsites to test the publish button, it isn't resetting the variables to jive with the new microsite id.
A condensed version of my code:


import React, {useState} from "react";
import {RocketIcon} from '@sanity/icons'
let siteName;
let hookId;
let baseHookUrl = "<https://api.netlify.com/build_hooks/>";
let postUrl;

export function PublishMicrositeAction(props) {
    let micrositeId = props.id;

    if (micrositeId == "abc") {
        siteName = "Publishing Root Site";
        hookId = "123abc";
        postUrl = `${baseHookUrl}${hookId}`;
    }
    if (micrositeId == "def") {
        siteName = "Publishing Essentials";
        hookId = "456def";
        postUrl = `${baseHookUrl}${hookId}`;
    }
    if (micrositeId == "ghi") {
        siteName = "Publishing Foundations";
        hookId = "789ghi";
        postUrl = `${baseHookUrl}${hookId}`;
    }
    
    console.log(micrositeId)

    const [isDialogOpen, setIsDialogOpen] = useState(false)

    if (props.type !== 'microsite') {
        return null
    }

    function formSubmit() {
        var request = new XMLHttpRequest();
        request.open('POST', postUrl, true);
        request.onload = function() { // request successful
        // we can use server response to our request now
          console.log(request.responseText);
        };
      
        request.onerror = function() {
          // request failed
        };
      
        request.send(new FormData(event.target)); // create FormData from form that triggered event
        event.preventDefault();

        setIsDialogOpen(false)
    }
      
    return {
      label: "Publish Microsite",
      icon: RocketIcon,
      onHandle: () => setIsDialogOpen(true),    
      dialog: isDialogOpen && {
          type: 'modal',
          onClose:  () => setIsDialogOpen(false),
          content: <div id="modal"  style={{paddingBottom: 30 + 'px'}}>
          <h3>{siteName}</h3>
          <p>Please enter a brief description of what was changed.</p>
          <form id="publishForm" onSubmit={formSubmit}>
          <label for="trigger_title">Message: </label>
          <input type="text" id="trigger_title" name="trigger_title"/>
          <button id="submitBtn" type="submit" style={{marginLeft: 10 + 'px'}}>Publish</button>
          </form>
          </div>
      }
    }
  }
Maybe I have stared at this too long to see my mistake or what I am missing. But I really need the micrositeId to be updated every time I switch to a new microsite. I can see when I console.log the props.id that it displays the correct id, but the variables do not reflect that.
Sep 29, 2022, 6:45 PM
I wonder if you're having some component remounting/rerendering sorcery interfering? Have you tried holding the variables in state?
Sep 29, 2022, 7:17 PM
FYI - I ended up changing the code to use a switch statement instead of an if statement. It is doing the job I had originally intended. Phew!
Sep 30, 2022, 3:17 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?