unnecessary comments and simplified pokemon table rendering

vinnymac · Jan 16, 2017 · 963e8c6 · 963e8c6
1 parent d114df2
commit 963e8c6
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 74 deletions.
diff --git a/app/screens/Table/components/PokemonTable.js b/app/screens/Table/components/PokemonTable.js
@@ -12,7 +12,6 @@ class PokemonTable extends React.PureComponent {
   static displayName = 'PokemonTable'
 
   static propTypes = {
-    speciesIndex: PropTypes.number,
     sortBy: PropTypes.string,
     sortDir: PropTypes.string,
     sortPokemonBy: PropTypes.func.isRequired,
@@ -35,7 +34,6 @@ class PokemonTable extends React.PureComponent {
       onCheckedChange,
       toggleFavoritePokemon,
       powerUpPokemon,
-      speciesIndex,
       sortPokemonBy,
       sortDir,
       sortBy,
@@ -48,7 +46,7 @@ class PokemonTable extends React.PureComponent {
         sortBy={sortBy}
         sortDir={sortDir}
         sortPokemonBy={sortPokemonBy}
-        speciesIndex={speciesIndex}
+        pokemonId={species.pokemon_id}
         species={species}
         onCheckAll={onCheckAll}
       />

diff --git a/app/screens/Table/components/PokemonTableHead.js b/app/screens/Table/components/PokemonTableHead.js
@@ -6,7 +6,7 @@ class PokemonTableHead extends React.PureComponent {
   static displayName = 'PokemonTableHead'
 
   static propTypes = {
-    speciesIndex: PropTypes.number,
+    pokemonId: PropTypes.number,
     sortBy: PropTypes.string,
     sortDir: PropTypes.string,
     sortPokemonBy: PropTypes.func.isRequired,
@@ -117,11 +117,11 @@ class PokemonTableHead extends React.PureComponent {
 
   handleSortPokemon = (sortBy) => {
     const {
-      speciesIndex,
+      pokemonId,
       sortPokemonBy
     } = this.props
 
-    sortPokemonBy(sortBy, speciesIndex)
+    sortPokemonBy(sortBy, pokemonId - 1)
   }
 
   getSortDirectionClassName = (key) => {

diff --git a/app/screens/Table/components/PokemonTableWrapper.js b/app/screens/Table/components/PokemonTableWrapper.js
@@ -49,67 +49,35 @@ class PokemonTableWrapper extends React.Component {
 
   getSpeciesBody = () => {
     const {
-      // filterBy,
-      // showSpeciesWithZeroPokemon,
       speciesState,
       pokemon,
       monsters,
     } = this.props
 
-    // Flatten all species of pokemon into one giant array
-    // const pokemon = monsterSpecies.reduce((a, b) => a.concat(b.pokemon), [])
-
     const specie = monsters.species[0]
 
-    // const pokemonState = monsterSpecies.reduce((a, b) => Object.assign(a, speciesState[b.pokemon_id].pokemonState), {})
-
-    // console.log(pokemonState)
-
     const {
-      // collapsed,
-      // pokemonState,
       checkAll,
       sortBy,
       sortDir
     } = speciesState[specie.pokemon_id]
 
-    // console.log(specie, pokemon) // , pokemonState)
-
-    // return monsterSpecies.map((specie, i) => {
-    //   // if (!showSpeciesWithZeroPokemon && specie.count < 1) {
-    //   //   return null
-    //   // }
-    //   if (String(specie.name).toLowerCase().indexOf(filterBy) === -1) {
-    //     return null
-    //   }
-    //
-    //   const {
-    //     // collapsed,
-    //     pokemonState,
-    //     checkAll,
-    //     sortBy,
-    //     sortDir
-    //   } = speciesState[specie.pokemon_id]
-    //
-    // })
-    return this.getPokemonTable(specie, pokemon, 0, sortBy, sortDir, speciesState, checkAll)
+    return (
+      <PokemonTable
+        sortPokemonBy={this.sortPokemonBy}
+        sortBy={sortBy}
+        sortDir={sortDir}
+        species={specie}
+        pokemon={pokemon}
+        getPokemonState={(pid) => speciesState[pid].pokemonState}
+        checkAll={checkAll}
+        onCheckedChange={this.handleCheckedChange}
+        onCheckAll={this.handleCheckAll}
+        key={`child${specie.pokemon_id}`}
+      />
+    )
   }
 
-  getPokemonTable = (species, pokemon, index, sortBy, sortDir, speciesState, checkAll) =>
-    <PokemonTable
-      sortPokemonBy={this.sortPokemonBy}
-      sortBy={sortBy}
-      sortDir={sortDir}
-      species={species}
-      pokemon={pokemon}
-      speciesIndex={index}
-      getPokemonState={(pid) => speciesState[pid].pokemonState}
-      checkAll={checkAll}
-      onCheckedChange={this.handleCheckedChange}
-      onCheckAll={this.handleCheckAll}
-      key={`child${species.pokemon_id}`}
-    />
-
   getSortDirectionClassName = (key) => {
     const {
       sortBy,

diff --git a/app/screens/Table/components/Species.js b/app/screens/Table/components/Species.js
@@ -126,7 +126,7 @@ class Species extends React.Component {
       speciesState
     } = this.props
 
-    return monsterSpecies.map((specie, i) => {
+    return monsterSpecies.map((specie) => {
       if (!showSpeciesWithZeroPokemon && specie.count < 1) {
         return null
       }
@@ -149,7 +149,7 @@ class Species extends React.Component {
         >
           <td
             className={specie.count > 0 ? 'details-control' : ''}
-            onClick={this.handleCollapse.bind(this, specie)}
+            onClick={this.createCollapseHandler(specie)}
           />
           <td>{specie.pokemon_id}</td>
           <td className="sprites">
@@ -163,31 +163,32 @@ class Species extends React.Component {
           <td>{specie.count}</td>
           <td>{specie.candy}</td>
           <td>{specie.evolves}</td>
-        </tr>, this.getPokemonTable(specie, i, sortBy, sortDir, collapsed, pokemonState, checkAll)
+        </tr>, this.getPokemonTable(specie, sortBy, sortDir, collapsed, pokemonState, checkAll)
       ])
     })
   }
 
-  getPokemonTable = (species, index, sortBy, sortDir, collapsed, pokemonState, checkAll) => {
+  getPokemonTable = (species, sortBy, sortDir, collapsed, pokemonState, checkAll) => {
     if (collapsed) return null
 
-    return (<tr className="child" key={`sub${species.pokemon_id}`}>
-      <td colSpan="7">
-        <PokemonTable
-          sortPokemonBy={this.sortPokemonBy}
-          sortBy={sortBy}
-          sortDir={sortDir}
-          species={species}
-          pokemon={species.pokemon}
-          speciesIndex={index}
-          getPokemonState={() => pokemonState}
-          checkAll={checkAll}
-          onCheckedChange={this.handleCheckedChange}
-          onCheckAll={this.handleCheckAll}
-          key={`child${species.pokemon_id}`}
-        />
-      </td>
-    </tr>)
+    return (
+      <tr className="child" key={`sub${species.pokemon_id}`}>
+        <td colSpan="7">
+          <PokemonTable
+            sortPokemonBy={this.sortPokemonBy}
+            sortBy={sortBy}
+            sortDir={sortDir}
+            species={species}
+            pokemon={species.pokemon}
+            getPokemonState={() => pokemonState}
+            checkAll={checkAll}
+            onCheckedChange={this.handleCheckedChange}
+            onCheckAll={this.handleCheckAll}
+            key={`child${species.pokemon_id}`}
+          />
+        </td>
+      </tr>
+    )
   }
 
   getSortDirectionClassName = (key) => {
@@ -223,7 +224,7 @@ class Species extends React.Component {
     return { sortBy, sortDir }
   }
 
-  handleCollapse = (specie) => {
+  createCollapseHandler = (specie) => () => {
     this.props.collapseBySpecies(specie)
   }