DEV Community: Cath Leyson

How to Create a Loading Spinner in React with styled-components

Cath Leyson — Sat, 03 Jun 2023 16:00:00 +0000

Introduction

In modern web applications, it's common to have asynchronous operations that require some time to complete.

During these operations, it's a good practice to provide visual feedback to the user, indicating that the application is still working.

One way to achieve this is by using a loading spinner, which is a visual element that rotates to indicate that the application is processing data or performing an action.

In this tutorial, we'll explore how to create a loading spinner in React using the styled-components library.

Step 1: Setting up the Project

Before we start implementing the loading spinner, make sure you have a React project set up with styled-components installed. If you haven't already, create a new React project using your preferred method (e.g., Create React App) and install styled-components by running the following command:

npm install styled-components

Step 2: Creating the LoadingSpinner Component

In this step, we'll create a functional component for the loading spinner. Open a new file called like loading-spinner.js and import React and styled-components.

We'll define two styled components: Container and Loader.

The Container component will center the spinner on the screen, and the Loader component will represent the spinning animation itself.

Here's the styling for the LoadingSpinner component:

import React from "react";
import styled from "styled-components";

const Container = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
`;

 const Loader = styled.div`
  border-width: 0.5rem;
  border-style: solid;
  border-color: purple purple purple purple;
  width: 3.625rem;
  height: 3.625rem;
  border-radius: 50%;
  position: relative;
  -webkit-animation: spin 2s infinite;
  animation: spin 2s infinite;

  &:before,
  &:after {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: purple;
    position: absolute;
    left: 0.125rem;
  }

  &:before {
    top: 0.063rem;
  }

  &:after {
    bottom: 0.063rem;
  }

  @keyframes spin {
    100% {
      transform: rotate(360deg);
    }
  }
`;

//Create functional component
export function LoadingSpinner() {

  return (
    <Container>
         <Loader />
    </Container>
  );

}

Step 3: Using the LoadingSpinner Component

Now that we have our component, we can use it wherever we need to display a loading state in our application. Making this reusable.

Import the LoadingSpinner component into the file where you want to use it and render it accordingly.

For example, if you have a component called MyComponent and you want to display the loading spinner while fetching data from an API, you can render it conditionally based on the loading state.

Here's an example of how I use it:

import { LoadingSpinner } from "./loading-spinner"

export function MyComponent() {

//I'm using react-query
  const { data, isLoading, isError, error } = useProjects();

  if (isLoading) {
    return <LoadingSpinner />;
  }

  if (isError)//...


  return (

       //render the array results 

  );
}

Hope this helps!

How Would I Explain React to a kid

Cath Leyson — Fri, 02 Jun 2023 16:00:00 +0000

Like everything else, You should invest time, discipline and motivation learning and understanding how React works.

But what if a kid suddenly asked you what it is, Of course, you cannot simply throw a college book definition, and let him digest it himself.

For me, in order to understand something, I need to simplify it like I was five years old.

How React Works

React used to build interactive components. It adheres to component-based approach, which allows you to make reusable User Interface elements.

Think of it like a lego block. You can build any figure of any kind by stacking up lego pieces.

That's the mindset behind React's approach.

Lego blocks are just these UI components, when put together, you can build web apps made up of components.

I just want to keep this short and simple. That's it.

Hope this makes sense!

How to Implement Dark Mode in React

Cath Leyson — Thu, 01 Jun 2023 16:00:00 +0000

Introduction

Dark mode has become a popular feature in modern web applications, providing users with an alternative color scheme that is easier on the eyes and offers a unique visual experience.

In this article, we will explore how to implement a dark mode feature in a React application.

We'll create a theme provider using useContext hook and demonstrate how to toggle between light and dark modes.

Prerequisites

Before proceeding with this tutorial, make sure you have the following installed:

React (version X.X.X or later)

Creating the Theme Provider

To begin, let's create a file called "theme-provider.tsx" and include the following code:

import React, { createContext, useState } from "react";

type ThemeContextProps = {
  children: React.ReactNode;
};

const defaultContext = {
  isDarkMode: false,
  toggleColorMode: () => {},
};

export const ThemeContext = createContext(defaultContext);

export function ThemeProvider({ children }: ThemeContextProps) {
  const [isDarkMode, setDarkMode] = useState(defaultContext.isDarkMode);

  return (
    <ThemeContext.Provider
      value={{
        isDarkMode,
        toggleColorMode: () => setDarkMode((isDark) => !isDark),
      }}
    >
      {children}
    </ThemeContext.Provider>
  );
}

In this code, we create a context using the createContext function from React.

We define a default context that includes the initial state of isDarkMode set to false and a toggleColorMode function.

We create a ThemeProvider component that wraps its children with the context provider. The provider exposes the isDarkMode state and the toggleColorMode function to its children.

Integrating the Theme Provider

Next, let's integrate the theme provider into our application. Assuming you have an my-app.tsx file and import the ThemeProvider component:

import { ThemeProvider } from "./theme-provider";

export function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ThemeProvider>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

In this code, we import the ThemeProvider component and wrap it around the Component and pageProps components. This ensures that the theme provider is available throughout your application.

Using the Theme Context

Now, let's consume the theme context in one of your components. Assuming you have a PageContainer component, import the necessary dependencies:

import React, { useContext } from "react";
import { ThemeContext } from "./theme-provider";
import { Container, Main } from "./your-styled-components";

type PageProps = {
  children: React.ReactNode;
};

export function PageContainer({ children }: PageProps) {
  const { isDarkMode, toggleColorMode } = useContext(ThemeContext);

  return (
    <>
      {/* Head element and other code */}
      <button onClick={()=> toggleColorMode}>Toggle</button>
       <Container isDark={isDarkMode}>
        <Main>{children}</P.Main>
       </Container>

      {/* Footer component */}
    </>
  );
}

In this code, we import the necessary dependencies, including the ThemeContext and the styled-components (Container and Main).

Inside the PageContainer component, we consume the isDarkMode state from the ThemeContext.

Based on the value of isDarkMode, we pass the isDark prop to the Container component to apply appropriate styling for light or dark mode.

The children are rendered within the Main component.

Please replace "your-styled-components" with the actual names of your styled components or use your preferred styling solution.

Styling the Dark Mode

Lastly, to make the dark mode feature work, We need to do the styling. I am using styled-components:

import styled from "styled-component";

export const Container = styled.div<{ isDark: boolean }>`
  background-color: ${({ isDark }) => (isDark ? "#222" : "#fff")};
