From a8d41043359b6fd38c3942301b927660d5ddc1d2 Mon Sep 17 00:00:00 2001 From: Konstantin M Date: Wed, 6 Dec 2017 11:33:07 -0800 Subject: [PATCH 1/7] :art: Refactor ES5 and ES6 syntax Change getFirstName and getImageUrl function definitions syntax to match other function definitions (ES5) --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 508ebb3d..cbf2edc3 100644 --- a/index.html +++ b/index.html @@ -128,13 +128,13 @@ return person.lastName; } - const getFirstName = (person) => { + function getFirstName(person) { return person.firstName; }; // headshot URLs are scheme relative // // prepend http: to prevent invalid schemes like file:// or uri:// - const getImageUrl = (person) => { + function getImageUrl(person) { return `http:${person.headshot.url}`; }; From d8db584b40c40d2f2a903f06f71c2a4c82f994c3 Mon Sep 17 00:00:00 2001 From: Konstantin M Date: Wed, 6 Dec 2017 11:37:59 -0800 Subject: [PATCH 2/7] :fire: Fix shuffleList implementation and improve readability Fix: slice function should take 0 instead of 1. Readability: define (without initialization) variables on a separate line (tmp, j, i) on top of current scope Readability: define AND initialize variables on a separate line (len, result) Fix: set len to list.length instead of list.length - 1. This way we are not leaving the element at last index behind Structure: change loop conditions a bit, functionality stays the same Fix: modify the copy of the original list, not the original list itself --- index.html | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index cbf2edc3..6f45540e 100644 --- a/index.html +++ b/index.html @@ -143,15 +143,16 @@ */ function shuffleList(list) { // Make a copy & don't mutate the passed in list - let result = list.slice(1); + let tmp, j, i; + let result = list.slice(0); + let len = list.length; - let tmp, j, i = list.length - 1 - for (; i > 0; i -= 1) { + for (i = 0; i < len; i++) { j = Math.floor(Math.random() * (i + 1)); - tmp = list[i]; - list[i] = list[j]; - list[j] = tmp; + tmp = result[i]; + result[i] = result[j]; + result[j] = tmp; } return result; From 13fe5a1c904baf367f78a1c8eaf9f5607a47a7e9 Mon Sep 17 00:00:00 2001 From: Konstantin M Date: Wed, 6 Dec 2017 11:39:54 -0800 Subject: [PATCH 3/7] :art: Refactor ES5 and ES6 syntax Readability: use ES5 syntax for a function parameter (since that's what we've been using earlier) --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 6f45540e..b47784bc 100644 --- a/index.html +++ b/index.html @@ -164,7 +164,7 @@ * searching for. */ function filterByName(searchForName, personList) { - return personList.filter((person) => { + return personList.filter(function(person) { return person.firstName === searchForName || person.lastName === searchForName; }); } From 682f400432f527820e0f48d41ad096512e6403f8 Mon Sep 17 00:00:00 2001 From: Konstantin M Date: Wed, 6 Dec 2017 11:50:29 -0800 Subject: [PATCH 4/7] :fire: Fix return value and slice argument, refactor syntax Fix: slice function should take 0 instead of 1 Structure: sort() takes ES5 anonymous function (ES5) Structure: simplify if conditions Fix: last return statement should be 0 --- index.html | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index b47784bc..6ec0e026 100644 --- a/index.html +++ b/index.html @@ -189,18 +189,12 @@ function sortObjListByProp(prop) { return function(objList) { // Make a copy & don't mutate the passed in list - let result = objList.slice(1); + let result = objList.slice(0); - result.sort((a, b) => { - if (a[prop] < b[prop]) { - return -1; - } - - if (a[prop] > b[prop]) { - return 1; - } - - return 1; + result.sort(function(a, b) { + if (a[prop] < b[prop]) return -1; + if (a[prop] > b[prop]) return 1; + return 0; }); return result; From e7b8638c785bea782f731364acf1ac5d43ae2de3 Mon Sep 17 00:00:00 2001 From: Konstantin M Date: Wed, 6 Dec 2017 12:29:31 -0800 Subject: [PATCH 5/7] :fire: :tada: Add helper function, refactor ES5 to ES6 syntax Addition: add helper function sortByLastName that returns another function with lastName set as a sorting criterion Readability: rename sortByLastName to sortDescendingByLastName to better reflect the intention of code inside it Structure: call sortByLastName with reverse() inside sortDescendingByLastName --- index.html | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 6ec0e026..254bd3c0 100644 --- a/index.html +++ b/index.html @@ -201,10 +201,13 @@ }; } - const sortByFirstName = sortObjListByProp('firstName'); + const sortByFirstName = sortObjListByProp('firstName'); - const sortByLastName = (personList) => sortByFirstName(personList).reverse(); + const sortByLastName = sortObjListByProp('lastName'); + const sortDescendingByLastName = function(personList) { + return sortByLastName(personList).reverse(); + }; /*================================================== From 7cb1819f882055c409ed097ebc25041b698eb759 Mon Sep 17 00:00:00 2001 From: Konstantin M Date: Wed, 6 Dec 2017 13:07:41 -0800 Subject: [PATCH 6/7] :fire: Refactor getPersonList Readability: overall refactoring Structure: return fetch Promise object instead of Promise that wraps fetch Addition: return actual error instead of a not very descriptive Error! string --- index.html | 18 +++++------------- 1 file changed, 5 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index 254bd3c0..cecce0ab 100644 --- a/index.html +++ b/index.html @@ -101,22 +101,14 @@ * ... * ] */ + function getPersonList() { - return new Promise((resolve, reject) => { - fetch('https://willowtreeapps.com/api/v1.0/profiles') - .then(response => { - if (response.status !== 200) { - reject(new Error("Error!")); - } - - response.json().then(imageList => { - resolve(imageList); - }); - }); - }); + return fetch('https://willowtreeapps.com/api/v1.0/profiles') + .then(response => response.json()) + .then(imageList => { return imageList }) + .catch(error => { return error }) } - /*================================================== DATA TRANSFORMS From 5b4e933e55de44fa7f4212e62a532f4f1152085a Mon Sep 17 00:00:00 2001 From: Konstantin M Date: Wed, 6 Dec 2017 13:09:00 -0800 Subject: [PATCH 7/7] I don't have much experience with React, so it's very hard for me to make any suggestions without simply guessing. --- index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/index.html b/index.html index cecce0ab..49314eaf 100644 --- a/index.html +++ b/index.html @@ -207,6 +207,7 @@ ***************************************************/ + const Search = (props) => React.DOM.input({ type: 'input', onChange: props.onChange