Skip to content

Commit

Permalink
Comparison Section Only.
Browse files Browse the repository at this point in the history
  • Loading branch information
@UniqueClone
UniqueClone committed Jun 7, 2024
1 parent 6655f22 commit 1f115db
Show file tree
Hide file tree
Showing 6 changed files with 103 additions and 93 deletions.
4 changes: 2 additions & 2 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import "./App.css";
import MortgageCalculator from "./components/MortgageCalculator/MortgageCalculator";
import ComparisonPage from "./components/MortgageCalculator/ComparisonPage/ComparisonPage";

function App() {
return (
<>
<MortgageCalculator />
<ComparisonPage />
</>
);
}
Expand Down
119 changes: 73 additions & 46 deletions src/components/MortgageCalculator/ComparisonPage/ComparisonPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,52 +3,79 @@ import { ComparisonSection } from "./ComparisonSection";

interface ComparisonPageProps {}

const ComparisonPage: React.FC<ComparisonPageProps> = () =>
// props: ComparisonPageProps
{
return (
<div>
<h1>Compare Mortgages</h1>
<ComparisonSection
option1={{
housePrice: 440000,
depositPercentage: 0.1,
mortgageTerm: 35,
interestRate: 3.8,
fees: {
valuationFee: 185,
surveyFee: 500,
legalFee: 3300,
searchFee: 250,
},
}}
option2={{
housePrice: 450000,
depositPercentage: 0.1,
mortgageTerm: 35,
interestRate: 3.8,
fees: {
valuationFee: 185,
surveyFee: 500,
legalFee: 3300,
searchFee: 250,
},
}}
option3={{
housePrice: 460000,
depositPercentage: 0.1,
mortgageTerm: 35,
interestRate: 3.8,
fees: {
valuationFee: 185,
surveyFee: 500,
legalFee: 3300,
searchFee: 250,
},
}}
const ComparisonPage: React.FC<ComparisonPageProps> = () => {
const [useOneInterestRate, setUseOneInterestRate] =
React.useState<boolean>(true);
const [interestRate, setInterestRate] = React.useState<number>(3.8);

return (
<div>
<h1>Compare Mortgages</h1>
<label>
Use one interest rate?
<input
type="checkbox"
checked={useOneInterestRate}
onChange={() => setUseOneInterestRate(!useOneInterestRate)}
/>
</div>
);
};
</label>

{useOneInterestRate && (
<>
<br />
<label>
Interest Rate (%)
<input
type="number"
value={interestRate}
onChange={(e) =>
setInterestRate(parseInt(e.target.value))
}
/>
</label>
</>
)}

<ComparisonSection
option1={{
housePrice: 440000,
depositPercentage: 0.1,
mortgageTerm: 35,
interestRate: useOneInterestRate ? interestRate : undefined,
fees: {
valuationFee: 185,
surveyFee: 500,
legalFee: 3300,
searchFee: 250,
},
}}
option2={{
housePrice: 450000,
depositPercentage: 0.1,
mortgageTerm: 35,
interestRate: useOneInterestRate ? interestRate : undefined,
fees: {
valuationFee: 185,
surveyFee: 500,
legalFee: 3300,
searchFee: 250,
},
}}
option3={{
housePrice: 460000,
depositPercentage: 0.1,
mortgageTerm: 35,
interestRate: useOneInterestRate ? interestRate : undefined,
fees: {
valuationFee: 185,
surveyFee: 500,
legalFee: 3300,
searchFee: 250,
},
}}
/>
</div>
);
};

export default ComparisonPage;
20 changes: 18 additions & 2 deletions src/components/MortgageCalculator/ComparisonPage/ComparisonSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,8 @@ const OptionSection: React.FC<{
}> = (props: { id: number; option: MortgageProperties }) => {
const { id, option } = props;
const [housePrice, setHousePrice] = React.useState(option.housePrice);
// const [interestRate, setInterestRate] = React.useState(option.interestRate);
const useOneInterestRate = option.interestRate !== undefined;
const [interestRate, setInterestRate] = React.useState(3.8);
// const [mortgageTerm, setMortgageTerm] = React.useState(option.mortgageTerm);

return (
Expand All @@ -59,6 +60,21 @@ const OptionSection: React.FC<{
onChange={(e) => setHousePrice(parseInt(e.target.value))}
/>
</label>
{!useOneInterestRate && (
<>
<br />
<label>
Interest Rate (%)
<input
type="number"
value={interestRate}
onChange={(e) =>
setInterestRate(parseFloat(e.target.value))
}
/>
</label>{" "}
</>
)}
<h3>
House Price: <p>{formatter.format(housePrice)}</p>
</h3>
Expand All @@ -68,7 +84,7 @@ const OptionSection: React.FC<{
{formatter.format(
getMonthlyPayment(
housePrice * 0.9,
option.interestRate,
option.interestRate ?? interestRate,
option.mortgageTerm
)
)}
Expand Down
9 changes: 8 additions & 1 deletion src/components/MortgageCalculator/MortgageCalculator.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
input[type="checkbox"] {
height: 1rem;
width: 1rem;
font-size: 1em;
margin: 0.5rem;
}

input[type="number"] {
border-radius: 4px;
border-radius: 2rem;
border: 1px solid #ccc;
padding: 0.5em;
font-size: 1em;
Expand Down
42 changes: 1 addition & 41 deletions src/components/MortgageCalculator/MortgageCalculator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -215,47 +215,7 @@ function MortgageCalculator(): JSX.Element {
</p>
</div>
</div>
<ComparisonPage
// option1={{
// housePrice: 440000,
// depositPercentage: 0.1,
// mortgageTerm: 35,
// interestRate: 3.8,
// fees: {
// valuationFee: 185,
// surveyFee: 500,
// legalFee: 3300,
// stampDuty: 4400,
// searchFee: 250,
// },
// }}
// option2={{
// housePrice: 450000,
// depositPercentage: 0.1,
// mortgageTerm: 35,
// interestRate: 3.8,
// fees: {
// valuationFee: 185,
// surveyFee: 500,
// legalFee: 3300,
// stampDuty: 4500,
// searchFee: 250,
// },
// }}
// option3={{
// housePrice: 460000,
// depositPercentage: 0.1,
// mortgageTerm: 35,
// interestRate: 3.8,
// fees: {
// valuationFee: 185,
// surveyFee: 500,
// legalFee: 3300,
// stampDuty: 4600,
// searchFee: 250,
// },
// }}
/>
<ComparisonPage />
</div>
);
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/MortgageProperties.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@ export interface MortgageProperties {
housePrice: number;
depositPercentage: number;
mortgageTerm: number;
interestRate: number;
interestRate?: number;
fees: MortgageFees;
}

0 comments on commit 1f115db

Please sign in to comment.