Refactoring Code After CodeReview

Thank you @kristianhasselknippe

Author: franzsilva

Components/Header.ux

@@ -1,4 +1,4 @@
-<Grid ux:Class="PokeDex.Header" Height="50" Dock="Top" Padding="10">
+<Grid ux:Class="PokeDex.Header" Height="50" Padding="10">
 	<bool ux:Property="ShowBack" />
 	<string ux:Property="Title" />
 	<WhileTrue Value="{Property ShowBack}">

Components/PokemonCard.ux

@@ -1,7 +1,7 @@
  <DockPanel ux:Class="PokeDex.PokemonCard" Height="120" Margin="10" >
  	<string ux:Property="PokemonName" />
  	<string ux:Property="PokemonImage" />
- 	<Panel DockPanel.Dock="Top" Margin="10" Height="30">
+ 	<Panel Dock="Top" Margin="10" Height="30">
 
  		<StackPanel>
  			<Rectangle Layer="Background" CornerRadius="10" Fill="#fff">

MainView.ux

@@ -1,13 +1,11 @@
 <App>
     <iOS.StatusBarConfig Style="Light" />
     <Android.StatusBarConfig Color="#FA5858" />
-    <FileImageSource File="Assets/arrow.png"   ux:Key="Arrow"/>
-
+    
     <Router ux:Name="router" />
-
     <ClientPanel>
-        <Navigator DefaultTemplate="home">
-            <HomePage ux:Template="home" router="router" />
+        <Navigator DefaultTemplate="AllPokemon">
+            <AllPokemon ux:Template="AllPokemon" router="router" />
             <ViewPokemon ux:Template="view" router="router" />
         </Navigator>
     </ClientPanel>

Modules/Backend.js

@@ -1,24 +1,25 @@
 var Utility = require("./Utility");
+
 var Globals = require("./Globals");
 
-function getPokemons(offset){
+function getAllPokemon(offset){
 	limit = Globals.pageSize;
 	offset = !!offset ? offset : 0;
 
 	return fetch('http://pokeapi.co/api/v2/pokemon/?limit='+limit+'&offset='+offset)
-	.then(function(response) { return response.json(); })
-	.then(function(responseObject){ 
-	    var pokemons = [];
-	    for (var i = 0; i < responseObject.results.length; i++) {
-	        var newPokemonObject = responseObject.results[i];
-	        var pokemonId = offset+ i + 1
-	        newPokemonObject.id = pokemonId;
-	        newPokemonObject.pokemonImage = 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/' + (pokemonId) +'.png';
-	        newPokemonObject.name = Utility.Capitalize(newPokemonObject.name);
-	        pokemons.push(newPokemonObject);
-	    }
-		return pokemons;
-	});
+		.then(function(response) { return response.json(); })
+			.then(function(responseObject){ 
+			    var AllPokemon = [];
+			    for (var i = 0; i < responseObject.results.length; i++) {
+			        var newPokemonObject = responseObject.results[i];
+			        var pokemonId = offset+ i + 1;
+			        newPokemonObject.id = pokemonId;
+			        newPokemonObject.pokemonImage = 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/' + (pokemonId) +'.png';
+			        newPokemonObject.name = Utility.Capitalize(newPokemonObject.name);
+			        AllPokemon.push(newPokemonObject);
+			    }
+				return AllPokemon;
+			});
 }
 
 
@@ -27,15 +28,15 @@ function getPokemons(offset){
 function getPokemon(id){
 
 	return fetch('http://pokeapi.co/api/v2/pokemon/'+id)
-	.then(function(response) { return response.json(); })
-	.then(function(responseObject){ 
-		return responseObject;
-	});
+		.then(function(response) { return response.json(); })
+			.then(function(responseObject){ 
+				return responseObject;
+			});
 }
 
 
 
 module.exports = {
-	getPokemons: getPokemons,
+	getAllPokemon: getAllPokemon,
 	getPokemon: getPokemon
 };

Modules/Globals.js

@@ -1,3 +1,3 @@
 module.exports = {
 	pageSize: 20
-}
+};

Modules/InfiniteScrollPokemon.js

@@ -0,0 +1,59 @@
+var Observable = require("FuseJS/Observable");
+
+var Backend = require("../Modules/Backend");
+
+var Globals = require("../Modules/Globals");
+
+var data = Observable();
+
+var loadingNewFeed = Observable(true);
+
+var appendingData = Observable(false);
+
+var paginationOffset = 0;
+
+var isBusy = Observable(false);
+
+fetchPokemon();
+
+function fetchPokemon(appendData) {
+	if (isBusy.value === true)
+		return;
+	isBusy.value = true;
+	appendingData.value = appendData;
+	Backend.getAllPokemon(paginationOffset)
+	    .then(function(responseObject) {
+	    	if (!!appendData) {
+	    		var items = data.toArray();
+	    		for (var i = 0; i < responseObject.length; i++) {
+	    			items.push(responseObject[i]);
+	    		}
+	    		responseObject = items;
+	    		appendingData.value = false;
+	    	}
+	    	data.replaceAll(responseObject);
+	    	isBusy.value = false;
+	    	loadingNewFeed.value = false;
+
+	    	paginationOffset = paginationOffset + Globals.pageSize;
+
+	    })
+	    .catch(function(error) {
+	        console.log("Couldn't get pokemons: " + error);
+	    });  
+	}
+
+
+
+function goToPokemon(arg) {
+    var pokemon = arg.data;
+    router.push("view", pokemon);
+}
+
+module.exports = {
+    allPokemon: data,
+    goToPokemon: goToPokemon,
+    appendingData: appendingData,
+    loadingNewFeed: loadingNewFeed,
+    fetchAppendData: function() { fetchPokemon(true); }
+};

Pages/AllPokemon.js

@@ -1,10 +1,10 @@
-<Page ux:Class="HomePage">
+<Page ux:Class="AllPokemon">
 
 	<Router ux:Dependency="router" />
 
 	<DockPanel>
-		<JavaScript File="AllPokemons.js" />
-		<PokeDex.Header ColumnCount="1" Background="#FA5858" Title="POKEDEX" ShowBack="false" />
+		<JavaScript File="AllPokemon.js" />
+		<PokeDex.Header ColumnCount="1" Dock="Top" Color="#FA5858" Title="POKEDEX" ShowBack="false" />
 		<WhileTrue Value="{loadingNewFeed}">
 			<StackPanel Alignment="Center">
 				<Text Value="Loading..."></Text>
@@ -17,7 +17,7 @@
 				</WhileScrollable>
 				<DockPanel>
 					<Grid ColumnCount="2">
-						<Each Items="{pokemons}">
+						<Each Items="{allPokemon}">
 							<PokeDex.PokemonCard PokemonName="{name}" PokemonImage="{pokemonImage}" Clicked="{goToPokemon}" />
 						</Each>
 					</Grid>

Pages/AllPokemons.ux renamed to Pages/AllPokemon.ux

@@ -1,16 +1,13 @@
 var Observable = require("FuseJS/Observable");
-var Backend = require("Modules/Backend");
-var Utility = require("Modules/Utility");
-var pokemon = Observable();
-this.Parameter.onValueChanged(module,function(param) {
-	pokemon.value = param;
-	
-});
 
+var pokemon = this.Parameter.map(function(p){
+	return p;
+});
 
 function cancel() {
 	router.goBack();
 }
+
 module.exports = {
 	pokemon: pokemon,
 	cancel: cancel