From 6dca121ffb4e572f7756eb314f65070ba3b71396 Mon Sep 17 00:00:00 2001 From: Jeff Colombo Date: Sun, 13 Jan 2019 00:23:34 -0500 Subject: [PATCH] begin ui --- generatePokemonData.ts | 2 +- index.html | 1 + src/ts/api/PokemonService.ts | 37 +++++++++---------- .../PokemonSelectList/PokemonSelectList.tsx | 23 ++++++++++++ src/ts/app/index.tsx | 6 ++- tsconfig.json | 11 ++++-- tslint.json | 2 +- webpack.config.js | 6 ++- 8 files changed, 59 insertions(+), 29 deletions(-) create mode 100644 src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx diff --git a/generatePokemonData.ts b/generatePokemonData.ts index 74aa813..2ee5c6b 100644 --- a/generatePokemonData.ts +++ b/generatePokemonData.ts @@ -1,6 +1,6 @@ import * as fs from 'fs'; import Pokemon from 'pokemongo-json-pokedex/output/pokemon.json'; -import { ILeaguePokemon, IPokemon, IStats, League, Grade } from './src/ts/app/models/Pokemon'; +import { ILeaguePokemon, IPokemon, IStats, League, Grade } from 'app/models/Pokemon'; interface ICpAndTotalFound { [ key : number ] : Array; diff --git a/index.html b/index.html index fe22b89..adf12c8 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,7 @@ +
diff --git a/src/ts/api/PokemonService.ts b/src/ts/api/PokemonService.ts index e542cde..6835e9c 100644 --- a/src/ts/api/PokemonService.ts +++ b/src/ts/api/PokemonService.ts @@ -1,10 +1,9 @@ -import { AjaxUtils } from 'src/ts/api/AjaxUtils'; +import { AjaxUtils } from 'api/AjaxUtils'; -import { IPokemon } from 'src/ts/app/models/Pokemon'; +import { IPokemon } from 'app/models/Pokemon'; -interface IPokemonService { - -} +interface IPokemonJSON extends IPokemon {} +interface IPokemonService {} export class PokemonService implements IPokemonService { public getPokemonList() { @@ -14,38 +13,36 @@ export class PokemonService implements IPokemonService { }; return AjaxUtils.ajaxGet('/api/billing/plan', queryParameters) - .then((response : Array) => { + .then((response : Array) => { return Promise.resolve(this.serializePokemonList(response)); }); } - // does `object` need to be `any`? - private serializePokemonList(jsonPokemonList : Array) : Array { - const pokemonList = jsonPokemonList.map((jsonPokemon) => { - let pokemon : IPokemon | null = null; + private serializePokemonList(jsonPokemonList : Array) : Array { + const pokemonList = jsonPokemonList.reduce((result : Array, pokemonJson) => { try { - if (typeof jsonPokemon.name !== 'string') { + if (typeof pokemonJson.name !== 'string') { throw 'pokemon missing name'; } - if (typeof jsonPokemon.id !== 'string') { + if (typeof pokemonJson.id !== 'string') { throw 'pokemon missing id'; } - if (typeof jsonPokemon.family !== 'string') { + if (typeof pokemonJson.family !== 'string') { throw 'pokemon missing family'; } - if (typeof jsonPokemon.dex !== 'number') { + if (typeof pokemonJson.dex !== 'number') { throw 'pokemon missing dex'; } - if (typeof jsonPokemon.stats !== 'object') { + if (typeof pokemonJson.stats !== 'object') { throw 'pokemon missing stats'; } - pokemon = { ...jsonPokemon }; + const pokemon : IPokemon = { ...pokemonJson }; + result.push(pokemon); } catch (e) { - console.error(jsonPokemon, e.message); + console.error(pokemonJson, e.message); } - return pokemon; - }); - // TODO should we allow `null`s? + return result; + }, []); return pokemonList; } } diff --git a/src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx b/src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx new file mode 100644 index 0000000..741c545 --- /dev/null +++ b/src/ts/app/components/PokemonSelectList/PokemonSelectList.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; + +import { PokemonService } from 'api/PokemonService'; + +export interface IPokemonSelectListProps {} + +export class PokemonSelectList extends React.Component { + + constructor(props : IPokemonSelectListProps) { + super(props); + } + + public componentWillMount() { + // TODO: switch to redux + // PokemonService + } + + public render() { + return ( +
Pokemon List
+ ); + } +} diff --git a/src/ts/app/index.tsx b/src/ts/app/index.tsx index f499429..404b39b 100644 --- a/src/ts/app/index.tsx +++ b/src/ts/app/index.tsx @@ -1,9 +1,11 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; +import { PokemonSelectList } from './components/PokemonSelectList/PokemonSelectList'; + import 'styles/index.scss'; ReactDOM.render( -

Hello Mons

, - document.body + , + document.getElementById('pokemon-mount') ); diff --git a/tsconfig.json b/tsconfig.json index 8e8f47d..47873d3 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -6,15 +6,17 @@ "allowJs": true, "resolveJsonModule": true, "esModuleInterop": true, - "outDir": "./dist", + "outDir": "dist", "sourceMap": true, "module": "commonjs", "target": "es6", "jsx": "react", - "baseUrl": ".", + "baseUrl": "./", "traceResolution": false, "paths": { - "src": ["./src"] + "api/*": ["src/ts/api/*"], + "app/*": ["src/ts/app/*"], + "styles/*": ["src/scss/*"] }, "plugins": [{ "name": "tslint-language-service", @@ -22,10 +24,11 @@ }], }, "include": [ - "./src/**/*", + "src/**/*", "." ], "exclude": [ "node_modules", + "dist" ] } diff --git a/tslint.json b/tslint.json index 7a0f171..626c020 100644 --- a/tslint.json +++ b/tslint.json @@ -1,7 +1,7 @@ { "extends": ["tslint:latest", "tslint-react", "tslint-eslint-rules"], "rules": { - "no-implicit-dependencies": [true, ["styles"]], + "no-implicit-dependencies": [true, ["styles", "app", "api"]], "no-default-export": true, "no-unused-expression": true, "no-unused-variable": [true, "react"], diff --git a/webpack.config.js b/webpack.config.js index 9cf9569..7379a10 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -7,6 +7,10 @@ const typescriptResolve = { alias: { 'moment$': path.resolve('./node_modules/moment/min/moment-with-locales.min.js'), 'moment-timezone$': path.resolve('./node_modules/moment-timezone/builds/moment-timezone-with-data-2012-2022.min.js'), + + // keep in sync with tsconfig.json `paths` and tslint.json `no-implicit-dependencies` + 'api': path.resolve('./src/ts/api'), + 'app': path.resolve('./src/ts/app'), 'styles': path.resolve('./src/scss'), }, extensions: ['.ts', '.tsx', '.js'], @@ -35,7 +39,7 @@ module.exports = function (env, tsLoaderHappyPackMode) { './src/scss/index.scss' // these are the global styles that should never be imported by a component ], - 'main': './src/ts/index.tsx', + 'main': './src/ts/app/index.tsx', }, optimization: options.getOptimizations(), output: {