DEV Community: Vishesh Tiwari

clean code react

Vishesh Tiwari — Wed, 26 Feb 2025 17:39:58 +0000

How to Identify and Remove Unused Files in React Projects?

Vishesh Tiwari ・ Nov 13 '24

#cleancode #react

[Boost]

Vishesh Tiwari — Sun, 29 Dec 2024 11:07:18 +0000

How to write jest test cases for react component?

Vishesh Tiwari ・ Nov 11

#testing #react #jest

How to write unit test in react?

Vishesh Tiwari — Thu, 26 Dec 2024 09:37:11 +0000

How to write jest test cases for react component?

Vishesh Tiwari ・ Nov 11

#testing #react #jest

How to add custom fonts and viewports in storybook?

Vishesh Tiwari — Fri, 06 Dec 2024 08:33:24 +0000

Hi devs,

In this article, we will discuss how to add and customize our Storybook dashboard with:

Custom font
Custom viewport

Step-by-Step Guide

Step 1: Setting Up Custom Viewports

To add custom viewports, you need to define them in your Storybook configuration. This allows you to simulate different screen sizes and resolutions. Here’s how you can do it:

Define Custom Viewports: Create a customViewports object with your desired viewports. Each viewport should have a name and styles for width and height.


const customViewports = {
  Mac: {
    name: 'Mac',
    styles: {
      width: '1728px',
      height: '868px',
    },
  },
  Windows: {
    name: 'Windows',
    styles: {
      width: '1280px',
      height: '559px',
    },
  },
  'Business Desktop': {
    name: 'Business Desktop',
    styles: {
      width: '3840px',
      height: '2160px',
    },
  },
  'Minimized Windows': {
    name: 'Minimized Windows',
    styles: {
      width: '1024px',
      height: '768px',
    },
  },
};

Add Viewports to Parameters: Integrate the customViewports into your Storybook’s parameters.


const parameters = {
  viewport: {
    viewports: { ...customViewports },
  },
};

Step 2: Customizing Fonts

To customize fonts in your Storybook, you can define global types and use a theme provider. This allows you to switch between different fonts easily.

Define Fonts: Create a Font object with your font options.

const Font = {
  FELLIX: 'fellix',
  ROBOTO: 'roboto',
};

Set Up Global Types: Define globalTypes to manage the font settings. This includes a description, default value, and toolbar configuration.

const globalTypes = {
  font: {
    description: 'Global font for components',
    defaultValue: Font.ROBOTO,
    toolbar: {
      title: 'Fonts',
      items: [
        { value: Font.FELLIX, title: 'Fellix' },
        { value: Font.ROBOTO, title: 'Roboto' },
      ],
      dynamicTitle: true,
    },
  },
};

Create a Theme Provider: Use a theme provider to apply the selected font globally. This involves creating a withThemeProvider decorator.


const withThemeProvider = (Story, storyContext) => {
  const { globals } = storyContext;
  const currentFont = globals.font;

  return (
    <ThemeProvider theme={currentTheme} font={currentFont}>
      <GlobalStyles />
      <Story />
    </ThemeProvider>
  );
};

Add the Decorator: Finally, add the withThemeProvider decorator to your Storybook configuration.

export const decorators = [withThemeProvider];

Conclusion

By following these steps, you can easily add and customize your Storybook dashboard with custom fonts and viewports. This will help you create a more tailored and visually appealing development environment.

Please do not forget export variables -

export { decorators, globalTypes, parameters };

Happy coding! 🚀

How to customize storybook (custom theme and layout option)?

Vishesh Tiwari — Fri, 06 Dec 2024 08:16:32 +0000

Hi devs,

In this article , I am going to discuss about how can we customize our storybook which includes -

Custom theme ( dark or light )
Custom layout ## How to setup custom background colour with theme ? I am assuming you have done basic setup of storybook. If you have then in your project structure file named preview.tsx or preview.ts will be present where we will all customization code , if this file not present then you can create it. And second file you need create name as CustomTheme.ts which having content as below


import { create } from '@storybook/theming';
import logo from './my-app-logo.svg';
export default create({
  base: 'light',
  brandTitle: 'My app name',
  brandUrl: 'https://myapp.com',
  brandImage: logo,
  appContentBg: 'white',
  appBorderColor: 'grey',
  appBorderRadius: 4,
});

After that create one file named as manager.ts if it is not present on your .storybook work directory and this

import { addons } from '@storybook/addons';

import CustomTheme from './CustomTheme';

