Fix text formatting

client/src/modules/Profile/Component/Profile.tsx

@@ -19,6 +19,7 @@ import type { NewReview } from '../../../types';
 
 import { useAuthMandatoryLogin } from '../../../auth/auth_utils';
 import { randomPicture } from '../../Globals/profile_picture';
+import formatList from 'common/formatList'
 
 import styles from '../Styles/Profile.module.css';
 
@@ -137,10 +138,8 @@ const Profile = () => {
           JSON.stringify(oldMajors) !== JSON.stringify(review.major)) {
           toast.info('Your major has been changed ' +
             (oldMajors.length !== 0 && 'from ')
-            + oldMajors.join(',') + ' to '
-            + review.major.join(', ').replace(/(, )(?!.*\1)/,
-                (review.major.length > 2 ? ', and ' : ' and ')
-              ) + "."
+            + formatList(oldMajors) + ' to '
+            + formatList(review.major) + "."
           )
         }
       }

client/src/modules/Profile/Component/UserInfo.tsx

@@ -3,6 +3,7 @@ import styles from '../Styles/UserInfo.module.css';
 import ProfileCard from './ProfileCard';
 import MultiSelect from '../../Course/Components/MultiSelect';
 import allMajors from '../../Globals/majors';
+import formatList from 'common/formatList'
 import axios from 'axios';
 import { toast } from 'react-toastify';
 
@@ -68,9 +69,7 @@ const UserInfo = ({
           <span className={styles.bold}>{netId}</span>
           {userMajors.length > 0 && " is studying"}
           <p className={styles.bold}>
-            {userMajors.join(', ').replace(/(, )(?!.*\1)/,
-              (userMajors.length > 2 ? ', and ' : ' and ')
-            )}
+            {formatList(userMajors)}
           </p>
         </div>
       </div>

common/formatList.ts

@@ -0,0 +1,13 @@
+/**
+ * Formats list into human-readable text.
+ * eg ["a","b","c"] --> "a, b, and c"
+ * @param list
+ */
+
+const formatList = (list: string[]) => {
+  return list.join(', ').replace(/(, )(?!.*\1)/,
+    (list.length > 2 ? ', and ' : ' and ')
+  );
+}
+
+export default formatList;