为分配的任务更新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接口来订阅员工任务的更新。

我们在componentDidMount上创建实时查询订阅。创建实时查询时的第一个参数是"；tr任务"；这是指系统中的所有任务。第二个参数是查询，在本例中，我们将查询该工作者的所有任务。

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

在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存储来实现这一点的。以下内容已被修改，因此我不会透露专有知识。

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

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
}

希望对你有用。