92 lines
2.3 KiB
TypeScript
92 lines
2.3 KiB
TypeScript
//// "Oak" server
|
|
import { Application, Router } from "https://deno.land/x/oak/mod.ts";
|
|
|
|
//// "React" stuff
|
|
// @deno-types="https://deno.land/x/servest/types/react/index.d.ts"
|
|
import React from "https://dev.jspm.io/react/index.js";
|
|
// @deno-types="https://deno.land/x/servest/types/react-dom/server/index.d.ts"
|
|
import ReactDOMServer from "https://dev.jspm.io/react-dom/server.js";
|
|
|
|
//attemp conversion to a table
|
|
|
|
const CustomItemList = (props: any) => {
|
|
return (
|
|
<div className="ItemList" key={1}>
|
|
<h3>Items</h3>
|
|
<h4>{props.items.length} total</h4>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Descritpion</th>
|
|
<th>Amount</th>
|
|
<th>Log ID</th>
|
|
</tr>
|
|
</thead>
|
|
{props.items.map((inItem: any) => {
|
|
return (
|
|
<CustomItem
|
|
description={inItem.descr}
|
|
amount={inItem.amount}
|
|
key={inItem.id}
|
|
id={inItem.id}
|
|
/>
|
|
);
|
|
})}
|
|
</table>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const CustomItem = (props: any) => {
|
|
return (
|
|
<tr className="Item" key={props.id}>
|
|
<td>{props.description}</td>
|
|
<td>{props.amount}</td>
|
|
<td>{props.id}</td>
|
|
<td><button>Map</button></td>
|
|
</tr>
|
|
);
|
|
};
|
|
|
|
/*
|
|
const CustomItem = (props: any) => {
|
|
return (
|
|
<div className="Item" key={props.id}>
|
|
<div className="Item_Feature" key={props.id + props.description}>
|
|
<span>Description:</span> <strong>{props.description}</strong>
|
|
</div>
|
|
<div className="Item_Feature" key={props.id + props.amount}>
|
|
<span>Amount:</span> <strong>{props.amount}</strong>
|
|
</div>
|
|
<div className="Item_Feature" key={props.id + "i"}>
|
|
<span>Key:</span> <strong>{props.id}</strong>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
*/
|
|
|
|
export default (inState: any, inPort: number) => {
|
|
let app, router;
|
|
let state: any;
|
|
|
|
router = new Router();
|
|
router.get("/api/all", (ctx: any) => {
|
|
ctx.response.body = JSON.stringify(inState);
|
|
});
|
|
router.get("/", (ctx: any) => {
|
|
ctx.response.body = ReactDOMServer.renderToString(
|
|
<html>
|
|
<head></head>
|
|
<body>
|
|
<h1>Welcome!</h1>
|
|
<CustomItemList items={inState} />
|
|
</body>
|
|
</html>
|
|
);
|
|
});
|
|
app = new Application();
|
|
app.use(router.routes());
|
|
app.listen({ port: inPort });
|
|
};
|