`;

Conclusion

Adding a dark mode feature to your React application enhances user experience and provides a more personalized interface.

By leveraging React's useContext hook, we can easily manage the state of the dark mode throughout the application.

Hope this helps!

How to Create Select with react-select

Cath Leyson — Wed, 31 May 2023 16:00:00 +0000

Introduction

Select dropdown menus are commonly used in web applications to provide users with a list of selectable options.

In this article, we will explore how to create a select using the react-select library.

By leveraging react-select, we can take advantage of its extensive feature set, and so we don't end up creating an inferior version of this library.

Prerequisites

Before proceeding with this tutorial, ensure that you have the following dependencies installed:

React npx create-react-app
react-select npm i --save react-select

Styling up the Select

To begin, let's create a custom styles for our select. Create a file and check out the following code:

export const customStyles = {

  option: (defaultStyles: any, state: { isSelected: boolean }) => ({
    ...defaultStyles,
    color: "#101828",
    cursor: "pointer",
    backgroundColor: state.isSelected ? `#ccc` : "#fff",
  }),

  control: (defaultStyles: any, state: { isFocused: boolean }) => ({
    ...defaultStyles,
    background: "white",
    borderRadius: "0.5rem",
    borderColor: state.isFocused ? "#D6BBFB" : "#D0D5DD",


    "&:hover": {
      borderColor: null,
    },
  }),

  menu: (defaultStyles: any) => ({
    ...defaultStyles,
    boxShadow:
      "0px 12px 16px -4px rgba(16, 24, 40, 0.1), 0px 4px 6px -2px rgba(16, 24, 40, 0.05)",
  }),


};

Defining Select Options

Next, let's define the options for our select dropdown menu. Create a file name, I just called it select-data.ts and include the following code:

export const options = [
  { value: "Sleeping", label: "Sleeping" },
  { value: "Ride a banana boat", label: "Ride a banana boat" },
  { value: "Sky diving", label: "Sky diving" },
];

