All files / app/pages/settings settings-diagnostics.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { SettingDescription } from './components/settings-layout';
import { SettingSection } from './components/settings-section';
import { Box, Flex, Text } from '@stacks/ui';
import {
  grantDiagnosticsPermission,
  revokeDiagnosticPermission,
  useHasUserGivenDiagnosticPermissions,
} from '@store/settings';
import React from 'react';
import toast from 'react-hot-toast';
import { useDispatch } from 'react-redux';
 
export const SettingsDiagnostics = () => {
  const dispatch = useDispatch();
  const hasGivenPermission = useHasUserGivenDiagnosticPermissions();
 
  const updateDiagnosticPermissions = (e: React.ChangeEvent<HTMLInputElement>) => {
    const diagnosticsEnabled = e.target.checked;
    toast(
      <div style={{ textAlign: 'center' }}>
        {diagnosticsEnabled ? 'Diagnostics enabled' : 'Diagnostics disabled'}
        <br />
        Restart to apply changes
      </div>
    );
    dispatch(diagnosticsEnabled ? grantDiagnosticsPermission() : revokeDiagnosticPermission());
    main.setDiagnosticPermission(diagnosticsEnabled);
  };
 
  return (
    <SettingSection title="Diagnostics">
      <SettingDescription>
        Anonymous diagnostic information helps us improve the Leather
        <Flex as="label" textStyle="body.small" mt="base">
          <Box mr="tight" mt="1px">
            <input
              type="checkbox"
              defaultChecked={!!hasGivenPermission}
              onChange={e => updateDiagnosticPermissions(e)}
            />
          </Box>
          <Text userSelect="none">Enable diagnostics</Text>
        </Flex>
      </SettingDescription>
    </SettingSection>
  );
};