All files / components/Courses CourseForm.js

100% Statements 13/13
100% Branches 15/15
100% Functions 3/3
100% Lines 13/13

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115                                      65x     65x           65x                 65x 65x 65x 7x       65x 26x 2x   2x         65x                                                                                                     1x                    
import React, { useState, useEffect } from "react";
import { Button, Form } from "react-bootstrap";
import { useForm } from "react-hook-form";
import { useNavigate, Link } from "react-router-dom";
import PersonalScheduleDropdown from "../PersonalSchedules/PersonalScheduleDropdown";
import { useBackend } from "main/utils/useBackend";
 
function CourseForm({
  initialCourse,
  submitAction,
  buttonLabel = "Create",
  codeEditable = true,
  enrollmentCode,
}) {
  // Stryker disable all
  const {
    register,
    formState: { errors },
    handleSubmit,
  } = useForm({ defaultValues: initialCourse || {} });
  // Stryker restore all
 
  const navigate = useNavigate();
 
  const {
    data: schedules,
    error: _error,
    status: _status,
  } = useBackend(
    // Stryker disable next-line all : don't test internal caching of React Query
    ["/api/personalschedules/all"],
    // Stryker disable next-line all : don't test internal caching of React Query
    { method: "GET", url: "/api/personalschedules/all" },
    [],
  );
 
  // Stryker disable all : not sure how to test/mock local storage
  const localSchedule = localStorage.getItem("CourseForm-psId");
  const [schedule, setSchedule] = useState(localSchedule || "");
  if (schedule) {
    localStorage.setItem("CourseForm-psId", schedule);
  }
  // Stryker restore all
 
  useEffect(() => {
    if (schedules && schedules.length > 0 && !localSchedule) {
      setSchedule(schedules[0].id);
      // Stryker disable all : not sure how to test/mock local storage
      localStorage.setItem("CourseForm-psId", schedules[0].id);
      // Stryker restore all
    }
  }, [schedules, localSchedule]);
 
  return (
    <Form onSubmit={handleSubmit(submitAction)}>
      {initialCourse && (
        <Form.Group className="mb-3">
          <Form.Label htmlFor="id">Id</Form.Label>
          <Form.Control
            data-testid="CourseForm-id"
            id="id"
            type="text"
            {...register("id")}
            value={initialCourse.id}
            disabled
          />
        </Form.Group>
      )}
 
      <Form.Group className="mb-3">
        <Form.Label htmlFor="enrollCd">Enrollment Code</Form.Label>
        <Form.Control
          data-testid="CourseForm-enrollCd"
          id="enrollCd"
          type="text"
          isInvalid={Boolean(errors.enrollCd)}
          {...register("enrollCd", {
            required: "Enroll Code is required.",
          })}
          value={enrollmentCode}
          readOnly={!codeEditable}
        />
        <Form.Control.Feedback type="invalid">
          {errors.enrollCd?.message}
        </Form.Control.Feedback>
      </Form.Group>
 
      <Form.Group className="mb-3" data-testid="CourseForm-psId">
        <PersonalScheduleDropdown
          schedules={schedules}
          schedule={schedule}
          setSchedule={setSchedule}
          controlId={"CourseForm-psId"}
        />
        {/* {schedules && schedules.length === 0 && ( */}
        <Link to="/personalschedules/create">Add New Personal Schedule</Link>
        {/* )} */}
      </Form.Group>
 
      <Button type="submit" data-testid="CourseForm-submit">
        {buttonLabel}
      </Button>
      <Button
        variant="Secondary"
        onClick={() => navigate(-1)}
        data-testid="CourseForm-cancel"
      >
        Cancel
      </Button>
    </Form>
  );
}
 
export default CourseForm;