In this code, we export an array of options that will be displayed in the select. Each option consists of a value and a label.

Implementing the Select

Now, let's integrate the select component into our application. Assuming you have a Parent component, import the necessary files we've created before:

import React,{ useState } from "react";
import Select from "react-select";
import { customStyles } from "./select.styles";
import { options } from "./select-data";

export function Parent() {
const [selected, setSelected] = useState(null);

  const handleChange = (selectedItem) => {
    setSelected(selectedItem);
    console.log(`selected option:`, selectedItem);
  };

  return (
    <Select
      options={options}
      placeholder="select..."
      styles={customStyles}
      onChange={handleChange}
      blurInputOnSelect={true}
    />
    // Rest of the code...
  );
}

In this code, we import the Select component and the array from their respective files.

We define a function, handleChange, to handle the change event when a select option is selected.

Customize the function to perform the desired action based on the selected option. Finally, we render the Select component, passing the necessary props such as options, placeholder, and onChange.

Conclusion

By the power of react-select, we can create highly customizable select dropdown menus in our React applications.

The react-select library provides a rich set of features, allows us to apply custom styles and match our design requirements seamlessly.

With this knowledge, you can enhance user experience by incorporating intuitive selects into your applications.

Experiment with different styles and options to create selects that best suit your application's needs.

Hope this helps!

How to Test URL param with Spaces

Cath Leyson — Wed, 31 May 2023 04:28:17 +0000

Introduction

When testing applications that involve URL parameters, it's important to ensure that the parameters are encoded correctly, especially when they contain spaces or special characters. In this article, we will explore how to test URL parameters with spaces in Cypress using a practical example.

Setting up the Test

To begin, create a new Cypress test file called "search.spec.ts" in the "cypress/integration" directory. This file will contain our test case for searching a hero name in the search bar.

describe("Search results", () => {
  it("types hero name in search bar", () => {
    cy.visit("http://localhost:3000/home");

    cy.get('[data-cy="search-bar"]')
      .type("iron man")
      .should(
        "have.value",
        "iron man",
        `/characters?nameStartsWith=${encodeURIComponent("iron man")}`
      );
  });
});

In this test case, we navigate to the homepage and type "iron man" in the search bar. We then assert that the input value matches "iron man" and that the resulting URL contains the encoded parameter "nameStartsWith=iron%20man" (where "%20" represents the space character).

Testing URL Parameters with Spaces

To test the URL parameter with spaces, we need to ensure that the parameter is correctly encoded before asserting its presence in the URL.

cy.should(
  "have.value",
  "iron man",
  `/characters?nameStartsWith=${encodeURIComponent("iron man")}`
);

The encodeURIComponent function converts special characters, including spaces, to their URL-encoded representations. By passing the "iron man" value through this function, we can safely include it in the URL.

Conclusion

Testing URL parameters with spaces is essential to ensure that your web application handles them correctly.

By using the encodeURIComponent function and asserting the encoded parameter in the URL, you can confidently test scenarios where URL parameters contain spaces or special characters.

Hope this helps!

How to Make Dynamic Routing with Next.js

Cath Leyson — Tue, 30 May 2023 08:54:02 +0000

Introduction

Dynamic routing is a powerful feature provided by Next.js that allows us to create flexible and scalable applications.

In this article, we will explore how to implement dynamic routing using Next.js.

We'll walk through the process of setting up dynamic routes, fetching data for specific routes, and rendering components dynamically based on route parameters.

Let's dive in!

Folder Structure

To begin, let's take a look at our folder structure within the pages directory:

pages
  └─ character
       ├─ [id].tsx
       └─ index.tsx

In this structure, we have a character folder that contains two files: [id].tsx and index.tsx. The [id].tsx file will be instrumental in setting up our dynamic routing.

Setting Up Dynamic Routing

Within the character folder, the [id].tsx file is responsible for handling the dynamic routing. Here's an example of its contents:

import type { NextPage } from "next";
import * as A from "@features";

const HeroDetailsPage: NextPage = () => {
  return (
    <A.PageContainer>
      <A.HeroInfoList />
    </A.PageContainer>
  );
};

In this code snippet, we define the "HeroDetailsPage" page, which serves as the template for rendering the details of a specific hero character.

Inside the component, we can include other components, such as HeroInfoList, to display the relevant information.

