Dynamic MacroConfig

Forge
,
1

Hello,
There are couple questions:

  1. So, I have data for macroConfig that comes from 3rd-party api.
const Config = () => {
  const config = useConfig();
  const [projects] = useState<MCProject[]>(async () => {
    const token = await storage.getSecret(TOKEN_KEY);
    const baseUrl = await storage.get(BASE_URL_KEY);
    const response = await fetch(`${baseUrl}rest-api/projects`, {
      headers: {
        Authorization: `Bearer ${token}`
      }
    });
    return await response.json();
  });
  const [documents, setDocuments] = useState<MCDocument[]>([]);

  useEffect(() => {
    if (!config.project) return;
    (async () => {
      const token = await storage.getSecret(TOKEN_KEY);
      const baseUrl = await storage.get(BASE_URL_KEY);
      const response = await fetch(`${baseUrl}rest-api/projects/${config.project}/documents`, {
        headers: {
          Authorization: `Bearer ${token}`
        }
      });
      const dcs = await response.json();
      setDocuments(dcs);
    })();
  }, [config.project])

  return (
    <MacroConfig>
      <Select label="Project" name="project">
        {projects.map((p) => (
          <Option label={p.title} value={p.id} />
        ))}
      </Select>
      <Select label="Document" name="document">
        {documents.map((d) => (
          <Option label={d.title} value={d.documentID} />
        ))}
      </Select>
    </MacroConfig>
  );
};

So, there are two selects, the second one depends on first one. Is it possible to implement here?

  1. Is it possible to open macro configuration on inserting macro tag into content?

Thanks a lot.

2

  1. Seems like you could use state and disable the second select until a project is selected and have the options for it update based on the project.

  2. I donā€™t think so. Users have to click to open the config. But until itā€™s configured, you can have the content of the macro be an infobox (or whatever) telling users to configure the macro.

3

  1. Unfortunately useEffect doesnā€™t react on project changes. At least UI is not updated and there is no console logs( it seems that after first rendering the config form is showed up on UI and it does not react again on change

  2. Got it(

4

If you put the project state as one of the dependencies, the useEffect function should run again whenever the state updates.

5

Itā€™s already there, no reaction( I suppose that new value should come from ā€˜useConfigā€™, unfortunately there is no event ā€œonChangeā€ on select component(

6

I think I might choose to use state rather than the useConfig hook, which I use in the macro itself. But it basically seems like a problem thatā€™s solved with the Select component from UI Kit 2, which has an onChange event handler.

1 Like