Helpers

Configs

This folder set or check all configuration for the app base on env variables.

env.ts

export const IS_DEV = process.env.APP_ENV === "development";
export const IS_PROD = process.env.APP_ENV === "production";
export const IS_FAKE = process.env.NEXT_PUBLIC_FAKE_DATA_ON === "true";
export const IS_SAME_SEED = process.env.NEXT_PUBLIC_SAME_SEED_ON === "true";

This file return checkers to see if the app is in dev mode or in prod mode, or if fake data should be return or not.

Utils

All project need utils functions. They are reusable fonctions that helps accomplishing some redundant task.

Display Messages

To display messages to inform the user, we used Ant Design message component. Those functions will help you quickly displays messages.

Name	Description
showSuccess(messageText: string)	Display a success message
showInfo(messageText: string)	Display a info message
showError(messageText: string)	Display a error message
showWarning(messageText: string)	Display a warning message

Array & Object Utils

Name	Description
checkKeyPresenceInArray(key: any, array: any[])	Whether a key exist in an array
checkValuePresenceInArray(value: any, array: any[])	Whether a value exist in an array
getKeys(data: Array)	Return a list of all key presente in an array
setIndex(array: Array)	Add an index key value to an array
addKeyValueToArrayObject(array: Array, key: string, value: any)	Add key pair value to each object in an array
addKeyValueToObject(object: Object, key: string, value: any)	Add key pair value to an object

Other

Name	Description
getLanguageNameFromISOCode(ISOCode: string)	Return a language ISO Code
purgeSorter(data: Array | any)	Return an array of sorting parameter with good format for backend resquest
setCustomColumnsProps(columnsToInitialize: any)	Return an array of columns for table with custom props
stringToBoolean(string: String | undefined)	Return true or false base on string value
isCookieSet(cookieName: string)	Check if cookie is set
getDefaultTheme()	Get default theme from cookies
getMenuState(isSettingMenuCollapsed: Boolean)	Get menu settings from cookies
decodeJWT(token: String)	Decode a JWT

Types

You should store all your types in types.ts file. Strong typing avoid many errors.

types.ts

export type BreadcrumbType = {
  path?: string;
  breadcrumbName: string;
};

Hooks

Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes — they let you use React without classes.

React provides a few built-in Hooks like useState. You can also create your own Hooks to reuse stateful behavior between different components. Learn more about hooks

Here is where you can create some custom hooks.

hooks.tsx - Barcodes Example

const useBarcodes = (
  search: any,
  page: number,
  itemsPerPage: number,
  sort: any
) => {
  const { graphqlRequestClient } = useAuth();

  const barcodes = useGetAllBarcodesQuery<Partial<GetAllBarcodesQuery>, Error>(
    graphqlRequestClient,
    {
      filters: search,
      orderBy: sort,
      page: page,
      itemsPerPage: itemsPerPage,
    }
  );

  return barcodes;
};

Constants

As it name suggest it store all constant variables.

constant.ts

import { LanguageType } from "@helpers";

const isoLangs: Array<LanguageType> = [
  {
    name: "English",
    code: "en-US",
  },
  {
    name: "Français",
    code: "fr",
  },
];

// Pagination setting
const DEFAULT_PAGE_NUMBER = 1;
const DEFAULT_ITEMS_PER_PAGE = 20;

export { isoLangs, DEFAULT_PAGE_NUMBER, DEFAULT_ITEMS_PER_PAGE };