Create a Custom Page Element

import React, { useEffect, useState } from "react";
import { request } from "graphql-request";
import { createRenderer, useRenderer } from "@webiny/app-page-builder-elements";

// For simplicity, we're hard-coding the GraphQL HTTP API URL here.
const GQL_API_URL = "https://spacex-production.up.railway.app/";

// These are the necessary GraphQL queries we'll need in order to retrieve data.
const QUERIES = {
  rockets: /* GraphQL */ `
    query listRockets($limit: Int, $offset: Int) {
      data: rockets(limit: $limit, offset: $offset) {
        id
        name
        description
        wikipedia
      }
    }
  `,
  dragons: /* GraphQL */ `
    query listDragons($limit: Int, $offset: Int) {
      data: dragons(limit: $limit, offset: $offset) {
        id
        name
        description
        wikipedia
      }
    }
  `
};

export interface Spacecraft {
  id: string;
  name: string;
  description: string;
  wikipedia: string;
}

// It's often useful to type the data that the page element will carry.
export interface SpaceXElementData {
  variables: {
    limit: string;
    offset: string;
    type: "rockets" | "dragons";
  };
}

// The renderer React component.
export const SpaceX = createRenderer(() => {
  // Let's retrieve the variables that were chosen by
  // the user upon dropping the page element onto the page.
  const { getElement } = useRenderer();
  const element = getElement<SpaceXElementData>();
  const { limit, offset, type } = element.data.variables;

  const [data, setData] = useState<Spacecraft[]>([]);

  // This is where we fetch the data and store it into component's state.
  useEffect(() => {
    request(GQL_API_URL, QUERIES[type], {
      limit: parseInt(limit),
      offset: parseInt(offset)
    }).then(({ data }) => setData(data));
  }, [limit, offset, type]);

  if (!data.length) {
    return <>Nothing to show.</>;
  }

  // If the data has been retrieved, we render it via a simple unordered list.
  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>
          <h1>{item.name}</h1>
          <div>{item.description}</div>
          <br />
          <div>
            More info at&nbsp;
            <a href={item.wikipedia} target={"_blank"} rel={"noreferrer"}>
              {item.wikipedia}
            </a>
          </div>
        </li>
      ))}
    </ul>
  );
});

// The rest of code was removed for brevity.import spaceX from "theme/pageElements/spaceX/website";
// ...
export default [  // ...  spaceX  // ...];

import React from "react";
import { validation } from "@webiny/validation";
import { Input } from "@webiny/ui/Input";
import { ButtonPrimary } from "@webiny/ui/Button";
import { Cell, Grid } from "@webiny/ui/Grid";
import { Select } from "@webiny/ui/Select";
import {
  PbEditorPageElementAdvancedSettingsPlugin,
  PbEditorPageElementPlugin
} from "@webiny/app-page-builder/types";

import { SpaceX, SpaceXElementData } from "./SpaceX";

const INITIAL_ELEMENT_DATA: SpaceXElementData = {
  variables: { type: "rockets", limit: "10", offset: "0" }
};

export default [
  // The `PbEditorPageElementPlugin` plugin.
  {
    name: "pb-editor-page-element-space-x",
    type: "pb-editor-page-element",
    elementType: "spaceX",
    render: SpaceX,
    toolbar: {
      // We use `pb-editor-element-group-media` to put our new
      // page element into the Media group in the left sidebar.
      title: "SpaceX",
      group: "pb-editor-element-group-media",
      preview() {
        // We can return any JSX / React code here. To keep it
        // simple, we are simply returning the element's name.
        return <>Space X Page Element</>;
      }
    },

    // Defines which types of element settings are available to the user.
    settings: [
      "pb-editor-page-element-settings-delete",
      "pb-editor-page-element-settings-visibility",
      "pb-editor-page-element-style-settings-padding",
      "pb-editor-page-element-style-settings-margin",
      "pb-editor-page-element-style-settings-width",
      "pb-editor-page-element-style-settings-height",
      "pb-editor-page-element-style-settings-background"
    ],

    // Defines onto which existing elements our element can be dropped.
    // In most cases, using `["cell", "block"]` will suffice.
    target: ["cell", "block"],
    onCreate: "open-settings",

    // `create` function creates the initial data for the page element.
    create(options) {
      return {
        type: "spaceX",
        elements: [],
        data: INITIAL_ELEMENT_DATA,
        ...options
      };
    }
  } as PbEditorPageElementPlugin,

  // The `PbEditorPageElementAdvancedSettingsPlugin` plugin.
  {
    name: "pb-editor-page-element-advanced-settings-space-x",
    type: "pb-editor-page-element-advanced-settings",
    elementType: "spaceX",
    render({ Bind, submit }) {
      // In order to construct the settings form, we're using the
      // `@webiny/form`, `@webiny/ui`, and `@webiny/validation` packages.
      return (
        <>
          <Grid>
            <Cell span={12}>
              <Bind name={"variables.type"}>
                <Select label={"Type"} description={"Chose the record type you want to query."}>
                  <option value="rockets">Rockets</option>
                  <option value="dragons">Dragons</option>
                </Select>
              </Bind>
            </Cell>
            <Cell span={12}>
              <Bind
                name={"variables.limit"}
                validators={validation.create("required,gte:0,lte:1000")}
              >
                <Input
                  label={"Limit"}
                  type="number"
                  description={"Number of records to be returned."}
                />
              </Bind>
            </Cell>
            <Cell span={12}>
              <Bind
                name={"variables.offset"}
                validators={validation.create("required,gte:0,lte:1000")}
              >
                <Input
                  label={"Offset"}
                  type="number"
                  description={"Amount of records to be skipped."}
                />
              </Bind>
            </Cell>
            <Cell span={12}>
              <ButtonPrimary onClick={submit}>Save</ButtonPrimary>
            </Cell>
          </Grid>
        </>
      );
    }
  } as PbEditorPageElementAdvancedSettingsPlugin
];

// Some of the code was removed for brevity.import spaceX from "theme/pageElements/spaceX/admin";
// ...
export default [  // ...  spaceX  // ...];

// The rest of code was removed for brevity.import spaceX from "theme/pageElements/spaceX/website";
// ...
export default [  // ...  spaceX  // ...];