react-app/src/utilities/formatters.tsx

Summary

Maintainability
A
0 mins
Test Coverage
import { Chip, useTheme } from '@mui/material';
import React from 'react';

export const dateFormatter = (input: any) => {
  const asDate = new Date(input);
  if (!isFinite(asDate.getTime())) {
    return 'Invalid Date';
  }
  return input
    ? new Intl.DateTimeFormat('en-US', {
        month: 'short',
        day: '2-digit',
        year: 'numeric',
      }).format(new Date(input))
    : '';
};

export const columnNameFormatter = (input: string) => {
  return input.replace('OCG', 'OCG ').replace(/([a-z])([A-Z])/g, '$1 $2'); //ExampleHeaderHere -> Example Header Here
};

type ChipStatus = 'OnHold' | 'Active' | 'Disabled' | 'Denied'; //Replace with a better type eventually.
export const statusChipFormatter = (value: ChipStatus) => {
  const theme = useTheme();
  const colorMap = {
    Disabled: 'warning',
    Active: 'success',
    OnHold: 'info',
    Denied: 'warning',
  };
  return (
    <>
      <Chip
        sx={{
          padding: '.25rem',
          color: theme.palette[colorMap[value] ?? 'warning']['main'],
          backgroundColor: theme.palette[colorMap[value] ?? 'warning']['light'],
        }}
        label={value
          .match(/([A-Z]?[^A-Z]*)/g)
          .slice(0, -1)
          .join(' ')}
      />
    </>
  );
};

export const projectStatusChipFormatter = (value: string) => {
  const theme = useTheme();
  const colorMap = {
    ['Draft']: 'info',
    ['In ERP']: 'info',
    ['Approved for ERP']: 'success',
    ['Approved for Exemption']: 'success',
    ['Denied']: 'warning',
    ['Approved for SPL']: 'success',
    ['Disposed']: 'success',
    ['Cancelled']: 'warning',
  };
  return (
    <>
      <Chip
        sx={{
          padding: '.25rem',
          color: theme.palette[colorMap[value] ?? 'warning']['main'],
          backgroundColor: theme.palette[colorMap[value] ?? 'warning']['light'],
        }}
        label={value}
      />
    </>
  );
};

export const formatMoney = (value?: number | ''): string => {
  // if we dont have a number to format just display what we have
  if (typeof value != 'number') {
    return value;
  }
  const formatter = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    minimumFractionDigits: 0,
    maximumFractionDigits: 0,
  });
  return formatter.format(value || 0);
};

export const parseIntOrNull = (int: string | number) => {
  if (typeof int === 'number') {
    return int;
  }
  return int.length > 0 ? parseInt(int) : null;
};

export const parseFloatOrNull = (flt: string | number) => {
  if (typeof flt === 'number') {
    return flt;
  }
  return flt.length > 0 ? parseFloat(flt) : null;
};

export const zeroPadPID = (pid: number | string): string => {
  return String(pid).replace(/[^\d]/g, '').padStart(9, '0');
};

export const pidFormatter = (pid: number | string): string => {
  if (pid == null) return '';
  return zeroPadPID(pid).match(/\d{3}/g).join('-').slice(0, 11);
};

export const formatNumber = (num: number) => num.toLocaleString();