From eea48a8fe23f221f471f659cb8f5ebebf7b12ea9 Mon Sep 17 00:00:00 2001 From: Tessa Thornberry Date: Wed, 18 Oct 2023 17:06:31 -0700 Subject: [PATCH 1/4] used date-fns to format dates in student_id so that IEP date values are as per user selection both in the front end and in the database --- src/components/iep/IepDateInput.tsx | 31 +++++++++++++++++++++++++++++ src/pages/students/[student_id].tsx | 24 ++++++++++++++++------ 2 files changed, 49 insertions(+), 6 deletions(-) create mode 100644 src/components/iep/IepDateInput.tsx diff --git a/src/components/iep/IepDateInput.tsx b/src/components/iep/IepDateInput.tsx new file mode 100644 index 00000000..ec54c877 --- /dev/null +++ b/src/components/iep/IepDateInput.tsx @@ -0,0 +1,31 @@ +import React from "react"; + +interface IepDateInputProps { + name: string; + value: string; + placeholder: string; + onChange: (date: string) => void; +} + +const IepDateInput = ({ + name, + value, + placeholder, + onChange, +}: IepDateInputProps) => { + return ( + { + onChange(e.target.value); + console.log(name, e.target.value); + }} + required + /> + ); +}; + +export default IepDateInput; diff --git a/src/pages/students/[student_id].tsx b/src/pages/students/[student_id].tsx index 2f99bf71..179a825f 100644 --- a/src/pages/students/[student_id].tsx +++ b/src/pages/students/[student_id].tsx @@ -16,10 +16,13 @@ import $Form from "../../styles/Form.module.css"; import $Modal from "../../styles/Modal.module.css"; import $StudentPage from "../../styles/StudentPage.module.css"; import $Image from "../../styles/Image.module.css"; +import IepDateInput from "@/components/iep/IepDateInput"; const ViewStudentPage = () => { const [createIepModal, setCreateIepModal] = useState(false); const [archivePrompt, setArchivePrompt] = useState(false); + const [startDate, setStartDate] = useState(""); + const [endDate, setEndDate] = useState(""); const utils = trpc.useContext(); const router = useRouter(); @@ -48,6 +51,15 @@ const ViewStudentPage = () => { onSuccess: () => utils.student.getActiveStudentIep.invalidate(), }); + const handleIepStartDateChange = (date: string) => { + setStartDate(date); + const futureDate = new Date(date); + futureDate.setFullYear(futureDate.getFullYear() + 1); + futureDate.setDate(futureDate.getDate() - 1); + const formattedEndDate = futureDate.toISOString().substring(0, 10); // Get YYYY-MM-DD parts of new date + setEndDate(formattedEndDate); + }; + const handleIepSubmit = (event: React.FormEvent) => { event.preventDefault(); const data = new FormData(event.currentTarget); @@ -191,20 +203,20 @@ const ViewStudentPage = () => {

Start Date:

-

End Date:

- From 4f894163a45bd27c3390db7bf694f5f4044c08a7 Mon Sep 17 00:00:00 2001 From: Tessa Thornberry Date: Thu, 19 Oct 2023 16:18:46 -0700 Subject: [PATCH 2/4] updated student IEP date to format correctly and autofill end date in-file, without exporting an IepDateInput component --- src/components/iep/IepDateInput.tsx | 31 -------------------------- src/pages/students/[student_id].tsx | 34 ++++++++++++++++++----------- 2 files changed, 21 insertions(+), 44 deletions(-) delete mode 100644 src/components/iep/IepDateInput.tsx diff --git a/src/components/iep/IepDateInput.tsx b/src/components/iep/IepDateInput.tsx deleted file mode 100644 index ec54c877..00000000 --- a/src/components/iep/IepDateInput.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from "react"; - -interface IepDateInputProps { - name: string; - value: string; - placeholder: string; - onChange: (date: string) => void; -} - -const IepDateInput = ({ - name, - value, - placeholder, - onChange, -}: IepDateInputProps) => { - return ( - { - onChange(e.target.value); - console.log(name, e.target.value); - }} - required - /> - ); -}; - -export default IepDateInput; diff --git a/src/pages/students/[student_id].tsx b/src/pages/students/[student_id].tsx index 179a825f..a79ec222 100644 --- a/src/pages/students/[student_id].tsx +++ b/src/pages/students/[student_id].tsx @@ -16,7 +16,7 @@ import $Form from "../../styles/Form.module.css"; import $Modal from "../../styles/Modal.module.css"; import $StudentPage from "../../styles/StudentPage.module.css"; import $Image from "../../styles/Image.module.css"; -import IepDateInput from "@/components/iep/IepDateInput"; +import { parseISO, addYears, subDays, format } from "date-fns"; const ViewStudentPage = () => { const [createIepModal, setCreateIepModal] = useState(false); @@ -53,10 +53,10 @@ const ViewStudentPage = () => { const handleIepStartDateChange = (date: string) => { setStartDate(date); - const futureDate = new Date(date); - futureDate.setFullYear(futureDate.getFullYear() + 1); - futureDate.setDate(futureDate.getDate() - 1); - const formattedEndDate = futureDate.toISOString().substring(0, 10); // Get YYYY-MM-DD parts of new date + const parsedDate: Date = parseISO(date); + const datePlusOneYear: Date = addYears(parsedDate, 1); + const finalDate: Date = subDays(datePlusOneYear, 1); + const formattedEndDate: string = format(finalDate, "yyyy-MM-dd"); setEndDate(formattedEndDate); }; @@ -69,8 +69,8 @@ const ViewStudentPage = () => { } iepMutation.mutate({ student_id: student.student_id, - start_date: new Date(data.get("start_date") as string), - end_date: new Date(data.get("end_date") as string), + start_date: new Date(parseISO(data.get("start_date") as string)), + end_date: new Date(parseISO(data.get("end_date") as string)), }); setCreateIepModal(false); @@ -203,20 +203,28 @@ const ViewStudentPage = () => {

Start Date:

- { + handleIepStartDateChange(e.target.value); + }} + required />

End Date:

- { + // setEndDate(e.target.value); + // }} + required /> From ea58946d8e1ae9d7d15552421edc75f233a16915 Mon Sep 17 00:00:00 2001 From: Tessa Thornberry Date: Thu, 19 Oct 2023 16:25:12 -0700 Subject: [PATCH 3/4] cleaned up commented-out code --- src/pages/students/[student_id].tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/pages/students/[student_id].tsx b/src/pages/students/[student_id].tsx index a79ec222..68ea801a 100644 --- a/src/pages/students/[student_id].tsx +++ b/src/pages/students/[student_id].tsx @@ -221,9 +221,6 @@ const ViewStudentPage = () => { name="end_date" placeholder="IEP end date" value={endDate} - // onChange={(e) => { - // setEndDate(e.target.value); - // }} required /> From 092010ec90fc058fe405a4a602b8663ebc21e20d Mon Sep 17 00:00:00 2001 From: Tessa Thornberry Date: Thu, 19 Oct 2023 22:21:29 -0700 Subject: [PATCH 4/4] updated function for autofilling end date to handleAutofillIepEndDate and add comment explaining why that is the date --- src/pages/students/[student_id].tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/pages/students/[student_id].tsx b/src/pages/students/[student_id].tsx index 68ea801a..d665a37a 100644 --- a/src/pages/students/[student_id].tsx +++ b/src/pages/students/[student_id].tsx @@ -51,7 +51,8 @@ const ViewStudentPage = () => { onSuccess: () => utils.student.getActiveStudentIep.invalidate(), }); - const handleIepStartDateChange = (date: string) => { + const handleAutofillIepEndDate = (date: string) => { + //new IEP generally starts on same date annually, so end date autofills to the day before one year from start date setStartDate(date); const parsedDate: Date = parseISO(date); const datePlusOneYear: Date = addYears(parsedDate, 1); @@ -209,7 +210,7 @@ const ViewStudentPage = () => { placeholder="IEP start date" value={startDate} onChange={(e) => { - handleIepStartDateChange(e.target.value); + handleAutofillIepEndDate(e.target.value); }} required />