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