Skip to content
OverviewSolutions
6
Comments
9

Louisan TCHITOULA

@LTOssianFrance170 points

Beginner. Studied urbanism. Currently studying web development.

I’m currently learning...

TypeScript & Angular

Latest solutions

Latest comments

  • Louisan TCHITOULA•170
    @LTOssianPosted over 1 year ago

    Hello ! Good job on the integration, it looks pixel perfect. 🥳

    My observation

    You application does not work because of a small mistake that I found in your code.

    Inside the index.js, you are looking to retrieve the data of a single user, however you are user the wrong URL request.

    Currently you have

    GET users/${username} (line 62)

    It should be

    GET user/${username}

    Here is the GitHub documentation that covers this.

    Now your application should work correctly and make the right request.

    I hope this was helpful ! 🤓

    0
  • Louisan TCHITOULA•170
    @LTOssianPosted over 1 year ago

    Incredible work Adriano ! This is a very impressive solution, especially regarding the handmade authentication.

    One observation

    I noticed in your home page that on within your ngFor directive you are not using a trackBy function to allow Angular to track each item. Thus when clicking on the bookmark button, every movie card is reloaded !

    The trackBy function is used to improve performance by tracking which unique item has changed instead of refreshing all of the items from the loop.

    If you have experience with react, it does the same improvement as giving a unique key to a returned JSX from a map().

    How to fix this ?

    Inside item-list.component.html

    Currently you have something like this :

    <li *ngFor="let item of items"> {item.name} </li>

    You can apply the trackBy like so :

    <li *ngFor="let item of items; trackBy: trackByItem">{item.name}</li>

    trackByItem is a method that has to be declared within your component, and takes in the loop index and the item value associated, then returns a unique value. Here is an example :

    Inside item-list.component.ts

    /**
* returns a unique ID for Angular 
* to compare accurately what item has changed
*/
public trackByItem(index: number, item: Item) {
   return item.id
}

    You can implement this for every ngFor that iterates through values that are dynamic and can be changed by some event action (i.e: when showBookmarkedImg change from false to true :) ) and it is a good practice overall. Hope this helps ! Here is the official documentation on this

    Marked as helpful
    0
  • Louisan TCHITOULA•170
    @LTOssianPosted over 1 year ago

    Hello Khalid, congratulations on your solution !

    My observation

    I see that your left and right sides are not of the same height. Thus making both sides look unaligned.

    My suggestion

    Since you've added the property height: 500px to the class .left, you could do the same to the class .image

    0
  • Louisan TCHITOULA•170
    @LTOssianPosted almost 2 years ago

    Hey, looks awesome congrats !

    Just wanted to point out a little bug which allows me to add (or remove) a comment's score indefinitely.

    I think the issue comes from your handleVote logic in Vote.jsx, you should separate downvote & upvote in two separate if-statement. Otherwise I can upvote while voteTries is at 1 and set voteTries to 0 then downvote while voteTries is at 0, which will add +1 to previousVote and set VoteTries to 1 and finaly I can repeat from there.

    Cheers, Louisan

    0
  • Louisan TCHITOULA•170
    @LTOssianPosted over 2 years ago

    Hi Anjaalber !

    I asked myself the same thing when I finished this challenge, it seems when you click faster than the API fetching process nothing happens. I haven't applied this myself yet but maybe creating an array which stores a few advices in advance would make the experience smoother.

    Your solution looks great !

    0
  • Louisan TCHITOULA•170
    @LTOssianPosted over 2 years ago

    Hi ! This looks great and your script is well built. You might have forgotten to transform de cursor while hovering your buttons, here is the simple fix you can add to your code .value-button:hover {cursor: pointer;} and .submit-button:hover {cursor: pointer;}. Kind regards,

    1
View more comments