update limits on amount change

Author: stCarolas

src/pages/DonationPage/sections/MainComponent.tsx

@@ -10,7 +10,7 @@ import {
   CharLimitTreshold,
   PaymentPageConfigContext,
 } from "../../../logic/PaymentPageConfig";
-import { toJS } from "mobx";
+import { reaction, toJS } from "mobx";
 
 const MessageComponent = observer(({}) => {
   const payment = useContext(PaymentStoreContext);
@@ -27,7 +27,7 @@ const MessageComponent = observer(({}) => {
       return pageConfig.charLimit.value as number;
     }
     const tresholds = pageConfig.charLimit.value as CharLimitTreshold[];
-    console.log({tresholds: tresholds}, "finding limits");
+    console.log({ tresholds: tresholds }, "finding limits");
     return (
       toJS(tresholds)
         .sort((a, b) => -(a.treshold - b.treshold))
@@ -42,6 +42,13 @@ const MessageComponent = observer(({}) => {
     payment.text = newValue;
   }
 
+  reaction(
+    () => payment.amount,
+    () => {
+      setLimit(calcCharLimit());
+    },
+  );
+
   return (
     <>
       <div className={`${classes.section} ${classes.messagesection}`}>