1

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

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

2 回答 2

3

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

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

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

我们在 上创建实时查询订阅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}
            />
          );
        }}
      />
    );
于 2021-06-07T06:47:39.033 回答
0

我通过阅读 redux 商店来完成这一点。以下已被修改，因此我不透露专有知识。

  1. 为 Twilio reservationCreated 事件创建自定义侦听器
manager.workerClient.on("reservationCreated", this.acceptTask);
  1. 下面获取更新的任务。如果我们直接使用任务，除非事情发生了变化，否则它将是陈旧的对象。
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
}

希望对你有用/有帮助。

于 2021-06-07T15:37:56.977 回答