1- import { useState , useRef } from "react" ;
1+ import { useState } from "react" ;
22import "./App.css" ;
33// import { PlusCircle } from "react-bootstrap-icons";
44import LoanForm from "./LoanForm.jsx" ;
5- import loanMaths from "./loanMaths.js" ;
5+ import { loanMaths , isNumber } from "./loanMaths.js" ;
6+ // import from "./loanMaths.js";
67import LoanPlot from "./LoanPlot.jsx" ;
78import LoanStats from "./LoanStats.jsx" ;
89import EventsForm from "./EventsForm.jsx" ;
10+ import { Comments } from "@hyvor/hyvor-talk-react" ;
911// import MonthlyPayment from "./MonthlyPayment.jsx";
1012
1113function runCalculations ( userInput , loanEvent , chosenInput , userSetDownPercent ) {
@@ -38,7 +40,8 @@ function runCalculations(userInput, loanEvent, chosenInput, userSetDownPercent)
3840 parseFloat ( downPay ) ,
3941 userSetDownPercent ,
4042 parseFloat ( monthlyExtraPercent ) ,
41- parseFloat ( monthlyExtraFee )
43+ parseFloat ( monthlyExtraFee ) ,
44+ userInput [ "startDate" ]
4245 ) ;
4346
4447 const homeVal = parseFloat ( loanRes [ "homeVal" ] ) ;
@@ -48,6 +51,7 @@ function runCalculations(userInput, loanEvent, chosenInput, userSetDownPercent)
4851 } else {
4952 displayState [ "monthlyPayment" ] = parseFloat ( loanRes [ "monthlyPayment" ] [ 0 ] ) ;
5053 }
54+ displayState [ "monthlyPaymentToLoan" ] = parseFloat ( loanRes [ "monthlyInterest" ] [ 0 ] ) + parseFloat ( loanRes [ "monthlyPrincipal" ] [ 0 ] ) ;
5155 if ( userSetDownPercent ) {
5256 displayState [ "downPayPercent" ] = userInput [ "downPayPercent" ] ;
5357 displayState [ "downPayCash" ] = homeVal * parseFloat ( userInput [ "downPayPercent" ] ) * 0.01 ;
@@ -71,34 +75,66 @@ function runCalculations(userInput, loanEvent, chosenInput, userSetDownPercent)
7175 displayState [ "propertyTaxUnit" ] = userInput [ "propertyTaxUnit" ] ;
7276 displayState [ "hoaUnit" ] = userInput [ "hoaUnit" ] ;
7377 displayState [ "insuranceUnit" ] = userInput [ "insuranceUnit" ] ;
78+ displayState [ "startDate" ] = userInput [ "startDate" ] ;
7479
7580 return [ displayState , loanRes ] ;
7681}
7782
78- //determines if a string is a number
79- export function isNumber ( num ) {
80- if ( num === "" ) return false ;
81- return ! isNaN ( num ) ;
83+ function loanEventEncoder ( loanEvent ) {
84+ // console.log(loanEvent)
85+ var str = `${ loanEvent [ "event" ] } ${ loanEvent [ "date" ] . replace ( " " , "" ) } ${ loanEvent [ "cost" ] } ${ loanEvent [ "change" ] } ;
86+ if ( "newLength" in loanEvent ) str += `_${ loanEvent [ "newLength" ] } ;
87+ return str ;
8288}
8389
90+ function loanEventDecoder ( e ) {
91+ var newEvent = { } ;
92+ var items = e . split ( "_" ) ;
93+ newEvent [ "event" ] = items [ 0 ] ;
94+ newEvent [ "date" ] = `${ items [ 1 ] . substring ( 0 , 3 ) } ${ items [ 1 ] . substring ( 3 , 7 ) } ;
95+ newEvent [ "cost" ] = parseInt ( items [ 2 ] ) ;
96+ newEvent [ "change" ] = parseInt ( items [ 3 ] ) ;
97+ if ( items . length > 4 ) newEvent [ "newLength" ] = parseInt ( items [ 4 ] ) ;
98+ // console.log(newEvent, items);
99+ return newEvent ;
100+ }
101+
102+ var accurateDate = new Date ( ) ;
103+ const dateLu = [ "01" , "02" , "03" , "04" , "05" , "06" , "07" , "08" , "09" , "10" , "11" , "12" ] ;
104+ var dStr = `${ accurateDate . getFullYear ( ) } ${ dateLu [ accurateDate . getMonth ( ) ] } ;
105+ var coarseDate = Date . parse ( dStr ) ; //only care about month - don't want minor date changes going in URL
106+ console . log ( "coarseDate" , dStr , coarseDate ) ;
107+ const initialState = {
108+ homeVal : "500000" ,
109+ monthlyPayment : "0" ,
110+ downPayCash : "100000" ,
111+ downPayPercent : "0" ,
112+ interestRate : "5.00" ,
113+ loanLength : "30" ,
114+ propertyTax : "0.00" ,
115+ hoa : "0" ,
116+ insurance : "0" ,
117+ propertyTaxUnit : 2 ,
118+ hoaUnit : 1 ,
119+ insuranceUnit : 0 ,
120+ startDate : coarseDate ,
121+ } ;
122+ const searchParams = new URLSearchParams ( window . location . search ) ;
123+ const initialOverride = { } ;
124+ var initialEvents = [ ] ;
125+ for ( const [ key , value ] of searchParams . entries ( ) ) {
126+ if ( key == "events" ) initialEvents . push ( loanEventDecoder ( value ) ) ;
127+ else initialOverride [ key ] = value ;
128+ }
129+
130+ // console.log(initialEvents)
131+
84132function App ( ) {
85- const [ loanEvent , setLoanEvent ] = useState ( [ ] ) ;
133+ const [ loanEvent , setLoanEvent ] = useState ( initialEvents ) ;
86134 const [ chosenInput , setChosenInput ] = useState ( "homeVal" ) ;
87135 const [ userSetDownPercent , setUserSetDownPercent ] = useState ( false ) ;
88- const [ userInput , setUserInput ] = useState ( {
89- homeVal : "500000" ,
90- monthlyPayment : "0" ,
91- downPayCash : "100000" ,
92- downPayPercent : "0" ,
93- interestRate : "5.00" ,
94- loanLength : "30" ,
95- propertyTax : "0" ,
96- hoa : "0" ,
97- insurance : "0" ,
98- propertyTaxUnit : 0 ,
99- hoaUnit : 1 ,
100- insuranceUnit : 0 ,
101- } ) ;
136+
137+ const [ userInput , setUserInput ] = useState ( { ...initialState , ...initialOverride } ) ;
102138 const [ flash , setFlash ] = useState ( {
103139 loanAmount : false ,
104140 monthlyPayment : false ,
@@ -123,29 +159,46 @@ function App() {
123159 hoa : null ,
124160 insurance : null ,
125161 } ) ;
126- const [ displayState , setDisplayState ] = useState ( { } ) ;
127- const [ loanRes , setLoanRes ] = useState ( { } ) ;
128-
129- function useFirstRender ( ) {
130- const ref = useRef ( true ) ;
131- const firstRender = ref . current ;
132- ref . current = false ;
133- return firstRender ;
134- }
135- if ( useFirstRender ( ) ) {
136- var newDisplayState , newLoanRes ;
137- [ newDisplayState , newLoanRes ] = runCalculations ( userInput , loanEvent , chosenInput , userSetDownPercent ) ;
138- setDisplayState ( newDisplayState ) ;
139- setLoanRes ( newLoanRes ) ;
140- }
162+ var newDisplayState , newLoanRes ;
163+ [ newDisplayState , newLoanRes ] = runCalculations ( userInput , loanEvent , chosenInput , userSetDownPercent ) ;
164+ const [ displayState , setDisplayState ] = useState ( newDisplayState ) ;
165+ const [ loanRes , setLoanRes ] = useState ( newLoanRes ) ;
166+
167+ // console.log("loanEvent", loanEvent);
168+ var newUserInput = { ...userInput } ;
169+
170+ // function useFirstRender() {
171+ // const ref = useRef(true);
172+ // const firstRender = ref.current;
173+ // ref.current = false;
174+ // return firstRender;
175+ // }
176+ // if (useFirstRender()) {
177+ // // var newDisplayState, newLoanRes;
178+ // // // var newUserInput = { ...userInput };
179+
180+ // // //read saved state from the URL
181+ // var isDiff = false;
182+ // const searchParams = new URLSearchParams(window.location.search);
183+ // for (const [key, value] of searchParams.entries()) {
184+ // if (newUserInput[key] != value) isDiff = true;
185+ // newUserInput[key] = value;
186+ // }
187+
188+ // // [newDisplayState, newLoanRes] = runCalculations(newUserInput, loanEvent, chosenInput, userSetDownPercent);
189+ // // setDisplayState(newDisplayState);
190+ // // setLoanRes(newLoanRes);
191+ // console.log('bp1', newDisplayState, isDiff, newUserInput)
192+ // if (isDiff) updateUserInput(null, null)
193+ // }
141194
142195 function updateUserInput ( field , value ) {
143- var newUserInput = { ...userInput } ;
144196 var newFlash = { ...flash } ;
145197 var newChosenInput = chosenInput ;
146198 var newValid = { ...valid } ;
147199 var newUserSetDownPercent = userSetDownPercent ;
148200 var newDisplayState = { ...displayState } ;
201+ console . log ( "bp2" ) ;
149202
150203 // if (userSetDownPercent) {
151204 // var downPayCash = (loanRes["loanAmount"] * userInput["downPayPercent"]) / 100;
@@ -201,6 +254,8 @@ function App() {
201254 newUserInput . propertyTax = value ;
202255 } else if ( field == "propertyTaxUnit" ) {
203256 newUserInput . propertyTaxUnit = value ;
257+ } else if ( field == "startDate" ) {
258+ newUserInput . startDate = value ;
204259 }
205260
206261 if ( newChosenInput == "homeVal" ) {
@@ -274,6 +329,31 @@ function App() {
274329 return u == 0 ? 1 / 12 : u == 1 ? 1 : u == 2 ? ( displayState [ "homeVal" ] * 0.01 ) / 12 : u == 3 ? displayState [ "homeVal" ] * 0.01 : 0 ;
275330 }
276331
332+ // //Save any user inputs to the URL
333+ const urlParams = new URLSearchParams ( window . location . search ) ;
334+
335+ for ( const i in newUserInput ) {
336+ if ( newUserInput [ i ] != initialState [ i ] ) {
337+ urlParams . set ( i , newUserInput [ i ] ) ;
338+ } else urlParams . delete ( i ) ;
339+ }
340+ urlParams . delete ( "events" ) ;
341+ if ( loanEvent . length > 0 ) {
342+ for ( const o in loanEvent ) {
343+ // var str = `${loanEvent[o]['event']}_${loanEvent[o]['date'].replace(" ", "")}_${loanEvent[o]['cost']}_${loanEvent[o]['change']}`;
344+ // if ('newLength' in Object.keys(loanEvent[o])) str+=`_${loanEvent[o]['newLength']}`
345+ urlParams . append ( "events" , loanEventEncoder ( loanEvent [ o ] ) ) ;
346+ }
347+ }
348+ window . history . replaceState ( null , null , "?" + urlParams . toString ( ) ) ;
349+
350+ // const url = new URL();
351+ // url.search = new URLSearchParams(obj);
352+ // console.log("userDiff",new URLSearchParams(userDiff).toString())
353+ // console.log("url", url)
354+ // console.log(
355+ // loanRes["loanMonths"],
356+ // loanEvent,loanRes["monthlyPaymentPerEvent"]);
277357 return (
278358 < >
279359 < nav className = "navbar bg-body-tertiary mb-2" >
@@ -313,6 +393,12 @@ function App() {
313393 />
314394 </ div >
315395 </ div >
396+ < div className = "row" >
397+ < p > Leave some feedback!</ p >
398+ </ div >
399+ < div className = "row" >
400+ < Comments website-id = { 11189 } page-id = "" />
401+ </ div >
316402 </ div >
317403 </ >
318404 ) ;
0 commit comments