Merge pull request #384 from projectNEWM/bugfix/minor-bug-fixes-impro…

…vements

Update regex for inputs and sort dropdown options and other misc updates

src/common/arrayUtils.ts

@@ -1,30 +1,30 @@
 import { useMemo } from "react";
 
 /**
- * Extracts the specified property from an array of items.
+ * This hook extracts the specified property from an array of items.
  * Each item is expected to have the specified property of type string.
  *
  * @param {T[]} items - An array of items to extract property from.
  * @param {K} property - The name of the property to extract.
+ * @param {boolean} shouldSort - Whether the result should be sorted.
  * @return {string[]} An array of extracted property values.
  *
  * @template T
  * @typedef {object} T
  * @property {string} K
  */
-export const extractProperty = <T, K extends keyof T>(
+export const useExtractProperty = <
+  T extends Record<K, string>,
+  K extends keyof T
+>(
   items: T[],
-  property: K
-): T[K][] => items.map((item) => item[property]);
-
-export const useExtractProperty = <T, K extends keyof T>(
-  items: T[],
-  property: K
+  property: K,
+  shouldSort = true
 ): T[K][] => {
-  const memoized = useMemo(
-    () => extractProperty(items, property),
-    [items, property]
-  );
-
-  return memoized;
+  return useMemo(() => {
+    const extracted = items.map((item) => item[property]);
+    return shouldSort
+      ? extracted.sort((a, b) => a.localeCompare(b))
+      : extracted;
+  }, [items, property, shouldSort]);
 };

src/common/formUtils.ts

@@ -3,12 +3,14 @@ import { FormikErrors, FormikValues } from "formik";
 import { BarcodeConfig, BarcodeType, FieldOptions } from "./types";
 import {
   REGEX_9_TO_11_DIGITS,
+  REGEX_EVEARA_PROHIBITED_CHARACTERS,
   REGEX_EXACTLY_12_DIGITS,
   REGEX_EXACTLY_13_DIGITS,
   REGEX_ISRC_FORMAT,
   REGEX_ISWC_FORMAT,
   REGEX_JAN_FORMAT,
   REGEX_PASSWORD_REQUIREMENTS,
+  REGEX_SONG_TITLE,
 } from "./regex";
 import {
   MAX_CHARACTER_COUNT,
@@ -70,9 +72,11 @@ export const commonYupValidation = {
     .email("Please enter a vaild email")
     .required("Email is required"),
   firstName: Yup.string()
+    .trim()
     .max(15, "Must be 15 characters or less")
     .required("First name is required"),
   lastName: Yup.string()
+    .trim()
     .max(20, "Must be 20 characters or less")
     .required("Last name is required"),
   role: (roles: string[]) =>
@@ -123,11 +127,13 @@ export const commonYupValidation = {
     ),
   coverArtUrl: Yup.mixed().required("This field is required"),
   title: Yup.string()
+    .trim()
     .required("This field is required")
     .matches(
-      /^[^%,*=#<>{}~@\\\\/;:?$"]*$/,
+      REGEX_EVEARA_PROHIBITED_CHARACTERS,
       "Cannot contain special characters like %,*=#<>{}~@\\/;:?$\""
     )
+    .matches(REGEX_SONG_TITLE, "Cannot contain special characters")
     .max(
       MAX_CHARACTER_COUNT,
       `Must be ${MAX_CHARACTER_COUNT} characters or less`

src/common/regex.ts

@@ -57,3 +57,27 @@ export const REGEX_APPLE_MUSIC_PROFILE = /^\d+$/;
  * For example, it would match "yourSoundCloudArtistName" or "artist-name_123".
  */
 export const REGEX_SOUNDCLOUD_PROFILE = /^[0-9a-z_-]+$/;
+
+/**
+ * Matches strings containing alphanumeric characters (both lower and uppercase),
+ * spaces, and most ASCII punctuation characters. It excludes some special characters like `%,*,=#<>{}~@\\/;:?$"`.
+ * Main purpose is to prevent emojis.
+ *
+ * - `\w`: Matches any word character (alphanumeric + underscore).
+ * - `\s`: Matches any whitespace character (spaces, tabs, line breaks).
+ * - `!-/:-@[-``{-~`: Matches most ASCII punctuation characters.
+ */
+export const REGEX_SONG_TITLE = /^[\w\s!-/:-@[-`{-~]*$/;
+
+/**
+ * A regular expression pattern that matches strings excluding specific special characters
+ * like %,*=#<>{}~@\\/;:?$".
+ *
+ * The pattern breaks down as follows:
+ *
+ * - `^`: Asserts position at start of a line.
+ * - `[^%,*=#<>{}~@\\\\/;:?$"]`: Matches any character that is not in this character set.
+ * - `*`: Matches the previous token (the character set) between zero and unlimited times.
+ * - `$`: Asserts position at end of a line.
+ */
+export const REGEX_EVEARA_PROHIBITED_CHARACTERS = /^[^%,*=#<>{}~@\\\\/;:?$"]*$/;

src/components/minting/AddOwnerModal.tsx

@@ -8,7 +8,7 @@ import {
   SwitchInputField,
   TextInputField,
 } from "components";
-import { commonYupValidation, useExtractProperty } from "common";
+import { commonYupValidation } from "common";
 import { useGetRolesQuery } from "modules/content";
 import { CollaborationStatus } from "modules/song";
 
@@ -26,7 +26,6 @@ const AddOwnerModal: FunctionComponent<AddOwnerModalProps> = ({
   onSubmit,
 }) => {
   const { data: roles = [] } = useGetRolesQuery();
-  const roleOptions = useExtractProperty(roles, "name");
 
   const initialValues = {
     email: "",
@@ -51,7 +50,7 @@ const AddOwnerModal: FunctionComponent<AddOwnerModalProps> = ({
       ),
     isRightsOwner: Yup.boolean(),
     isCreator: Yup.boolean(),
-    role: commonYupValidation.role(roleOptions),
+    role: commonYupValidation.role(roles),
   });
 
   return (
@@ -121,7 +120,7 @@ const AddOwnerModal: FunctionComponent<AddOwnerModalProps> = ({
                 label="ROLE"
                 isOptional={ false }
                 name="role"
-                options={ roleOptions }
+                options={ roles }
                 placeholder="Select role"
                 widthType="full"
               />

src/components/minting/ConfirmContract.tsx

@@ -108,7 +108,7 @@ const FormContent: FunctionComponent<FormContentProps> = ({
         />
       </Stack>
 
-      <Stack direction="column" mt={ 3 } spacing={ 2 }>
+      <Stack direction="column" mt={ 3 } spacing={ 2 } textAlign="left">
         <CheckboxField
           name="isCreator"
           label={

src/components/minting/Creditors.tsx

@@ -2,7 +2,6 @@ import { FunctionComponent } from "react";
 import CloseIcon from "@mui/icons-material/Close";
 import { Box, Stack, useTheme } from "@mui/material";
 import { Button, Typography } from "elements";
-import { useExtractProperty } from "common";
 import {
   Creditor,
   MintingStatus,
@@ -35,7 +34,6 @@ const Creditors: FunctionComponent<CreditorsProps> = ({
 }) => {
   const theme = useTheme();
   const { data: roles = [] } = useGetRolesQuery();
-  const roleOptions = useExtractProperty(roles, "name");
   const emails = creditors.map((creditor) => creditor.email);
 
   const { data: collaborators } = useGetCollaboratorsQuery(
@@ -89,7 +87,7 @@ const Creditors: FunctionComponent<CreditorsProps> = ({
                 <DropdownSelectField
                   isOptional={ false }
                   name={ `creditors[${idx}].role` }
-                  options={ roleOptions }
+                  options={ roles }
                   placeholder="Select role"
                   widthType="full"
                 />

src/modules/content/api.ts

@@ -4,7 +4,7 @@ import { Genre, Language, Role } from "./types";
 
 export const extendedApi = api.injectEndpoints({
   endpoints: (build) => ({
-    getGenres: build.query<Genre[], void>({
+    getGenres: build.query<string[], void>({
       query: () => ({ url: "v1/distribution/genres", method: "GET" }),
       providesTags: [Tags.Genres],
 
@@ -20,8 +20,14 @@ export const extendedApi = api.injectEndpoints({
           );
         }
       },
+      transformResponse: (response: Genre[]) => {
+        const extracted = response.map((genre) => genre.name);
+
+        // Sort alphabetically
+        return extracted.sort((a, b) => a.localeCompare(b));
+      },
     }),
-    getRoles: build.query<Role[], void>({
+    getRoles: build.query<string[], void>({
       query: () => ({ url: "v1/distribution/roles", method: "GET" }),
       providesTags: [Tags.Roles],
 
@@ -37,6 +43,12 @@ export const extendedApi = api.injectEndpoints({
           );
         }
       },
+      transformResponse: (response: Role[]) => {
+        const extracted = response.map((role) => role.name);
+
+        // Sort alphabetically
+        return extracted.sort((a, b) => a.localeCompare(b));
+      },
     }),
     getMoods: build.query<Array<string>, void>({
       query: () => ({ url: "contents/predefined-moods.json", method: "GET" }),

src/pages/createProfile/CreateProfile.tsx

@@ -5,7 +5,7 @@ import {
   useUpdateInitialProfileThunk,
 } from "modules/session";
 import { WizardForm } from "components";
-import { commonYupValidation, useExtractProperty } from "common";
+import { commonYupValidation } from "common";
 import * as Yup from "yup";
 import { useGetRolesQuery } from "modules/content";
 import Begin from "./Begin";
@@ -18,7 +18,6 @@ import AddLastName from "./AddLastName";
 const CreateProfile: FunctionComponent = () => {
   const theme = useTheme();
   const { data: roles = [] } = useGetRolesQuery();
-  const roleOptions = useExtractProperty(roles, "name");
 
   const [updateInitialProfile] = useUpdateInitialProfileThunk();
 
@@ -36,7 +35,7 @@ const CreateProfile: FunctionComponent = () => {
    */
   const validations = {
     nickname: commonYupValidation.nickname,
-    role: commonYupValidation.role(roleOptions),
+    role: commonYupValidation.role(roles),
     firstName: commonYupValidation.firstName,
     lastName: commonYupValidation.lastName,
   };

src/pages/createProfile/SelectRole.tsx

@@ -1,6 +1,5 @@
 import { FunctionComponent } from "react";
 import { AddProfileInformation } from "components";
-import { useExtractProperty } from "common";
 import { useFormikContext } from "formik";
 import { useGetRolesQuery } from "modules/content";
 import { ProfileFormValues } from "modules/session";
@@ -12,15 +11,13 @@ const SelectRole: FunctionComponent = () => {
     values: { firstName, nickname },
   } = useFormikContext<ProfileFormValues>();
 
-  const roleOptions = useExtractProperty(roles, "name");
-
   return (
     <AddProfileInformation
       fieldName="role"
       helperText="Type or select a role"
       placeholder="role"
       prompt={ `What's your main role, ${nickname ? nickname : firstName}?` }
-      tags={ roleOptions }
+      tags={ roles }
     />
   );
 };

src/pages/home/library/EditSong.tsx

@@ -23,13 +23,8 @@ import {
   usePatchSongThunk,
 } from "modules/song";
 import { setToastMessage } from "modules/ui";
-import {
-  Genre,
-  Language,
-  useGetGenresQuery,
-  useGetLanguagesQuery,
-} from "modules/content";
-import { commonYupValidation, extractProperty } from "common";
+import { useGetGenresQuery, useGetLanguagesQuery } from "modules/content";
+import { commonYupValidation, useExtractProperty } from "common";
 import AdvancedSongDetails from "pages/home/uploadSong/AdvancedSongDetails";
 import BasicSongDetails from "pages/home/uploadSong/BasicSongDetails";
 import ConfirmAgreement from "pages/home/uploadSong/ConfirmAgreement";
@@ -53,10 +48,8 @@ const EditSong: FunctionComponent = () => {
     } = emptyProfile,
   } = useGetProfileQuery();
   const { data: languages = [] } = useGetLanguagesQuery();
-  const languageCodes = extractProperty<Language, "language_code">(
-    languages,
-    "language_code"
-  );
+  const languageCodes = useExtractProperty(languages, "language_code", false);
+
   const { data: collaborations = [] } = useGetCollaborationsQuery({
     songIds: songId,
   });
@@ -251,13 +244,11 @@ const EditSong: FunctionComponent = () => {
     // eslint-disable-next-line
   }, []);
 
-  const genreOptions = extractProperty<Genre, "name">(genres, "name");
-
   const validations = {
     coverArtUrl: commonYupValidation.coverArtUrl,
     title: commonYupValidation.title,
     description: commonYupValidation.description,
-    genres: commonYupValidation.genres(genreOptions),
+    genres: commonYupValidation.genres(genres),
     moods: commonYupValidation.moods,
     owners: commonYupValidation.owners,
     consentsToContract: commonYupValidation.consentsToContract,

src/pages/home/profile/Profile.tsx

@@ -23,10 +23,9 @@ import {
   getUpdatedValues,
   scrollToError,
   useAppDispatch,
-  useExtractProperty,
   useWindowDimensions,
 } from "common";
-import { useGetGenresQuery, useGetRolesQuery } from "modules/content";
+import { useGetRolesQuery } from "modules/content";
 import {
   ProfileFormValues,
   UpdateProfileRequest,
@@ -51,9 +50,6 @@ const Profile: FunctionComponent = () => {
 
   const windowWidth = useWindowDimensions()?.width;
   const { data: roles = [] } = useGetRolesQuery();
-  const { data: genres = [] } = useGetGenresQuery();
-  const genreOptions = useExtractProperty(genres, "name");
-  const roleOptions = useExtractProperty(roles, "name");
 
   const {
     data: {
@@ -138,8 +134,7 @@ const Profile: FunctionComponent = () => {
     companyIpRights: Yup.bool(),
     lastName: commonYupValidation.lastName,
     nickname: commonYupValidation.nickname,
-    role: commonYupValidation.role(roleOptions),
-    genre: commonYupValidation.genre(genreOptions),
+    role: commonYupValidation.role(roles),
     twitterUrl: Yup.string().url("Please enter a valid url"),
     websiteUrl: Yup.string().url("Please enter a valid url"),
     spotifyProfile: Yup.string().matches(
@@ -343,7 +338,7 @@ const Profile: FunctionComponent = () => {
                           isOptional={ false }
                           label="MAIN ROLE"
                           name="role"
-                          options={ roleOptions }
+                          options={ roles }
                           placeholder="Main role"
                         />
                         <TextInputField

src/pages/home/uploadSong/BasicSongDetails.tsx

@@ -66,7 +66,6 @@ const BasicSongDetails: FunctionComponent<BasicDonDetailsProps> = ({
   const { data: languages = [] } = useGetLanguagesQuery();
   const { songId } = useParams<"songId">() as SongRouteParams;
 
-  const genreOptions = useExtractProperty(genres, "name");
   const languageOptions = useExtractProperty(languages, "language_name");
 
   const windowWidth = useWindowDimensions()?.width;
@@ -215,7 +214,7 @@ const BasicSongDetails: FunctionComponent<BasicDonDetailsProps> = ({
             isOptional={ false }
             name="genres"
             placeholder="Select all that apply"
-            options={ genreOptions }
+            options={ genres }
           />
 
           <DropdownSelectField

src/pages/home/uploadSong/UploadSong.tsx

@@ -34,7 +34,7 @@ const UploadSong: FunctionComponent = () => {
     } = emptyProfile,
   } = useGetProfileQuery();
   const { data: languages = [] } = useGetLanguagesQuery();
-  const languageCodes = useExtractProperty(languages, "language_code");
+  const languageCodes = useExtractProperty(languages, "language_code", false);
   const { data: { date: earliestReleaseDate } = {} } =
     useGetEarliestReleaseDateQuery(undefined, {
       // endpoint throws error if user hasn't added first name
@@ -138,14 +138,13 @@ const UploadSong: FunctionComponent = () => {
     // to only run on mount.
     // eslint-disable-next-line
   }, []);
-  const genreOptions = useExtractProperty(genres, "name");
 
   const validations = {
     coverArtUrl: commonYupValidation.coverArtUrl,
     audio: commonYupValidation.audio,
     title: commonYupValidation.title,
     description: commonYupValidation.description,
-    genres: commonYupValidation.genres(genreOptions),
+    genres: commonYupValidation.genres(genres),
     moods: commonYupValidation.moods,
     owners: commonYupValidation.owners,
     consentsToContract: commonYupValidation.consentsToContract,