Created
August 13, 2024 13:23
-
-
Save drikusroor/7c8032a24be8bc3a38a6dbfed6649a84 to your computer and use it in GitHub Desktop.
How to CRUD collections and items in a Wix App Dashboard using the Wix Data API
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment