Function useSchema

  • Custom React hook to manage a schema's state, fetching, and updates.

    Parameters

    • Optional id: string

      The ID of the schema to manage. If not provided, a new schema can be created.

    Returns UseSchemaReturn

    The object containing:

    • schema: The currently loaded schema.
    • displayInteractive: The display interactive configuration (stringified JSON).
    • displayThumbnail: The display thumbnail configuration (stringified JSON).
    • fetched: A boolean flag indicating whether the user data has been fetched.
    • setSchema: A state setter for updating the schema.
    • setThumbnail: A state setter for updating the thumbnail file.
    • push: SchemaPushMethod - Function to push schema changes to the API, optionally updating it with new data.
    • pushThumbnail: SchemaPushThumbnailMethod - Function to push a new thumbnail to the schema.
    • refresh: SchemaFetchMethod - Function to fetch the schema by re-fetching them from the API.

    Example

    import { useSchema } from 'react-playmakers';

    function SchemaEditor() {
      const {
        schema,
        fetched,
        push,
        pushThumbnail,
        refresh,
        setSchema,
        setThumbnail,
        displayInteractive,
        displayThumbnail
      } = useSchema('sXXXXXXXX');

      if (!fetched) {
        return <div>Loading schema...</div>;
      }

      if (!schema) {
        return <div>Schema not found</div>;
      }

      const handleSave = async () => {
        try {
          await push({
            title: schema.title,
            description: schema.description,
            displayInteractive,
            displayThumbnail
          });
          console.log('Schema saved successfully');
        } catch (error) {
          console.error('Error saving schema:', error);
        }
      };

      const handleThumbnailUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
        const file = event.target.files?.[0];
        if (file) {
          setThumbnail(file);
        }
      };

      const handlePushThumbnail = async () => {
        try {
          await pushThumbnail(null);
          console.log('Thumbnail updated successfully');
        } catch (error) {
          console.error('Error updating thumbnail:', error);
        }
      };

      return (
        <div>
          <h1>{schema.title}</h1>
          <input
            value={schema.title}
            onChange={(e) => setSchema({ ...schema, title: e.target.value })}
          />
          <textarea
            value={schema.description}
            onChange={(e) => setSchema({ ...schema, description: e.target.value })}
          />
          <input type="file" onChange={handleThumbnailUpload} />
          <button onClick={handlePushThumbnail}>Update Thumbnail</button>
          <button onClick={handleSave}>Save Schema</button>
          <button onClick={() => refresh()}>Refresh Schema</button>
        </div>
      );
    }

Settings

Member Visibility

Theme

Generated using TypeDoc