Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
const TaskDetails = ({ id }) => {
const [updateTask] = useMutation(UPDATE_TASK);
const { data = {} } = useQuery(GET_TASK, { variables: { id } });
const { task = { comments: [] } }: { task: ITask } = data;
const onUpdate = (key) => (value) => {
const task = { [key]: value };
updateTask({
variables: { task, id },
update: (proxy, { data = {} }) => {
proxy.writeData({ id: `Task:${id}`, data: task });
},
optimisticResponse: task,
});
};
return (
<div>
<Typography.Title
level={4}
strong
editable={{ onChange: onUpdate('name') }}
>
{task.name}
</Typography.Title>
<Typography.Text editable={{ onChange: onUpdate('notes') }}>
{task.notes}
</Typography.Text>
</div>
);
};
const TaskListItem = ({ notes, name }: ITask) => (
<div>
<Typography.Title level={4}>{name}</Typography.Title>
<Typography.Text>{notes}</Typography.Text>
</div>
);
const TaskList = () => {
const { data = {} } = useQuery(GET_TASKS);
const { tasks = [] } = data;
const [activeTask, setActiveTask] = useState(null);
return (
<div style={{ padding: '50px', width: '500px' }}>
{tasks.map((task: ITask) => (
<div
key={task.id}
onClick={() => {
setActiveTask(task.id);
}}
style={{ marginBottom: '10px' }}
>
<TaskListItem {...task} />
</div>
))}
<Divider />
{activeTask && <TaskDetails id={activeTask} />}
</div>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment