reUseFunction File

reUseFunction.ts file (composable/reUseFunction.ts) is an utility file that contains reusable functions that help with common operations. These functions help improve code maintainability by centralizing frequently used logic and providing common functionalities that can be used throughout the application.

Usage in Pages

Each function in this file serves a specific purpose, such as modifying text, cleaning data, formatting values, or retrieving external resources. These utilities are useful in various parts of the application, including UI components, API requests, and state management. common reusable functions include console logs, date and time formatting, cleaning up queryparameter, currency and amount functions, word/text truncating, getting user initials

Examples

// Recursively clean and return query parameters by removing empty string, null, or undefined values.
 export const useQueryParams = (params) => {
    export const useQueryParams = (params) => {
      const cleanQueryParams = (obj) => {
        const cleanedParams = {};
        for (const key in obj) {
          const value = obj[key];
          if (value && typeof value === 'object' && !Array.isArray(value) && !(value instanceof Date)) {
            const cleanedNested = cleanQueryParams(value);
            if (Object.keys(cleanedNested).length > 0) {
              cleanedParams[key] = cleanedNested;
            }
          }
          else if (value instanceof Date || (typeof value === 'string' && !isNaN(Date.parse(value)))) {
            cleanedParams[key] = value;
          else if (value !== '' && value !== null && value !== undefined) {
            cleanedParams[key] = value;
          }
        }
        return cleanedParams;
      };
      return cleanQueryParams(params);
    };
// truncate words to return a defined number
export const truncateWord = (word?: string, maxLength) => {
    if (!word) return ''; // Return empty string if word is undefined/null/empty
    return word.length > maxLength ? `${word.slice(0, maxLength)}...` : word;
}
// formats a given numerical value by adding commas as thousands separators, making large numbers more readable.
export function amountFunction(amount) {
    const newAmount = amount.toString()
            .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      return newAmount
    }
// format date and time using momemt

install moment using `npm i moment`
then in your file  **import momoment from moment.js**

 export const useFormatTime = () => {
        const timeFormatRegex = /^(0?[1-9]|1[0-2]):([0-5][0-9]) (am|pm)$/i;

        const formatTime = (timeValue) => {
          if (timeFormatRegex.test(timeValue)) {
            // If the time is already in hh:mm:a format, return it as is
            return timeValue;
          } else {
            // Otherwise, use moment to format it
            return moment(timeValue).format("hh:mm a");
          }
        };

        return { formatTime };
      };
// Map through each word and take the first letter, then join them to form initials
export const getInitials = (phrase) => {
if (!phrase) return '';
        const words = phrase.split(' ');
        const initials = words.map(word => word[0].toUpperCase()).join('');

return initials;
}
// console log response/error
export const useLogger = () => {
  const log = (...args) => {
    console.log(...args);
  };
  return { log};
};
Usage Example

The functions are structured as composables, allowing them to be used globally within Vue components.

const { log } = useLogger();
log("log data", "data.value");

const { formatTime } = useFormatTime();
formatTime("15:30"); // "03:30 pm"
Benefits
  • Reduces code duplication by centralizing common logic.
  • Improves readability and maintainability of the project.
  • Ensures consistency in formatting and data handling across the application.
  • Enhances performance by optimizing repetitive tasks.
  • This file can be expanded as needed, ensuring that frequently used utility functions remain accessible and reusable.