Create new menu global after creating a page

Braggedtooth

6 months ago

1 2

 import payload from "payload";

export const addPageToMenu = async (args) => {
  if (args.operation === "create" {
  
    let menu = await payload.findGlobal({ slug: "mainMenu" });

    if (args.doc) {
      await payload.updateGlobal({
        slug: "mainMenu",
        data: {
          items: [
            {
              type: "link",
              label: args.doc.title,
              link: {
                type: "reference",
                reference: {
                  value: args.doc.id,
                  relationTo: "pages",
                },
              },
              subMenu: { blocks: 0 },
            },
            ...menu.items.map((item) => {
              return {
                link: {
                  ...item.link,
                  reference: {
                    ...item.link.reference,
                    value: {
                      ...item.link.reference.value,
                      layout: {
                        ...item.link.reference.value.layout,
                      },
                    },
                  },
                },
                ...item,
              };
            }),
          ],
        },
      });

      return args.doc;
    }
  }
  return args.doc;
};

{
  "items": [
    {
      "link": {
        "reference": "id of  document"
      }
    }
  ]
}

• Selected Answer
  

  Braggedtooth

  6 months ago

  Solution hook for adding page when created and deleting when page is deleted.

  import payload from "payload";
  import { FieldHookArgs } from "payload/dist/fields/config/types";
  import { MainMenu, Page } from "../../payload-types";
  
  /**
   *  fetches the main menu from the database
   */
  const fetchMenu = async (): Promise<MainMenu> =>
    await payload.findGlobal({ slug: "mainMenu" });
  
  /**
   *  fetch the menu, add the new page to it, and then update the menu
   * @param args - {
   * @returns The page that was created.
   */
  export const addPageToMenu = async (args: {
    doc: Page;
    operation: FieldHookArgs["operation"];
  }) => {
    const menu = await fetchMenu();
    if (args.operation === "create") {
      const newArray = menu.items.map((item) => {
        return {
          ...item,
          link: {
            ...item.link,
            reference: {
              value:
                typeof item.link.reference.value !== "string" &&
                item.link.reference.value.id,
              relationTo: item.link.reference.relationTo,
            },
          },
        };
      });
      if (args.doc && menu) {
        await payload.updateGlobal({
          slug: "mainMenu",
          data: {
            items: [
              ...newArray,
              {
                type: "link",
                label: args.doc.title,
                link: {
                  type: "reference",
                  reference: {
                    value: args.doc.id,
                    relationTo: "pages",
                  },
                },
                subMenu: { blocks: 0 },
              },
            ],
          },
        });
  
        return args.doc;
      }
    }
  };
  /**
   *  fetches the menu, filters out the item with the id that matches the id passed in as an argument,
   * and then updates the menu with the filtered array
   * @param args - { id: string }
   * @returns The return type is a Promise<void>
   */
  
  export const deleteMenu = async (args: { id: string }) => {
    const menu = await fetchMenu();
    const deleteArray = menu.items.filter(
      (element) =>
        typeof element !== "string" &&
        typeof element.link.reference.value !== "string" &&
        element.link.reference.value.id !== args.id
    );
    await payload.updateGlobal({
      slug: "mainMenu",
      data: {
        items: [
          ...deleteArray.map((item) => {
            return {
              ...item,
              link: {
                ...item.link,
                reference: {
                  value:
                    typeof item.link.reference.value !== "string" &&
                    item.link.reference.value.id,
                  relationTo: item.link.reference.relationTo,
                },
              },
            };
          }),
        ],
      },
    });
    return;
  };

• 

  Braggedtooth

  6 months ago

  Hi!

  I figured it out, the solution is in my question. Just have to pass the id as value instead of the whole object.
  i dont know why i didnt try that first even tho that was how i wanted it to work..
  welp will leave this here. Maybe helps someone else 👍🏿