addons.setConfig({
  theme: CustomTheme,
});

Now lets move to preview.tsx file , we will start defining some configuration as below with withThemeProvider variable.


const Theme = {
  LIGHT: 'light',
  DARK: 'dark',
};

const customBackgrounds = {
  values: [
    {
      name: Theme.LIGHT,
      value: 'white',
    },
    {
      name: Theme.DARK,
      value: '#333333',
    },
  ],
};

const parameters = {
  backgrounds: customBackgrounds,
  viewport: {
  },
};


const getThemeColor = (theme: string) => {
  const { value } = parameters.backgrounds.values.find(({ name }) => name === theme);
  return value;
};

const withThemeProvider = (Story, storyContext) => {
  const { globals } = storyContext;
  const currentLayout: string = globals.layout;
  const currentFont: BackyardFonts = globals.font;
  const currentBackGround = globals.backgrounds?.value ?? 'white';
  const currentTheme: any = currentBackGround === 'white' ? Theme.LIGHT : Theme.DARK;
  const currentBackground: string = getThemeColor(currentTheme);

  useEffect(() => {
    document.body.setAttribute('backgroundColor', currentBackground);
  }, [currentBackground, currentFont]);

  return (
    <ThemeProvider
      theme={currentTheme}
      font={currentFont}
    >
      <GlobalStyles />
      <Story />
    </ThemeProvider>
  );
};

const decorators = [withThemeProvider];

After adding these configuration you can change background colour with storybook theme.

How to setup custom layout ?

For setting up storybook with custom layout you need to following setup given below -

Defining custom layout which is going to appear as option in storybook


const Layout = {
  DEFAULT: 'default',
  WITH_L1: 'Layout 1',
  WITH_L2: 'Layout 2',
};

Now we need add layout as option using global parameter


const globalTypes = {
  layout: {
    description: 'Layouts',
    defaultValue: Layout.DEFAULT,
    toolbar: {
      title: 'Layout',
      items: [
        { value: Layout.DEFAULT, title: 'Default' },
        { value: Layout.WITH_L1, title: 'Layout 1' },
        { value: Layout.WITH_L2, title: 'Layout 2' },
      ],
      dynamicTitle: true,
    },
  },
};

Now we to do some slight changes in withThemeProvider

const withThemeProvider = (Story, storyContext) => {
  const { globals } = storyContext;
  const currentLayout: string = globals.layout;
  const currentBackground: string = getThemeColor(currentTheme);

  return (
    <>
      {currentLayout === Layout.DEFAULT && <Story />}
      {currentLayout === Layout.WITH_L1 && (
        <L1>
          <Story />
        </L1>
      )}
      {currentLayout === Layout.WITH_SIDEBAR && (
        <L2>
          <Story />
        </L2>
      )}
    </>
  );
};

You can define layouts as component anywhere and export it in preview.tsx file -

const L1 = ({ children }) => (
  <StyledRootWrapper>
    <StyledNavContainer />
    <StyledChildren>{children}</StyledChildren>
  </StyledRootWrapper>
);

const L2 = ({ children }) => (
  <StyledRootWrapper>
    <StyledNavContainer />
    <StyledChildren>{children}</StyledChildren>
  </StyledRootWrapper>
);

Whole code snippet look like for preview.tsx -

import { ThemeProvider } from '@backyard/react';
import { GlobalStyles } from './Container';
import { L1, L2 } from './customLayout';
import { useEffect } from 'react';
import {
  customBackgrounds,
  Layout,
  Theme,
} from './configurations';
import React from 'react';

const parameters = {
  backgrounds: customBackgrounds,
};

const getThemeColor = (theme: string) => {
  const { value } = parameters.backgrounds.values.find(({ name }) => name === theme);
  return value;
};

const withThemeProvider = (Story, storyContext) => {
  const { globals } = storyContext;
  const currentLayout: string = globals.layout;
  const currentBackGround = globals.backgrounds?.value ?? 'white';
  const currentTheme: any = currentBackGround === 'white' ? Theme.LIGHT : Theme.DARK;
  const currentBackground: string = getThemeColor(currentTheme);

  useEffect(() => {
    document.body.setAttribute('backgroundColor', currentBackground);
  }, [currentBackground, currentFont]);

  return (
      <ThemeProvider
      theme={currentTheme}>
      {currentLayout === Layout.DEFAULT && <Story />}
      {currentLayout === Layout.WITH_L1 && (
        <L1>
          <Story />
        </L1>
      )}
      {currentLayout === Layout.WITH_SIDEBAR && (
        <L2>
          <Story />
        </L2>
      )}
    </ThemeProvider>
  );
};

