chore: small improvements2

Author: diana-villalvazo-wgu

src/cohorts/CohortsPage.tsx

@@ -8,14 +8,15 @@ import DisableCohortsModal from './components/DisableCohortsModal';
 import messages from './messages';
 import DisabledCohortsView from './components/DisabledCohortsView';
 import EnabledCohortsView from './components/EnabledCohortsView';
-import { CohortProvider } from './components/CohortContext';
+import { CohortProvider, useCohortContext } from './components/CohortContext';
 
-const CohortsPage = () => {
+const CohortsPageContent = () => {
   const intl = useIntl();
   const { courseId = '' } = useParams();
   const { data: cohortStatus } = useCohortStatus(courseId);
   const { mutate: toggleCohortsMutate } = useToggleCohorts(courseId);
   const [isOpenDisableModal, setIsOpenDisableModal] = useState(false);
+  const { clearSelectedCohort } = useCohortContext();
   const { isCohorted = false } = cohortStatus ?? {};
 
   const handleEnableCohorts = () => {
@@ -28,36 +29,44 @@ const CohortsPage = () => {
   const handleDisableCohorts = () => {
     toggleCohortsMutate({ isCohorted: false },
       {
+        onSuccess: () => clearSelectedCohort(),
         onError: (error) => console.log(error)
       });
     setIsOpenDisableModal(false);
   };
 
   return (
-    <CohortProvider>
-      <div className="mt-4.5 mb-4 mx-4">
-        <div className="d-inline-flex align-items-center">
-          <h3 className="mb-0 text-gray-700">{intl.formatMessage(messages.cohortsTitle)}</h3>
-          {isCohorted && (
-            <div className="small">
-              <IconButton
-                alt={intl.formatMessage(messages.disableCohorts)}
-                iconAs={Settings}
-                iconClassNames="mb-2 text-gray-500"
-                size="sm"
-                variant="secondary"
-                onClick={() => setIsOpenDisableModal(true)}
-              />
-            </div>
-          )}
-        </div>
-        {isCohorted ? (
-          <EnabledCohortsView />
-        ) : (
-          <DisabledCohortsView onEnableCohorts={handleEnableCohorts} />
+    <div className="mt-4.5 mb-4 mx-4">
+      <div className="d-inline-flex align-items-center">
+        <h3 className="mb-0 text-gray-700">{intl.formatMessage(messages.cohortsTitle)}</h3>
+        {isCohorted && (
+          <div className="small">
+            <IconButton
+              alt={intl.formatMessage(messages.disableCohorts)}
+              iconAs={Settings}
+              iconClassNames="mb-2 text-gray-500"
+              size="sm"
+              variant="secondary"
+              onClick={() => setIsOpenDisableModal(true)}
+            />
+          </div>
         )}
-        <DisableCohortsModal isOpen={isOpenDisableModal} onClose={() => setIsOpenDisableModal(false)} onConfirmDisable={handleDisableCohorts} />
       </div>
+      {isCohorted ? (
+        <EnabledCohortsView />
+      ) : (
+        <DisabledCohortsView onEnableCohorts={handleEnableCohorts} />
+      )}
+      <DisableCohortsModal isOpen={isOpenDisableModal} onClose={() => setIsOpenDisableModal(false)} onConfirmDisable={handleDisableCohorts} />
+    </div>
+  );
+};
+
+// It was necessary to wrap the entire content with CohortProvider here to avoid errors in the use of cohort hooks within a provider
+const CohortsPage = () => {
+  return (
+    <CohortProvider>
+      <CohortsPageContent />
     </CohortProvider>
   );
 };

src/cohorts/components/EnabledCohortsView.tsx

@@ -67,7 +67,14 @@ const EnabledCohortsView = () => {
   return (
     <>
       <div className="d-flex mt-4.5">
-        <FormControl placeholder={intl.formatMessage(messages.selectCohortPlaceholder)} name="cohort" as="select" onChange={handleSelectCohort} value={selectedCohort?.id?.toString() ?? 'null'} disabled={displayAddForm}>
+        <FormControl
+          as="select"
+          disabled={displayAddForm || cohortsList.length === 0}
+          name="cohort"
+          placeholder={intl.formatMessage(messages.selectCohortPlaceholder)}
+          value={selectedCohort?.id?.toString() ?? 'null'}
+          onChange={handleSelectCohort}
+        >
           {
             cohortsList.map((cohort) => (
               <option key={cohort.id} value={cohort.id}>

src/cohorts/components/ManageLearners.tsx

@@ -29,7 +29,13 @@ const ManageLearners = () => {
       <h3 className="text-primary-700">{intl.formatMessage(messages.addLearnersTitle)}</h3>
       <p className="x-small mb-2.5">{intl.formatMessage(messages.addLearnersSubtitle)}</p>
       <p className="mb-2 text-primary-500">{intl.formatMessage(messages.addLearnersInstructions)}</p>
-      <FormControl as="textarea" className="mb-2" placeholder={intl.formatMessage(messages.learnersExample)} onChange={(e) => setUsers(e.target.value)} />
+      <FormControl
+        as="textarea"
+        className="mb-2"
+        rows={4}
+        placeholder={intl.formatMessage(messages.learnersExample)}
+        onChange={(e) => setUsers(e.target.value)}
+      />
       <p className="x-small mb-2.5">{intl.formatMessage(messages.addLearnersFootnote)}</p>
       <Button variant="primary" className="mt-2" onClick={handleAddLearners}>+ {intl.formatMessage(messages.addLearnersLabel)}</Button>
     </div>

src/cohorts/data/api.ts

@@ -28,7 +28,7 @@ export const createCohort = async (courseId: string, cohortDetails: BasicCohortD
 };
 
 export const getContentGroups = async (courseId: string) => {
-  const url = `${getApiBaseUrl()}/api/instructor/v1/courses/${courseId}/content_groups`;
+  const url = `${getApiBaseUrl()}/api/instructor/v1/courses/${courseId}/group_configurations`;
   const { data } = await getAuthenticatedHttpClient().get(url);
   return camelCaseObject(data);
 };
@@ -41,7 +41,7 @@ export const patchCohort = async (courseId: string, cohortId: number, cohortDeta
 };
 
 export const addLearnersToCohort = async (courseId: string, cohortId: number, users: string[]) => {
-  const url = `${getApiBaseUrl()}/api/cohorts/v1/courses/${courseId}/cohorts/${cohortId}/users`;
+  const url = `${getApiBaseUrl()}/api/cohorts/v1/courses/${courseId}/cohorts/${cohortId}/users/`;
   const { data } = await getAuthenticatedHttpClient().post(url, { users });
   return camelCaseObject(data);
 };