Skip to content
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

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Friends app #457

wants to merge 7 commits into from

Conversation

SamVal007
Copy link
Contributor

#Friends_APP

demo
codebase

Please, review.

@boxdxnx boxdxnx added the Friends App Task 15: Friends App label Feb 17, 2021
Comment on lines 21 to 24
.then(function (data) {
persons = data.results;
displayList = persons;
displayCards();
Copy link
Member

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 😉

Copy link
Contributor Author

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...

Copy link
Member

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 ;)

Copy link
Contributor Author

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!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"in special place" 😄

Copy link
Contributor Author

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);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. Why you need assigning to displayList?
  2. Same function as at line 81. DRY

Copy link
Member

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)

Copy link
Contributor Author

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.

Copy link
Contributor Author

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)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. Yes, you should delete the long switch
  2. You can have a listener on the form and listen to change event. Or you can separate listeners between fieldsets. Up to you

Copy link
Contributor Author

@SamVal007 SamVal007 Feb 27, 2021

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:)

@zonzujiro zonzujiro self-assigned this Feb 19, 2021
@OleksiyRudenko
Copy link
Member

@SamVal007 if you think your changes address the reviewer's comments please re-request review

@SamVal007
Copy link
Contributor Author

I'm sorry that I'm out of deadline.
If you would be so kind, re-review it again, please .

- Add functions for sorting (more structural logic for sorting)
- Changed long switch to more compact logic  (with using addEventListener('change', ({target: radioButton}))
submissions/SamVal007/Friends_APP/script.js Outdated Show resolved Hide resolved
submissions/SamVal007/Friends_APP/script.js Outdated Show resolved Hide resolved

document.addEventListener('DOMContentLoaded', function () {
makeFriendList();
//displayCards(); //I dodnt know why, but if put displayCards() here -> it doesnt work
Copy link
Member

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?

Copy link
Contributor Author

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?

submissions/SamVal007/Friends_APP/script.js Outdated Show resolved Hide resolved
submissions/SamVal007/Friends_APP/script.js Outdated Show resolved Hide resolved
submissions/SamVal007/Friends_APP/script.js Show resolved Hide resolved
displayCards();
})

btn.addEventListener('click', () =>{
Copy link
Member

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 :)

Copy link
Contributor Author

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?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now you understand

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, Thanks!:)

Copy link
Contributor Author

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;};
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Function redundant, IMO

submissions/SamVal007/Friends_APP/script.js Outdated Show resolved Hide resolved
@zonzujiro
Copy link
Member

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 :)

@SamVal007
Copy link
Contributor Author

SamVal007 commented Apr 11, 2021 via email

Copy link
Member

@zonzujiro zonzujiro left a 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.

Comment on lines +84 to +88
if (value === 'genderAll') putPersonsInDisplayList()
else{
displayList = persons.filter(el => el.gender === value);
}

Copy link
Member

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

Comment on lines +92 to +95
makeFriendList()
.then(() => {
displayCards();
});
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
makeFriendList()
.then(() => {
displayCards();
});
makeFriendList().then(displayCards);

});

SEARCH_FIELD.addEventListener('input', function () {
let searchStr = '';
Copy link
Member

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);
Copy link
Member

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 :)

Comment on lines +109 to +115
if (radioButton.name === "nameField") {
nameSorters[radioButton.value]();
}

if (radioButton.name === "ageField") {
ageSorters[radioButton.value]();
}
Copy link
Member

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)),

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Redundant empty line

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Friends App Task 15: Friends App
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants