Merge pull request #1178 from themeum/TUTOR-instructor-query-fix

refactor: Refactor instructor list query in CourseBasic.tsx and FormWPEditor.tsx
themeum · Oct 2, 2024 · a4706f2 · a4706f2
2 parents fdb8418 + c840a4c
commit a4706f2
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 5 deletions.
diff --git a/assets/react/v3/entries/course-builder/pages/CourseBasic.tsx b/assets/react/v3/entries/course-builder/pages/CourseBasic.tsx
@@ -161,7 +161,7 @@ const CourseBasic = () => {
 
   const userList = useUserListQuery(userSearchText);
 
-  const instructorListQuery = useInstructorListQuery(String(courseId) ?? '');
+  const instructorListQuery = useInstructorListQuery(String(courseId) ?? '', isMultiInstructorEnabled);
 
   const convertedCourseInstructors = (courseDetails?.course_instructors || []).map((instructor) => ({
     id: instructor.id,

diff --git a/assets/react/v3/shared/components/fields/FormWPEditor.tsx b/assets/react/v3/shared/components/fields/FormWPEditor.tsx
@@ -216,7 +216,7 @@ const FormWPEditor = ({
             <Show
               when={editorUsed.name === 'classic' && !loading}
               fallback={
-                <div css={styles.editorOverlay}>
+                <div css={styles.editorOverlay(!loading)}>
                   {loading ? (
                     <LoadingOverlay />
                   ) : (
@@ -294,10 +294,10 @@ const styles = {
     display: flex;
     align-items: center;
   `,
-  editorOverlay: css`
+  editorOverlay: (isLoading: boolean) => css`
     height: 360px;
     ${styleUtils.flexCenter()};
-    background-color: ${rgba(colorTokens.background.modal, 0.6)};
+    background-color: ${isLoading ? rgba(colorTokens.background.modal, 0.6) : 'transparent'};
     border-radius: ${borderRadius.card};
   `,
   editWithButton: css`

diff --git a/assets/react/v3/shared/services/users.ts b/assets/react/v3/shared/services/users.ts
@@ -61,7 +61,7 @@ const getInstructorList = (courseId: string) => {
     .then((response) => response.data);
 };
 
-export const useInstructorListQuery = (courseId: string) => {
+export const useInstructorListQuery = (courseId: string, isEnabled: boolean) => {
   return useQuery({
     queryKey: ['InstructorList', courseId],
     queryFn: () =>
@@ -73,5 +73,6 @@ export const useInstructorListQuery = (courseId: string) => {
           avatar_url: item.avatar_url,
         }));
       }),
+    enabled: isEnabled,
   });
 };