This commit is contained in:
Jeff Colombo 2019-01-13 00:23:34 -05:00
parent e72a59fe9d
commit 6dca121ffb
8 changed files with 59 additions and 29 deletions

View File

@ -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<IStats>;

View File

@ -6,6 +6,7 @@
<style src="dist/app.css"></style>
</head>
<body>
<div id="pokemon-mount"></div>
<script src="dist/global-bundle.js"></script>
<script src="dist/main-bundle.js"></script>
</body>

View File

@ -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<object>) => {
.then((response : Array<IPokemonJSON>) => {
return Promise.resolve(this.serializePokemonList(response));
});
}
// does `object` need to be `any`?
private serializePokemonList(jsonPokemonList : Array<object>) : Array<IPokemon> {
const pokemonList = jsonPokemonList.map((jsonPokemon) => {
let pokemon : IPokemon | null = null;
private serializePokemonList(jsonPokemonList : Array<IPokemonJSON>) : Array<IPokemon> {
const pokemonList = jsonPokemonList.reduce((result : Array<IPokemon>, 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;
}
}

View File

@ -0,0 +1,23 @@
import * as React from 'react';
import { PokemonService } from 'api/PokemonService';
export interface IPokemonSelectListProps {}
export class PokemonSelectList extends React.Component<IPokemonSelectListProps, object> {
constructor(props : IPokemonSelectListProps) {
super(props);
}
public componentWillMount() {
// TODO: switch to redux
// PokemonService
}
public render() {
return (
<div>Pokemon List</div>
);
}
}

View File

@ -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(
<h1>Hello Mons</h1>,
document.body
<PokemonSelectList />,
document.getElementById('pokemon-mount')
);

View File

@ -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"
]
}

View File

@ -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"],

View File

@ -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: {