Employing Helper Functions and Utilities

Helper functions perform various tasks such as formatting data and managing application state and are located in the frontend/src/helpers directory.

Data Formatting Utilities

• File: dataFormatter.js
  • This file contains various functions for formatting and converting dates into a textual representation. For instance:
    • dataGridEditFormatter: Used in tables to format data displayed in editable cells.
    • dateTimeFormatter: Utilized in lists to provide human-readable date and time information.

We use the dayjs library that is employed for date-related operations.

Notification State Handlers

• File: notifyStateHandler.js
  • This script includes functions like resetNotify, rejectNotify, and fulfilledNotify, which are used to manage notification states throughout the application.

Here’s an example of how resetNotify and fulfilledNotify are used in the Redux store to handle notifications for user creation and deletion actions:

...
builder.addCase(deleteItem.pending, (state) => {
  state.loading = true;
  resetNotify(state);
});

builder.addCase(create.fulfilled, (state) => {
  state.loading = false;
  fulfilledNotify(state, `${'Users'.slice(0, -1)} has been created`);
});
...

Pexels API Integration

• File: pexels.js
  • Contains functions getPexelsImage and getPexelsVideo for fetching stock images and videos from Pexels.com.

Prettier Configuration

To ensure code consistency and readability, the Prettier code formatting tool is utilized. The configuration file for Prettier is located at:

• Location: frontend/prettier.config.js

Below is the configuration used:

module.exports = {
  semi: false,
  singleQuote: true,
  printWidth: 100,
  trailingComma: 'es5',
  arrowParens: 'always',
  tabWidth: 2,
  useTabs: false,
  quoteProps: 'as-needed',
  jsxSingleQuote: false,
  bracketSpacing: true,
  bracketSameLine: false,
};

Configuration Options:

• semi: Whether to add a semicolon at the end of every statement (disabled in this case).
• singleQuote: Use single quotes instead of double quotes where possible.
• printWidth: The line width at which Prettier will wrap the text.
• trailingComma: Add a trailing comma to multiline objects and arrays for better version control diff.
• arrowParens: Always include parentheses around a sole arrow function parameter.
• tabWidth: The number of spaces per indentation level.
• useTabs: Use spaces instead of tabs for indentation.
• quoteProps: Only add quotes around object properties when necessary.
• jsxSingleQuote: Do not use single quotes in JSX.
• bracketSpacing: Prints spaces between brackets in object literals.
• bracketSameLine: Puts the > of a multi-line JSX element at the end of the last line instead of being alone on the next line.