import { create, tsx } from "@dojo/framework/core/vdom"; import { createResourceMiddleware } from "@dojo/framework/core/middleware/resources"; import { createICacheMiddleware } from "@dojo/framework/core/middleware/icache"; import HackerNewItem from "./HackerNewItem"; import hnTemplate from "../hnTemplate"; interface ListState { search: string; readItemIds: string[]; page: number; } // Create a resource middleware without a item interface, which means // no resource property will be added to the widget's property api const resource = createResourceMiddleware(); const icache = createICacheMiddleware(); const factory = create({ icache, resource }); const HackerNewsList = factory(function HackerNewsList({ id, middleware: { icache, resource } }) { // de-structure resource API controls const { createOptions, getOrRead, isFailed, isLoading } = resource; // create an set of options to work with, with the widget id const options = createOptions(id); // get the current search term const search = icache.getOrSet("search", "TypeScript"); const page = icache.getOrSet("page", 1); const currentOptions = options({ size: 20, page, query: { search } }); // resource aware widgets let you know if they are loading or there was an error // results are return in arrays of pages (can request multiple pages) const [result] = getOrRead(hnTemplate, currentOptions); const loading = isLoading(hnTemplate, currentOptions); const failed = isFailed(hnTemplate, currentOptions); const readItemIds = icache.getOrSet("readItemIds", []); if (failed) { // if a resource read fails show an error message return Something went wrong; } return (

My Hacker Stories

Search: { // Dojo 7, icache can now be set without invalidation icache.set("search", (target as HTMLInputElement).value, false); }} onkeydown={event => { if (event.key === "Enter") { icache.set("search", (current = "") => current); event.preventDefault(); } }} />

{loading &&

...loading

} {!loading && result .filter(item => readItemIds.indexOf(item.objectID) === -1) .map(item => ( { icache.set("readItemIds", (current = []) => [...current, old]); }} /> ))}

); }); export default HackerNewsList;