SHARE
TWEET

Untitled

a guest Apr 24th, 2019 77 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from "react";
  2. import Navbar from "./components/navbar";
  3. import Income from "./components/income";
  4. import Expenses from "./components/expenses";
  5. import Target from "./components/target";
  6. import Summary from "./components/summary";
  7.  
  8. import failureLogo from "./img/failure.png";
  9. import successLogo from "./img/success.png";
  10.  
  11. class App extends Component {
  12.   state = {
  13.     // User input
  14.     income: 12000,
  15.     // Expenses
  16.     foodExpenses: 50,
  17.     transportationExpenses: 50,
  18.     houseExpenses: 50,
  19.     leisureExpenses: 50,
  20.     beautyExpenses: 50,
  21.     // Targets
  22.     currentAge: 18,
  23.     targetAge: 50,
  24.     currentNet: 5000,
  25.     targetNet: 1000000,
  26.     // Post-calculation values
  27.     isTargetMet: undefined
  28.   };
  29.   // Fetch the user input for the yearly income and set the state
  30.   handleIncomeInput = event => {
  31.     console.log("fetchIncomeInput()");
  32.     this.setState({ income: event.target.value });
  33.   };
  34.   /* Fetch & handle the values of the EXPENSES */
  35.   // Fetch the value of expenses dynamically upon change
  36.   handleExpensesInput = event => {
  37.     console.log("handleExpenseInput()");
  38.     console.log(event.target.value);
  39.     if (event.target.id === "foodExpenses") {
  40.       this.setState({ foodExpenses: event.target.value });
  41.     }
  42.     if (event.target.id === "transportationExpenses") {
  43.       this.setState({ transportationExpenses: event.target.value });
  44.     }
  45.     if (event.target.id === "houseExpenses") {
  46.       this.setState({ houseExpenses: event.target.value });
  47.     }
  48.     if (event.target.id === "leisureExpenses") {
  49.       this.setState({ leisureExpenses: event.target.value });
  50.     }
  51.     if (event.target.id === "beautyExpenses") {
  52.       this.setState({ beautyExpenses: event.target.value });
  53.     }
  54.   };
  55.  
  56.   // Handler functions to update the UI with the new values of the various expenses
  57.   handleFoodExpensesText = () => {
  58.     return this.state.foodExpenses;
  59.   };
  60.   handleTransportationExpensesText = () => {
  61.     return this.state.transportationExpenses;
  62.   };
  63.   handleHouseExpensesText = () => {
  64.     return this.state.houseExpenses;
  65.   };
  66.   handleLeisureExpensesText = () => {
  67.     return this.state.leisureExpenses;
  68.   };
  69.   handleBeautyExpensesText = () => {
  70.     return this.state.beautyExpenses;
  71.   };
  72.  
  73.   /* Fetch & handle the values of the TARGETS */
  74.   // Fetch the value of targets dynamically upon change
  75.   handleTargetInput = event => {
  76.     console.log("handleTargetInput()");
  77.     console.log(event.target.value);
  78.     if (event.target.id === "currentAgeInput") {
  79.       this.setState({ currentAge: event.target.value });
  80.     }
  81.     if (event.target.id === "targetAgeInput") {
  82.       this.setState({ targetAge: event.target.value });
  83.     }
  84.     if (event.target.id === "currentNetInput") {
  85.       this.setState({ currentNet: event.target.value });
  86.     }
  87.     if (event.target.id === "targetNetInput") {
  88.       this.setState({ targetNet: event.target.value });
  89.     }
  90.   };
  91.  
  92.   // Handler functions to update the UI with the new values of the various targets
  93.   handleTargetAgeText = () => {
  94.     return this.state.targetAge;
  95.   };
  96.   handleTargetNetText = () => {
  97.     return this.state.targetNet;
  98.   };
  99.  
  100.   // All the expenses summed (YEARLY)
  101.   calculateYearlyExpenses = () => {
  102.     console.log("calculateYearlyExpenses()");
  103.     let totalExpenses =
  104.       (this.state.foodExpenses +
  105.         this.state.transportationExpenses +
  106.         this.state.houseExpenses +
  107.         this.state.leisureExpenses +
  108.         this.state.beautyExpenses) *
  109.       12;
  110.     console.log(totalExpenses);
  111.     return totalExpenses;
  112.   };
  113.  
  114.   // Calculate the real yearly income, Salary (IN) - Expenses (OUT)
  115.   calculateYearlyOverallIncome = () => {
  116.     console.log("calculateYearlyOverallIncome()");
  117.  
  118.     let overallIncome = this.state.income - this.calculateYearlyExpenses();
  119.     return overallIncome;
  120.   };
  121.  
  122.   // The money required to reach the target net worth, divided by the years left until target age
  123.   calculateMinimumRequiredIncome = () => {
  124.     console.log("calculateMinimumRequiredIncome()");
  125.     let moneyToTarget = this.state.currentNet - this.state.targetNet;
  126.     let yearsToTarget = this.state.targetAge - this.state.currentAge;
  127.     // Return the yearly money necessary to reach the target
  128.     return moneyToTarget / yearsToTarget;
  129.   };
  130.  
  131.   // If the money made in a year is more than the minimum required to meet target, returns true
  132.   checkTargetMet = () => {
  133.     console.log("checkTargetMet()");
  134.     // Yearly money IN > yearly target
  135.     if (
  136.       this.calculateYearlyOverallIncome() <
  137.       this.calculateMinimumRequiredIncome()
  138.     ) {
  139.       console.log("Target missed");
  140.       this.setState({ isTargetMet: false });
  141.  
  142.       return false;
  143.       // Yearly target > yearly money IN
  144.     } else if (
  145.       this.calculateYearlyOverallIncome() >=
  146.       this.calculateMinimumRequiredIncome()
  147.     ) {
  148.       console.log("Target met");
  149.       this.setState({ isTargetMet: true });
  150.       return true;
  151.     }
  152.   };
  153.  
  154.   calculateNetByTargetAge = () => {
  155.     let yearsToTarget = this.state.targetAge - this.state.currentAge;
  156.     return this.calculateYearlyOverallIncome() * yearsToTarget;
  157.   };
  158.  
  159.   renderSummary = () => {
  160.     // Render the summary div based on the TARGET NOT being MET
  161.     if (!this.state.isTargetMet && this.state.isTargetMet !== undefined) {
  162.       return (
  163.         <React.Fragment>
  164.           <img src={failureLogo} alt="failure logo" className="resultImage" />
  165.           {/* Fail or success paragraph */}
  166.           <p>
  167.             In your current situation, it will not be possible to reach your
  168.             target net worth by your target age.
  169.           </p>
  170.           {/* Net worth by target age */}
  171.           <p>
  172.             However, by your target age you will be worth
  173.             <strong> {this.calculateNetByTargetAge()}</strong>.
  174.           </p>
  175.           {/* Years to reach target net worth */}
  176.           <p>
  177.             To earn £1.320.140 it would take you <strong>52</strong> years,
  178.             which means you will be
  179.             <strong> 75</strong>.
  180.           </p>
  181.           {/* Total of expenses */}
  182.           <p>
  183.             Every month, the total of your expenses is <strong>£2324</strong>.
  184.           </p>
  185.           <small className="text-muted">
  186.             Try playing around with the expenses to see how can they effect your
  187.             future net worth.
  188.           </small>
  189.         </React.Fragment>
  190.       );
  191.     }
  192.     // Render the summary div based on the TARGET being MET
  193.     if (this.state.isTargetMet) {
  194.       return (
  195.         <React.Fragment>
  196.           <img src={successLogo} alt="success logo" className="resultImage" />
  197.           <p>
  198.             In your current situation, you will be able to reach your target net
  199.             worth by your target age!
  200.           </p>
  201.           <p>
  202.             By then, you will be worth
  203.             <strong>{this.calculateNetByTargetAge()}</strong>.
  204.           </p>
  205.           <p>
  206.             To earn £1.320.140 it would take you <strong>52</strong> years,
  207.             which means you will be
  208.             <strong> 75</strong>.
  209.           </p>
  210.           <p>
  211.             Every month, the total of your expenses is <strong>£2324</strong>.
  212.           </p>
  213.           <small className="text-muted">
  214.             Try playing around with the expenses to see how can they effect your
  215.             future net worth.
  216.           </small>
  217.         </React.Fragment>
  218.       );
  219.     }
  220.   };
  221.  
  222.   render() {
  223.     return (
  224.       <div className="App">
  225.         <Navbar />
  226.         <Expenses
  227.           handleExpensesInput={this.handleExpensesInput}
  228.           handleFoodExpensesText={this.handleFoodExpensesText}
  229.           handleTransportationExpensesText={
  230.             this.handleTransportationExpensesText
  231.           }
  232.           handleHouseExpensesText={this.handleHouseExpensesText}
  233.           handleLeisureExpensesText={this.handleLeisureExpensesText}
  234.           handleBeautyExpensesText={this.handleBeautyExpensesText}
  235.         />
  236.         <Income
  237.           handleIncomeInput={this.handleIncomeInput}
  238.           checkTargetMet={this.checkTargetMet}
  239.         />
  240.         <Summary renderSummary={this.renderSummary} />
  241.         <Target
  242.           handleTargetInput={this.handleTargetInput}
  243.           handleTargetAgeText={this.handleTargetAgeText}
  244.           handleTargetNetText={this.handleTargetNetText}
  245.         />
  246.       </div>
  247.     );
  248.   }
  249. }
  250.  
  251. export default App;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top