React on Aditya Naik | Personal Website

Material UI | How to easily setup popup notifications

Sun, 12 Dec 2021 00:00:00 +0000

Using Material UI and React Context to set up global notification system.

Need for global notification system

In your application, you want have good user experience and let the user know if the actions/clicks have resulted in success or failure. We should also show warning and information messages to guide user through the flows.

It is of course possible to display a local popup component wherever needed, but it quickly becomes a bloat and irritating to manage. It would be really cool to just set up the whole system once and trigger it from wherever from the app to get consistent experience.

Cypress | How to handle auth JWT using env and commands

Sat, 24 Apr 2021 00:00:00 +0000

1. Setting the scene
2. Need for writing explicit network requests in cypress?
3. Why not mock API responses OR seed the data OR both?
4. What are cypress commands?
5. How does the login command look?
6. How to access redux store?
7. Exploring Cypress env
8. How to set and access cypress env
9. TLDR: Some Example code

1. Setting the scene

A typical case of application structure is when we have a client paired with API. In such a scenario, its very useful to set up end-to-end tests using Cypress , which will help you mimic actual user behavior across the application and builds a lot of confidence in your implementation.

How to easily test react stripe elements using cypress

Wed, 27 May 2020 00:00:00 +0000

How to use react-stripe-elements

I have already written about how to set up and use react-stripe-elements .

However, there is another easier way to test stripe implementation than mentioned in the article.

How to test react-stripe-elements

Just use following function to your cypress test

function fillInStripeForm() {
  const input = [
    ["cardnumber", "4242424242424242"],
    ["exp-date", "1220"],
    ["cvc", "123"],
  ];
  cy.wait(1000);
  cy.get(".__PrivateStripeElement > iframe").each(($element, index, list) => {
    cy.get($element).then(($iframe) => {
      const body = $iframe.contents().find("body");
      cy.wrap(body)
        .find(`input[name=${input[index][0]}]`)
        .type(input[index][1], { delay: 10 });
    });
  });
}

and call it when tripe form needs to be filled.

Material UI | How to easily set up dark theme toggle in React

Wed, 20 May 2020 00:00:00 +0000

Scaffold React Application

A new react app is easily scaffolded using

npx create-react-app my-app

Install dependencies

I need to install material ui core package.

// with npm
$ npm install @material-ui/core

// with yarn
$ yarn add @material-ui/core

Wrap application in Theme Provider

For the purpose of this demo, I will use App.js to set up everything.

Add Light and Dark themes

export const light = {
  palette: {
    type: "light",
  },
};
export const dark = {
  palette: {
    type: "dark",
  },
};

Import ThemeProvider and createMuiTheme

import { ThemeProvider } from "@material-ui/core";
import { createMuiTheme } from "@material-ui/core/styles";

Set up the toggle logic

const [theme, setTheme] = useState(true);
const icon = !theme ?  : ; // Icons imported from `@material-ui/icons`
const appliedTheme = createMuiTheme(theme ? light : dark);

Wrap the render inside ThemeProvider and pass the appliedTheme

return //rest of the code;

Trigger toggle using onClick

onClick={() => setTheme(!theme)}

Now our theme toggle logic is in place.

How to test your react websocket implementation with cypress

Tue, 12 May 2020 00:00:00 +0000

Set up demo application

I scaffold a standard react application

$ npx create-react-app ws-demo

Clean up and update app.js to set up a websocket client.

app.js

import React, { useState } from "react";

const App = () => {
  const [message, setMessage] = useState("websocket is closed");

  return (
    
      {message}
      
    
  );
};

export default App;

// WebsocketHandler does what the name suggests - launch/close websocket client and receive messages

const websocketUrl = "ws://127.0.0.1:5000";
const WebsocketHandler = ({ setMessage }) => {
  const ws = new WebSocket(websocketUrl);
  ws.onopen = () => {
    console.log("conn open");
    ws.send("connection is open");
  };
  ws.onmessage = (message) => {
    setMessage(message.data);
    console.log("onmessage triggered", message);
    ws.send("message received");
  };
  ws.onclose = () => {
    console.log("connection closed");
  };
  return null;
};

As highlighted, I have a WebsocketHandler component which handles websocket and sets state in app.js when it receives the message.

How to access Redux state in Cypress

Fri, 08 May 2020 00:00:00 +0000

Set up our application

I borrowed the code from react-redux.js.org which showcases react + redux in action using a todo list application.

Set up and scaffold Cypress

Cypress is a fantastic testing framework. It is easy to set up and can be picked up pretty quickly.

Setting up Cypress is pretty straight forward - just run:

$ npm install cypress
or
$ yarn add cypress

We will also install the recommeded dependency