├── .gitignore
├── README.md
├── src
├── react-app-env.d.ts
├── index.tsx
├── styles.css
├── API.ts
└── App.tsx
├── .codesandbox
└── workspace.json
├── tsconfig.json
├── package.json
└── public
├── index.html
└── pokemon.json
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # reactive-pokemon
2 | Created with CodeSandbox
3 |
--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | import { render } from "react-dom";
2 |
3 | import App from "./App";
4 |
5 | const rootElement = document.getElementById("root");
6 | render(, rootElement);
7 |
--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: sans-serif;
3 | }
4 |
5 | .two-column {
6 | display: grid;
7 | grid-template-columns: 80% 20%;
8 | }
9 |
10 | .top-bar {
11 | display: flex;
12 | flex-direction: row;
13 | gap: 1rem;
14 | }
--------------------------------------------------------------------------------
/.codesandbox/workspace.json:
--------------------------------------------------------------------------------
1 | {
2 | "responsive-preview": {
3 | "Mobile": [
4 | 320,
5 | 675
6 | ],
7 | "Tablet": [
8 | 1024,
9 | 765
10 | ],
11 | "Desktop": [
12 | 1400,
13 | 800
14 | ],
15 | "Desktop HD": [
16 | 1920,
17 | 1080
18 | ]
19 | }
20 | }
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "include": [
3 | "./src/**/*"
4 | ],
5 | "compilerOptions": {
6 | "strict": true,
7 | "esModuleInterop": true,
8 | "lib": [
9 | "dom",
10 | "es2015"
11 | ],
12 | "jsx": "react-jsx",
13 | "target": "es5",
14 | "allowJs": true,
15 | "skipLibCheck": true,
16 | "allowSyntheticDefaultImports": true,
17 | "forceConsistentCasingInFileNames": true,
18 | "noFallthroughCasesInSwitch": true,
19 | "module": "esnext",
20 | "moduleResolution": "node",
21 | "resolveJsonModule": true,
22 | "isolatedModules": true,
23 | "noEmit": true
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/API.ts:
--------------------------------------------------------------------------------
1 | export interface Pokemon {
2 | id: number;
3 | name: string;
4 | type: string[];
5 | hp: number;
6 | attack: number;
7 | defense: number;
8 | special_attack: number;
9 | special_defense: number;
10 | speed: number;
11 | }
12 |
13 | export async function getAll(): Promise {
14 | return fetch("/pokemon.json").then((resp) => resp.json());
15 | }
16 |
17 | export async function getByName(search: string): Promise {
18 | const lcSearch = search.toLowerCase();
19 | return fetch("/pokemon.json")
20 | .then((resp) => resp.json())
21 | .then((pokemon: Pokemon[]) =>
22 | pokemon.filter(({ name }) => name.toLowerCase().includes(lcSearch))
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-typescript",
3 | "version": "1.0.0",
4 | "description": "React and TypeScript example starter project",
5 | "dependencies": {
6 | "react": "^17.0.2",
7 | "react-dom": "^17.0.2",
8 | "react-scripts": "^4.0.3"
9 | },
10 | "devDependencies": {
11 | "@types/react": "17.0.0",
12 | "@types/react-dom": "17.0.0",
13 | "typescript": "^4.3.5"
14 | },
15 | "scripts": {
16 | "start": "react-scripts start",
17 | "build": "react-scripts build",
18 | "test": "react-scripts test --env=jsdom",
19 | "eject": "react-scripts eject"
20 | },
21 | "browserslist": {
22 | "production": [
23 | ">0.2%",
24 | "not dead",
25 | "not op_mini all"
26 | ],
27 | "development": [
28 | "last 1 chrome version",
29 | "last 1 firefox version",
30 | "last 1 safari version"
31 | ]
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
22 | React App
23 |
24 |
25 |
26 |
29 |
30 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState, useMemo } from "react";
2 | import { Pokemon, getAll, getByName } from "./API";
3 |
4 | import "./styles.css";
5 |
6 | const calculatePower = (pokemon: Pokemon) =>
7 | pokemon.hp +
8 | pokemon.attack +
9 | pokemon.defense +
10 | pokemon.special_attack +
11 | pokemon.special_defense +
12 | pokemon.speed;
13 |
14 | const PokemonTable: React.FunctionComponent<{
15 | pokemon: Pokemon[];
16 | }> = ({ pokemon }) => {
17 | return (
18 |
19 |
20 |
21 | | ID |
22 | Name |
23 | Type |
24 | Stats |
25 |
26 |
27 |
28 | {pokemon.map((p) => (
29 |
30 | | {p.id} |
31 | {p.name} |
32 | {p.type.join(",")} |
33 | {p.hp} |
34 | {p.attack} |
35 | {p.defense} |
36 | {p.special_attack} |
37 | {p.special_defense} |
38 | {p.speed} |
39 |
40 | ))}
41 |
42 |
43 | );
44 | };
45 |
46 | export default function App() {
47 | return (
48 |
49 |
50 |
Search
51 |
52 |
Power threshold
53 |
54 |
Count over threshold:
55 |
56 |
63 |