From 7f5e82a8441d2d1afb55c248cd144b6142734697 Mon Sep 17 00:00:00 2001
From: Raymond Zhou <56318341+rayzhou-bit@users.noreply.github.com>
Date: Fri, 7 Jun 2024 10:40:59 -0700
Subject: [PATCH] fix: handle null displayname (#1074)

---
 .../add-component-modals/ComponentModalView.jsx            | 2 +-
 src/studio-home/card-item/index.jsx                        | 2 +-
 src/studio-home/tabs-section/utils.js                      | 7 +++++--
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/course-unit/add-component/add-component-modals/ComponentModalView.jsx b/src/course-unit/add-component/add-component-modals/ComponentModalView.jsx
index ae1464a2c5..4f387d4bd6 100644
--- a/src/course-unit/add-component/add-component-modals/ComponentModalView.jsx
+++ b/src/course-unit/add-component/add-component-modals/ComponentModalView.jsx
@@ -42,7 +42,7 @@ const ComponentModalView = ({
       <ModalContainer
         isOpen={isOpen}
         close={close}
-        title={intl.formatMessage(messages.modalContainerTitle, { componentTitle: displayName.toLowerCase() })}
+        title={intl.formatMessage(messages.modalContainerTitle, { componentTitle: (displayName ?? '').toLowerCase() })}
         btnText={intl.formatMessage(messages.modalBtnText)}
         onSubmit={handleSubmit}
         resetDisabled={() => setModuleTitle('')}
diff --git a/src/studio-home/card-item/index.jsx b/src/studio-home/card-item/index.jsx
index f495794d80..2bc9c3e16f 100644
--- a/src/studio-home/card-item/index.jsx
+++ b/src/studio-home/card-item/index.jsx
@@ -42,7 +42,7 @@ const CardItem = ({
   const isShowRerunLink = allowCourseReruns
     && rerunCreatorStatus
     && courseCreatorStatus === COURSE_CREATOR_STATES.granted;
-  const hasDisplayName = displayName.trim().length ? displayName : courseKey;
+  const hasDisplayName = (displayName ?? '').trim().length ? displayName : courseKey;
 
   return (
     <Card className="card-item">
diff --git a/src/studio-home/tabs-section/utils.js b/src/studio-home/tabs-section/utils.js
index 5d3822b8ed..dff32dc95a 100644
--- a/src/studio-home/tabs-section/utils.js
+++ b/src/studio-home/tabs-section/utils.js
@@ -5,8 +5,11 @@
  * @returns {array} - An array of alphabetically sorted courses or libraries.
  */
 const sortAlphabeticallyArray = (arr) => [...arr]
-  .sort((firstArrayData, secondArrayData) => firstArrayData
-    .displayName.localeCompare(secondArrayData.displayName));
+  .sort((firstArrayData, secondArrayData) => {
+    const firstDisplayName = firstArrayData.displayName ?? '';
+    const secondDisplayName = secondArrayData.displayName ?? '';
+    return firstDisplayName.localeCompare(secondDisplayName);
+  });
 
 // eslint-disable-next-line import/prefer-default-export
 export { sortAlphabeticallyArray };