natanbr / angular-practicum Goto Github PK

Bug #3

Performance issue, single event call same function two

Steps reproduce:

1. Open console (in dev tools)
2. when the app is loaded you will see same message called twice
   

expected:

• Navigate to MapGetComments function in CommantsHelper in the code
  This function should be called only once on loading.
  Running the same calculations twice will result in slower performace

In this feature you are asked to implement a global notification service.
The goal of this feature is to help us better evaluate your Angular skills,
Please avoid using any external libraries❕

There are 2 places this service is used:

1. Clicking on any of the "Info", "Success" or "Failure" buttons on the top will trigger an event that will display a notification.
2. In "comments.service.ts" you will find a TODO to call that global notification
   

Requirements:

• The global notification message should support 3 types of messages: "Info", "Success" and "Error"
• Each notification can have a title (one line) and a message (up to 3 lines)
• User should be able to dismiss the notification by clicking on X button
• The notification should have nice animation on "enter" and another animation on "leave"

Nice to have:

• auto dismiss the notification after x seconds (use 3 seconds by default)

Example:

Here is an example of this feature the way I decided to implement it.
You DON'T need to do it one to one. On the contrary, creating will be reworded

**

Bug #2

Steps reproduce:

1. Open console (in dev tools)
2. in the app type a new message and submit

• when the message is added all the items in the list are being animated, only the new one should be animated
• hint: in the console log you will see the OnInit print. Notice that all the items are re-initialized

expected:

• only the new added item should be animated
• only the OnInit of the new added item should be printed in the console
  

With this issue, we are interested in seeing your styling skills.

As you might notice the comments are missing some styles, can you help us add the styles?

As a note:
We will always prefer a FE developer with strong styling skills! 💪

Here is an example of the styles I made, you can follow this example or try and do better.

Bug #1

The switch button is not working

Steps reproduce:

1. click on "Toggle" button
2. the switch bellow the button is not responding, it should change it's state

expected:

every click on the toggle button should switch update the state accordingly.
Here is an example of a working version: