Compare two implementations
of one shared array.

// Define a schema factory that is used to generate classes for the schema
const sf = new SchemaFactory("d302b84c-75f6-4ecd-9663-524f467013e3");

// Define a class that is an array of strings
// This class is used to create an array in the SharedTree
export class StringArray extends sf.array("StringArray", sf.string) {
/**
 * Remove the first item in the list if the list is not empty
 */
public removeFirst = () => {
	if (this.length > 0) this.removeAt(0);
};

/**
 * Add an item to the beginning of the list
 */
public insertNew = () => {
	this.insertAtStart("");
};
}

// This object is passed into the SharedTree via the schematize method.
export const treeConfiguration = new TreeViewConfiguration(
	// Specify the root type - StringArray.
	{ schema: StringArray },
);

// This identifier names the array type, as SchemaFactory names StringArray.
pub const array_type = "shared_tree_item_counter.StringArray"

// Declare a root array of strings, as sf.array("StringArray", sf.string) does.
pub fn configuration() -> builder.Root(List(String)) {
  builder.array(
    factory: builder.factory(scope: "shared_tree_item_counter"),
    name: "StringArray",
    element: builder.string(),
  )
  |> builder.root
}

// Start with an empty array, as appData.initialize([]) does.
pub fn initial() -> List(String) {
  []
}

export const containerSchema = {
	initialObjects: {
		appData: SharedTree,
	},
} satisfies ContainerSchema;

// Get or create the document depending if we are running through the create new flow
if (containerId.length === 0) {
	// The client will create a new detached container using the schema
	// A detached container will enable the app to modify the container before attaching it to the client
	({ container, services } = await client.createContainer(
		containerSchema,
		minVersionForCollab,
	));
} else {
	// Use the unique container ID to fetch the container created earlier. It will already be connected to the
	// collaboration session.
	({ container, services } = await client.getContainer(
		containerId,
		containerSchema,
		minVersionForCollab,
	));
}

// Initialize the SharedTree Data Structure
const appData = container.initialObjects.appData.viewWith(
	treeConfiguration, // This is defined in schema.ts
);
if (appData.compatibility.canInitialize) {
	appData.initialize([]);
}

// If the app is in a `createNew` state - no containerId, and the container is detached, we attach the container.
// This uploads the container to the service and connects to the collaboration session.
if (container.attachState === AttachState.Detached) {
	containerId = await container.attach();

	// The newly attached container is given a unique ID that can be used to access the container in another session.
	// This adds that id to the url.
	history.replaceState(undefined, "", `#${containerId}`);
}

// Select create or load from the URL document ID, as loadFluidData does.
case document_id {
  // Create with the schema and empty root. No separate attach is needed.
  "" -> #(
    model,
    tree.create_dev(
      config.base_url,
      config.tenant,
      config.secret,
      document_schema.configuration(),
      [],
      Created,
    ),
  )
  id -> #(model, connect(config, id))
}

case message {
  Created(Ok(document_id)) -> {
    // Keep the new ID in the URL, as the container.attach result is kept.
    replace_document(document_id)
    #(
      Model(..model, phase: Connecting, document_id: document_id),
      connect(model.config, document_id),
    )
  }
  Created(Error(detail)) ->
    fail(
      model,
      "Creation failed. The service might have created a document whose ID was not received. Do not retry automatically: "
        <> tree_error.to_string(detail),
    )
  GotDocument(document) -> #(
    Model(..model, document: Some(document)),
    effect.none(),
  )
  Connected(Error(detail)) -> fail(model, detail)
  Connected(Ok(Nil)) ->
    case model.document {
      Some(document) -> #(
        model,
        // Open the view, as viewWith does. Creation initialized the root.
        tree.open(document, document_schema.configuration(), Opened),
      )
      None -> fail(model, "Connection completed without a document handle")
    }
}

const [count, setCount] = useState(props.list.length);

// Register for change events on the list when the component mounts.
// Any time the list changes, the app will update
useEffect(() => {
	const unsubscribe = Tree.on(props.list, "nodeChanged", () => {
		setCount(props.list.length);
	});
	return unsubscribe;
}, []);

Opened(Ok(shared_tree)) -> #(
  Model(..model, tree: Some(shared_tree)),
  effect.batch([
    // Register for changes, as Tree.on does, and read the initial count.
    tree.observe(shared_tree, Subscribed, Read),
    tree.read_root(shared_tree, Read),
  ]),
)
Subscribed(Error(detail)) -> fail(model, tree_error.to_string(detail))
Subscribed(Ok(subscription)) -> #(
  // Keep the token for unsubscribe when the view closes.
  Model(..model, subscription: Some(subscription)),
  effect.none(),
)
Read(Error(detail)) -> fail(model, tree_error.to_string(detail))
Read(Ok(values)) -> #(
  Model(..model, phase: Ready, count: list.length(values)),
  effect.none(),
)

/**
 * Remove the first item in the list if the list is not empty
 */
public removeFirst = () => {
	if (this.length > 0) this.removeAt(0);
};

/**
 * Add an item to the beginning of the list
 */
public insertNew = () => {
	this.insertAtStart("");
};

pub fn apply(
  handle: tree.Tree(List(String)),
  action: Action,
) -> Result(Nil, error.Error) {
  use array <- result.try(tree.required_root(handle))
  case action {
    Insert -> tree.array_insert(array, 0, [""])
    Remove -> {
      use first <- result.try(tree.array_get(array, 0))
      case first {
        None -> Ok(Nil)
        Some(_) -> tree.array_remove(array, 0, 1)
      }
    }
  }
}

Edit(action) ->
  case model.phase, model.busy, model.tree {
    Ready, False, Some(shared_tree) -> #(
      Model(..model, busy: True),
      tree.perform(fn() { counter.apply(shared_tree, action) }, Edited),
    )
    _, _, _ -> #(model, effect.none())
  }