Skip to content

Sprint 8 - #1

Open
ResidentEvilGod wants to merge 22 commits into
mainfrom
project-9
Open

Sprint 8#1
ResidentEvilGod wants to merge 22 commits into
mainfrom
project-9

Conversation

@ResidentEvilGod

Copy link
Copy Markdown
Owner

No description provided.

@guilherme-d-souza guilherme-d-souza left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Please, test your application and see with is running, have no errors and it's able to do every requested requirement.

Comment thread src/index.html Outdated
<p class="modal__title">Golden Gate Bridge</p>
</div>
</div>
<div class="modal" id="delete-modal">

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

In line 139, your webpack is giving an error. You shouldn't use the require for https images. You can remove this

Comment thread src/pages/index.js Outdated

const api = new Api({
baseUrl: "https://around-api.en.tripleten-services.com/v1",
token: "f18dafb7-fd93-4a29-8bad-28626515cfd2", // <-- keep your token here

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

This token is not working to call the API for me. Did you added a fake to be edited?

Comment thread src/pages/index.js Outdated
import { enableValidation, settings } from "../scripts/validation.js";
import Api from "../utils/Api.js";

const initialCards = [

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

You don't need the initialCards anymore. You can delete that.

Comment thread src/pages/index.js Outdated
deleteForm.addEventListener("submit", handleDeleteSubmit);
}

const cardDeleteBtnEL = cardElement.querySelector(".card__delete-btn");

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

cardElement is not defined. Do you need this code?

Comment thread src/pages/index.js Outdated
Comment on lines +204 to +220
cardDeleteBtnEl.addEventListener("click", () => {
if (!data._id) {
cardElement.remove();
return;
}

api
.deleteCard(data._id)
.then(() => {
cardElement.remove();
})
.catch((err) => {
console.error("Failed to delete card:", err);
alert("Could not delete the card. Please try again.");
cardDeleteBtnEl.disabled = false;
});
});

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Do you need this code? Looks like it's duplicated.

Comment thread src/pages/index.js Outdated
const deleteSubmitBtn = deleteModal
? deleteModal.querySelector(".modal__submit-btn")
: null;
const deleteCloseBtn = deleteModal

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

All your global variable declarations (line 255 until line 284) should be on the beginning of the file. This is making many script errors occur.

Comment thread src/pages/index.js
Comment on lines +415 to +436
function handleProfileFormSubmit(evt) {
evt.preventDefault();

const name = editProfileNameInput.value.trim();
const about = editProfileDescriptionInput.value.trim();
const submitBtn = editProfileFormEl.querySelector(".modal__submit-btn");

setButtonLoading(submitBtn, true, "Saving...", "Save");

api
.editUserInfo({ name, about })
.then((user) => {
profileNameEl.textContent = user.name;
profileDescriptionEl.textContent = user.about;
closeModal(editProfileModal);
})
.catch((err) => {
console.error("Failed to update profile:", err);
alert("Could not save profile changes. Please try again.");
})
.finally(() => setButtonLoading(submitBtn, false, "Saving...", "Save"));
}

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

This function is duplicated (have another function with the same name). Which one you should keep?

Comment thread src/pages/index.js
Comment on lines +353 to +357
function handleDeleteCard(cardElement, data) {
selectedCard = cardElement;
selectedCardId = data?._id || null;
openModal(deleteModal);
}

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

This function is duplicated (have another function with the same name). Which one you should keep?

Comment thread src/pages/index.js
Comment on lines +359 to +386
function handleDeleteSubmit(evt) {
evt.preventDefault();
if (!selectedCard) {
closeModal(deleteModal);
return;
}
closeModal(newPostModal);

const submitBtn = deleteSubmitBtn;
setButtonLoading(submitBtn, true, "Deleting...", "Yes, delete");

const promise = selectedCardId
? api.deleteCard(selectedCardId)
: Promise.resolve();

promise
.then(() => {
selectedCard.remove();
selectedCard = null;
selectedCardId = null;
closeModal(deleteModal);
})
.catch((err) => {
console.error("Failed to delete card:", err);
alert("Could not delete the card. Please try again.");
})
.finally(() =>
setButtonLoading(submitBtn, false, "Deleting...", "Yes, delete")
);

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

This function is duplicated (have another function with the same name). Which one you should keep?

Comment thread src/pages/index.js Outdated
.finally(() => setButtonLoading(submitBtn, false, "Saving...", "Save"));
}

const cardElement = getCardElement(inputValues);

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

inputValues variable is not defined. Where should this data come from?

@guilherme-d-souza guilherme-d-souza left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Please, test your application before submit

Comment thread src/pages/index.js Outdated
];
const api = new Api({
baseUrl: "https://around-api.en.tripleten-services.com/v1",
token: "d41c5de4-a60c-4cba-8b57-bb0d7fcd07f2",

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

This is breaking your API even that the token is valid. Make sure to check the parameters that you are expecting on the Api class. Check the Instantiate the class topic on the project description to get more details.

Comment thread src/index.html Outdated
Comment on lines +24 to +28
<button
class="profile__avatar-edit"
type="button"
aria-label="Edit avatar"
></button>

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

This button doesn't have the proper style. Make sure to check the Figma design, and the behaviour for this button.

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

This error still persist.

Comment thread src/index.html
Comment on lines -133 to -137
<img
src="<%=require('https://practicum-content.s3.us-west-1.amazonaws.com/software-engineer/spots/7-photo-by-griffin-wooldridge-from-pexels.jpg')%>"
alt=""
class="modal__image"
/>

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

You should not remove the whole img tag, only remove the require webpack syntax on the src property

Comment thread src/pages/index.js
newPostImageInput.value = "";
newPostFormEl.reset();
const inputs = Array.from(newPostFormEl.querySelectorAll(".modal__input"));
resetValidation(newPostFormEl, inputs, settings);

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

resetValidation function is not defined.

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Still not solved. Remember to import this correctly

Comment thread src/utils/Api.js Outdated
return fetch(`${this._baseUrl}/users/me`, {
method: "GET",
headers: {
authorization: this._token,

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

The _token is not defined/set on the class constructor.

Comment thread src/utils/Api.js Outdated
return fetch(`${this._baseUrl}/cards`, {
method: "GET",
headers: {
authorization: this._token,

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

The _token is not defined/set on the class constructor.

@guilherme-d-souza guilherme-d-souza left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

You still didn't fix the API constructor or the API calls. Make sure to ask if you didn't understand or need help with that

Comment thread src/utils/Api.js Outdated
return Promise.reject(`Error: ${res.status}`);
}
getUserInfo() {
return fetch(`${this._baseUrl}/users`, {

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

This API is returning all the users, the endpoint for this should be /users/me

Comment thread src/pages/index.js
newPostImageInput.value = "";
newPostFormEl.reset();
const inputs = Array.from(newPostFormEl.querySelectorAll(".modal__input"));
resetValidation(newPostFormEl, inputs, settings);

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Still not solved. Remember to import this correctly

Comment thread src/blocks/profile.css
object-fit: cover;
}

.profile__avatar-edit {

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

This style doesn't match the Figma style. Make sure to follow the Figma values

Comment thread src/pages/index.js Outdated
const previewNameEl = previewModal.querySelector(".modal__title");

const deleteModal = document.querySelector("#delete-modal");
const deleteForm = deleteModal?.querySelector(".modal__form");

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

This selector is not correct. Make sure to check the card deletion after make the other validations

Comment thread src/index.html Outdated
Comment on lines +24 to +28
<button
class="profile__avatar-edit"
type="button"
aria-label="Edit avatar"
></button>

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

This error still persist.

Comment thread src/pages/index.js Outdated
const previewModalCloseBtn = previewModal.querySelector(".modal__close-btn");
const previewNameEl = previewModal.querySelector(".modal__title");

const deleteModal = document.querySelector(".delete__modal");

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

This .delete__modal class doesn't exists on the HTML file, only for the ID delete__modal. Make sure to fix this selector.

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Still not right.

Comment thread src/blocks/modal.css
opacity: 50%;
}

.modal__delete-btn {

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

This button style doesn't match the Figma style. Make sure to follow Figma values for that.

Comment thread src/index.html Outdated
<p class="modal__title">Golden Gate Bridge</p>
</div>
</div>
<div class="delete__modal" id="delete__modal_img">

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

This is making your modal lose the modal styling, the modal is not opening when we click the delete button. Remember that you have change your selector, not the classes

Comment thread src/pages/index.js Outdated
const previewModalCloseBtn = previewModal.querySelector(".modal__close-btn");
const previewNameEl = previewModal.querySelector(".modal__title");

const deleteModal = document.querySelector(".delete__modal");

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Still not right.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants