Fixed form

Hack4ImpactRutgers · Mar 1, 2024 · eff869f · eff869f
1 parent 6567f94
commit eff869f
Show file tree

Hide file tree

Showing 9 changed files with 184 additions and 290 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -12,13 +12,15 @@
     "@tailwindcss/forms": "^0.5.7",
     "@types/node": "20.8.9",
     "@types/react": "18.2.33",
+    "@types/react-datepicker": "^6.0.2",
     "@types/react-dom": "18.2.14",
     "autoprefixer": "10.4.16",
     "eslint": "8.50.0",
     "eslint-config-next": "13.5.3",
     "next": "13.5.6",
     "postcss": "8.4.31",
     "react": "18.2.0",
+    "react-datepicker": "^6.2.0",
     "react-dom": "18.2.0",
     "tailwindcss": "3.3.3",
     "typescript": "5.2.2",

diff --git a/frontend/src/app/components/DatePicker.tsx b/frontend/src/app/components/DatePicker.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+
+interface DatePickerComponentProps {
+  selectedDate: Date | null;
+  onChange: (date: Date ) => void;
+}
+
+const DatePickerComponent: React.FC<DatePickerComponentProps> = (props) => {
+  return (
+    <DatePicker
+      selected={props.selectedDate}
+      onChange={props.onChange}
+      dateFormat="MM/dd/yyyy" // You can adjust the date format as needed
+    />
+  );
+}
+
+export default DatePickerComponent;
diff --git a/frontend/src/app/components/RadioButton.tsx b/frontend/src/app/components/RadioButton.tsx
@@ -1,14 +1,23 @@
+import React from 'react';
+
 interface RadioButtonProps {
-  value: string;
+  truth: boolean;
+  check: boolean;
+  change: (newValue: boolean) => void;
 }
 
 export default function RadioButton(props: RadioButtonProps) {
-  const { value } = props;
+  const { truth, check, change } = props;
+
+  const handleChange = () => {
+    change(truth); // On change, pass the truth value to the change function
+  };
 
   return (
     <input
       type="radio"
-      value={value}
+      checked={check} // Check if this radio button is checked based on the check prop
+      onChange={handleChange} // Call handleChange function on change
       className="bg-[#D9D9D9] focus:ring-secondary text-secondary"
     />
   );

diff --git a/frontend/src/app/form/Assessment.tsx b/frontend/src/app/form/Assessment.tsx
@@ -45,7 +45,7 @@ function Assessment(props: AssessmentProps) {
       <RadioButton truth={true} check={props.lasting} change={props.setLasting} />
       <label className='ml-3'>Yes</label>
         <div className='ml-10'>
-      <RadioButton truth={false} check={props.lasting} change={props.setLasting}/>
+      <RadioButton truth={false} check={!props.lasting} change={props.setLasting}/>
       </div>
       <label className='ml-3'>No</label>
       </div>
@@ -72,7 +72,7 @@ function Assessment(props: AssessmentProps) {
       <TextInput value={props.comments || ''} placeholder={''} onChange={props.setComments }/>
 
       <div className='mt-5 after:content-["*"] after:text-[red] after:ml-0.5'>
-        Does the client need any other supplies (collars, leashes,bowls, etc)?
+        Does the client need any other supplies (collars, leashes, bowls, etc)?
       </div>
       <TextInput value={props.supplies || ''} placeholder={''} onChange={props.setSupplies }/>
 

diff --git a/frontend/src/app/form/Pet.tsx b/frontend/src/app/form/Pet.tsx
@@ -36,19 +36,21 @@ function Pet(props: PetProps) {
       <div className='mt-5 '>
           Amount of Food Per Month
           </div>
-          <TextInput value={props.foodAmount || ''} placeholder={''} onChange={props.setFoodAmount}/>
 
-          {props.num==1 && <div onClick={()=>props.setFormPage("Pet2")} className='mt-5 text-right'>
+          <TextInput value={props.foodAmount || ''} placeholder={''} onChange={props.setFoodAmount}/>
+        <div className='flex flex-row'>
+          {<div onClick={()=>props.setFormPage("Assessment")} className='mt-5'>
           <Button text="Continue"/>
           </div>}
 
-          {props.num==2 && <div onClick={()=>props.setFormPage("Pet3")} className='mt-5 text-right'>
-          <Button text="Continue"/>
+          {props.num==1 && <div onClick={()=>props.setFormPage("Pet2")} className='mt-5 ml-5 text-right'>
+          <Button text="Add Pet"/>
           </div>}
 
-          {props.num==3 && <div onClick={()=>props.setFormPage("Assessment")} className='mt-5 text-right'>
-          <Button text="Continue"/>
+          {props.num==2 && <div onClick={()=>props.setFormPage("Pet3")} className='mt-5 ml-5 text-right'>
+          <Button text="Add Pet"/>
           </div>}
+          </div>
 
     </form>
   )

diff --git a/frontend/src/app/form/Submit.tsx b/frontend/src/app/form/Submit.tsx
@@ -3,19 +3,22 @@ import Button from '../components/Button';
 import Checkbox from '../components/Checkbox';
 import RadioButton from '../components/RadioButton';
 import TextInput from '../components/TextInput';
+import DatePicker from '../components/DatePicker';
 
 interface SubmitProps {
     name: string
     updated: boolean
+    selectedDate: Date
     setName: Dispatch<SetStateAction<string>>;
     setUpdated: Dispatch<SetStateAction<boolean>>;
+    setSelectedDate: Dispatch<SetStateAction<Date>>;
     setFormPage: Dispatch<SetStateAction<string>>;
 
 }
 
 function Submit(props: SubmitProps) {
 
-
+ 
 
   return (
     <form className="">
@@ -24,6 +27,10 @@ function Submit(props: SubmitProps) {
       </div>
       <TextInput value={props.name || ''} placeholder={''} onChange={props.setName}/>
 
+      <div className='after:content-["*"] after:text-[red] after:ml-0.5'>
+            Date Delivered
+      </div>
+      <DatePicker selectedDate={props.selectedDate} onChange={ props.setSelectedDate }  />
 
       <div className='after:content-["*"] after:text-[red] after:ml-0.5'>
         Is there any information that needs to be updated?
@@ -33,7 +40,7 @@ function Submit(props: SubmitProps) {
       <RadioButton truth={true} check={props.updated} change={props.setUpdated} />
       <label className='ml-3'>Yes</label>
         <div className='ml-10'>
-      <RadioButton truth={false} check={props.updated} change={props.setUpdated}/>
+      <RadioButton truth={false} check={!props.updated} change={props.setUpdated}/>
       </div>
       <label className='ml-3'>No</label>
       </div>

diff --git a/frontend/src/app/form/page.tsx b/frontend/src/app/form/page.tsx
@@ -2,7 +2,7 @@
 import React, {  useEffect, useState  } from 'react'
 import {ReactNode} from "react"
 import Link from "next/link"
-import Client from './Client'
+import Client from './client'
 import Pet from './Pet'
 import Button from '../components/Button'
 import Assessment from './Assessment'
@@ -39,6 +39,7 @@ export default function DeliveryReportForm() {
 
 
     const [name,setName]=useState("")
+    const [selectedDate,setSelectedDate] = useState(new Date())
     const [updated, setUpdated]=useState(false)
 
     useEffect(() => {
@@ -69,7 +70,7 @@ export default function DeliveryReportForm() {
               {formPage=="Pet2" && <Pet petName={petName2} setPetName={setPetName2} foodType={foodType2} setFoodType={setFoodType2} foodAmount={foodAmount2} setFoodAmount={setFoodAmount2}  setFormPage={setFormPage} num={2}/>}
               {formPage=="Pet3" && <Pet petName={petName3} setPetName={setPetName3} foodType={foodType3} setFoodType={setFoodType3} foodAmount={foodAmount3} setFoodAmount={setFoodAmount3}  setFormPage={setFormPage} num={3}/>}
               {formPage === "Assessment" && <Assessment lasting={lasting} setLasting={setLasting} comments={comments} setComments={setComments} supplies={supplies} setSupplies={setSupplies} needs={needs} setNeeds={setNeeds} cup={cup} setCup={setCup} scale={scale} setScale={setScale} setFormPage={setFormPage} />}
-              {formPage=="Submit" && <Submit name={name} setName={setName} updated={updated} setUpdated={setUpdated} setFormPage={setFormPage}/>}
+              {formPage=="Submit" && <Submit name={name} setName={setName} selectedDate={selectedDate} setSelectedDate={setSelectedDate} updated={updated} setUpdated={setUpdated} setFormPage={setFormPage}/>}
 
           </div>
 

diff --git a/frontend/src/app/info/Pet.tsx b/frontend/src/app/info/Pet.tsx
@@ -100,7 +100,7 @@ function Pet(props: PetProps) {
       <RadioButton truth={true} check={props.sprayed} change={props.setSprayed} />
       <label className='ml-3'>Yes</label>
         <div className='ml-10'>
-      <RadioButton truth={false} check={props.sprayed} change={props.setSprayed}/>
+      <RadioButton truth={false} check={!props.sprayed} change={props.setSprayed}/>
       </div>
       <label className='ml-3'>No</label>
       </div>
@@ -112,7 +112,7 @@ function Pet(props: PetProps) {
       <RadioButton truth={true} check={props.vaccinated} change={props.setVaccinated} />
       <label className='ml-3'>Yes</label>
         <div className='ml-10'>
-      <RadioButton truth={false} check={props.vaccinated} change={props.setVaccinated}/>
+      <RadioButton truth={false} check={!props.vaccinated} change={props.setVaccinated}/>
       </div>
       <label className='ml-3'>No</label>
       </div>
@@ -124,7 +124,7 @@ function Pet(props: PetProps) {
       <RadioButton truth={true} check={props.heartworm} change={props.setHeartworm} />
       <label className='ml-3'>Yes</label>
         <div className='ml-10'>
-      <RadioButton truth={false} check={props.heartworm} change={props.setHeartworm}/>
+      <RadioButton truth={false} check={!props.heartworm} change={props.setHeartworm}/>
       </div>
       <label className='ml-3'>No</label>
       </div>
@@ -137,7 +137,7 @@ function Pet(props: PetProps) {
       <RadioButton truth={true} check={props.flea} change={props.setFlea} />
       <label className='ml-3'>Yes</label>
         <div className='ml-10'>
-      <RadioButton truth={false} check={props.flea} change={props.setFlea}/>
+      <RadioButton truth={false} check={!props.flea} change={props.setFlea}/>
       </div>
       <label className='ml-3'>No</label>
       </div>
@@ -149,7 +149,7 @@ function Pet(props: PetProps) {
       <RadioButton truth={true} check={props.take} change={props.setTake} />
       <label className='ml-3'>Yes</label>
         <div className='ml-10'>
-      <RadioButton truth={false} check={props.take} change={props.setTake}/>
+      <RadioButton truth={false} check={!props.take} change={props.setTake}/>
       </div>
       <label className='ml-3'>No</label>
       </div>
@@ -168,19 +168,24 @@ function Pet(props: PetProps) {
           Is there anything else you would like us to know about your pet?
           </div>
           <TextInput value={props.extra|| ''} placeholder={''} onChange={props.setExtra}/>
+          <div className='flex flex-row'>
 
-          {props.num==1 && <div onClick={()=>props.setFormPage("Pet2")} className='mt-5 text-right'>
-          <Button text="Continue"/>
+          {<div onClick={()=>props.setFormPage("Confirm")} className='mt-5 text-right'>
+          <Button text="Submit"/>
+
           </div>}
 
-          {props.num==2 && <div onClick={()=>props.setFormPage("Pet3")} className='mt-5 text-right'>
-          <Button text="Continue"/>
+          {props.num==1 && <div onClick={()=>props.setFormPage("Pet2")} className='mt-5 ml-5 text-right'>
+          <Button text="Add Pet"/>
           </div>}
 
-          {props.num==3 && <div onClick={()=>props.setFormPage("Confirm")} className='mt-5 text-right'>
-          <Button text="Submit"/>
+          {props.num==2 && <div onClick={()=>props.setFormPage("Pet3")} className='mt-5 ml-5 text-right'>
+          <Button text="Add Pet "/>
           </div>}
 
+
+          </div>
+
     </form>
   )
 }