const globalTypes = {
  layout: {
    description: 'Layouts',
    defaultValue: Layout.DEFAULT,
    toolbar: {
      title: 'Layout',
      items: [
        { value: Layout.DEFAULT, title: 'Default' },
        { value: Layout.WITH_L1, title: 'Layout 1' },
        { value: Layout.WITH_L2, title: 'Layout 2' },
      ],
      dynamicTitle: true,
    },
  },
};


const decorators = [ withThemeProvider];

export { decorators, globalTypes, parameters };

After that completing these steps you can find option dropdown at top of storybook toolbar.

How to Identify and Remove Unused Files in React Projects?

Vishesh Tiwari — Wed, 13 Nov 2024 16:06:36 +0000

Hi Developer,

In this article ,I am sharing some tools/method which will help you to maintain clean react code base.

Keeping Your React Codebase Clean and Efficient: A Comprehensive Guide

In the fast-paced world of web development, maintaining a clean and efficient codebase is crucial for productivity and performance. As React developers, we often find ourselves juggling multiple tools and libraries to ensure our projects are in top shape. In this article, we’ll explore how to use ESLint, Webpack Bundle Analyzer, Unused Files Webpack Plugin, and depcheck to keep your React codebase tidy and efficient.

1. ESLint: Catching Unused Variables

ESLint is a powerful tool that helps you identify and fix problems in your JavaScript code. One of its many features is the ability to catch unused variables, which can clutter your code and lead to potential bugs.

Installation:

yarn add eslint --dev

Configuration:

Create a .eslintrc file in your project root and add the following rule:

JSON

{
  "rules": {
    "no-unused-vars": "warn"
  }
}

Usage:

Run ESLint to lint your project:

yarn eslint .

With ESLint, you can ensure that your code remains clean and free of unnecessary variables, making it easier to read and maintain.

2. Webpack Bundle Analyzer: Visualizing Your Bundle

Webpack Bundle Analyzer is an excellent tool for visualizing the size of your webpack output files. It helps you understand where your code is and identify large or unused files.

Installation:

yarn add webpack-bundle-analyzer --dev

Configuration:

Add the plugin to your webpack configuration:

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
};

Usage:

Run your build script with the analyzer plugin enabled:

yarn build

The analyzer will open a web page with an interactive treemap visualization of your bundle, helping you pinpoint areas for optimization.

3. Unused Files Webpack Plugin: Finding Unused Files

Unused Files Webpack Plugin helps you find and remove unused files in your project, ensuring that your codebase remains lean and efficient.

Installation:

yarn add unused-files-webpack-plugin --dev

Configuration:

Add the plugin to your webpack configuration:

const UnusedFilesWebpackPlugin = require('unused-files-webpack-plugin').default;

module.exports = {
  plugins: [
    new UnusedFilesWebpackPlugin({
      patterns: ['src/**/*.*'],
      failOnUnused: true,
    })
  ]
};

Usage:
Run your webpack build script:

yarn build

The plugin will report any unused files, and if failOnUnused is set to true, it will fail the build, prompting you to clean up your code.

4. depcheck: Identifying Unused Dependencies

depcheck is a tool that helps you find unused dependencies and files in your project, keeping your package.json lean and your project dependencies up-to-date.

Installation:

yarn add depcheck

Usage:

Run depcheck in your project directory:

depcheck

depcheck will analyze your project and list any dependencies that are not being used, allowing you to remove them and keep your project dependencies minimal.

Conclusion

By integrating these tools into your workflow, you can maintain a clean, efficient, and well-organized React codebase. ESLint helps you catch unused variables, Webpack Bundle Analyzer provides insights into your bundle sizes, Unused Files Webpack Plugin ensures no unused files are included in the build, and depcheck identifies and removes unused dependencies.

Keeping your codebase tidy not only improves performance but also makes it easier to maintain and scale. Happy coding!

How to use infer in typescript?

Vishesh Tiwari — Mon, 11 Nov 2024 07:41:42 +0000

Hi Devs,

Welcome to this exciting article where we’ll explore how to use infer in TypeScript to write cleaner code and avoid duplication. By the end of this read, you’ll be able to effortlessly extract function return types, argument types, and React component props. Let’s dive in!

What You’ll Learn:

Inferring Function Arguments: Simplify your code by extracting argument types.

