NOC Diary Week 9: Cookies and Toast

This week was the second last week of my internship at 9cv9 as part of the NUS Overseas College (NOC) Southeast Asia programme. Before my internship ends, I decided to look into parts of the codebase for UrbanCV that I did not touch before, as I was curious about how those features were implemented to try and understand it by reading through the code as well as reading online resources. The two features I will be exploring are cookies and toast (which both sound really delicious).

The first would be cookies. A HTTP cookie is a small piece of data that a server sends to the user’s web browser. With cookies, the browser is able to store information such as about a user, and add it in requests sent to the server. Cookies are mainly used for session management, personalization or tracking. Cookies consist of name value pairs and can have expiry dates set.Cookies with no expiry dates are session cookies, while permanent cookies are deleted at a date specified or after a set time period. UrbanCV uses a library called universal-cookie for managing cookies (create, set, remove, etc.). The JSON Web Token (JWT) is stored in a cookie and Axios Interceptors can be configured with axios.interceptors.request.use() to intercept outgoing requests to add the JWT token, allowing the backend server to identify the user if they are logged in and send the appropriate data.

With cookies, we can also tell if a user is logged in and redirect users accordingly. An example of such a case would be if users are at urls such as their Profile page, which require the user’s information. If they are not signed in, we should redirect them to the login page for them to do so. This can be achieved by using a higher order component, which is used to wrap components that require authentication, where the getInitialProps function from NextJS, can be added to the page. getInitialProps is an async function and populates props with the returned plain Object. getInitialProps receives a useful argument called context, and from there, we can access the request, response, pathname etc. With this information, we can check if the user should have access to the current path they are on, and if not, redirect them to the appropriate url.

The other interesting feature would be Toasts. Toasts, also known as Snackbars (again with the food related names), are popups that appear to notify the user of a system occurrence. The library used to implement this feature is Notistack, a Snackbar library which makes it extremely easy to display notifications on your web apps. It is highly customizable and enables you to stack Snackbars/Toasts on top of one another. Using this library makes implementing the feature a breeze as all you need to do is wrap the app in a SnackProvider Component, and subsequently call the useSnackbar hook in your functional component where needed. The hook allows you to add snackbars to the queue to be displayed to the user by destructuring and calling enqueueSnackbar with the message and an options object as arguments. The options object accepts many useful configurations, such as the variants (Success, Error, Warning, etc.), maximum number of snack bars stacking at a time and more. Below is a quick example showing how the hook useSnackbar can be utilised.

import { useSnackbar } from ‘notistack’;

const MyButton = () => {

    const { enqueueSnackbar, closeSnackbar } = useSnackbar();

    const handleClick = () => {

        enqueueSnackbar(‘Success!’);

    };

    return (

        <Button onClick={handleClick}>Show snackbar</Button>

    );

}

Marcus Tang
Marcus Tang
Marcus is a 2nd year computing student at the National University of Singapore. He has great passion in Computing and both Frontend and Backend engineering.

Latest posts

Django Periodic Task with Celery Task Queue

Task Queue? Periodic Tasks? What are they? Task Queue is a way of organizing work or tasks in programs asynchronously, without a user’s request, and distribute...

Understanding Models, Views and Serializers in Django

Soo we are back once again this week, talking about models, views and serializers — essentially everything you will need to get an up-and-running...

Creating a Django Web Application with a PostgreSQL Database on Windows

At some point in time, you will foray into the realm of web development. With the many frameworks out there, you may be confused...

More from author

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related posts