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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
import { useCallback } from 'react';
import { CustomProxy } from '../../shared/daemon-rpc-types';
import { messages } from '../../shared/gettext';
import { useBridgeSettingsUpdater } from '../lib/constraint-updater';
import { useHistory } from '../lib/history';
import { useBoolean } from '../lib/utilityHooks';
import { useSelector } from '../redux/store';
import { SettingsForm } from './cell/SettingsForm';
import { BackAction } from './KeyboardNavigation';
import { Layout, SettingsContainer } from './Layout';
import { ModalAlert, ModalAlertType } from './Modal';
import { NavigationBar, NavigationContainer, NavigationItems, TitleBarItem } from './NavigationBar';
import { ProxyForm } from './ProxyForm';
import SettingsHeader, { HeaderTitle } from './SettingsHeader';
import { StyledContent, StyledNavigationScrollbars, StyledSettingsContent } from './SettingsStyles';
import { SmallButton, SmallButtonColor } from './SmallButton';
export function EditCustomBridge() {
return (
<SettingsForm>
<CustomBridgeForm />
</SettingsForm>
);
}
function CustomBridgeForm() {
const history = useHistory();
const bridgeSettingsUpdater = useBridgeSettingsUpdater();
const bridgeSettings = useSelector((state) => state.settings.bridgeSettings);
const [deleteDialogVisible, showDeleteDialog, hideDeleteDialog] = useBoolean();
// If there are no custom bridge settings, we should prompt the user to add a custom bridge.
// Otherwise, we should prompt them to edit the existing custom bridge settings.
const title =
bridgeSettings.custom === undefined
? messages.pgettext('custom-bridge', 'Add custom bridge')
: messages.pgettext('custom-bridge', 'Edit custom bridge');
const onSave = useCallback(
(newBridge: CustomProxy) => {
void bridgeSettingsUpdater((bridgeSettings) => {
bridgeSettings.type = 'custom';
bridgeSettings.custom = newBridge;
return bridgeSettings;
});
history.pop();
},
[bridgeSettingsUpdater, history.pop],
);
const onDelete = useCallback(() => {
if (bridgeSettings.custom !== undefined) {
hideDeleteDialog();
void bridgeSettingsUpdater((bridgeSettings) => {
bridgeSettings.type = 'normal';
delete bridgeSettings.custom;
return bridgeSettings;
});
history.pop();
}
}, [bridgeSettingsUpdater, history.pop]);
return (
<BackAction action={history.pop}>
<Layout>
<SettingsContainer>
<NavigationContainer>
<NavigationBar>
<NavigationItems>
<TitleBarItem>{title}</TitleBarItem>
</NavigationItems>
</NavigationBar>
<StyledNavigationScrollbars fillContainer>
<StyledContent>
<SettingsHeader>
<HeaderTitle>{title}</HeaderTitle>
</SettingsHeader>
<StyledSettingsContent>
<ProxyForm
proxy={bridgeSettings.custom}
onSave={onSave}
onCancel={history.pop}
onDelete={bridgeSettings.custom === undefined ? undefined : showDeleteDialog}
/>
</StyledSettingsContent>
<ModalAlert
isOpen={deleteDialogVisible}
type={ModalAlertType.warning}
gridButtons={[
<SmallButton key="cancel" onClick={hideDeleteDialog}>
{messages.gettext('Cancel')}
</SmallButton>,
<SmallButton key="delete" color={SmallButtonColor.red} onClick={onDelete}>
{messages.gettext('Delete')}
</SmallButton>,
]}
close={hideDeleteDialog}
title={messages.pgettext('custom-bridge', 'Delete custom bridge?')}
message={messages.pgettext(
'custom-bridge',
'Deleting the custom bridge will take you back to the select location view and the Automatic option will be selected instead.',
)}
/>
</StyledContent>
</StyledNavigationScrollbars>
</NavigationContainer>
</SettingsContainer>
</Layout>
</BackAction>
);
}
|
