Renderers are implemented using TypeScript
import { MOVE } from "@tracking/event-names";
import { SimpleCarousel } from "@dx/react-carousel-tile";
import { tile, ViewTracker } from "@if/rendering-engine/api";
import * as React from "react";
import * as query from "./query.graphql";
export default tile()
.withQueries(({ entity: { id } }) => ({
carousel: { query, variables: { id } },
}))
.withProcessDependencies(({ data }) => {
if (data === null) {
return { action: "error", message: "No collection data found." };
}
return {
action: "render",
data,
tiles: { entities: getCollectionEntities(data) },
};
})
.withRender((props) => {
const {
data: { collection },
tiles: { entities },
tools,
} = props;
return (
<ViewTracker>
<SimpleCarousel
{...collection}
onNextClickCarousel={() => {
tools.tracking.track({ name: MOVE });
}}
>
{entities}
</SimpleCarousel>
</ViewTracker>
);
});