Merge branch 'main' into main

src/common/utils/coverImageUtil.js

@@ -1,14 +1,34 @@
 import FallbackImage from 'images/play-fallback-cover.png';
+import { IMAGE_EXTENSIONS, FULFILLED_STATUS } from './utilsConstants';
 
-export async function loadCoverImage(playSlug) {
- const acceptedImgExtensions = [`png`, `jpg`, `jpeg`];
- const imgPromises = acceptedImgExtensions.map((ext) => import(`plays/${playSlug}/cover.${ext}`));
+/**
+ * Tries to dynamically import the image with the given extension for the specified play slug.
+ *
+ * @param {string} playSlug - The slug of the play.
+ * @param {string} extension - The image extension (e.g., 'png', 'jpg').
+ * @returns {Promise} - A promise that resolves with the image or rejects if not found.
+ */
+const loadImageForExtension = (playSlug, extension) =>
+ import(`plays/${playSlug}/cover.${extension}`);
 
- const response = await Promise.allSettled(imgPromises);
+/**
+ * Attempts to load the cover image for a play by trying multiple image formats.
+ * Falls back to a default image if none of the formats are available.
+ *
+ * @param {string} playSlug - The slug of the play.
+ * @returns {Promise} - A promise that resolves to the cover image or the fallback image.
+ */
+export const loadCoverImage = async (playSlug) => {
+ // const imagePromises = supportedExtensions.map((extension) =>
+ const imagePromises = IMAGE_EXTENSIONS.map((extension) =>
+ loadImageForExtension(playSlug, extension)
+ );
+
+ const results = await Promise.allSettled(imagePromises);
 
- const fulfilledResult = response.find(
- (result) => result.status === 'fulfilled' && result.value.default
+ const image = results.find(
+ (result) => result.status === FULFILLED_STATUS && result.value?.default
  );
 
- return fulfilledResult?.value.default || FallbackImage;
-}
+ return image?.value.default || FallbackImage;
+};

src/common/utils/fakeUser.js

@@ -1,11 +1,30 @@
 import { faker } from '@faker-js/faker';
+import { USER_COUNT } from './utilsConstants';
 
-const THRESHOLD = 10000;
+/**
+ * Generates a single user object with random data.
+ *
+ * @returns {Object} - A user object containing name, avatar, and background.
+ */
+const generateUser = () => {
+ const { person, image } = faker;
 
-export const users = Array.from(Array(THRESHOLD), () => {
- return {
- name: faker.person.fullName(),
- avatar: faker.image.avatar(),
- background: faker.image.urlLoremFlickr({ category: 'nature' })
+ // Generate user information
+ const user = {
+ name: person.fullName(),
+ avatar: image.avatar(),
+ background: image.urlLoremFlickr({ category: 'nature' })
  };
-});
+
+ return user;
+};
+
+/**
+ * Generates an array of users with random data.
+ *
+ * @param {number} count - The number of users to generate.
+ * @returns {Array<Object>} - An array of user objects.
+ */
+const generateUsers = (count) => Array.from({ length: count }, generateUser);
+
+export const users = generateUsers(USER_COUNT);

src/common/utils/formatCount.ts

@@ -1,22 +1,36 @@
+import { BILLION, MILLION, SECONDS_IN_HOUR, SECONDS_IN_MINUTE, THOUSAND } from './utilsConstants';
+
+/**
+ * Formats a duration in seconds into a string representation of hours, minutes, and seconds.
+ *
+ * @param {number} duration - The duration in seconds to format.
+ * @returns {string} - The formatted duration as a string in the format "HH:MM:SS" or "MM:SS".
+ */
 export const formatDurationCount = (duration: number): string => {
- const hours = Math.floor(duration / 3600);
- const minutes = Math.floor((duration % 3600) / 60);
+ const hours = Math.floor(duration / SECONDS_IN_HOUR);
+ const minutes = Math.floor((duration % SECONDS_IN_HOUR) / SECONDS_IN_MINUTE);
  const seconds = Math.floor(duration % 60);
 
- let time = '';
- if (hours > 0) {
- time += `${hours}:`;
- }
- if (hours > 0 || minutes > 0) {
- time += (minutes < 10 ? '0' + minutes : minutes) + ':';
- }
- time += seconds < 10 ? '0' + seconds : seconds;
+ const formattedMinutes = minutes.toString().padStart(2, '0');
+ const formattedSeconds = seconds.toString().padStart(2, '0');
 
- return time;
+ return hours > 0
+ ? `${hours}:${formattedMinutes}:${formattedSeconds}`
+ : `${formattedMinutes}:${formattedSeconds}`;
 };
 
-export const formatViewCount = (viewCount: string) => {
- if (parseInt(viewCount) >= 1000000000) return (parseInt(viewCount) / 1000000000).toFixed(1) + 'B';
- if (parseInt(viewCount) >= 1000000) return (parseInt(viewCount) / 1000000).toFixed(1) + 'M';
- if (parseInt(viewCount) >= 1000) return (parseInt(viewCount) / 1000).toFixed(1) + 'K';
+/**
+ * Formats the view count into a more readable string representation with suffixes.
+ *
+ * @param {string} viewCount - The view count as a string.
+ * @returns {string} - The formatted view count with appropriate suffix (B, M, K) or the original count if below 1000.
+ */
+export const formatViewCount = (viewCount: string): string => {
+ const count = parseInt(viewCount);
+
+ if (count >= BILLION) return (count / BILLION).toFixed(1) + 'B';
+ if (count >= MILLION) return (count / MILLION).toFixed(1) + 'M';
+ if (count >= THOUSAND) return (count / THOUSAND).toFixed(1) + 'K';
+
+ return viewCount; // Return the original count if below 1000
 };

src/common/utils/utilsConstants.js

@@ -0,0 +1,16 @@
+// cover image constants
+export const IMAGE_EXTENSIONS = ['png', 'jpg', 'jpeg'];
+export const FULFILLED_STATUS = 'fulfilled';
+
+// fake user constant
+export const USER_COUNT = 10000;
+
+// format format duration count constants
+export const SECONDS_IN_MINUTE = 60; // 60 seconds in a minute
+export const SECONDS_IN_HOUR = 3600; // 3600 seconds in an hour
+export const HOURS_THRESHOLD = 0; // Used for checking if hours are greater than 0
+
+// format view count constants
+export const BILLION = 1_000_000_000; // 1 billion
+export const MILLION = 1_000_000; // 1 million
+export const THOUSAND = 1_000; // 1 thousand