-
Notifications
You must be signed in to change notification settings - Fork 0
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
Project 9 - First Submission #1
base: main
Are you sure you want to change the base?
Conversation
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.
Dear Natahniel, (Please, expand the general comment ↓)
Unfortunately I have to reject the project:
- The avatar form is not validated https://disk.yandex.ru/i/qeJW5epu1Plp_Q
- When I change the avatar the page reloads
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.
Dear Natahniel, (Please, expand the general comment ↓)
Please, scroll down the page on github to see my remarks right in the code
Good job but there are some remarks:
validation.js
is not needed anymore- The avatar popup doesn't close after successful changing of the avatar
- When I remove 3 cards in a row there are cought errors https://disk.yandex.ru/i/QwLMnfWHFMx3vg
- According to the task you need to change submit buttons text (
Saving…
) while waiting for the server response. And the user should see it. - See here https://disk.yandex.ru/i/HRydRGRU1Zsu7Q
popupWithConfirmation.js
should be in UpperCase like the other files with classes - According to the task you need to pass full
headers
into the constructor ofApi
. See here https://disk.yandex.ru/i/J93dbJp7eypXKQ . And in the code you need to use only:headers: this._headers
(not to duplicate the code) - Please, delete
removeEventsListeners
because you don't have such a method inPopup
(and you don't need it) - Please, add in
PopupWithForm.js
methodrenderLoading
like you have inPopupWithConfirmation
. It's a very nice method for text changing - Please, delete the low dash from methods if you want to use them
outside
a class because thelow dash
shows a private method which is used only inside the class. - You need to close popups only in blocks
then
after a successful response from the server so that when there is an error it would be opened (the inputs will not be cleared and the user could send the data again to the server) and if you change the button text you could see the change as well
Please, correct everything and your project will be accepted.
Good luck with the refactoring
@@ -1,4 +1,4 @@ | |||
# Project 8: Around The U.S. | |||
# Project 9: Around The U.S. | |||
|
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.
According to the task you need to change submit buttons text (Saving…
) while waiting for the server response. And the user should see it.
getUserInfo() { | ||
return fetch(this._url + "users/me", { | ||
headers: this._headers, | ||
}).then(this._getResponse); |
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.
Could be improved
You can make a special method for fetching and checking responses not to duplicate it in every request:
_request(url, options) {
return fetch(url, options).then(this._getResponse)
}
And now you can safely replace fetch
with this._request
and remove repeated checking. And you don’t need to change anything else.
function handleProfileEditSubmit(data) { | ||
userInfo.setUserInfo(data.name, data.profession) | ||
editProfilePopup.close() | ||
api.updateProfile(data.name, data.profession) |
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.
Could be improved
If it’s interesting for you here is how we can make a universal function for handling any submit. We can get rid of such duplicating as loading effect, closing and catching errors
// You can make a universal function that accepts a request, popup instance and optional loading text
function handleSubmit(request, popupInstance, loadingText = "Saving...") {
// here we change the button text
popupInstance.renderLoading(true, loadingText);
request()
.then(() => {
// We need to close only in `then`
popupInstance.close()
})
// we need to catch possible errors
// console.error is used to handle errors if you don’t have any other ways for that
.catch(console.error)
// in `finally` we need to return the initial button text back in any case
.finally(() => {
popupInstance.renderLoading(false);
});
}
You need to pass the request into the call of handleSubmit
like that:
// here is an example of the profile form handling
function handleProfileFormSubmit(inputValues) {
// we create a function that returns a promise
function makeRequest() {
// `return` lets us use a promise chain `then, catch, finally` inside `handleSubmit`
return api.editProfile(inputValues).then((userData) => {
userInfo.setUserInfo(userData)
});
}
// Here we call the function passing the request, popup instance and if we need some other loading text we can pass it as the 3rd argument
handleSubmit(makeRequest, profilePopup);
}
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.
The code is much better now but:
- The button text disappears after submitting the avatar form https://disk.yandex.ru/i/nnBFjMZtxwABaA
- According to the task you need to change submit buttons text (
Saving…
) while waiting for the server response. And the user should see it. Not all buttons change the text (when I add a new card the button doesn't change the text) validation.js
is not needed anymore- See here https://disk.yandex.ru/i/HRydRGRU1Zsu7Q
popupWithConfirmation.js
should be in UpperCase like the other files with classes - You haven't corrected some of my remarks https://github.com/kn8-codes/se_project_aroundtheus/pull/1/files/0121d6deac544aaae19e6bd0638133b6f5aea0d7..a6c48fa9ed6abde112ea1e59598e459baca4760e#r1346365579
- You need to return the default button text only in blocks
finally
so that the button could get the text back in any case. - In blocks
then
,catch
,finally
you need to pass only the reference to the function (not a function call) otherwise the function is called immediately without waiting for the response from the server. You can pass an unnamed arrow function as well.
} | ||
|
||
removeEventsListeners() { | ||
super.removeEventsListeners(); | ||
removeEventListeners() { |
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.
removeEventListeners()
is not needed in the project. You change the function in line 25 and that's enough
src/components/PopupWithForm.js
Outdated
@@ -6,6 +6,7 @@ export default class PopupWithForm extends Popup { | |||
this.handleFormSubmit = handleFormSubmit; | |||
this._popupForm = this._popupElement.querySelector(".modal__form"); | |||
this._inputList = this._popupForm.querySelectorAll(".modal__input"); | |||
this._submitButton = this._popupElement.querySelector("#avatar-save") |
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.
this._submitButton = this._popupElement.querySelector("#avatar-save")
Please, delete it
The button should be found correctly (universally). It's not only for the avatar
src/pages/index.js
Outdated
editProfilePopup.close(); | ||
} | ||
.then((data) => { | ||
avatarPopup.renderLoading(false) |
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 need to return the default button text only in blocks finally
so that the button could get the text back in any case.
src/pages/index.js
Outdated
userInfo.setUserInfo(data) | ||
}) | ||
.then(avatarPopup.close()) | ||
.finally(avatarPopup.renderLoading(true)) |
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 blocks then
, catch
, finally
you need to pass only the reference to the function (not a function call) otherwise the function is called immediately without waiting for the response from the server. You can pass an unnamed arrow function as well.
src/pages/index.js
Outdated
avatarPopup.renderLoading(false) | ||
userInfo.setUserInfo(data) | ||
}) | ||
.then(avatarPopup.close()) |
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 blocks then
, catch
, finally
you need to pass only the reference to the function (not a function call) otherwise the function is called immediately without waiting for the response from the server. You can pass an unnamed arrow function as well.
Please, correct it everywhere
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.
Dear Natahniel, (Please, expand the general comment ↓)
Unfortunately I have to reject the project:
You haven't corrected my remarks:
- See here https://disk.yandex.ru/i/HRydRGRU1Zsu7Q
popupWithConfirmation.js
should be in UpperCase like the other files with classes - According to the task you need to change submit buttons text (
Saving…
) while waiting for the server response. And the user should see it. - And maybe others (see them in the prevous iteration)
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.
Dear Natahniel, (Please, expand the general comment ↓)
Unfortunately I have to reject the project because nothing has been changed except for PopupWithConfirmation.js
. Please, check all my remarks from the 2 previous iterations. See here #1 (comment) and here #1 (comment) and others
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.
One more step is needed:
this._submitButtonText = "Delete";
should be deleted. You have the correctthis._submitButtonText
in line 8 with textYes
(it's fixed in the constructor authomatically)- According to the task you need to change submit buttons text (
Saving…
) while waiting for the server response. And the user should see it. - You haven't corrected my remark https://github.com/kn8-codes/se_project_aroundtheus/pull/1/files/31becbe36b838625f6d8b7411bc5c3eaae35b01e..686a708f67887fd3f368a4618a0c2e9d90731066#r1354377598
- In blocks
then
,catch
,finally
you need to pass only the reference to the function (not a function call) otherwise the function is called immediately without waiting for the response from the server. You can pass an unnamed arrow function as well. - You need to return the default button text only in blocks
finally
so that the button could get the text back in any case. addCardPopup.renderLoading(true);
should be in line 165 (before the request) to start loading effect- You don't have
renderLoading
for the profile submit button. You should add it intohandleProfileEditSubmit
@@ -12,7 +12,7 @@ renderLoading(isLoading, loadingText = "Deleting...") { | |||
if (isLoading) { | |||
this._submitButton.textContent = loadingText; | |||
} else { | |||
this._submitButtonText = "Save"; | |||
this._submitButtonText = "Delete"; |
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.
this._submitButtonText = "Delete";
should be deleted. You have the correct this._submitButtonText
in line 8 with text Yes
(it's fixed in the constructor authomatically)
src/pages/index.js
Outdated
@@ -153,7 +153,7 @@ function handleAvatarChange(data) { | |||
avatarPopup.renderLoading(false) | |||
userInfo.setUserInfo(data) | |||
}) | |||
.then(avatarPopup.close()) | |||
.then(avatarPopup.close) | |||
.finally(avatarPopup.renderLoading(true)) | |||
.catch((err) => { | |||
console.log(console.error); |
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 handleProfileEditSubmit(data) {
api.updateProfile(data.name, data.profession)
.then((data) => {
userInfo.setUserInfo(data)
})
.catch((err) => {
console.log(console.error);
});
editProfilePopup.close();
}
You don't have renderLoading
for the profile submit button
editProfilePopup.close();
should be in then
.then((data) => {
userInfo.setUserInfo(data);
editProfilePopup.close(); // here
})
src/pages/index.js
Outdated
@@ -153,7 +153,7 @@ function handleAvatarChange(data) { | |||
avatarPopup.renderLoading(false) | |||
userInfo.setUserInfo(data) | |||
}) | |||
.then(avatarPopup.close()) | |||
.then(avatarPopup.close) | |||
.finally(avatarPopup.renderLoading(true)) |
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.
.finally(avatarPopup.renderLoading(true))
This is not correct. See my remark https://github.com/kn8-codes/se_project_aroundtheus/pull/1/files/31becbe36b838625f6d8b7411bc5c3eaae35b01e..686a708f67887fd3f368a4618a0c2e9d90731066#r1354377598
This is the way it should work (with false
) - you stop the loading in finally
rather than start it
.finally(() => avatarPopup.renderLoading(false))
src/pages/index.js
Outdated
@@ -153,7 +153,7 @@ function handleAvatarChange(data) { | |||
avatarPopup.renderLoading(false) |
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.
avatarPopup.renderLoading(false)
should be in finally
You need to return the default button text only in blocks finally
so that the button could get the text back in any case.
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.
Dear Natahniel, (Please, expand the general comment ↓)
Unfortunately I have to reject the project:
- Please, read my comments carefully again. You haven't corrected them the way I wrote you. See here https://disk.yandex.ru/i/4Z3K6w2g_mQ-Og . And about finally https://disk.yandex.ru/i/a0G2HI9KvTv8PQ . And about starting loading https://disk.yandex.ru/i/LBGyXGclL1OeYg
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.
One more step is still needed:
avatarPopup.renderLoading(true)
should be in line 154 before the request to change the button textconsole.log(console.error);
should beconsole.error(err);
. Please, pay attantion theconsole.error
is a method for logging errors.then(addCardPopup.close())
should be.then(addCardPopup.close)
- In blocks
then
,catch
,finally
you need to pass only the reference to the function (not a function call) otherwise the function is called immediately without waiting for the response from the server. You can pass an unnamed arrow function as well.
src/pages/index.js
Outdated
@@ -156,23 +157,22 @@ function handleAvatarChange(data) { | |||
userInfo.setUserInfo(data) |
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.
avatarPopup.renderLoading(true)
should be in line 154 before the request to change the button text
function handleAvatarChange(data) {
avatarPopup.renderLoading(true) // here
api.updateAvatar(data)
.then((data) => {
src/pages/index.js
Outdated
.catch((err) => { | ||
console.log(console.error); |
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.
console.log(console.error);
should be console.error(err);
. Please, pay attantion the console.error
is a method for logging errors
src/pages/index.js
Outdated
@@ -156,23 +157,22 @@ function handleAvatarChange(data) { | |||
userInfo.setUserInfo(data) | |||
}) | |||
.then(avatarPopup.close) | |||
.finally(avatarPopup.renderLoading(false)) | |||
.finally(() => avatarPopup.renderLoading(false)) | |||
.catch((err) => { | |||
console.log(console.error); |
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.
console.log(console.error);
should be console.error(err);
. Please, pay attantion the console.error
is a method for logging errors
src/pages/index.js
Outdated
.then(addCardPopup.close) | ||
.finally(() => { | ||
addCardPopup.renderLoading(false)}) | ||
.then(addCardPopup.close()) |
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.
.then(addCardPopup.close())
should be .then(addCardPopup.close)
In blocks then
, catch
, finally
you need to pass only the reference to the function (not a function call) otherwise the function is called immediately without waiting for the response from the server. You can pass an unnamed arrow function as well.
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.
Everything is almost fine but:
- I can't add new cards. See the errors https://disk.yandex.ru/i/JKE-9uRg_s5Mqg You need to use only
res
(the api has been fixed recently) .
src/pages/index.js
Outdated
@@ -170,8 +170,8 @@ function handleAddCardSubmit(data) { | |||
.then((res) => { | |||
const card = createCard(res.data); |
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.
createCard(res.data);
- I can't add new cards. See the errors https://disk.yandex.ru/i/JKE-9uRg_s5Mqg
You need to use only res
(the api has been fixed recently)
.then((res) => {
const card = createCard(res);
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.
createCard(res.data);
- I can't add new cards. See the errors https://disk.yandex.ru/i/JKE-9uRg_s5Mqg
You need to use only res
(the api has been fixed recently)
.then((res) => {
const card = createCard(res);
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.
Dear Natahniel, (Please, expand the general comment ↓)
Unfortunately I have to reject the project:
- You haven't corrected my remark Project 9 - First Submission #1 (comment)
createCard(res.data);
- I can't add new cards. See the errors https://disk.yandex.ru/i/JKE-9uRg_s5Mqg
You need to use only res
(the api has been fixed recently)
.then((res) => {
const card = createCard(res);
No description provided.