Friends app #95

AsaMitaka · 2022-08-08T14:10:32Z

Friends App

Demo |
Code

The code is submitted in a dedicated feature branch.

Only code files are submitted.

Please, review.

github-actions · 2022-08-13T06:47:44Z

Hey!

Congratulations on your PR! 😎😎😎

Please, be sure you haven't followed common mistakes.

Also, be aware, that if you would silently ignore this recommendation, a mentor can think that you are still working on fixes. And your PR will not be reviewed. 😒

yaripey

Hi! Great work for the first iteration. Let's fix some code.

For starters, you have a bug. Your sorts and filters don't persist. If you sort by name and then filter, sorting disappears. If you filter by a certain name and then filter by gender, it shows all women/men instead of only those that have the filtered name. Your right side of the app should always represent the results of the whole form state, not only the last clicked filter/sorting.

Secondly, from the UX perspective, your sorting should be displayed as radio buttons and it should be visible what sorting is selected at the current time.

Also, please check comments below.

yaripey · 2022-08-20T08:12:50Z

submissions/asaMitaka/FriendsApp/script.js

@@ -0,0 +1,177 @@
+const url = 'https://randomuser.me/api/?results=12';
+
+let aToZLast = document.querySelector('.sortedAtoZLast');


You almost exclusively use let variables while most of them should be const. Please review your code and change them.

yaripey · 2022-08-20T08:15:32Z

submissions/asaMitaka/FriendsApp/script.js

+const url = 'https://randomuser.me/api/?results=12';
+
+let aToZLast = document.querySelector('.sortedAtoZLast');
+let zToALast = document.querySelector('.sortedZtoALast');


There are a lot of querySelectors here. Instead, you can just get your form element and then access any field of the form at any time by its name.

So for example, you can have a couple of radiobuttons that share the same name, let's say "gender". Each of them should have a value attribute, like male and female for example.

So then you can just go

const form = document.querySelector("#myForm"); console.log(form.gender) // this should return male\female based on checked radiobutton

yaripey · 2022-08-20T08:18:26Z

submissions/asaMitaka/FriendsApp/script.js

+        resArr.push(arr[i]);
+    }
+    basicArr1 = resultArr.slice();
+    // basicArr2 = JSON.parse(JSON.stringify(resultArr));


Remove commented code from the final version.

yaripey · 2022-08-20T08:19:38Z

submissions/asaMitaka/FriendsApp/script.js

+let minNumber = document.querySelector('#minNumber');
+let maxNumber = document.querySelector('#maxNumber');
+
+let basicArr1 = [];


basicArr1 doesn't seem like a correct name. You should avoid using data type in the name of the variables, it indicates that the name is not descriptive enough. Like resultArr could just be friends or users. Plural name assumes that this is an array by itself.

yaripey · 2022-08-20T08:21:26Z

submissions/asaMitaka/FriendsApp/script.js

