-
-
Notifications
You must be signed in to change notification settings - Fork 80
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Friends app #457
base: main
Are you sure you want to change the base?
Friends app #457
Conversation
.then(function (data) { | ||
persons = data.results; | ||
displayList = persons; | ||
displayCards(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Single responsibility - your functions should do only one job. As an example function in which you fetch users should only fetch them and not render, transform or process them in other ways. All these things should be done in another place, outside your function. The same applied to the sort function, which usually does all types of sorting 😉
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I would be honest, but i didnt find the way how to delete this displayCards() from this piece of code, so i just renamed function. I was trying to put this displayCards() in document.addEventListener('DOMContentLoaded', function () , but it didnt work...
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tip - you should use then
in special place ;)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yep, this I understood, but where:)
Ok, I will try to figure out!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
"in special place" 😄
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ok, I think I found out how to do it!
First of all - I tried to use one more promise inside of document.addEventListener('DOMContentLoaded', function (){...}
, but it didnt work, i dont know why. Then I decided to use async
and seems it worked!
displayList = displayList.sort((a, b) => a.dob.age - b.dob.age); | ||
break; | ||
case 'ageHigh': | ||
displayList = displayList.sort((b, a) => a.dob.age - b.dob.age); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- Why you need assigning to
displayList
? - Same function as at line 81. DRY
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Also, please check this comment #449 (comment)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you!
Yes, really, i dont need this 'assigning '!
Ok, I will read this comments.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm sorry, Did I understand correctly - I should remake this part of code (this switch is too long and it's not "Single responsibility"):
if (radio) {
switch (radio.id) {
case 'genderAll':
displayList = persons;
break;
case 'genderMale':
displayList = persons.filter(el => el.gender === 'male');
break;
case 'genderFemale':
displayList = persons.filter(el => el.gender === 'female');
break;
case 'nameAsc':
displayList.sort((b, a) => a.name.last > b.name.last ? -1 : 1);
break;
case 'nameDesc':
displayList.sort((b, a) => a.name.last < b.name.last ? -1 : 1);
break;
case 'ageLow':
displayList.sort((a, b) => a.dob.age - b.dob.age);
break;
case 'ageHigh':
displayList.sort((b, a) => a.dob.age - b.dob.age);
break;
}
With adding functions for sorting.
BTW, Should I delete "long switch" and make few different "addEventListneres" for each case of switch or it will be very ig load on site? (sorry may be for stupid questions, but i just want to understand)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- Yes, you should delete the long switch
- You can have a listener on the form and listen to
change
event. Or you can separate listeners between fieldsets. Up to you
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Huh! Unbelievable, but seems I did it!:)
I dodnt know why, but this refactoring took me quit long time.
Basically, I think. It because I start fixing everything at one time... it was big mistake - nothing work and could understand why. So, then I started do it step-by-step, like You teaching us:) Refactored sort logic, then long switch.
Sorry, may be It's not necessary to write it here, but whom else can i write it;))
Ok, so now code looks better, I hope:)
@SamVal007 if you think your changes address the reviewer's comments please re-request review |
I'm sorry that I'm out of deadline. |
- Add functions for sorting (more structural logic for sorting) - Changed long switch to more compact logic (with using addEventListener('change', ({target: radioButton}))
|
||
document.addEventListener('DOMContentLoaded', function () { | ||
makeFriendList(); | ||
//displayCards(); //I dodnt know why, but if put displayCards() here -> it doesnt work |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
So you need to found out :D Or you need my help?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It seems, now it works as we want with single responsibility!
But I watched one video about pure functions and understood, that this my code is smelling a little)) Right?:)
I should make it without using GLOBAL arrays let persons = []; let displayList = [];
. Right?
displayCards(); | ||
}) | ||
|
||
btn.addEventListener('click', () =>{ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Dnt us shrtcts n nms :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Didnt get, what?:)
"Dont use short carts for names"? Right?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Now you understand
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ok, Thanks!:)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@zonzujiro
What do you think about other places? Is there everything good?
|
||
let persons = []; | ||
let displayList = []; | ||
const putPersonsInDisplayList = () => {displayList = persons;}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Function redundant, IMO
Sorry, man. I'm with covid right now. I will return to PR in a week or so. If not - pls ping me in Telegram :) |
OMG, I'm sorry, I didn't know.
Wish You become Healthy as fast as it is possible.
PS. No worries about PR! It doesn't matter right now!
…On Sun, Apr 11, 2021 at 3:50 PM Ivan Tytarenko ***@***.***> wrote:
Sorry, man. I'm with covid right now.
I will return to PR in a week or so.
If not - pls ping me in Telegram :)
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#457 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ASDPGHGSXMY6P5L6HXZ56TDTIGLJ7ANCNFSM4XY4JNTQ>
.
--
С ув. Самойленко В.
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You should pay more attention to code style :) Redundant empty lines, missing curly brackets, etc.
if (value === 'genderAll') putPersonsInDisplayList() | ||
else{ | ||
displayList = persons.filter(el => el.gender === value); | ||
} | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Broken syntax. Avoid such mistakes :)
Add brackets and use prettier
makeFriendList() | ||
.then(() => { | ||
displayCards(); | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
makeFriendList() | |
.then(() => { | |
displayCards(); | |
}); | |
makeFriendList().then(displayCards); |
}); | ||
|
||
SEARCH_FIELD.addEventListener('input', function () { | ||
let searchStr = ''; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No need in Str
in variable. Type of data is redundant info in variable name. Please, find another one.
MENU_FORMS.addEventListener('change', ({target: radioButton}) => { | ||
putPersonsInDisplayList(); | ||
|
||
if (radioButton.name === 'genderField') filtrByGender(radioButton.value); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sometimes you use brackets, sometimes don't.
You should pick one approach and use it :)
if (radioButton.name === "nameField") { | ||
nameSorters[radioButton.value](); | ||
} | ||
|
||
if (radioButton.name === "ageField") { | ||
ageSorters[radioButton.value](); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ageSorters[radioButton.name]()
?
|
||
const ageSorters = { | ||
ageLow: () => persons.sort((a, b) => compareAge(b, a)), | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Redundant empty line
#Friends_APP
demo
codebase
Please, review.