Building single-click app frontends 

1import { Panel, Text, Flex, StatefulTable, ProgressCircle } from "@bigcommerce/big-design";
2import { ErrorIcon } from "@bigcommerce/big-design-icons";
3import { useFindMany } from "@gadgetinc/react";
4import { api } from "../api";
5
6// simple currency formatter
7let CAD = new Intl.NumberFormat("en-CA", {
8  style: "currency",
9  currency: "CAD",
10});
11
12export default function () {
13  // fetch the first 50 products from the database
14  const [{ data, fetching, error }] = useFindMany(api.bigcommerce.product);
15
16  // add an error message to the Panel if there is a request error
17  return (
18    <Panel
19      title="Read data example"
20      description={
21        error ? (
22          <Flex flexGap={"8px"}>
23            <ErrorIcon color="danger" /> <Text>Error: {error.message}</Text>
24          </Flex>
25        ) : undefined
26      }
27    >
28      {/** render a loading spinner while the request is fetching data */}
29      {fetching && <ProgressCircle size="large" />}
30      {/** draw a paginated product table with the returned data */}
31      {data?.length ? (
32        <StatefulTable
33          pagination
34          columns={[
35            { header: "Name", hash: "name", render: ({ name }) => name },
36            {
37              header: "Price",
38              hash: "price",
39              render: ({ price }) => (price ? CAD.format(price) : "No price"),
40            },
41          ]}
42          items={data}
43        />
44      ) : (
45        <Text>No product data in database!</Text>
46      )}
47    </Panel>
48  );
49}

1export const run: ActionRun = async ({ params, logger, api, connections }) => {
2  // BigCommerce API client
3  const bigcommerce = connections.bigcommerce.current;
4  // use the API client to fetch 5 products, and return
5  return await bigcommerce?.v3.get(`/catalog/products`, { query: { limit: 5 } });
6};

1import { Panel, Text, Flex, StatefulTable, ProgressCircle } from "@bigcommerce/big-design";
2import { ErrorIcon } from "@bigcommerce/big-design-icons";
3import { useGlobalAction } from "@gadgetinc/react";
4import { api } from "../api";
5import { useEffect } from "react";
6
7// simple currency formatter
8let CAD = new Intl.NumberFormat("en-CA", {
9  style: "currency",
10  currency: "CAD",
11});
12
13export default function () {
14  // use the useGlobalAction hook to call a global action
15  const [{ data, fetching, error }, readProducts] = useGlobalAction(api.bigcommerce.readProducts);
16
17  useEffect(() => {
18    // call the function provided by the hook that runs the action
19    readProducts();
20  }, []);
21
22  // add an error message to the Panel if there is a request error
23  return (
24    <Panel
25      title="Read data directly from BigCommerce example"
26      description={
27        error ? (
28          <Flex flexGap={"8px"}>
29            <ErrorIcon color="danger" /> <Text>Error: {error.message}</Text>
30          </Flex>
31        ) : undefined
32      }
33    >
34      {/** render a loading spinner while the request is fetching data */}
35      {fetching && <ProgressCircle size="large" />}
36      {/** draw a paginated product table with the returned data */}
37      {data?.length ? (
38        <StatefulTable
39          pagination
40          columns={[
41            { header: "Name", hash: "name", render: ({ name }) => name },
42            { header: "Price", hash: "price", render: ({ price }) => CAD.format(price) },
43          ]}
44          items={data}
45        />
46      ) : (
47        <Text>No product data found!</Text>
48      )}
49    </Panel>
50  );
51}

1import { Panel, Button, Box } from "@bigcommerce/big-design";
2import { useAction } from "@gadgetinc/react";
3import { api } from "../api";
4
5export default function () {
6  // use the useAction hook to call a global action
7  const [{ fetching: savingGizmo }, createGizmo] = useAction(api.gizmo.create);
8
9  // add an error message to the Panel if there is a request error
10  return (
11    <Panel title="Write data example">
12      <Box marginTop="xxLarge">
13        <Button onClick={async () => await createGizmo()} disabled={savingGizmo}>
14          Add keyword
15        </Button>
16      </Box>
17    </Panel>
18  );
19}

