TodoListEnvelopeView Api Impl

TodoListEnvelopeView.tsx

import { useCallback, useMemo } from "react";
import { Item, TodoListChannelApi } from "../api";

export const TodoListEnvelopeView = React.forwardRef<TodoListEnvelopeViewApi, Props>((props, forwardedRef) => {
  // ...
    
  const removeItem = useCallback(
    (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>, item: Item) => {
      e.preventDefault();
      const itemsCopy = [...items];
      const i = itemsCopy.indexOf(item);
      if (i >= 0) {
        itemsCopy.splice(i, 1);
        setItems(itemsCopy);
        props.channelApi.notifications.todoList__itemRemoved(item.label);
      }
    },
    [items]
  );

  const updateItemCompletedStatus = useCallback(
    (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>, item: Item, completed: boolean) => {
      e.preventDefault();
      const itemsCopy = [...items];
      const i = itemsCopy.indexOf(item);
      if (i >= 0) {
        itemsCopy[i].completed = completed;
        setItems(itemsCopy);
      }
    },
    [items]
  );

  const allCompleted = useMemo(() => {
    const completedItems = items.filter((i) => i.completed);
    return items.length > 0 && completedItems.length === items.length;
  }, [items]);
  
  // ...
});