diff --git a/src/App.tsx b/src/App.tsx index 6f451a1..212fae3 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,15 +1,12 @@ - import "./App.css"; import Header from "./components/Header"; import { UserProvider } from "./firebase/UserProvider"; import Pages from "./Pages"; function App() { - - return ( -
+
diff --git a/src/components/Form1.tsx b/src/components/Form1.tsx index 10f253c..0bb2020 100644 --- a/src/components/Form1.tsx +++ b/src/components/Form1.tsx @@ -1,75 +1,93 @@ -import { useState } from "react"; import Input from "./ui/Input"; import Label from "./ui/Label"; import SelectBox from "./ui/SelectBox"; +import { FormData } from "../types"; +import Button from "./ui/Button"; interface Form1Props { setStep: (step: number) => void; + formData: FormData; } -export default function Form1({ setStep }: Form1Props) { - const [age, setAge] = useState(); - const [gender, setGender] = useState(); - const [debtComfortLevel, setDebtComfortLevel] = useState("2"); - const [annualIncome, setAnnualIncome] = useState(); - const [avgMonthlySavings, setAvgMonthlySavings] = useState(); - +export default function Form1({ setStep, formData }: Form1Props) { return (
{ e.preventDefault(); setStep(2); - console.log( - `age: ${age}, gender: ${gender}, debt comfort level: ${debtComfortLevel}, annual income: ${annualIncome}, avg monthly savings: ${avgMonthlySavings}` - ); }} >
setAge(e.target.value)} + value={formData.age} + onChange={(e) => formData.setAge(e.target.value)} + required />
- setGender("male")}>Male - setGender("void")}> + + Male + + Prefer not to say - setGender("female")}>Female + + Female +
- setDebtComfortLevel(e.target.value)} - /> +
+

0

+ formData.setDebtComfortLevel(e.target.value)} + className="w-70" + required + /> +

10