1export const run: ActionRun = async ({ params, logger, api, connections }) => {
2  // set up BigCommerce client
3  const bigcommerce = connections.bigcommerce.current;
4  if (!bigcommerce) {
5    throw new Error("Missing bigcommerce connection");
6  }
7
8  if (!params.value || !params.productId) {
9    throw new Error(
10      "The `value` and `productId` parameters are required to run this action"
11    );
12  }
13
14  // create a metafield using custom data from the frontend
15  await bigcommerce.v3.post("/catalog/products/{product_id}/metafields", {
16    path: { product_id: params.productId },
17    body: {
18      permission_set: "app_only",
19      namespace: "metafield-namespace",
20      key: "metafield-key",
21      value: params.value,
22      description: "New metafield description",
23    },
24  });
25};
26
27// define custom params for the action
28export const params = {
29  productId: { type: "number" },
30  value: { type: "string" },
31};

1import { Panel, Form, FormGroup, Input, Button, Box } from "@bigcommerce/big-design";
2import { useGlobalAction } from "@gadgetinc/react";
3import { api } from "../api";
4import { useState } from "react";
5
6export default function () {
7  const [value, setValue] = useState("");
8
9  // use the useGlobalAction hook to call the createMetafield global action
10  const [{ fetching }, createMetafield] = useGlobalAction(api.bigcommerce.createMetafield);
11
12  return (
13    <Panel title="Read data example">
14      <Form
15        onSubmit={async (event) => {
16          event.preventDefault();
17          await createMetafield({ productId: 1, value });
18        }}
19      >
20        <FormGroup>
21          <Input
22            description="Please enter a metafield value."
23            label="Metafield value"
24            required
25            value={value}
26            onChange={(event) => setValue(event.target.value)}
27            disabled={fetching}
28          />
29        </FormGroup>
30        <Box marginTop="xxLarge">
31          <Button type="submit" disabled={fetching}>
32            Create metafield
33          </Button>
34        </Box>
35      </Form>
36    </Panel>
37  );
38}

1import { Panel, Form, FormGroup, Input, Button, Box } from "@bigcommerce/big-design";
2import { useActionForm } from "@gadgetinc/react";
3import { api } from "../api";
4
5export default function () {
6  // useActionForm calls the manufacturer.create action on submit
7  const { submit, register } = useActionForm(api.bigcommerce.manufacturer.create);
8
9  // add an error message to the Panel if there is a request error
10  return (
11    <Panel title="Simple form example">
12      <Form onSubmit={submit}>
13        <FormGroup>
14          {/** register is used to associate the Input component with the "name" field on the model  */}
15          <Input description="Enter the manufacturer name." label="Manufacturer name" required {...register("name")} />
16        </FormGroup>
17        <Box marginTop="xxLarge">
18          <Button type="submit">Create manufacturer</Button>
19        </Box>
20      </Form>
21    </Panel>
22  );
23}

1import { RouteHandler } from "gadget-server";
2
3const route: RouteHandler = async ({ request, reply, connections }) => {
4  const bigcommerce = connections.bigcommerce.current;
5  const products = await bigcommerce?.v3.get(`/catalog/products`, {
6    query: { limit: 5 },
7  });
8  await reply.send({
9    products,
10  });
11};
12
13export default route;

1import { RouteHandler } from "gadget-server";
2
3const route: RouteHandler = async ({ request, reply, connections }) => {
4  const bigcommerce = await connections.bigcommerce.forStoreHash(
5    "<add-your-store-hash>"
6  );
7  const products = await bigcommerce?.v3.get(`/catalog/products`, {
8    query: { limit: 5 },
9  });
10  await reply.send({
11    products,
12  });
13};
14
15export default route;