Fetching Data for Dynamic Routes

To fetch the data for the dynamic routing, we utilize the getHero function, which makes a GET request to retrieve the specific hero's details.

Here's an example of the getHero function:

import axios from "axios";
import { base_url, key, hash } from "@config/keys";
import { useQuery } from "react-query";

async function getHero(id: number) {
  const { data } = await axios.get(`${base_url}/characters/${id}`),{
//other params...
} 
  return data;
}
export function useHero(id: number) {
  return useQuery(["hero details", id], () => getHero(id));
}

In this code snippet, we define the getHero function that takes the "id" parameter and makes a GET request to the Marvel API to fetch the details of the character with the corresponding ID.

The fetched data is returned.

We also define a custom hook, useHero, which takes the "id" parameter and utilizes the useQuery hook from React Query to handle the data fetching process.

It passes the id to the getHero function to fetch the data.

Then, we can utilize the useRouter hook provided by Next.js.

Let's take a look at the HeroInfoList component:

import { useRouter } from "next/router";
import { useHero } from "@features/hero/api";
import { HeroInfo } from "./hero-info";
import * as A from "@features";

export function HeroInfoList() {
  const router = useRouter();
  const { id } = router.query;
  const { data, isLoading, isError } = useHero(Number(id));

  // Handle loading and error states

  const { results } = data?.data || {};

  return (
    <>
      {results?.map((hero: any) => (
        <HeroInfo key={hero.id} {...hero} />
      ))}
      // Rest of the code...
    </>
  );
}

Within the HeroInfoList component, we import the useHero hook from "@features/hero/api" to fetch data for a specific hero. We retrieve the "id" parameter from the router query using Next.js useRouter and pass it to the useHero hook.

Rendering Components Dynamically

Based on the fetched data, we can render components dynamically. In the HeroInfoList component, we iterate over the results array and render a HeroInfo component for each hero.

Creating Dynamic Links

To navigate to the dynamic routes, we can use Next.js' built-in link component. Let's take a look at the CharacterCard component:

import Link from 'next/link';

const Routes =[
characterDetails: "/character/[id]",

//more paths...
]

type CharProps = {
  id: number;
  name: string;
  thumbnail: {
    path: string;
    extension: string;
  };
};

