From 02c39199d211ab16e20435592edc80d4b827a674 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Mon, 2 May 2022 16:26:05 +0200
Subject: [PATCH] feat(ui) - session settings - changed state

---
 .../SessionSettings/components/CaptureRate.tsx     | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/app/components/shared/SessionSettings/components/CaptureRate.tsx b/frontend/app/components/shared/SessionSettings/components/CaptureRate.tsx
index 6436bd652..9576de72a 100644
--- a/frontend/app/components/shared/SessionSettings/components/CaptureRate.tsx
+++ b/frontend/app/components/shared/SessionSettings/components/CaptureRate.tsx
@@ -4,10 +4,12 @@ import { useStore } from 'App/mstore';
 import { useObserver } from 'mobx-react-lite';
 
 function CaptureRate(props) {
+    const [changed, setChanged] = React.useState(false);
     const { settingsStore } = useStore();
     const sessionSettings = useObserver(() => settingsStore.sessionSettings)
     const [captureRate, setCaptureRate] = React.useState(sessionSettings.captureRate);
     const [captureAll, setCaptureAll] = React.useState(captureRate === 100);
+
     return (
         <>
             <h3 className="text-lg">Capture Rate</h3>
@@ -16,7 +18,10 @@ function CaptureRate(props) {
                 <Toggler
                     checked={captureAll}
                     name="test"
-                    onChange={() => setCaptureAll(!captureAll)}
+                    onChange={() => {
+                        setCaptureAll(!captureAll)
+                        setChanged(true)
+                    }}
                     label="Capture 100% of the sessions"
                 />
             </div>
@@ -26,7 +31,10 @@ function CaptureRate(props) {
                         type="number"
                         value={captureRate}
                         style={{ height: '38px', width: '100px'}}
-                        onChange={(e, { value }) => setCaptureRate(value)}
+                        onChange={(e, { value }) => {
+                            setCaptureRate(value)
+                            setChanged(true);
+                        }}
                         disabled={captureAll}
                         min={0}
                         minValue={0}
@@ -34,7 +42,7 @@ function CaptureRate(props) {
                     <Icon className="absolute right-0 mr-6 top-0 bottom-0 m-auto" name="percent" color="gray-medium" size="18" />
                 </div>
                 <span className="mx-3">of the sessions</span>
-                <Button outline size="medium" onClick={settingsStore.updateCaptureRate(captureRate)}>Update</Button>
+                <Button disabled={!changed} outline size="medium" onClick={settingsStore.updateCaptureRate(captureRate)}>Update</Button>
             </div>
         </>
     );