Toast

React 45 minAdobeOktaRazorpay

Prompt

You are provided with a starting template for a Toast notification system in React. The primary goal is to implement the Toast component and add functionalities that allow the users to create and dismiss toast notifications. Before diving in, please take a moment to go through the provided code to understand the basic setup and the structure of the Toast system.

Your task is to build the Toast component that can be of four types: info, error, warning, and success.

Requirements

  • Ensure the toast message passed as children is displayed.
  • Display the corresponding icon based on the variant prop.
  • Style the Toast component's background color based on its variant. Use the CSS variables provided in styles.css
  • Add a button within each toast that signifies the ability to dismiss (or close) the toast.
  • The toast should be displayed at the bottom right of the screen.

Try to make your component as close to the provided image as possible. Once you've completed this part, you can move on to the step-up parts provided below the playground.

Example

Toast Component

Playground (Prompt 1)

Hint 1

When faced with a problem where some code is already provided and you need to build upon it, I suggest beginning your exploration with the entry point, typically App.js, in React applications. Examine how the components are structured and interconnected throughout the React hierarchy. Pay special attention to how data is passed between components, as this will give you a clear understanding of the data flow and component architecture. Once you have a grasp of the overall structure and relationships, focus on identifying any missing pieces that need to be implemented or modified.

Solution (Prompt 1)

My Attempt (Prompt 1)

Adding & Deleting (Prompt 2)

Requirements (Prompt 2)

  • Implement the ability to create a new toast when users submit a message. Each toast should display with the selected variant (info, warning, success, or error).
  • Provide a way to dismiss a specific toast when the dismiss button (×) within it is clicked.

Playground (Prompt 2)

Solution (Prompt 2)

My Attempt (Prompt 2)

Dismissing with ESC (Prompt 3)

Requirements (Prompt 3)

  • Implement a feature where the user can press the Esc key to dismiss all the toast messages.
  • Ensure that this functionality works only when there are toasts present on the screen.

Playground (Prompt 3)

Hint 1

Consider using useEffect hook in your component. Inside this hook, you can set up an event listener for keyboard events on the window object. Pay attention to the keydown event, which is triggered whenever a key is pressed.

Hint 2

Within the event listener, check if the pressed key is the Escape key. You can accomplish this by comparing the event.key or event.code property with the corresponding value for the Escape key. Feel free to search on MDN for these specific values.

Solution (Prompt 3)

My Attempt (Prompt 3)

Interviewer Criteria

HTML/CSS

  • Did I use the button HTML tag to display the dismiss button on the Toast?

  • Was I able to style the UI efficiently (within 10 minutes or less)?

  • Did I style the toast notifications effectively according to the provided design, especially for different variants like info, warning, success, error?

  • Did I implement dynamic styling based on the toast variant using CSS?

JavaScript

  • Am I comfortable with using functional components?

  • Do I have a good understanding of ES6 features like let, const, fetch, arrow functions, destructuring, etc.?

  • Did I use the onSubmit handler of the form appropriately?

  • Do I know how to use the filter method to remove an item from an array?

  • How effectively did I manage the assignment and display of icons based on the toast variant?

  • How efficiently did I handle the logic for creating, displaying, and dismissing toasts?

React

  • Am I comfortable with using hooks?

  • Do I understand how the Context API works?

  • How effectively did I manage the state within ToastProvider, especially in handling the addition and removal of toasts?

  • Is my custom hook useKeydown for handling key events reusable and efficiently written?

  • Do I know how to append an item to an array without mutating the state?

Component Architecture

  • How well did I compose the Toast component and its related components (like ToastContainer and ToastPlayground) for reusability and maintainability?

  • Are my names for components, functions, and variables clear, concise, and self-explanatory with respect to their functionality?

Performance

Did I wrap the handlers provided by the context, such as createToast and dismissToast, in useCallback to ensure they are not re-created on every render when the state updates?

Code Clarity

Before I started coding, did I take the time to thoroughly understand all the existing code in a top-down manner, ensuring clarity and comprehension of each component and its role within the overall structure?

Time Checkpoints

  • 10:00 AM

    Interview starts 👥

  • 10:03 AM

    Prompt is given by the interviewer

  • 10:05 AM

    Candidate - read the prompt, ask clarifying questions and start coding

  • 10:10 AM

    Fetch the data from mock server and store it in state

  • 10:20 AM

    Render the chart

  • 10:30 AM

    Complete styling

  • 10:35 AM

    Implement Sorting logic

  • 10:50 AM

    Allow support for data of any shape

  • 10:55 AM

    Discussions with interviewer

  • 11:00 AM

    Interview ends ✅

00:00

Table of Contents