diff --git a/web/app.react.js b/web/app.react.js --- a/web/app.react.js +++ b/web/app.react.js @@ -66,6 +66,7 @@ import { createTunnelbrokerInitMessage } from './selectors/tunnelbroker-selectors.js'; import AccountSettings from './settings/account-settings.react.js'; import DangerZone from './settings/danger-zone.react.js'; +import KeyserverSelectionList from './settings/keyserver-selection-list.react.js'; import CommunityPicker from './sidebar/community-picker.react.js'; import Splash from './splash/splash.react.js'; import './typography.css'; @@ -292,7 +293,7 @@ if (settingsSection === 'account') { mainContent = ; } else if (settingsSection === 'keyservers') { - mainContent = null; + mainContent = ; } else if (settingsSection === 'danger-zone') { mainContent = ; } diff --git a/web/settings/keyserver-selection-list.css b/web/settings/keyserver-selection-list.css new file mode 100644 --- /dev/null +++ b/web/settings/keyserver-selection-list.css @@ -0,0 +1,12 @@ +.container { + flex: 1; + background-color: var(--panel-background-primary-default); + padding: 40px; +} + +.header { + color: var(--text-background-primary-default); + font-weight: var(--semi-bold); + line-height: var(--line-height-display); + margin-bottom: 16px; +} diff --git a/web/settings/keyserver-selection-list.react.js b/web/settings/keyserver-selection-list.react.js new file mode 100644 --- /dev/null +++ b/web/settings/keyserver-selection-list.react.js @@ -0,0 +1,43 @@ +// @flow + +import * as React from 'react'; + +import { selectedKeyserversSelector } from 'lib/selectors/keyserver-selectors.js'; +import type { SelectedKeyserverInfo } from 'lib/types/keyserver-types.js'; + +import KeyserverSelectionListItem from './keyserver-selection-list-item.react.js'; +import css from './keyserver-selection-list.css'; +import { useSelector } from '../redux/redux-utils.js'; + +function KeyserverSelectionList(): React.Node { + const selectedKeyserverInfos: $ReadOnlyArray = + useSelector(selectedKeyserversSelector); + + const selectedKeyservers = React.useMemo( + () => + selectedKeyserverInfos.map( + ({ keyserverAdminUserInfo, keyserverInfo }) => ( + + ), + ), + [selectedKeyserverInfos], + ); + + const keyserverSelectionList = React.useMemo( + () => ( +
+

Keyservers

+ {selectedKeyservers} +
+ ), + [selectedKeyservers], + ); + + return keyserverSelectionList; +} + +export default KeyserverSelectionList;