+}
+
+
+function saveUsers(arr, resArr) {


What does this function do, exactly?
It seems like it just copies the whole arr to resArr and then does the same for resultArr and basicArr1. It's not readable and seems like it doesn't make any sense at all. You can just save users right where you get your response from API.

yaripey · 2022-08-20T08:21:44Z

submissions/asaMitaka/FriendsApp/script.js

+
+async function getResponse(url) {
+    let response = await fetch(url);
+    let friendsArr = await response.json();


It's not even ar Arr, it's an object that has an array in the results field.

yaripey · 2022-08-20T08:22:11Z

submissions/asaMitaka/FriendsApp/script.js

+    // basicArr2 = JSON.parse(JSON.stringify(resultArr));
+}
+
+function renderItem(item) {


Misleading name, this function doesn't render anything, it returns an HTML code for an element.

yaripey · 2022-08-20T08:22:41Z

submissions/asaMitaka/FriendsApp/script.js

+    `;
+}
+
+aToZLast.addEventListener('click', sortedAtoZLast);


You should avoid using a lot of event listeners. This task can be done with just one that is placed on the whole form.

yaripey · 2022-08-20T13:35:22Z

The bug still persists. Write something in the search field, and make sure a user or several of them are found by the name. Then, click different sorts and filters. The user list starts to ignore what's written in the search field. And it shouldn't. As I said, at any point in time, the list of users on the right should represent the state of the form on the left.

yaripey

It seems that GitHub is still pending my review, so I'm going to post it here as a review. I saw your changes, but there are still bugs. Please make a lot of testing with your form. Sometimes First Name sorting just stops working, when you change age it doesn't really filter anything. And why is the label for age limits say Age 10 - 100? You can change it for whatever, not only 10\100? :)
Just some advice, maybe change your name filtration to filter through both first and last names? Have you seen anywhere separate filtrations for name and surname? You can just stitch them to one string and filter them like this.

yaripey

Hey, nice work. Let's improve it.

You have some trouble with setting clear responsibilities for your functions. If you have a function that says filterUsersByName, it should receive an array to filter and what to search for as parameters and return a filtered array in the end. And that's it. You then do anything you want with this array - sort it, render it, whatever, but this filterUsersByName function should not care, it has done its work already. You can make a separate function for rendering and just pass data to it. You have a lot of functions that do some action, like sorting AND they also render to DOM. Such approach invites mistakes and reduces code readability.

yaripey · 2022-08-28T13:28:39Z

submissions/asaMitaka/FriendsApp/index.html

+                </form>
+
+                <form class="asideBlock__items" name="minMax">
+                    <p>Age 10 - 100</p>


Why is it exactly 10 - 100?

yaripey · 2022-08-28T13:30:35Z

submissions/asaMitaka/FriendsApp/script.js

+        console.log(err);
+        resetPage();
+    }
+    let jsonData = await response.json();


yaripey · 2022-08-28T13:32:58Z

submissions/asaMitaka/FriendsApp/script.js

+let isSearch = false;
+
+async function getResponse(url) {
+    let response;


You don't need an outside variable for response. Do the .json() thing right in the try block. You have a faulty logic here, you're getting data from a response outside of try in any scenario, even if the data isn't there because you ignore the catch block. The only reason your program doesn't crash is that if there is an error you just reset your page, but let's not rely on that. If there is no data - don't extract it from the response.

yaripey · 2022-08-28T13:33:18Z

submissions/asaMitaka/FriendsApp/script.js

+    renderAllItemsToPage(friends);
+}
+
+function creatingDivItem(item) {


What div item? What is the content of this item? Use more descriptive names, please.

yaripey · 2022-08-28T13:35:47Z

submissions/asaMitaka/FriendsApp/script.js

+    `;
+}
+
+form.last.addEventListener('click', function(e) {


Don't rely on the fact that your form is the last one on the page. Reason: there are a lot of browser extensions that modify the dom, for example, Grammarly adds its script to the end of DOM to work. That is why we don't style by tags and don't do JS by tags - because you never know what could go wrong with the DOM structure. Give your form an ID and do a querlySelector.

yaripey · 2022-08-28T13:46:12Z

submissions/asaMitaka/FriendsApp/script.js

+    }
+}
+
+function renderMale() {


Your renderMale, renderFemale and renderAll functions are very similar. Please combine them.

yaripey · 2022-08-28T13:46:59Z

submissions/asaMitaka/FriendsApp/script.js

+    findByAge();
+}
+
+function findByAge() {


In terms of JS, find means 1 result and filter means multiple results.

yaripey · 2022-08-28T13:48:34Z

submissions/asaMitaka/FriendsApp/script.js

+form.search.search.addEventListener('input', searchFunc);
+
+function searchFunc() {
+    isSearch = true;


You don't need a variable to track if there is something in the input. Call this function every time something changes, just don't do anything here if the input is empty.

yaripey · 2022-08-28T13:49:34Z

submissions/asaMitaka/FriendsApp/script.js

+    isSearch = true;
+    let val = form.search.search.value.toLowerCase();
+    if (val && val.length > 0) {
+        content.innerHTML = '';


Why is this here? It's a searching function, it should return an array of users that match search input, not do things in the DOM.

yaripey · 2022-08-28T13:51:12Z

submissions/asaMitaka/FriendsApp/script.js

+
+    content.innerHTML = '';
+
+    let acc = '';


Instead of creating a string of elements, it would be better to use the map method and create an array of elements, just join them before rendering. This would allow you to manipulate this array in the future if needed.

yaripey

You have a bug now, if you select any gender, even the one that is already selected your sorting drops. Also, what happened to the name search and age filtration?

yaripey · 2022-09-04T14:14:51Z

submissions/asaMitaka/FriendsApp/index.html

+</head>
+<body>
+    <div class="container">
+        <div class="header">


Why did you go away from semantic header and footer tags?

yaripey · 2022-09-04T14:17:39Z

submissions/asaMitaka/FriendsApp/script.js

+const data = (url) => fetch(url)
+    .then(handleErrors)
+    .then(res => res.json())
+    .then(res => res.results)


Getting a property from an object is not an asynchronous task, you don't need another .then after this one.

yaripey · 2022-09-04T14:20:03Z

submissions/asaMitaka/FriendsApp/script.js

@@ -0,0 +1,87 @@
+const url = 'https://randomuser.me/api/?results=12';
+const content = document.querySelector('.articleBlock');
+const form = document.forms;


Why do you have 2 forms? You should use 1 form and get it by id or something, don't rely on document.forms.

yaripey · 2022-09-04T14:21:15Z

submissions/asaMitaka/FriendsApp/script.js

+
+    switch(id) {
+        case 'ageMore':
+            friendsCopy = friendsCopy.sort((a, b) => a.dob.age - b.dob.age);


Look at the functions that you use for sorting. They are identical, except you change parameter order. Maybe abstract it to not repeat yourself.

yaripey · 2022-09-04T14:21:45Z

submissions/asaMitaka/FriendsApp/script.js

+        case 'lastZToA':
+            friendsCopy = friendsCopy.sort((a, b) => a.name.last !== b.name.last ? a.name.last > b.name.last ? -1 : 1 : 0);
+            break;
+        case 'male':


This is filtering, it should not belong to the sorting function.

yaripey · 2022-09-04T14:22:27Z

submissions/asaMitaka/FriendsApp/script.js

+    content.innerHTML = acc;
+}
+
+data(url);


Add empty lines at the end of all files.

…d filterBySearch, add init

yaripey

Please check comments below.

yaripey · 2022-09-06T14:21:15Z

submissions/asaMitaka/FriendsApp/index.html

+                    </div>
+                </form>
+
+                <form name="gender" id="genderForm">


You're still using separate forms. It makes your code more complicated in the JS. Why not tie it up in one form?

yaripey · 2022-09-06T14:22:25Z

submissions/asaMitaka/FriendsApp/script.js

+    }
+}
+
+function filterBy(id, usersToFilter) {


I believe the only id you have there is somehow connected with gender, so filterBy is actually filterByGender.

yaripey · 2022-09-06T14:24:21Z

submissions/asaMitaka/FriendsApp/script.js

+}
+
+function filterBy(id, usersToFilter) {
+    switch(id) {


You can shorten this switch like this:

switch(id) { case 'male': case 'female': usersToFilter = userstoFilter.filter(item => item.gender === id); break; case 'all': ... }

yaripey · 2022-09-06T14:25:52Z

submissions/asaMitaka/FriendsApp/script.js

+            usersToFilter = usersToFilter.filter(item => item.gender === 'female');
+            break;
+        case 'all':   
+            usersToFilter = [...friends];


First of all, it would be more readable to create a new variable, something like filteredUsers in the beginning of this function to store the returned result. Secondly, if you're getting this from friends what's the point of passing some array in the function argument?

yaripey · 2022-09-06T14:26:19Z

submissions/asaMitaka/FriendsApp/script.js

+    return a.dob.age - b.dob.age;
+}
+
+function sortAlph(a, b) {


sortByName? And sortByAge

yaripey · 2022-09-06T14:28:41Z

submissions/asaMitaka/FriendsApp/script.js

+let friends = [];
+let friendsCopy = [];
+
+const data = (url) => fetch(url)


yaripey · 2022-09-08T14:13:56Z

Great work!

iiziumov added 2 commits August 8, 2022 16:53

js core code

24f2253

added friends-app

055be7a

boxdxnx added the task-Friends label Aug 8, 2022

zonzujiro added task-Friends and removed task-Friends labels Aug 13, 2022

remove unnecessary file from friends app directory

64e1e2e

yaripey reviewed Aug 20, 2022

View reviewed changes

yaripey self-assigned this Aug 20, 2022

fixed func, fixed css, fixed variable names, func names

1a3f727

AsaMitaka requested a review from yaripey August 20, 2022 12:59

fixed search func, fixed findByAge func

23ab608

yaripey reviewed Aug 21, 2022

View reviewed changes

fix func findByAge

b261928

AsaMitaka requested a review from yaripey August 22, 2022 17:02

yaripey requested changes Aug 28, 2022

View reviewed changes

rewrite functions, fetch, fixex css styles, fixed html

2bf8877

AsaMitaka requested a review from yaripey August 29, 2022 16:06

yaripey requested changes Sep 4, 2022

View reviewed changes

rewrite render logic, add filterState, rewrite filterBy and sortBy an…

466171d

…d filterBySearch, add init

AsaMitaka requested a review from yaripey September 4, 2022 20:15

yaripey requested changes Sep 6, 2022

View reviewed changes

rewrite function names, rewrite switch case in filterByGender func

f1b6488

AsaMitaka requested a review from yaripey September 7, 2022 13:22

yaripey merged commit f743436 into kottans:main Sep 8, 2022

		@@ -0,0 +1,177 @@
		const url = 'https://randomuser.me/api/?results=12';

		let aToZLast = document.querySelector('.sortedAtoZLast');

Friends app #95

Friends app #95

Conversation

AsaMitaka commented Aug 8, 2022

Friends App

github-actions bot commented Aug 13, 2022

yaripey left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yaripey commented Aug 20, 2022

yaripey left a comment

Choose a reason for hiding this comment

yaripey left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yaripey left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yaripey left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yaripey commented Sep 8, 2022