🎉 Initial Commit

RuiningL · Jul 6, 2017 · d203238 · d203238
commit d203238
Show file tree

Hide file tree

Showing 17 changed files with 2,510 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,22 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+package-lock.json
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/README.md b/README.md
diff --git a/package.json b/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "pokedex",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "react-paginate": "^4.4.3",
+    "react-redux": "^5.0.5",
+    "redux": "^3.7.1"
+  },
+  "devDependencies": {
+    "react-scripts": "1.0.10",
+    "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.2.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/src/actions/PageActions.js b/src/actions/PageActions.js
@@ -0,0 +1,29 @@
+import {
+  REQUEST_POKEMONS,
+  RECEIVE_POKEMONS
+} from '../constants/Pokemon'
+
+function requestPokemons(offset) {
+  return {
+    type: REQUEST_POKEMONS,
+    offset
+  }
+}
+
+function receivePokemons(offset, json) {
+  return {
+    type: RECEIVE_POKEMONS,
+    pokemons: json.results.map(pokemon => pokemon)
+  }
+}
+
+export function fetchPokemons(offset) {
+
+  return dispatch => {
+    dispatch(requestPokemons(offset))
+    return fetch(`https://pokeapi.co/api/v2/pokemon/?offset=${offset}`)
+      .then(response => response.json())
+      .then(json => dispatch(receivePokemons(offset, json)))
+  }
+
+}
diff --git a/src/components/Pokemon.js b/src/components/Pokemon.js
@@ -0,0 +1,15 @@
+import React from 'react'
+
+const Pokemon = ({ pokemon }) => (
+  <tr>
+    <td>
+      <img
+        src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png`}
+        alt="Pokemon"
+      />
+    </td>
+    <td>{pokemon.name}</td>
+  </tr>
+)
+
+export default Pokemon
diff --git a/src/components/Search.js b/src/components/Search.js
@@ -0,0 +1,16 @@
+import React from 'react'
+
+const Search = ({
+  onChange,
+  term
+}) => (
+  <input
+    className="user-input form-control"
+    type="text"
+    onChange={onChange}
+    value={term}
+    placeholder="Enter pokemon name..."
+  />
+)
+
+export default Search
diff --git a/src/components/SelectPokemon.js b/src/components/SelectPokemon.js
@@ -0,0 +1,17 @@
+import React from 'react'
+
+const SelectPokemon = ({ pokemon }) => (
+  <div className="col-sm-4 col-md-3 col-lg-2">
+    <div className="thumbnail">
+      <img
+        src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png`}
+        alt="Pokemon"
+      />
+      <div className="thumbnail-caption">
+        <h3>{pokemon.name}</h3>
+      </div>
+    </div>
+  </div>
+)
+
+export default SelectPokemon
diff --git a/src/constants/Pokemon.js b/src/constants/Pokemon.js
@@ -0,0 +1,2 @@
+export const REQUEST_POKEMONS = 'REQUEST_POKEMONS'
+export const RECEIVE_POKEMONS = 'RECEIVE_POKEMONS'
diff --git a/src/containers/App.js b/src/containers/App.js
@@ -0,0 +1,103 @@
+import React, { Component } from 'react'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import ReactPaginate from 'react-paginate'
+import Search from '../components/Search'
+import Pokemon from '../components/Pokemon'
+import * as pageActions from '../actions/PageActions'
+
+class App extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      term: '',
+      offset: 0
+    }
+
+    this.changeSearchTerm = this.changeSearchTerm.bind(this)
+    this.handlePageChange = this.handlePageChange.bind(this)
+  }
+
+  fetchPokemons() {
+    this.props.pageActions.fetchPokemons(this.state.offset)
+  }
+
+  componentDidMount() {
+    this.fetchPokemons()
+  }
+
+  changeSearchTerm(e) {
+    this.setState({ term: e.target.value })
+  }
+
+  handlePageChange(data) {
+    this.setState({ offset: data.selected * 20 }, () => {
+      this.fetchPokemons()
+    })
+  }
+
+  render() {
+    let { pokemons } = this.props.page
+    let searchString = this.state.term.trim().toLowerCase()
+
+    if (searchString.length > 0) {
+      pokemons = pokemons.filter(pokemon => {
+        return pokemon.name.toLowerCase().match(searchString)
+      })
+    }
+
+    pokemons = pokemons.map((pokemon, index) => {
+      pokemon.id = parseInt(pokemon.url.replace('http://pokeapi.co/api/v2/pokemon/', ''), 10)
+      return <Pokemon pokemon={pokemon} key={index} />
+    })
+
+    return (
+      <div className="container-fluid">
+        <Search onChange={this.changeSearchTerm} term={this.state.value} />
+        <div className="row">
+          <div className="col-sm-8 col-md-9 col-lg-10">
+            <table className="user-list table table-striped">
+              <thead>
+                <tr>
+                  <th>Image</th>
+                  <th>Name</th>
+                </tr>
+              </thead>
+              <tbody>
+                {
+                  this.props.page.isFetched
+                  ?
+                  <tr><td>Загрузка...</td></tr>
+                  :
+                  pokemons
+                }
+              </tbody>
+            </table>
+            <ReactPaginate
+              pageCount={41}
+              pageRangeDisplayed={3}
+              marginPagesDisplayed={3}
+              onPageChange={this.handlePageChange}
+              containerClassName="pagination"
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+function mapStateToProps(state) {
+  return {
+    page: state.page
+  }
+}
+
+function mapDispatchToProps(dispatch) {
+  return {
+    pageActions: bindActionCreators(pageActions, dispatch)
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(App)
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,15 @@
+import React from 'react'
+import { render } from 'react-dom'
+import { Provider } from 'react-redux'
+import App from './containers/App'
+import './style/main.css'
+import configureStore from './store/configureStore'
+
+const store = configureStore()
+
+render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  document.getElementById('root')
+)
diff --git a/src/reducers/index.js b/src/reducers/index.js
@@ -0,0 +1,6 @@
+import { combineReducers } from 'redux'
+import page from './page'
+
+export default combineReducers({
+  page
+})
diff --git a/src/reducers/page.js b/src/reducers/page.js
@@ -0,0 +1,31 @@
+import {
+  REQUEST_POKEMONS,
+  RECEIVE_POKEMONS
+} from '../constants/Pokemon'
+
+const initialState = {
+  isFetched: false,
+  pokemons: []
+}
+
+export default function pokemon(state = initialState, action) {
+
+  switch (action.type) {
+    case REQUEST_POKEMONS:
+      return {
+        ...state,
+        isFetched: true
+      }
+
+    case RECEIVE_POKEMONS:
+      return {
+        ...state,
+        pokemons: action.pokemons,
+        isFetched: false
+      }
+
+    default:
+      return state
+  }
+
+}
diff --git a/src/store/configureStore.js b/src/store/configureStore.js
@@ -0,0 +1,17 @@
+import { createStore, applyMiddleware } from 'redux'
+import thunkMiddleware from 'redux-thunk'
+import { createLogger } from 'redux-logger'
+import rootReducer from '../reducers'
+
+const loggerMiddleware = createLogger()
+
+export default function configureStore() {
+  return createStore(
+    rootReducer,
+    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
+    applyMiddleware(
+      thunkMiddleware,
+      loggerMiddleware
+    )
+  )
+}
diff --git a/src/style/main.css b/src/style/main.css
@@ -0,0 +1,20 @@
+.user-input {
+  margin-top: 15px;
+  margin-bottom: 15px;
+}
+
+.user-list {
+  border: 1px solid #ddd;
+}
+
+.break {
+  position: relative;
+  float: left;
+  padding: 6px 12px;
+  margin-left: -1px;
+  line-height: 1.42857143;
+  color: #337ab7;
+  text-decoration: none;
+  background-color: #fff;
+  border: 1px solid #ddd;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export const REQUEST_POKEMONS = 'REQUEST_POKEMONS'
		export const RECEIVE_POKEMONS = 'RECEIVE_POKEMONS'