Skip to content

Instantly share code, notes, and snippets.

💭
It's full of stars

Rene Rubalcava odoe

💭
It's full of stars
Block or report user

Report or block odoe

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View markdown.block.ts
import * as fs from 'fs';
import { resolve } from 'path';
import { Converter } from 'showdown';
const mdConverter = new Converter();
export default function (path: string) {
path = resolve(__dirname, path);
const file = fs.readFileSync(path, 'utf8');
// convert Markdown to HTML
const html = mdConverter.makeHtml(file);
return html
View APIExplorerContainer.ts
import { Store } from "@dojo/framework/stores/Store";
import { StoreContainer } from "@dojo/framework/stores/StoreInjector";
import { APIExplorer } from "../widgets/APIExplorer";
import { State } from "../interfaces";
import {
fetchItemsProcess,
fetchResultProcess
} from "../processes/starwarsProcesses";
View main.tsx
const store = new Store();
const registry = registerStoreInjector(store);
class App extends WidgetBase {
protected render() {
return <APIExplorerContainer />;
}
}
const r = renderer(() => <App />);
View starwarsProcesses.ts
export const fetchItemsProcess = createProcess("fetch-items", [fetchItems]);
export const fetchResultProcess = createProcess("fetch-result", [fetchResult]);
View starwarsProcesses.ts
const fetchResult = commandFactory<Item>(async ({ path, payload }) => {
const response = await fetch(payload.value);
const result = await response.json();
return [replace(path("result"), JSON.stringify(result, undefined, 2))];
});
View starwarsProcesses.ts
const fetchItems = commandFactory<Item>(async ({ path }) => {
const response = await fetch("https://swapi.co/api/");
const json = await response.json();
const items: Item[] = Object.keys(json).map(key => {
return {
label: key,
value: json[key]
};
});
return [replace(path("items"), items)];
View starwarsProcesses.ts
import {
createProcess,
createCommandFactory
} from "@dojo/framework/stores/process";
import { replace } from "@dojo/framework/stores/state/operations";
import { State, Item } from "../interfaces";
// commandFactory typed to my application state
const commandFactory = createCommandFactory<State>();
View APIExplorer.tsx
import { tsx } from "@dojo/framework/widget-core/tsx";
import { WidgetBase } from "@dojo/framework/widget-core/WidgetBase";
import { watch } from "@dojo/framework/widget-core/decorators/watch";
import Listbox from "@dojo/widgets/listbox";
import TextArea from "@dojo/widgets/text-area";
import theme from "@dojo/themes/dojo";
import * as css from "./styles/APIExplorer.m.css";
import { ExplorerProperties, Item } from "../interfaces";
View mapwidget.tsx
export default class Map extends WidgetBase<MapProperties> {
onAttach() {
const element = this.meta(HtmlMeta).get("elemRef") as HTMLElement;
this.properties.initializeMap(element);
}
protected render() {
return <div classes={css.root} key="elemRef" />;
}
}
View initialize.ts
initializeMap = async (container: HTMLElement) => {
loadCss('https://js.arcgis.com/4.10/esri/css/main.css');
const [MapView, WebMap] = await loadModules(['esri/views/MapView', 'esri/WebMap']);
// then we load a web map from an id
const webmap = new WebMap({
portalItem: {
id: this.webmapid
}
});
// and we show that map in a container w/ id #viewDiv
You can’t perform that action at this time.