export function CharacterCard({ id, name, thumbnail }: CharProps) {
  return (
    <Link
      href={{
        pathname: Routes.characterDetails,
        query: { id: id },
      }}
    >
      // Rest of the code...
    </Link>

The Routes list contains the route paths for our application. We pass the characterDetails route to the pathname property of the link component, along with the "id" parameter as the query object.

With this setup, when the user clicks on a character card, they will be directed to the HeroDetailsPage component with the corresponding "id" parameter.

So the expected behavior looks like this...

A user clicks on the CharacterCard Component
It navigates through characterDetails path with an ID param in the URL.
It then displays the details about the specific character/hero.

Conclusion

Dynamic routing is a powerful feature of Next.js that enables us to create dynamic and interactive web applications.

In this article, we explored the process of setting up dynamic routes, fetching data for specific routes, and rendering components dynamically based on route parameters.

By leveraging the capabilities of Next.js, we can create flexible and scalable applications that provide an optimal user experience.

Hope this helps!

How to Fetch Data in React Query Like A Pro

Cath Leyson — Tue, 30 May 2023 03:39:14 +0000

Introduction

In React apps, fetching data from APIs is a common requirement.

React Query is a powerful library that provides an elegant and efficient way to handle data fetching, caching, and synchronization in your React components.

In this article, we'll explore how to use React Query to fetch data from the Marvel API and render it in our React application.

Prerequisites

Before we proceed, make sure you have a basic understanding of React and JavaScript. Familiarity with asynchronous operations and RESTful APIs will also be beneficial.

Check out the https://developer.marvel.com/docs first to understand how to make Get requests from Marvel API docs on Swagger.

Fetching Data with React Query

To fetch data from Marvel API, we'll first create a function getComicsById using Axios to make a GET request.

This function retrieves comic data based on the provided comicId. We'll also define a custom hook useComicsById that utilizes React Query's useQuery hook.

import axios from "axios";
import { base_url, key, hash } from "./..";
import { useQuery } from "react-query";

async function getComicsById(comicId: number) {
  const { data } = await axios.get(`${base_url}/comics/${comicId}`, {
    params: {
      ts: "1",
      apikey: key,
      hash: hash,
    },
  });
  return data;
}

export function useComicsById(comicId: number) {
  return useQuery(["comic by id", comicId], () => getComicsById(comicId));
};

In the code above, we import Axios and necessary configuration variables. The getComicsById function performs the API call using axios.get() and returns the retrieved data. It includes the necessary parameters such as ts, apikey, and hash required by the Marvel API.

The useComicsById hook utilizes React Query's useQuery hook to handle the data fetching.

It takes comicId as an argument and uses it to generate a unique query key. The second argument of useQuery is an asynchronous function that calls getComicsById with the provided comicId.

React Query manages the caching, automatic refetching, and error handling for us.

Rendering the Fetched Data

To render the fetched data, we import the useComicsById hook into the ComicDetailsList component. In this component, we use Next.js useRouter hook to obtain the comicId from the URL.

We then use the useComicsById hook to fetch the data based on the comicId.

import { useRouter } from "next/router";
import { useComicsById } from "@features/comics/api";
import { ComicDetailsById } from "./..";


export function ComicDetailsList() {
  const router = useRouter();
  const { comicId } = router.query;
  const { data, isLoading, isError } =useComicsById(Number(comicId));
  const { results } = data?.data || {};


  if (isLoading) //...
  if (isError)//...


  return (
    <>
      {results?.map((comic: any) => (
        <ComicDetailsById
          key={comic.id}
          {...comic}

        />
      ))}

      //rest of the code...
    </>
  );
}

In the ComicDetailsList component, we destructure the data, isLoading, and isError properties from the result of the useComicsById hook. We also destructure the results from the data object.

Based on the loading and error states, we conditionally render different components.

Once the data is successfully fetched, we iterate over the results array using the map() function and render a ComicDetailsById component for each comic.

We pass the necessary props to the ComicDetailsById component, such as the key and the spread operator ({...comic}) to pass all the properties of the comic as individual props.

Conclusion

In this article, we learned how to use React Query to fetch data from the Marvel API in a React application. We refactored the code to utilize React Query's useQuery hook for data fetching and caching. By separating the data fetching logic into a custom hook, we kept the component clean and focused on rendering the data.

React Query provides additional features like caching, automatic refetching, and error handling out of the box, making it a powerful tool for handling data in React applications. Consider using React Query for your data fetching needs to improve the performance and maintainability of your React components.

Happy fetching!

Hope this helps!

How To Refactor Navigation Links Using map() in React

Cath Leyson — Mon, 29 May 2023 04:43:39 +0000

Introduction

In React applications, it's common to have navigation menus with links to different pages.

Initially, these links might be hardcoded individually, which can be cumbersome and less maintainable as the number of links grows.

In this article, we'll explore how to refactor hardcoded navigation links using the map() function in JavaScript.

By leveraging the power of map(), we can simplify our code and make it more scalable and reusable.

Prerequisites

Before we proceed, make sure you have a basic understanding of React and JavaScript.

Refactoring the Navigation Links

Let's start by refactoring the hardcoded navigation links in the LandingPage.

Here is the old way I did it

 const LandingPage = () => {

     return(
        <Nav >
          <LinkItems href="/">Home</LinkItems>
          <LinkItems href="/products">Products</LinkItems>
          <LinkItems href="/documentation">Documentation</LinkItems>
          <LinkItems href="/pricing">Pricing</LinkItems>
      </Nav>

//Rest of the code...
)}

First, I stored the paths in a file called routes.tsx, like so:

export const Routes = { 
home: "/", 
products: "/products",
documentation: "/documentation", 
pricing: "/pricing",
 };

Then import the Routes to LandingPage and pass it in the href key in navLinks:

import { Routes } from "@config/routes";
import styled from "styled-components";

//styled-component for anchor tag
const LinkItems = styled.a`
  display: flex;
  text-decoration: none;
  //...
`;

const navLinks = [
  { id: 1, label: "Home", href: Routes.home },
  { id: 2, label: "Products", href: Routes.products },
  { id: 3, label: "Documentation", href: Routes.documentation },
  { id: 4, label: "Pricing", href: Routes.pricing },
];

const LandingPage = () => {

     return( 
        <Nav>
          {navLinks?.map((link) => (
            <LinkItems key={link.id} href={link.href}>
              {link.label}
            </LinkItems>
          ))}
        </Nav>
//...
)}
export default LandingPage;

In the code above, we create an array called navLinks that contains objects representing each navigation link.

Each object has properties like id, label, and href, which correspond to the unique identifier, display label, and URL of the link, respectively.

Inside the LandingPage, we use the map() function on the navLinks array to iterate over each link object.

For each iteration, we render a LinkItems component with the key set to the id and the href set to the href property of the link object. The label property is used as the content of the link.

Explanation:

By refactoring the navigation links using map(), we achieve several benefits.

First, it simplifies the code by reducing duplication. Instead of repeating similar code for each link, we can define the links in a single array and iterate over it.

This makes the code more readable and easier to maintain.

Second, it enhances scalability and reusability.

Adding or modifying links becomes as simple as adding or modifying objects in the navLinks array.

The navigation menu can easily accommodate new links without requiring changes to the rendering logic.

This makes it convenient to scale the navigation menu as your application evolves.

Additionally, separating the links into a separate configuration file (Routes in this case) allows for better organization and separation of concerns.

It centralizes the management of routes, making it easier to update URLs or handle dynamic routing scenarios.

Conclusion

In this article, we explored how to refactor hardcoded navigation links using the map() function in React.

By storing the links in an array of objects, we simplified the code, improved scalability, and made it easier to maintain and update the navigation menu. Leveraging the power of map(), we achieved a more reusable and flexible solution.

Remember to apply this refactoring technique whenever you encounter repetitive code for navigation links or similar scenarios in your React applications.

Hope this helps!

How to Test Error Page using Cypress

Cath Leyson — Mon, 29 May 2023 01:06:17 +0000

Introduction

Cypress is a powerful end-to-end testing framework that allows developers to write tests for web applications.

In this article, we'll focus on testing the ErrorPage component, which is displayed when there's an error loading project data in our application.

We'll use Cypress to simulate an error and verify that the ErrorPage is rendered correctly with the expected error message and a refresh button.

Prerequisites

Before we proceed, make sure you have Cypress installed in your project. If not, you can install it by running the following command:

npm install cypress --save-dev

Setting Up the Test

To get started, create a new Cypress test file. Me? I'll just name it as error-page.spec.ts. Open the file and write the test case:

describe("Error Page", () => {
  context("Error", () => {
    const ErrorMsg = "There was a problem while loading the project data";

    it("simulates an error when dashboard cannot be displayed", () => {
      cy.intercept(
        {
          method: "GET",
          url: "https://myURL",
        },
        {
          forceNetworkError: true,
        }
      ).as("getNetworkFailure");

      cy.visit("http://localhost:3000/dashboard");
      cy.wait("@getNetworkFailure");
      cy.wait(10000);
      cy.contains(ErrorMsg).should("be.visible");
    });
  });
});

In the code above, we intercept the network request to https://myURL endpoint and force a network error.

This simulates the scenario where the dashboard cannot be displayed due to an error.

We then visit the dashboard page, wait for the network failure using cy.wait("@getNetworkFailure"), and wait for an additional 10 seconds to ensure the error message is rendered.

Finally, we use cy.contains() to assert that the ErrorMsg is visible on the page. This verifies that the ErrorPage component is rendered correctly when an error occurs.

What Does ErrorPage Component Look Like

The ErrorPage component is responsible for displaying the error message and providing a refresh button. Here's an example of how the component can be implemented:

import { useRouter } from "next/router";
import * as E from "./ErrorPage.styles";

export function ErrorPage() {
  const router = useRouter();
  const ErrorMsg = "There was a problem while loading the project data";

  return (
    <E.Container>
      <E.Wrapper>
        <E.ErrorText>{ErrorMsg}</E.ErrorText>
        <E.RefreshButton onClick={() => router.reload()}>
          Try again
          <E.ArrowIcon src={"/icons/refresh-arrow.svg"} alt="arrow" />
        </E.RefreshButton>
      </E.Wrapper>
    </E.Container>
  );
}

export default ErrorPage;

In the code above, I import the necessary styles from ErrorPage.styles and define the ErrorPage component. It renders the error message using and provides a refresh button using . Clicking the refresh button triggers the router.reload() function, which reloads the page and attempts to retrieve the project data again.

Conclusion

In this article, we've covered how to test the ErrorPage component using Cypress.

By simulating a network error and verifying that the error message is displayed correctly, we ensure that our application handles errors gracefully.

By thoroughly testing our error handling components like the ErrorPage, we can improve the overall reliability and user experience of our application.

Do you have comments or suggestions about this article? please I'm open to any of them!

Hope this helps!

How to show/hide Modal in React

Cath Leyson — Sun, 28 May 2023 04:52:55 +0000

Modals are a popular UI component used to display important information or capture user input in a non-intrusive manner. In this article, we'll explore how to create a modal in React using the powerful styled-components library.

Prerequisites: Before we dive into the implementation, make sure you have a basic understanding of React and styled-components. Familiarity with JavaScript and JSX syntax will also be helpful.

Setting Up the Project: To begin, create a new React project using your preferred setup. Once your project is set up, install the necessary dependencies by running the following command:

npm install styled-components

Styling the Modal: To style the modal, we leverage the power of styled-components. Take a look at it used in the code snippet below:

import styled from "styled-components";

const Overlay = styled.div`
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(52, 64, 84, 0.6);
  backdrop-filter: blur(8px);
  animation: fadein 0.5s;

  @keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
`;

const Modal = styled.div`
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25rem;
  height: 18rem;
  background: white;
  border-radius: 0.75rem;
  box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.1),
    0px 8px 8px -4px rgba(16, 24, 40, 0.04);
  transition: all 0.5s ease;
  z-index: 1;
`;

//The rest of elements content inside the Modal
const Icon = styled.img`
  // Icon styles 
`;

const Title = styled.div`
  //Title styles 
`;

const Text = styled.div`
  // Text styles 
`;

const Wrapper = styled.div`
  // Wrapper styles 
`;

const CancelButton = styled.button`
  // Cancel button styles 
`;

const ContactButton = styled.button`
  // Contact button styles 
`;

By applying styles to each component, we can easily customize their appearance. I won't populate the article with stylings of other elements. The Overlay, Modal and CancelButton though, are what we need here.

Implementing the ContactModal Component:
To create the functional component, Let's take a closer look at the code:

//typescript value
type ModalProps = {
  setShowModal: React.Dispatch<React.SetStateAction<boolean>>;
};

export function ContactModal({ setShowModal }: ModalProps) {
  return (
    <Overlay onClick={() => setShowModal(false)}>
      <Modal onClick={(e) => e.stopPropagation()}>
        {/* Modal Content */}
          <CancelButton
            onClick={() => setShowModal(false)}
          >
            Cancel
          </CancelButton>
      </Modal>
    </Overlay>
  );
}

In the code above, we define the ContactModal component. The Overlay component represents the backdrop of the modal, while the Modal component encapsulates the actual content. By using the onClick event handlers, we can control the visibility of the modal by toggling the showModal state.

We put stopPropagation() in Modal component's onClick function so that when we clicked it, it prevents from closing the modal pop up.

Triggering the Modal: To trigger the modal, we integrate it into our LandingPage . Here's an example of how it can be done:

import React, { useState } from "react";
import { ContactModal } from "../"

const LandingPage = () => {
  const [showModal, setShowModal] = useState(false);

  return (
    <div>
      <ContactButton
        onClick={() => setShowModal(!showModal)}
      >
        {/* Contact button icon */}
      </ContactButton>
      {showModal && <ContactModal setShowModal={setShowModal} />}
    </div>
  );
};

In the LandingPage, we use the showModal state and the setShowModal function from the useState hook to control the visibility of the modal. When the contact button is clicked, the showModal state is toggled, rendering or hiding the ContactModal component accordingly.

Conclusion:

Remember, modals are versatile components that can be customized further based on your specific requirements. You can add additional functionality such as animations, form inputs, or dynamic content to enhance the user experience.

By mastering the creation of modals and utilizing libraries like styled-components, you can elevate the visual appeal and user interaction of your React applications.

Do you have comments or suggestions about this article, please I’m open to any of them.Thank you!

Hope this helps!

Warmly,
Cath