From 61d9d90fa67a406fec6a2a3975dd49f18ef755e9 Mon Sep 17 00:00:00 2001
From: Kira Miller <kira.miller15@yahoo.com>
Date: Thu, 10 Oct 2024 05:35:05 +0000
Subject: [PATCH] fix: more PR stuff

---
 .../PeopleManagement/EditGroupNameModal.jsx   |  44 +++--
 .../PeopleManagement/GroupDetailPage.jsx      | 166 ++++++++++--------
 .../data/hooks/useEnterpriseGroupUuid.js      |   2 +-
 src/data/services/LmsApiService.js            |   2 +-
 4 files changed, 117 insertions(+), 97 deletions(-)

diff --git a/src/components/PeopleManagement/EditGroupNameModal.jsx b/src/components/PeopleManagement/EditGroupNameModal.jsx
index bf380eed6..86ce1a37f 100644
--- a/src/components/PeopleManagement/EditGroupNameModal.jsx
+++ b/src/components/PeopleManagement/EditGroupNameModal.jsx
@@ -10,12 +10,12 @@ import LmsApiService from '../../data/services/LmsApiService';
 import GeneralErrorModal from './GeneralErrorModal';
 
 const EditGroupNameModal = ({
-  group, isOpen, close, setShowToast, setToastMessage,
+  group, isOpen, close, setShowToast, setToastMessage, forceUpdate,
 }) => {
   const intl = useIntl();
   const [isErrorOpen, openError, closeError] = useToggle(false);
-  const [name, setName] = useState(group?.name);
-  const [nameLength, setNameLength] = useState(group?.name.length || 0);
+  const [name, setName] = useState(group.name);
+  const [nameLength, setNameLength] = useState(group.name.length || 0);
   const [buttonState, setButtonState] = useState('default');
 
   const handleGroupNameChange = (e) => {
@@ -32,14 +32,17 @@ const EditGroupNameModal = ({
 
   const editEnterpriseGroup = async () => {
     setButtonState('pending');
-    const formData = { name };
-    const response = await LmsApiService.updateEnterpriseGroup(group?.uuid, formData);
-    if (response.status === 200) {
-      setButtonState('complete');
-      close();
-      setShowToast(true);
-      setToastMessage('Group name updated');
-    } else {
+    try {
+      const formData = { name };
+      const response = await LmsApiService.updateEnterpriseGroup(group.uuid, formData);
+      if (response.status === 200) {
+        setButtonState('complete');
+        close();
+        setShowToast(true);
+        setToastMessage('Group name updated');
+        forceUpdate();
+      }
+    } catch (error) {
       openError();
     }
     setButtonState('default');
@@ -47,10 +50,7 @@ const EditGroupNameModal = ({
 
   return (
     <>
-      <GeneralErrorModal
-        isOpen={isErrorOpen}
-        close={closeError}
-      />
+      <GeneralErrorModal isOpen={isErrorOpen} close={closeError} />
       <ModalDialog
         title="Edit group"
         isOpen={isOpen}
@@ -85,21 +85,26 @@ const EditGroupNameModal = ({
                 default: intl.formatMessage({
                   id: 'adminPortal.peopleManagement.editGroupNameModal.button.save',
                   defaultMessage: 'Save',
-                  description: 'Label for the download button in the module activity report page.',
+                  description:
+                    'Label for the download button in the module activity report page.',
                 }),
                 pending: intl.formatMessage({
                   id: 'adminPortal.peopleManagement.editGroupNameModal.button.pending',
                   defaultMessage: 'Saving',
-                  description: 'Label for the download button in the module activity report page when the download is in progress.',
+                  description:
+                    'Label for the download button in the module activity report page when the download is in progress.',
                 }),
                 complete: intl.formatMessage({
                   id: 'adminPortal.peopleManagement.editGroupNameModal.button.complete',
                   defaultMessage: 'Saved',
-                  description: 'Label for the download button in the module activity report page when the download is complete.',
+                  description:
+                    'Label for the download button in the module activity report page when the download is complete.',
                 }),
               }}
               icons={{
-                pending: <Spinner animation="border" variant="light" size="sm" />,
+                pending: (
+                  <Spinner animation="border" variant="light" size="sm" />
+                ),
               }}
               disabledStates={['pending']}
               onClick={editEnterpriseGroup}
@@ -120,6 +125,7 @@ EditGroupNameModal.propTypes = {
   close: PropTypes.func.isRequired,
   setShowToast: PropTypes.func.isRequired,
   setToastMessage: PropTypes.func.isRequired,
+  forceUpdate: PropTypes.func.isRequired,
 };
 
 export default EditGroupNameModal;
diff --git a/src/components/PeopleManagement/GroupDetailPage.jsx b/src/components/PeopleManagement/GroupDetailPage.jsx
index b258a9a96..b37338b5b 100644
--- a/src/components/PeopleManagement/GroupDetailPage.jsx
+++ b/src/components/PeopleManagement/GroupDetailPage.jsx
@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import React, { useReducer, useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
 import {
-  Breadcrumb, Card, Hyperlink, Icon, IconButton, IconButtonWithTooltip, Toast, useToggle,
+  Breadcrumb, Card, Hyperlink, Icon, IconButton, IconButtonWithTooltip, Skeleton, Toast, useToggle,
 } from '@openedx/paragon';
 import { Delete, Edit } from '@openedx/paragon/icons';
 
@@ -19,6 +19,14 @@ const GroupDetailPage = () => {
   const [isEditModalOpen, openEditModal, closeEditModal] = useToggle(false);
   const [showToast, setShowToast] = useState(false);
   const [toastMessage, setToastMessage] = useState('');
+  const [isLoading, setIsLoading] = useState(true);
+  const [, forceUpdate] = useReducer(x => x + 1, 0);
+
+  useEffect(() => {
+    if (enterpriseGroup !== undefined) {
+      setIsLoading(false);
+    }
+  }, [enterpriseGroup]);
 
   const tooltipContent = (
     <FormattedMessage
@@ -28,84 +36,90 @@ const GroupDetailPage = () => {
     />
   );
 
-  const budgetNameAndEdit = (
-    <>
-      <span className="pr-1">{enterpriseGroup?.name}</span>
-      <IconButton
-        key="editGroupTooltip"
-        src={Edit}
-        iconAs={Icon}
-        alt="Edit group"
-        className="mr-2"
-        onClick={openEditModal}
-        size="sm"
-        data-testid="edit-modal-icon"
-      />
-    </>
-  );
   return (
     <div className="pt-4 pl-4">
-      <Toast
-        onClose={() => setShowToast(false)}
-        show={showToast}
-      >
-        {toastMessage}
-      </Toast>
-      <DeleteGroupModal
-        group={enterpriseGroup}
-        isOpen={isDeleteModalOpen}
-        close={closeDeleteModal}
-      />
-      <EditGroupNameModal
-        group={enterpriseGroup}
-        isOpen={isEditModalOpen}
-        close={closeEditModal}
-        setShowToast={setShowToast}
-        setToastMessage={setToastMessage}
-      />
-      <Breadcrumb
-        aria-label="people management breadcrumb navigation"
-        links={[
-          {
-            label: intl.formatMessage({
-              id: 'adminPortal.peopleManagement.breadcrumb',
-              defaultMessage: 'People Management',
-              description: 'Breadcrumb label for the people management page',
-            }),
-            href: `/${enterpriseSlug}/admin/${ROUTE_NAMES.peopleManagement}`,
-          },
-        ]}
-        activeLabel={enterpriseGroup?.name}
-      />
-
-      <Card orientation="horizontal">
-        <Card.Body>
-          <Card.Header
-            title={budgetNameAndEdit}
-            subtitle={`${enterpriseGroup?.acceptedMembersCount} accepted members`}
+      {isLoading && <Skeleton className="mt-3" height={200} count={1} />}
+      {!isLoading && (
+        <>
+          <Toast onClose={() => setShowToast(false)} show={showToast}>
+            {toastMessage}
+          </Toast>
+          <DeleteGroupModal
+            group={enterpriseGroup}
+            isOpen={isDeleteModalOpen}
+            close={closeDeleteModal}
+          />
+          <EditGroupNameModal
+            group={enterpriseGroup}
+            isOpen={isEditModalOpen}
+            close={closeEditModal}
+            setShowToast={setShowToast}
+            setToastMessage={setToastMessage}
+            forceUpdate={forceUpdate}
           />
-          <Card.Section className="pt-1 x-small">Created on</Card.Section>
-        </Card.Body>
-        <Card.Footer className="justify-content-end" orientation="horizontal">
-          <IconButtonWithTooltip
-            key="trashGroupTooltip"
-            tooltipPlacement="top"
-            tooltipContent={tooltipContent}
-            src={Delete}
-            iconAs={Icon}
-            data-testid="delete-group-icon"
-            className="mr-2"
-            onClick={openDeleteModal}
+          <Breadcrumb
+            aria-label="people management breadcrumb navigation"
+            links={[
+              {
+                label: intl.formatMessage({
+                  id: 'adminPortal.peopleManagement.breadcrumb',
+                  defaultMessage: 'People Management',
+                  description:
+                    'Breadcrumb label for the people management page',
+                }),
+                href: `/${enterpriseSlug}/admin/${ROUTE_NAMES.peopleManagement}`,
+              },
+            ]}
+            activeLabel={enterpriseGroup.name}
           />
-          <Hyperlink
-            className="btn btn-primary"
-            target="_blank"
-            destination={`/${enterpriseSlug}/admin/${ROUTE_NAMES.learners}`}
-          >
-            View group progress
-          </Hyperlink>
-        </Card.Footer>
-      </Card>
+          <Card orientation="horizontal">
+            <Card.Body>
+              <Card.Header
+                title={(
+                  <>
+                    <span className="pr-1">{enterpriseGroup.name}</span>
+                    <IconButton
+                      key="editGroupTooltip"
+                      src={Edit}
+                      iconAs={Icon}
+                      alt="Edit group"
+                      className="mr-2"
+                      onClick={openEditModal}
+                      size="sm"
+                      data-testid="edit-modal-icon"
+                    />
+                  </>
+              )}
+                subtitle={`${enterpriseGroup.acceptedMembersCount} accepted members`}
+              />
+              <Card.Section className="pt-1 x-small">Created on</Card.Section>
+            </Card.Body>
+            <Card.Footer
+              className="justify-content-end"
+              orientation="horizontal"
+            >
+              <IconButtonWithTooltip
+                alt="icon to trash group"
+                key="trashGroupTooltip"
+                tooltipPlacement="top"
+                tooltipContent={tooltipContent}
+                src={Delete}
+                iconAs={Icon}
+                data-testid="delete-group-icon"
+                className="mr-2"
+                onClick={openDeleteModal}
+              />
+              <Hyperlink
+                className="btn btn-primary"
+                target="_blank"
+                destination={`/${enterpriseSlug}/admin/${ROUTE_NAMES.learners}`}
+              >
+                View group progress
+              </Hyperlink>
+            </Card.Footer>
+          </Card>
+        </>
+      )}
     </div>
   );
 };
diff --git a/src/components/learner-credit-management/data/hooks/useEnterpriseGroupUuid.js b/src/components/learner-credit-management/data/hooks/useEnterpriseGroupUuid.js
index c1e9cf1fa..86f620ef4 100644
--- a/src/components/learner-credit-management/data/hooks/useEnterpriseGroupUuid.js
+++ b/src/components/learner-credit-management/data/hooks/useEnterpriseGroupUuid.js
@@ -5,7 +5,7 @@ import { learnerCreditManagementQueryKeys } from '../constants';
 import LmsApiService from '../../../../data/services/LmsApiService';
 
 /**
- * Retrieves a enterprise group by the group UUID from the API.
+ * Retrieves an enterprise group by group UUID from the API.
  *
  * @param {*} queryKey The queryKey from the associated `useQuery` call.
  * @returns The enterprise group object
diff --git a/src/data/services/LmsApiService.js b/src/data/services/LmsApiService.js
index 6bb8d5cd2..00763159d 100644
--- a/src/data/services/LmsApiService.js
+++ b/src/data/services/LmsApiService.js
@@ -447,7 +447,7 @@ class LmsApiService {
   };
 
   static removeEnterpriseGroup = async (groupUuid) => {
-    const removeGroupEndpoint = `${LmsApiService.enterpriseGroupListUrl}///////${groupUuid}/`;
+    const removeGroupEndpoint = `${LmsApiService.enterpriseGroupListUrl}${groupUuid}/`;
     return LmsApiService.apiClient().delete(removeGroupEndpoint);
   };