How to CRUD collections and items in a Wix App Dashboard using the Wix Data API

page.tsx

import {
  Button,
  FormField,
  Input,
  Page,
  WixDesignSystemProvider,
} from "@wix/design-system";
import "@wix/design-system/styles.global.css";
import React, { useEffect, useState } from "react";
import { withDashboard, useDashboard } from "@wix/dashboard-react";
import { collections, items } from "@wix/data";
import { useWixModules } from "@wix/sdk-react";

const SETTINGS_KEY = "my-app-settings";
const SETTINGS_ITEM_KEY = "my-app-settings-item";

function Index() {
  const { createDataCollection, getDataCollection } = useWixModules(collections);
  const { saveDataItem, getDataItem } = useWixModules(items);
  const { showToast } = useDashboard();
  const [settings, setSettings] = useState({
    licenseKey: "",
  });
  const [isSettingsLoaded, setIsSettingsLoaded] = React.useState(false);

  const updateSetting = (key: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
    setSettings({
      ...settings,
      [key]: event.target.value,
    });
  }

  async function loadSettings() {

    let collection;

    try {
      // try to create the data collection if it doesn't exist
      collection = await getDataCollection(SETTINGS_KEY);
    } catch (error) {
      // Catch error if the collection doesn't exist
    }

    if (!collection) {
      await createDataCollection({
        _id: SETTINGS_KEY,
        collectionType: collections.CollectionType.WIX_APP,
        displayName: "My App Settings",
        fields: [
          {
            key: "licenseKey",
            displayName: "License Key",
            type: collections.Type.TEXT,
          },
        ],
        permissions: {
          insert: collections.Role.ADMIN,
          read: collections.Role.ANYONE,
          update: collections.Role.ADMIN,
          remove: collections.Role.ADMIN,
        }
      });
    }
    try {
    } catch (error) {
      console.error("Failed to initialize my app settings data collection", error);
      showToast({
        message: "Failed to initialize my app settings data collection",
        type: "error",
      });

      return;
    }

    try {
      const response = await getDataItem(SETTINGS_ITEM_KEY, {
        dataCollectionId: SETTINGS_KEY,
      })

      if (!response.data) {
        throw new Error("No settings found");
      }

      setIsSettingsLoaded(true);

      setSettings({
        licenseKey: response.data.licenseKey,
      });

    } catch (error) {
      // try & initialize the settings
      await saveDataItem({
        dataCollectionId: SETTINGS_KEY,
        dataItem: {
          _id: SETTINGS_ITEM_KEY,
          data: {
            _id: SETTINGS_ITEM_KEY,
            licenseKey: "",
          }
        },
      })
      console.error("Failed to load settings", error);
      showToast({
        message: "Failed to load settings",
        type: "error",
      });
    }
  }

  async function saveSettings(event: React.FormEvent) {

    event.preventDefault();

    const form = event.target as HTMLFormElement;
    const formData = new FormData(form);

    try {
      const response = await saveDataItem({
        dataCollectionId: SETTINGS_KEY,
        dataItem: {
          _id: SETTINGS_ITEM_KEY,
          dataCollectionId: SETTINGS_ITEM_KEY,
          data: {
            _id: SETTINGS_KEY,
            licenseKey: formData.get("licenseKey") as string,
          }
        },
      })

      showToast({
        message: "Settings saved successfully!",
      });
    } catch (error) {
      console.error("Failed to save settings", error);
      showToast({
        message: "Failed to save settings",
        type: "error",
      });
    }
  }

  useEffect(() => {
    loadSettings();
  }, []);

  return (
    <WixDesignSystemProvider>
      <Page>
        <Page.Header
          title="Dashboard Page"
          subtitle="Configure my app settings"
        />
        <Page.Content>
          {/* a form that contains the following settings: licenseKey  */}
          <form onSubmit={saveSettings}>
            <FormField label="License Key" name="licenseKey" />
            <Input name="licenseKey" value={settings.licenseKey} onChange={updateSetting("licenseKey")} disableEditing={!isSettingsLoaded} />

            <Button type="submit" disabled={!isSettingsLoaded}>
              Save
            </Button>
          </form>
        </Page.Content>
      </Page>
    </WixDesignSystemProvider>
  );
}

export default withDashboard(Index);