Change range description from relative rent to absolute rent

src/App.js

@@ -1,4 +1,4 @@
-import { React, useState } from 'react';
+import { React, useState, useEffect } from 'react';
 
 import {
   ChakraProvider,
@@ -18,14 +18,15 @@ import {
 import { FlatSelectionCard, FlatDetailsCard, SelfEvaluationCard, ResultsCard } from './Solimieten';
 
 import { Nav } from './Nav';
-
+import { minRent, maxRent } from './Data';
 function App() {
 
   const [selectedFlat, setSelectedFlat] = useState();
   const [selectedRoom, setSelectedRoom] = useState();
-  const [numAdults, setNumAdults] = useState(1);
+  const [numAdults, setNumAdults] = useState();
 
-  const [rent, setRent] = useState(0);
+  const [rent, setRent] = useState();
+  const [flatRent, setFlatRent] = useState();
 
   const theme = extendTheme({
     "colors": {
@@ -44,7 +45,30 @@ function App() {
     }
   });
 
+  useEffect(() => {
+    setFlatRent(null);
+    if (selectedFlat && numAdults && (selectedFlat.wgRoomList.length === 0 || selectedRoom)) {
+      console.log("Recalculating Rent...");
+      var commonAreaShare = 60 * numAdults;
+      var kitchenCost = 50;
+      var sizePrivate = selectedFlat.sizePrivate;
+      var internalAreaShare = 0;
 
+      if (selectedFlat.wgRoomList.length > 0) {
+        internalAreaShare = selectedFlat.calcInternalAreaShare(selectedRoom);
+        sizePrivate = selectedRoom.size;
+        kitchenCost = kitchenCost / selectedFlat.wgRoomList.length;
+      }
+
+      var newRent = {
+        min: (sizePrivate + internalAreaShare) * minRent + kitchenCost,
+        minCovering: (sizePrivate + internalAreaShare) * minRent + kitchenCost + commonAreaShare,
+        maxCovering: (sizePrivate + internalAreaShare) * maxRent + kitchenCost + commonAreaShare
+      }
+
+      setFlatRent(newRent);
+    }
+  }, [selectedFlat, selectedRoom, numAdults])
 
 
   return (
@@ -55,7 +79,7 @@ function App() {
         <Stack maxWidth={1200}>
           <Box p={6} borderRadius="lg" bg={useColorModeValue('gray.100', 'gray.200')}>
             <Text>
-              <Heading>Allemende Solimieten-Helferlein</Heading>
+              <Heading>Allmende Solimieten-Helferlein</Heading>
 
               Im Rahmen des Konzept für solidarische Mieten, kann jede Partei in der Allmende ihre Miethöhe selbst bestimmen.
               Dieses Tool soll als Orientierungshilfe bei der Selbsteinschätzung dienen.
@@ -75,13 +99,13 @@ function App() {
             <Box></Box>
 
             <FlatSelectionCard setSelectedFlat={setSelectedFlat} onRoomSelected={setSelectedRoom} onNumAdultsSelected={setNumAdults} />
-            <FlatDetailsCard flat={selectedFlat} room={selectedRoom} numAdults={numAdults} />
+            <FlatDetailsCard flat={selectedFlat} room={selectedRoom} numAdults={numAdults} flatRent={flatRent} />
 
             <Heading>Selbsteinschätzung</Heading>
             <Box></Box>
 
             <SelfEvaluationCard rent={rent} setRent={setRent} />
-            <ResultsCard rent={rent} flat={selectedFlat} room={selectedRoom} />
+            <ResultsCard rent={rent} flat={selectedFlat} room={selectedRoom} numAdults={numAdults} flatRent={flatRent} />
           </SimpleGrid>
         </Stack>
       </Center>