All files / pages/Meal MealTimesPage.jsx

100% Statements 11/11
100% Branches 2/2
100% Functions 2/2
100% Lines 11/11

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                  9x     9x             9x 9x   9x 1x 1x 1x     9x 1x 1x                                                                                                  
import { useState } from "react";
import BasicLayout from "main/layouts/BasicLayout/BasicLayout";
import { useNavigate, useParams } from "react-router";
import { useBackend } from "main/utils/useBackend";
import { toast } from "react-toastify";
import MealTable from "main/components/Meal/MealTable";
 
export default function MealTimesPage() {
  // Stryker disable next-line all : Can't test state because hook is internal
  let { "date-time": dateTime, "dining-commons-code": diningCommonsCode } =
    useParams();
 
  const { data: meals, status } = useBackend(
    // Stryker disable next-line all : don't test internal caching of React Query
    [`/api/diningcommons/${dateTime}/${diningCommonsCode}`],
    {
      url: `/api/diningcommons/${dateTime}/${diningCommonsCode}`,
    },
  );
  const [selectedDate, setSelectedDate] = useState(dateTime);
  const navigate = useNavigate();
 
  const onChangeDate = (e) => {
    const newDate = e.target.value;
    setSelectedDate(newDate);
    navigate(`/diningcommons/${newDate}/${diningCommonsCode}`);
  };
 
  if (status === 204) {
    const message = `${diningCommonsCode} is closed on ${dateTime}. Please select another date or dining common.`;
    toast(message, { toastId: "closed-dining-commons" });
    return (
      <BasicLayout>
        <h1>
          Meals at {diningCommonsCode} for {dateTime}
        </h1>
        <p>
          <label htmlFor="dateSelector">Select Date:</label>
          <br></br>
          <input
            type="date"
            id="dateSelector"
            name="dateSelector"
            value={selectedDate}
            onChange={onChangeDate}
          />
        </p>
      </BasicLayout>
    );
  }
 
  return (
    <BasicLayout>
      <div className="pt-2">
        <h1>
          Meals at {diningCommonsCode} for {dateTime}
        </h1>
        <p>
          <label htmlFor="dateSelector">Select Date:</label>
          <br></br>
          <input
            type="date"
            id="dateSelector"
            name="dateSelector"
            value={selectedDate}
            onChange={onChangeDate}
          />
        </p>
        {meals && (
          <MealTable
            meals={meals}
            dateTime={dateTime}
            diningCommonsCode={diningCommonsCode}
          />
        )}
      </div>
    </BasicLayout>
  );
}