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

如何解决为分配的任务更新 flex 中的任务属性

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

我可以在我的 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);

解决方法

这里是 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}
            />
          );
        }}
      />
    );

,

我是通过从 redux 存储中读取来完成此操作的。以下已修改，所以我不透露专有知识。

1. 为 Twilio reservedCreated 事件创建自定义侦听器

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

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

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
}

希望对您有用/有帮助。