+
setAnnualIncome(e.target.value)} + value={formData.annualIncome} + onChange={(e) => formData.setAnnualIncome(e.target.value)} + required />
setAvgMonthlySavings(e.target.value)} + value={formData.avgMonthlySavings} + onChange={(e) => formData.setAvgMonthlySavings(e.target.value)} + required />
- +
); } diff --git a/src/components/Form2.tsx b/src/components/Form2.tsx index c6692c9..1041908 100644 --- a/src/components/Form2.tsx +++ b/src/components/Form2.tsx @@ -1,22 +1,75 @@ +import Button from "./ui/Button"; import Input from "./ui/Input"; import Label from "./ui/Label"; +import { FormData } from "../types"; +interface Form2Props { + formData: FormData; + handleFormSubmit: (event: React.FormEvent) => void; +} -export default function Form2() { +export default function Form2({ formData, handleFormSubmit }: Form2Props) { return ( -
+ handleFormSubmit(e)}>
- -
-
- - +
+

Barely

+ formData.setPurchaseFrequency(e.target.value)} + className="w-70" + required + /> +

Every day

+
- - + +
+ + formData.setFoodSpend(e.target.value)} + /> +
+
+ + formData.setClothingSpend(e.target.value)} + /> +
+
+ + formData.setElectronicsSpend(e.target.value)} + /> +
+
+ + formData.setSubscriptionsSpend(e.target.value)} + /> +
+
+ + formData.setOtherSpend(e.target.value)} + /> +
- +
); } diff --git a/src/components/Form3.tsx b/src/components/Form3.tsx deleted file mode 100644 index fd18321..0000000 --- a/src/components/Form3.tsx +++ /dev/null @@ -1,31 +0,0 @@ -export default function Form3() { - return ( -
-
- - -
-
- -
- - - -
-
-
- - -
-
- - -
-
- - -
- -
- ); -} diff --git a/src/components/FormPage.tsx b/src/components/FormPage.tsx index 2c0fa29..e98f0c6 100644 --- a/src/components/FormPage.tsx +++ b/src/components/FormPage.tsx @@ -1,11 +1,73 @@ import { useState } from "react"; import Form1 from "./Form1"; import Form2 from "./Form2"; -import Form3 from "./Form3"; +import { InputValue } from "../types"; -export default function FormPage() { +interface FormPageProps { + setPage: (page: string) => void; +} + +export default function FormPage({ setPage }: FormPageProps) { const [step, setStep] = useState(1); + const [age, setAge] = useState(); + const [gender, setGender] = useState(); + const [debtComfortLevel, setDebtComfortLevel] = useState(5); + const [annualIncome, setAnnualIncome] = useState(); + const [avgMonthlySavings, setAvgMonthlySavings] = useState(); + + const [purchaseFrequency, setPurchaseFrequency] = useState(); + const [foodSpend, setFoodSpend] = useState(); + const [clothingSpend, setClothingSpend] = useState(); + const [electronicsSpend, setElectronicsSpend] = useState(); + const [subscriptionsSpend, setSubscriptionsSpend] = useState(); + const [otherSpend, setOtherSpend] = useState(); + + const formData = { + age, + setAge, + gender, + setGender, + debtComfortLevel, + setDebtComfortLevel, + annualIncome, + setAnnualIncome, + avgMonthlySavings, + setAvgMonthlySavings, + purchaseFrequency, + setPurchaseFrequency, + foodSpend, + setFoodSpend, + clothingSpend, + setClothingSpend, + electronicsSpend, + setElectronicsSpend, + subscriptionsSpend, + setSubscriptionsSpend, + otherSpend, + setOtherSpend, + }; + + const submitData = { + age, + gender, + debtComfortLevel, + annualIncome, + avgMonthlySavings, + purchaseFrequency, + foodSpend, + clothingSpend, + electronicsSpend, + subscriptionsSpend, + otherSpend, + }; + + function handleFormSubmit(e: React.FormEvent) { + e.preventDefault(); + console.log(submitData); + setPage("dashboard"); + } + return (
@@ -13,9 +75,10 @@ export default function FormPage() {

Help us understand your financial habits.

- {step == 1 && } - {step == 2 && } - {step == 3 && } + {step == 1 && } + {step == 2 && ( + + )}
); } diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx index 449f576..134265c 100644 --- a/src/components/ui/Button.tsx +++ b/src/components/ui/Button.tsx @@ -2,20 +2,25 @@ import React from "react"; type ButtonProps = { children: React.ReactNode; - onClick: () => void; + onClick?: () => void; disabled?: boolean; + className?: string; + type?: "submit" | "reset" | "button" | undefined; }; export default function Button({ children, onClick, disabled = false, + className, + type, }: ButtonProps) { return ( diff --git a/src/components/ui/Input.tsx b/src/components/ui/Input.tsx index e06c92a..662915f 100644 --- a/src/components/ui/Input.tsx +++ b/src/components/ui/Input.tsx @@ -1,9 +1,12 @@ +import { InputValue } from "../../types"; + interface InputProps { type?: string; placeholder?: string; className?: string; onChange?: (event: React.ChangeEvent) => void; - value?: string | number | readonly string[] | undefined; + value?: InputValue; + required?: boolean; } export default function Input({ @@ -12,11 +15,13 @@ export default function Input({ className, onChange, value, + required, }: InputProps) { return ( {children} - -} \ No newline at end of file +export default function Label({ children }: LabelProps) { + return ( + + ); +} diff --git a/src/components/ui/SelectBox.tsx b/src/components/ui/SelectBox.tsx index 61695a3..b42f3b6 100644 --- a/src/components/ui/SelectBox.tsx +++ b/src/components/ui/SelectBox.tsx @@ -1,14 +1,26 @@ +import { InputValue } from "../../types"; interface SelectBoxProps { children: React.ReactNode; - onClick: () => void; + value: InputValue; + selected: InputValue; + setSelected: (value: InputValue) => void; } -export default function SelectBox({ children, onClick }: SelectBoxProps) { +export default function SelectBox({ + children, + value, + selected, + setSelected, +}: SelectBoxProps) { + const isSelected = value == selected; + return ( diff --git a/src/types.ts b/src/types.ts new file mode 100644 index 0000000..127253d --- /dev/null +++ b/src/types.ts @@ -0,0 +1,29 @@ +export type InputValue = string | number | readonly string[] | undefined; + +export type SubmitData = { + age: InputValue; + gender: InputValue; + debtComfortLevel: InputValue; + annualIncome: InputValue; + avgMonthlySavings: InputValue; + purchaseFrequency: InputValue; + foodSpend: InputValue; + clothingSpend: InputValue; + electronicsSpend: InputValue; + subscriptionsSpend: InputValue; + otherSpend: InputValue; +}; + +export type FormData = SubmitData & { + setAge: React.Dispatch>; + setGender: React.Dispatch>; + setDebtComfortLevel: React.Dispatch>; + setAnnualIncome: React.Dispatch>; + setAvgMonthlySavings: React.Dispatch>; + setPurchaseFrequency: React.Dispatch>; + setFoodSpend: React.Dispatch>; + setClothingSpend: React.Dispatch>; + setElectronicsSpend: React.Dispatch>; + setSubscriptionsSpend: React.Dispatch>; + setOtherSpend: React.Dispatch>; +};