Let's assume on function as example -

const myFunction = (arg0:number,arg1:string,arg2:Object):boolean =>{
  // Business logic
  return true
}

For inferring arguments of myFunction we can use below statement -

type MyArgumentTypes<T> = T extends (...args: infer A) => any ? A : never;

type ArgumentTypes = MyArgumentTypes<typeof myFunction>;
// Initial type:
[arg0: number, arg1: string, arg2: Object]

Inferring Function Return Types: Avoid redundancy by inferring return types.

Same like we can extract function return type also using below statement -

type ReturnTypeOfFunction<T> = T extends (...args: any[]) => infer R ? R: never;

Let's start the action -

type ReturnType = ReturnTypeOfFunction<typeof myFunction>;
// Initial type:boolean

Inferring React Component Props: Make your React components more manageable by extracting props.

For extracting react component props/type approach will be ,just need to slight changes.

Suppose you have test react component CustomAlert like -

interface Props {
  type: any;
  subTitle: string;
  setShowAlert: Function;
  dataTestId?: string;
}

const CustomAlert: React.FC<Props> = ({ type, subTitle, setShowAlert, dataTestId }) => { }

So for props extraction we can use below statement

type ExtractProps<TComponentOrTProps> = TComponentOrTProps extends React.ComponentType<infer TProps>
  ? TProps
  : TComponentOrTProps;`

type CustomAlertProps = ExtractProps<typeof CustomAlert>
// Initial type: Props

I hope this article will help you to debug/extract props about library function or build function.

Show me your love ❤️

How to write jest test cases for react component?

Vishesh Tiwari — Mon, 11 Nov 2024 06:00:23 +0000

Hi developers,

React developers love crafting components, but when it comes to code coverage, they often find themselves at a loss. This blog aims to change that! By the end, you’ll feel confident in writing test cases that minimize bugs.

I’ve shared some key points and techniques below to help you write React components that are easy to test.

Before writing any component, ask yourself: Is it testable? If the answer is no, it’s time to change your approach.

Solution: Embrace the TDD (Test-Driven Development) approach.

When mocking, follow the principle of abstraction by defining the implementation.

Instead of passing state and handlers as props, and to avoid mocking API calls, define the implementation by passing methods as props. This allows you to create mock responses effectively.

Major of the times ,when we write the component either we have to mock these -

Any of the package/file's methods or properties
Any hooks
Any type of network call

But magic only reside focus on imported package ,define to mock their function or property and then define implementation.

If it function return promise use mockResolve , if multiple function getting call the define called in stack using mockResolveOnce.

Lets see some of the approaches by using this we can write testable components.

Using MockAdapter -

First make sure you have installed this package - 'axios-mock-adapter' if not use command

yarn add axios-mock-adapter

After that you can mock network like -


const fetchedData = {}

describe('searchData', () => {
  let mockAxios: MockAdapter;

  beforeEach(() => {
    mockAxios = new MockAdapter(axios);
  });

  afterEach(() => {
    mockAxios.reset();
    mockAxios.restore();
  });

  it('should fetch all brands', async () => {
    const keyWord: string = 'paint';
    let mockAxios: MockAdapter = new MockAdapter(axios);
    const data = [];

    const searchApi: string = `apiUrl?keyWord=${keyWord}`;

    mockAxios.onGet(searchApi).reply(200, JSON.stringify(fetchedData));

    const result = await searchData('paint');

    expect(result).toEqual(data);
    expect(mockAxios.history.get.length).toBe(1);
    expect(mockAxios.history.get[0].url).toBe(searchApi);
  });
});

How to mock function from particular method ?

Suppose you have one file like getChangeHistory.ts -

const getChangeHistory = async (
  promotionId: string,
  fetchAll: boolean = false,
): Promise<ApiResponse> => {
  const baseUrl: string = `apiUrl`;
  const params: string = fetchAll ? 'fetch=ALL' : '';
  const changeHistoryApiUrl: string = `${baseUrl}?${params}`;
  const axiosInstance: AxiosInstance = getAxiosInstance('apiUrl');
  const response: AxiosResponse = await axiosInstance.get('changeHistoryApiUrl');
  return response.data;
};

In above code we will try to mock getAxiosInstance method and provide our own implementation because this method is responsible for api call -

jest.mock('path of the file where getAxiosInstance is define', () => ({
  getAxiosInstance: jest.fn(),
}));

// example : '../../../../../src/lib/api/config'

Now your test case will look like -


describe('getChangeHistory', () => {
  let mockedAxiosInstance: jest.Mocked<any>;
  const offerId: string = '1234567890';

  beforeEach(() => {
    mockedAxiosInstance = getAxiosInstance as jest.Mock;
  });

  it('should fetch offer history for offer', async () => {
    const offerHistory = {
      changeHistory: [

      ],
    };

    // defining implementation
    mockedAxiosInstance.mockReturnValue({
      get: jest.fn().mockResolvedValue({ data: fetchOfferHistory }),
    });

    const result = await getChangeHistory(id);

//checking assertion / interactions
    expect(result).toEqual(offerHistory);
    expect(getAxiosInstance).toHaveBeenCalledWith(TEST_USER, 'apiUrl');
  });

  it('should handle API errors gracefully', async () => {
    mockedAxiosInstance.mockReturnValue({
      get: jest.fn().mockRejectedValue(new Error('Request failed with status code 500')),
    });

    await expect(getChangeHistory(TEST_USER, id)).rejects.toThrow(
      'Request failed with status code 500',
    );
  });
});

Lets see how can we mock any method present in file or package.

I am taking example of axios which is having it owns instance


jest.mock('axios');
const mockAxios = axios as jest.Mocked<any>;

And define its implementation like

const fetchedBrands = () =>{}

mockAxios.create.mockImplementation(() => mockAxios);
mockAxios.get.mockResolvedValue({ data: fetchedBrands });

Here create and get are the methods which is present in AxiosInstance . We have provided mock implementation using mockResolvedValue where fetchedBrands is mocked data.

Hence your test file look like -


jest.mock('axios');
const mockAxios = axios as jest.Mocked<any>;

const mockedData = {}

describe('Test : Search data API', () => {
  it('Should search data successfully', async () => {
    mockAxios.create.mockImplementation(() => mockAxios);
    mockAxios.get.mockResolvedValue({ data: fetchedBrands });

    const dataKeyWord = 'vers';
    const receivedResponse = await searchData(dataKeyWord);
    expect(receivedResponse).toStrictEqual(mockedData);
    expect(axios.get).toHaveBeenCalledWith(apiUrl);
  });
});

Actually seachData method is look like -


export const searchBrands = async (user: User, brandName: string) => {
  const params: string = new URLSearchParams({ brandName }).toString();
  const searchBrandsApiUrl: string = 'apiUrl;
  const apiInstance: AxiosInstance = getAxiosInstance();
  const response: AxiosResponse = await apiInstance.get(searchBrandsApiUrl);
  return response.data;
};

Now lets see how can we make any function from any file / package and define implementation

Like same for package -


 jest.mock('@my-package-name/folder', () => ({
      fooFunction: jest.fn(),
    }));

Lets define the mock implementation -


 let mockfooFunction: jest.MockedFunction<any>;
  beforeEach(() => {
    jest.mock('@my-package-name/folder', () => ({
      fooFunction: jest.fn(),
    }));
    mockGetFooFunction = fooFunction as jest.MockedFunction<
      typeof fooFunction
    >;
  });

Your test case will look like -


describe('Test Cases', () => {
  let mockFooFunction: jest.MockedFunction<any>;
  beforeEach(() => {
    jest.mock('@my-package-name/folder', () => ({
      fooFunction: jest.fn(),
    }));
    mockFooFunction= fooFuction as jest.MockedFunction<
      typeof fooFunction
    >;
  });

  it('Should do something', async () => {
    mockFooFunction.mockResolvedValue(mockedStoreData);
    /* fooFunction will be called inside MyLayout. It is a network call to fetch data available inside '@my-package-name/folder' */
    render(
      <MyLayout/>,
    );
});

Loading....

Notes -

To improve your tests, ensure they are readable and well-structured. Here are some key points:

Separate Rendered and Event-Based Tests: Write tests for rendering and events separately to maintain clarity.
Use Mock Data Helper Functions: Create helper functions for mock data to keep your tests clean and reusable.
Name Tests Clearly: Follow the “Should be” convention for test case names to make their purpose clear.
Use act with await: For interactive tests, such as setting a text box value or clicking a button, use act with await to handle asynchronous updates.
Isolate Components: Ensure each component is isolated from others to avoid dependencies and side effects.
Focus on Integration Testing: Prioritize integration tests that cover interactions between all the tiny components to ensure comprehensive coverage.

Show me your love ❤️

Jira Story Creation Template For Front End Developer

Vishesh Tiwari — Tue, 29 Oct 2024 11:57:24 +0000

JIRA Story Template

Below you can find/use template for creating any of the feature story -

Acceptance Criteria:

[First criterion]
[Second criterion]
[Third criterion]

Description:

Context: [Background information or context for the story]
Scope: [What is included and what is not included in this story]
Assumptions: [Any assumptions made while writing the story]

Design:

[Link to design mockups or specifications]

Technical Notes:

[Any technical details or considerations]

Dependencies:

[List any dependencies or related stories]

Testing:

Unit Tests: [Details of unit tests required]
Integration Tests: [Details of integration tests required]
End-to-End Tests: [Details of end-to-end tests required]

Documentation:

[Any documentation updates required]

Definition of done -

Code Quality:

Code is reviewed and approved by at least one other developer.
No linting errors or warnings.

Testing:

Unit tests and integration tests are written and passing.
Code coverage meets the team’s threshold (e.g., 80%).

Functionality:

All acceptance criteria for the user story are met.

Design:

The feature matches the design specifications.
Components are documented and tested in Storybook.

Documentation:

Code is documented where necessary. (Storybook is enough)

I hope this save times for many developers😁.

Show me your love ❤️

How to use Conditional Types in typescript?

Vishesh Tiwari — Tue, 29 Oct 2024 11:49:53 +0000

Using Conditional Properties in TypeScript: A Practical Example

In TypeScript, conditional properties allow us to create flexible and type-safe interfaces that adapt based on certain conditions. This is particularly useful when dealing with complex data structures where certain properties should only be present under specific circumstances. In this blog post, we’ll explore how to use conditional properties with a practical example involving reward groups.

The Scenario

Imagine we have a system that manages different types of rewards. Each reward can be of a specific type, such as “FINANCE” or “SHIPPING”.

Depending on the reward type, certain attributes should be included or excluded. For instance, financial rewards should include financial attributes, while shipping rewards should include shipping attributes. Additionally, we want to ensure that certain attributes are only included based on the reward type and reward on conditions.

Defining the Types

First, let’s define the basic types and interfaces we’ll be working with:

type RewardType = "FINANCE" | "SHIPPING" | "OTHER"; // Example values for RewardType

interface ItemConditionAttribute {
  // Define the properties of ItemConditionAttribute here
}

interface RewardAttributes {
  // Define the properties of RewardAttributes here
}

interface ShippingAttributes {
  // Define the properties of ShippingAttributes here
}

interface FinanceAttributes {
  // Define the properties of FinanceAttributes here
}

interface RewardGroupBase {
  groupId: number;
  rewardType: RewardType;
  rewardOn: string;
  itemConditionAttributes: ItemConditionAttribute[];
}

Using Conditional Types

To ensure that financeAttributes is only included when rewardType is “FINANCE” and rewardAttributes is not included when rewardOn is “Finance”, we can use conditional types. Here’s how we define the RewardGroup type:

type RewardGroup = RewardGroupBase & (
  { rewardType: "FINANCE"; rewardOn: "Finance"; financeAttributes: FinanceAttributes; rewardAttributes?: never; shippingAttributes?: never } |
  { rewardType: "SHIPPING"; rewardOn: Exclude<string, "Finance">; shippingAttributes: ShippingAttributes; financeAttributes?: never; rewardAttributes: RewardAttributes } |
  { rewardType: Exclude<RewardType, "FINANCE" | "SHIPPING">; rewardOn: Exclude<string, "Finance">; financeAttributes?: never; shippingAttributes?: never; rewardAttributes: RewardAttributes }
);

Explanation

Base Interface:
RewardGroupBase contains the common properties that are always present regardless of the reward type.

Conditional Types:
We use a union of three types to handle the conditional properties.

When rewardType is “FINANCE” and rewardOn is “Finance”, financeAttributes is required,
and rewardAttributes and shippingAttributes are not allowed.
When rewardType is “SHIPPING” and rewardOn is not “Finance”, shippingAttributes is required, and financeAttributes is not allowed, but rewardAttributes is included.
For any other rewardType and rewardOn not being “Finance”, rewardAttributes is included, but neither financeAttributes nor shippingAttributes are included.

Example Usage

Here’s how you can use the RewardGroup type in practice:


const financeReward: RewardGroup = {
  groupId: 1,
  rewardType: "FINANCE",
  rewardOn: "Finance",
  itemConditionAttributes: [ /* properties */ ],
  financeAttributes: { /* properties */ }
};

const shippingReward: RewardGroup = {
  groupId: 2,
  rewardType: "SHIPPING",
  rewardOn: "Delivery",
  itemConditionAttributes: [ /* properties */ ],
  shippingAttributes: { /* properties */ },
  rewardAttributes: { /* properties */ }
};

// This will cause a TypeScript error because financeAttributes is not allowed for rewardType "SHIPPING"
const invalidReward: RewardGroup = {
  groupId: 3,
  rewardType: "SHIPPING",
  rewardOn: "Delivery",
  itemConditionAttributes: [ /* properties */ ],
  financeAttributes: { /* properties */ } // Error: financeAttributes
};

Show your love ❤️

How to reverse the key value pair in map ( typescript)?

Vishesh Tiwari — Mon, 28 Oct 2024 18:21:46 +0000

In this article , we will learn how can we swap key with their value in map using custom typescript function.

Example

Here we have one colour map which having keys as OfferStatus enum and values as colour of badges.

enum OfferStatus {
  INPROGRESS='INPROGRESS',
  COMPLETE='COMPLETE',
  DEACTIVATE='DEACTIVATE',
  DELETED='DELETED'
}

type BadgeProps = {
  color: 'gold' | 'green' | 'neutral' | 'red';
};

const colourMap = new Map<OfferStatus, BadgeProps['color']>([
  [OfferStatus.INPROGRESS, 'gold'],
  [OfferStatus.COMPLETE, 'green'],
  [OfferStatus.DEACTIVATE, 'neutral'],
  [OfferStatus.DELETED, 'red'],
]);

Now lets swap their values using below function -

function createReverseMap<K, V>(map: Map<K, V>): Map<V, K> {
  return new Map(Array.from(map, ([key, value]) => [value, key]));
}

const reverseColourMap = createReverseMap(colourMap);

console.log(Array.from(reverseColourMap.values()));
// output :  ["INPROGRESS", "COMPLETE", "DEACTIVATE", "DELETED"] 

console.log(Array.from(reverseColourMap.keys()));
// output :  ["INPROGRESS", "COMPLETE", "DEACTIVATE", "DELETED"]

values() method will return map iterator which is

MapIterator<OfferStatus> and keys() method will return map iterator which is

MapIterator<MapIterator<"gold" | "green" | "neutral" | "red">

Then Array.from() expect iterator to construct the array.(Creates an array from an iterable object.)

Best Practices for Writing Clean React Code with Examples

Vishesh Tiwari — Mon, 28 Oct 2024 18:04:46 +0000

React Naming Conventions:

Component Naming Conventions:

Use PascalCase for react component names, Interfaces & Types:

const ColumnSelectorPropsType = { heading: string };
const ColumnSelector = ({ heading }: ColumnSelectorPropsType) => {
  return <div className="column-selector">{heading}</div>;
};

Only one component per file
Use component name for filename
Use .tsx extension for the component file.
All files related to a component must be inside the component folder

ColumnSelector.tsx

Use camelCase for component instances/Javascript objects/non-component.

const FileUploader = <FileUploader file={} setFile={}/>

Use component name associated style (.css/.scss/**.js) file name should be in Pascal Case. If there is more than one component ( sub-component ) then it is better to create style folder then add all styled component.

FileUploader.style.ts

Add Import React statement in every react component file in single quote.

import React from 'react';

Property/Attribute Naming Conventions:

Use camelCase for property/attribute names

<workbench exceptionType="UOM" refreshInterval={3000}/>

Use double quotes for JSX/TSX attributes, use single quotes for js strings.

const exceptionType = 'VPXD';
<ColumnSelector heading="Select Columns" exceptionType={exceptionType}/>

If the value of the component property is 'true' you don't need to mention it.

const File = ({showFile:boolean, salesId: number}) => {
      const filePath = `.../file/${salesId}`;
      return (<div className="user"> salesId:{salesId} <a href={fileP/>{filePath}</a> </div>);
<File salesid="12345" showFile={true}/>
//change it to
<File salesid="12345" showFile/>

Always use propsWithChildren when you pass children to a component

import React, {propsWithChildren} from 'React';
type ComponentProps = {name:string};
const Component=(props:PropsWithChildren<ComponentProps>)=>{...};

Anything to be added in future.

Folder Naming Conventions:

User camelCase for folder names
Use index.js in every folder and export all modules from that folder. This way we can directly import modules from the folder without the complete path.

//folder structure
ColumnSelector  - ColumnSelector.tsx
  - ColumnSelectro.scss/ColumnSelectro.css
  - index.tsx
      
index.js
  export * from './ColumnSelector';

Folder which having component should follow naming convention as camel case.

Custom Hooks Naming Conventions:

Create custom hooks in separate files inside hooks folder.
Custom hook should start with the string "use". e.g useChangeLog

Component Development Guidelines:

Separate large inline function from the JSX/TSX:

const Button = () => <button onClick={(event:any)=> console.log(event)} value="Save"/>
//Change to below:
const Button = () => { 
      const onClick = (event:any)=> console.log(event);
      return (<button onClick={onClick} value="Save"/>);
}

Avoid using indexes as key props to re-render components, instead use unique keys generated by API response.

const list = (<ul>{storeList.map((store,idx,storeList)=>(<li key={idx}>{store.value}</li>))}</ul>);
//change to:
const list = (<ul>{storeList.map((store,idx,storeList)=>(<li key={store.id}>{store.value}</li>))}</ul>);
 Group the state variables into a single state whenever possible

const [fileName, setFileName] = useState("");
const [fileState, setFileState] = useState("");
//change it to:
const [file, setFile] = useState({fileName:"", fileState:""});

Avoid Inline styles, use CSS style based components.
Avoid long list of arguments for functions, use objects instead

const getBottomRight = (top:number, left:number, width:number, height:number) => {
   return { left: left+width, top: top+height };
}

//change to
const getBottomRight = ( {top, left, width, height} : any) => {
   return { left: left+width, top:top+height };
}

Use template literals instead of string concatenations

const SalesId = 3089089;
const isZipFile = true;

const API = "/switch-user?salesID="+SalesId+"&isZipFile="+ isZipFile;
//change it to
const API = `/switch-user?salesID=${SalesId}&isZipFile=${isZipFile}`;

Ensure to remove non-html attributes before applying to the jsx.

const saveBtn = ({hide,...rest}:any) => {
  return <button {...rest} style={visibility:hide}/>;
}saveBtn({value:"save", onClick:()=>{}, hide});

- Use closing tags for components when there are no children

<FileUploader></FileUploader>
//change it to
<FileUploader/>

Keep imports in a consistent order

1) Frame work imports: import React from 'react'
2) External Library imports: import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
3) Internal Library imports: import { Loader } from '@replenishments/react-components';
4) project imports: import useChangeLog from '../hooks/useChangeLog';

Use Object De-structuring

const Profile = (user:any) =>  (<div className='user-info'> {profile.salesId}|{profile.name}|{profile.profileType} </div>);
//change it to
const {salesId, name, profileType} = profile;
const Profile = (user:any) =>  (<div> {salesId}|{name}|{profileType} </div>);

Use functional components instead of class-based components
Try to segregate API call related logic from actual Component.
You can create simple js or ts file and have API call level logic into that file as a function. And whenever you needed import and use this will help to write unit test case.
Any utility function should not be the part of Component container. Please write outside the container.
When you passing props from parent to child please define interface in child component.
If possible, move data fetching logic into container components for clean code

const UserList = () => {
    const [users, setUsers] = useState([]);
    useEffect(() => {
        fetch("../users")
            .then((res) => res.json())
            .then(({ users }) => setUsers(users));
    }, []);
    return (
        <div className='user-list'>
            <ul>
                {users.map((user: any) => (
                    <li key={user.id}>{user.name}</li>
                ))}
            </ul>
        </div>
    );
};


//Change it to

const useFetchUsers = (setUsers: any) => {
    useEffect(() => {
        fetch("../users")
            .then((res) => res.json())
            .then(({ users }) => setUsers(users));
    }, [setUsers]);
};

const UserListContainer = () => {
    const [users, setUsers] = useState([]);
    useFetchUsers(setUsers);
    return <UserListPresentation userList={users} />;
};

const UserListPresentation = ({ userList }: { userList: any[] }) => {
    return (
        <div className='user-list'>
            <ul>
                {userList.map((user: any) => (
                    <li key={user.id}>{user.name}</li>
                ))}
            </ul>
        </div>
    );
};

Use Proptypes for properties and define types for each property
Define default values for properties
Avoid prop-drilling & prop-polyadic, use redux or context API, and spread props as needed.
Use refs only when needed
Use React.memo() for memoizing components for performance optimisations
Move global constants to a separate constants file. Component-specific constants into a constant file inside the component folder.
Never call a functional Component like a simple function Sanitise HTML to avoid XSS attacks