Add institution scenario

[skorphil]

Implement scenario when user creates new institution.

• tab must to display NEW label
• user can create new institution
• new institution opens fullscreen

[skorphil]

At first it is not working, when I tried to use different instances of useArrayForm() with same name in InstitutionsTabsList and institutionsList

const {
    fields: institutions,
    append: appendInstitution,
  } = useFieldArray({
    name: `institutions`,
  });

The problem was that InstitutionList not seeing freshly created institutions among fields: institutions. This problem described in docs https://react-hook-form.com/docs/usefieldarray#:~:text=should%20not%20have%20multiple%20useFieldArray%20with%20the%20same%20name

to fix this I passed append and fields from InstitutionsList to InstitutionsTabsList avoiding call extra useFieldArray() inside of InstitutionsTabsList

• But, now i wonder if it is correct to call another useFieldArray() for asset list inside of InstitutionContainer

const arrayName = `${institutionName}.assets`;
  const {
    fields: assets,
    remove,
    append,
  } = useFieldArray({
    name: arrayName,
  });

Maybe I need to pass fields from InstitutionList and filter em like fields.institutions[id].assets
It might also affected #47 when isDirty state did not work as expected

[skorphil]

Since useFieldArray append is async, i wonder how is it possible to get updated field right after calling append

function handleInstitutionCreate({ append, setSelectedIndex, fields }) {
  append({
    name: "",
    country: "",
    assets: [
      {
        amount: "",
        currency: "",
        isEarning: false,
        description: "",
      },
    ],
  });
  // how to get updated fields list here?
  const selectedIndex = fields.length;
  setSelectedIndex(selectedIndex);
}

[skorphil]

Temporarily not updating StoryBook, because to implement components, which rely on context, need to write tons of decorator stuff. Do not know how to deal with it.

Demo of scenario:
https://github.com/skorphil/nextjs-form/assets/6762009/6c4b2108-ea64-4352-836a-2637ff0b4413