jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui) - session settings - changed state

Browse source
This commit is contained in:
Shekar Siri 2022-05-02 16:26:05 +02:00
parent e421511db8
commit 02c39199d2
1 changed files with 11 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
frontend/app/components/shared/SessionSettings/components/CaptureRate.tsx
View file

@ -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>
</>
);