Can de/activate a cohort in the details overlay

stevebrownlee · Apr 7, 2024 · 24bee65 · 24bee65
1 parent 2ac3010
commit 24bee65
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 12 deletions.
diff --git a/src/components/cohorts/CohortDetails.js b/src/components/cohorts/CohortDetails.js
@@ -6,6 +6,7 @@ import { CourseContext } from "../course/CourseProvider.js"
 import { useHistory } from "react-router-dom"
 import Settings from "../Settings.js"
 import { CopyIcon } from "../../svgs/CopyIcon.js"
+import { fetchIt } from "../utils/Fetch.js"
 
 export const CohortDetails = () => {
     const initialState = {
@@ -20,7 +21,8 @@ export const CohortDetails = () => {
 
     const {
         activeCohort, activeCohortDetails, getCohort,
-        getCohortInfo, saveCohortInfo, updateCohortInfo
+        getCohortInfo, saveCohortInfo, updateCohortInfo,
+        updateCohort
     } = useContext(CohortContext)
     const { migrateCohortToServerSide, capstoneSeason, setCapstoneSeason } = useContext(CourseContext)
     const history = useHistory()
@@ -196,19 +198,46 @@ export const CohortDetails = () => {
                                     </div>
                                 </div>
 
+                                <h2>Active</h2>
+                                <div className="capstoneToggle">
+                                    <input defaultChecked={activeCohortDetails.active}
+                                        onChange={(evt) => {
+                                            evt.target.ariaChecked = evt.target.checked
+
+                                            const cohortObject = {
+                                                id: activeCohortDetails.id,
+                                                active: evt.target.checked
+                                            }
+                                            return fetchIt(`${Settings.apiHost}/cohorts/${activeCohortDetails.id}/active`,
+                                                {
+                                                    method: "PUT",
+                                                    body: JSON.stringify(cohortObject)
+                                                })
+                                                .then(() => {
+                                                    getCohort(activeCohortDetails.id)
+                                                    new Toast("Cohort updated", Toast.TYPE_INFO, Toast.TIME_SHORT)
+                                                })
+                                        }} id="toggle" className="toggle" type="checkbox" role="switch" name="toggle" value="on" />
+                                    <label htmlFor="toggle" className="slot">
+                                        <span className="slot__label">OFF</span>
+                                        <span className="slot__label">ON</span>
+                                    </label>
+                                    <div className="curtain"></div>
+                                </div>
+
                                 <h2>Capstone Season</h2>
                                 <div className="capstoneToggle">
                                     <input defaultChecked={capstoneSeason.active}
                                         onChange={(evt) => {
-                                        evt.target.ariaChecked = evt.target.checked
-
-                                        const seasonObject = {
-                                            id: activeCohortDetails.id,
-                                            active: evt.target.checked
-                                        }
-                                        setCapstoneSeason(seasonObject)
-                                        localStorage.setItem("capstoneSeason", JSON.stringify(seasonObject))
-                                    }} id="toggle" className="toggle" type="checkbox" role="switch" name="toggle" value="on" />
+                                            evt.target.ariaChecked = evt.target.checked
+
+                                            const seasonObject = {
+                                                id: activeCohortDetails.id,
+                                                active: evt.target.checked
+                                            }
+                                            setCapstoneSeason(seasonObject)
+                                            localStorage.setItem("capstoneSeason", JSON.stringify(seasonObject))
+                                        }} id="toggle" className="toggle" type="checkbox" role="switch" name="toggle" value="on" />
                                     <label htmlFor="toggle" className="slot">
                                         <span className="slot__label">OFF</span>
                                         <span className="slot__label">ON</span>

diff --git a/src/components/cohorts/CohortForm.js b/src/components/cohorts/CohortForm.js
@@ -17,7 +17,8 @@ export const CohortForm = () => {
         endDate: "",
         breakStartDate: "",
         breakEndDate: "",
-        slackChannel: ""
+        slackChannel: "",
+        active: false
     })
     const { getCourses } = useContext(CourseContext)
     const history = useHistory()
@@ -126,6 +127,11 @@ export const CohortForm = () => {
                     </div>
                 </fieldset>
 
+                <fieldset>
+                    <input type="checkbox" id="active" />
+                    <label style={{ margin: "0 0 0 0.66rem"}} htmlFor="active">The cohort has already started</label>
+                </fieldset>
+
                 <button type="submit"
                     onClick={
                         evt => {

diff --git a/src/components/cohorts/CohortProvider.js b/src/components/cohorts/CohortProvider.js
@@ -10,7 +10,10 @@ export const CohortProvider = (props) => {
     const [activeCohort, activateCohort] = useState(null)
     const [activeCohortDetails, setCohortDetails] = useState({
         start_date: "",
-        end_date: ""
+        end_date: "",
+        cohort: {
+            active: false
+        }
     })
 
     const { getCurrentUser } = simpleAuth()