为分配的任务更新 flex 中的任务属性

Question

我正在通过向我的后端请求分配的任务来更新任务属性，此请求是在自定义组件上发出的，在调用期间单击按钮。

我可以在我的 twilio 控制台中看到更新很顺利，新值显示在那里，但是我的 flex 组件上的任务道具没有更新，自分配以来保持相同的属性。

有没有办法在 flex 中“刷新”任务？我需要这个更新的属性才能在我的自定义组件上执行条件渲染。

提前感谢所有帮助我的人。

import React from 'react';
import { withTaskContext } from '@twilio/flex-ui';

class IsRecording extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        // this.task = this.props.tasks
            return (
                <div>
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#E50000">
                        <path
                            d="M16 16c0 1.104-.896 2-2 2h-12c-1.104 0-2-.896-2-2v-8c0-1.104.896-2 2-2h12c1.104 0 2 .896 2 2v8zm8-10l-6 4.223v3.554l6 4.223v-12z"/>
                        <animate
                            attributeType="XML"
                            attributeName="fill"
                            values="#800;#f00;#800;#800"
                            dur="1.5s"
                            repeatCount="indefinite"/>
                    </svg>
                </div>
            )
    }
};

export default withTaskContext(IsRecording);

Answer 1

这里是 Twilio 开发人员布道者。

如果您可以访问 Flex 中的任务对象，则无需通过后端访问。相反，您可以调用 task.setAttributes，这将直接更新任务属性并导致它更新 Flex 中各处的状态。

然而，这里的困难在于主管不会实时查看任务，因此您需要做更多的工作才能让主管监听任务的变化。我玩了一把，让它工作了。它使用 Sync liveQuery interface 订阅工作人员任务的更新。

我们在 componentDidMount 上创建实时查询订阅。创建实时查询时的第一个参数是“tr-task”，它指的是系统中的所有任务。第二个参数是查询，在本例中我们正在查询该工作人员的所有任务。

一旦我们得到查询，我们就可以加载当前项目并将它们设置在状态中。然后我们监听添加、更新和删除并相应地更新状态。

在 render 函数中，我们计算是否有任何任务具有 isRecording 属性并相应地显示图标。

这是 <IsRecording> 组件：

import React from "react";
import { Manager } from "@twilio/flex-ui";

class IsRecording extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tasks: [],
    };
  }

  componentDidMount() {
    Manager.getInstance()
      .insightsClient.liveQuery(
        "tr-task",
        `data.worker_sid == "${this.props.worker.sid}"`
      )
      .then((query) => {
        this.liveQuery = query;
        const items = query.getItems();
        this.setState({ tasks: Object.values(items) });
        query.on("itemAdded", (item) => {
          this.setState((prevState) => ({
            tasks: [...prevState.tasks, item.value],
          }));
        });
        query.on("itemUpdated", (item) => {
          this.setState((prevState) => ({
            tasks: [
              ...prevState.tasks.filter((task) => task.sid !== item.value.sid),
              item.value,
            ],
          }));
        });
        query.on("itemRemoved", (item) => {
          this.setState((prevState) => ({
            tasks: prevState.tasks.filter(
              (task) => task.sid !== item.previousItemData.sid
            ),
          }));
        });
      })
      .catch((err) =>
        console.debug(`Error when subscribing to live updates for Tasks`, err)
      );
  }

  componentWillUnmount() {
    if (this.liveQuery) {
      this.liveQuery.removeAllListeners();
      this.liveQuery.close();
    }
  }

  render() {
    if (this.state.tasks.some((task) => task.attributes.isRecording)) {
      return (
        <div>
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#E50000">
            <path d="M16 16c0 1.104-.896 2-2 2h-12c-1.104 0-2-.896-2-2v-8c0-1.104.896-2 2-2h12c1.104 0 2 .896 2 2v8zm8-10l-6 4.223v3.554l6 4.223v-12z" />
            <animate attributeType="XML" attributeName="fill" values="#800;#f00;#800;#800" dur="1.5s" repeatCount="indefinite" />
          </svg>
        </div>
      );
    } else {
      return null;
    }
  }
}

export default IsRecording;

您可以像这样将其附加到 WorkersDataTable：

    flex.WorkersDataTable.Content.add(
      <ColumnDefinition
        key="is-recording"
        header={"Recording"}
        content={(items) => {
          return (
            <IsRecording
              key={`is-recording-${items.worker.sid}`}
              worker={items.worker}
            />
          );
        }}
      />
    );

Answer 2

我正在通过从 redux 存储中读取来完成此操作。以下内容已被修改，因此我不会泄露专有知识。

为 Twilio reservationCreated 事件创建自定义侦听器

manager.workerClient.on("reservationCreated", this.acceptTask);

下面获取更新的任务。如果我们直接使用任务，除非事情发生变化，否则它将是陈旧的对象。

async acceptTask(reservation) {
  const updatedTask = this.manager.store.getState().flex.worker.tasks.get(reservation.task.sid);
  // consume it
  // get the updated attributes with updatedTask.attributes
}

希望对您有用/有所帮助。

为分配的任务更新 flex 中的任务属性

Update task attributes in flex for assigned task

twilio

twilio-api

twilio-flex