diff --git a/native/profile/add-keyserver.react.js b/native/profile/add-keyserver.react.js index f26ed12f2..5fd2261d5 100644 --- a/native/profile/add-keyserver.react.js +++ b/native/profile/add-keyserver.react.js @@ -1,155 +1,161 @@ // @flow import { useNavigation } from '@react-navigation/native'; import * as React from 'react'; import { View, Text } from 'react-native'; import { addKeyserverActionType } from 'lib/actions/keyserver-actions.js'; import { useIsKeyserverURLValid } from 'lib/shared/keyserver-utils.js'; import type { KeyserverInfo } from 'lib/types/keyserver-types.js'; import { defaultConnectionInfo } from 'lib/types/socket-types.js'; import { useDispatch } from 'lib/utils/redux-utils.js'; import type { ProfileNavigationProp } from './profile.react.js'; import TextInput from '../components/text-input.react.js'; import HeaderRightTextButton from '../navigation/header-right-text-button.react.js'; import type { NavigationRoute } from '../navigation/route-names.js'; import { useSelector } from '../redux/redux-utils.js'; import { useStyles, useColors } from '../themes/colors.js'; +import { useStaffCanSee } from '../utils/staff-utils.js'; type Props = { +navigation: ProfileNavigationProp<'AddKeyserver'>, +route: NavigationRoute<'AddKeyserver'>, }; // eslint-disable-next-line no-unused-vars function AddKeyserver(props: Props): React.Node { const { goBack, setOptions } = useNavigation(); const dispatch = useDispatch(); + const staffCanSee = useStaffCanSee(); + const currentUserID = useSelector(state => state.currentUserInfo?.id); + const customServer = useSelector(state => state.customServer); const { panelForegroundTertiaryLabel } = useColors(); const styles = useStyles(unboundStyles); - const [urlInput, setUrlInput] = React.useState(''); + const [urlInput, setUrlInput] = React.useState( + customServer && staffCanSee ? customServer : '', + ); const [showErrorMessage, setShowErrorMessage] = React.useState(false); const isKeyserverURLValidCallback = useIsKeyserverURLValid(urlInput); const onPressSave = React.useCallback(async () => { setShowErrorMessage(false); if (!currentUserID || !urlInput) { return; } const isKeyserverURLValid = await isKeyserverURLValidCallback(); if (!isKeyserverURLValid) { setShowErrorMessage(true); return; } const newKeyserverInfo: KeyserverInfo = { cookie: null, updatesCurrentAsOf: 0, urlPrefix: urlInput, connection: defaultConnectionInfo, lastCommunicatedPlatformDetails: null, deviceToken: null, }; dispatch({ type: addKeyserverActionType, payload: { keyserverAdminUserID: currentUserID, newKeyserverInfo, }, }); goBack(); }, [currentUserID, dispatch, goBack, isKeyserverURLValidCallback, urlInput]); React.useEffect(() => { setOptions({ // eslint-disable-next-line react/display-name headerRight: () => ( ), }); }, [onPressSave, setOptions, styles.header]); const onChangeText = React.useCallback( (text: string) => setUrlInput(text), [], ); const errorMessage = React.useMemo(() => { if (!showErrorMessage) { return null; } return ( Cannot connect to keyserver. Please check the URL or your connection and try again. ); }, [showErrorMessage, styles.errorMessage]); return ( KEYSERVER URL {errorMessage} ); } const unboundStyles = { container: { paddingTop: 8, }, header: { color: 'panelBackgroundLabel', fontSize: 12, fontWeight: '400', paddingBottom: 3, paddingHorizontal: 24, }, inputContainer: { backgroundColor: 'panelForeground', flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 24, paddingVertical: 12, borderBottomWidth: 1, borderColor: 'panelForegroundBorder', borderTopWidth: 1, }, input: { color: 'panelForegroundLabel', flex: 1, fontFamily: 'Arial', fontSize: 16, paddingVertical: 0, borderBottomColor: 'transparent', }, errorMessage: { marginTop: 8, marginHorizontal: 16, color: 'redText', }, }; export default AddKeyserver; diff --git a/native/profile/keyserver-selection-bottom-sheet.react.js b/native/profile/keyserver-selection-bottom-sheet.react.js index f00a7cbad..ab103b178 100644 --- a/native/profile/keyserver-selection-bottom-sheet.react.js +++ b/native/profile/keyserver-selection-bottom-sheet.react.js @@ -1,244 +1,259 @@ // @flow import invariant from 'invariant'; import * as React from 'react'; import { View, Text } from 'react-native'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { removeKeyserverActionType } from 'lib/actions/keyserver-actions.js'; import type { KeyserverInfo } from 'lib/types/keyserver-types.js'; import type { GlobalAccountUserInfo } from 'lib/types/user-types.js'; import { useDispatch } from 'lib/utils/redux-utils.js'; import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-provider.react.js'; import BottomSheet from '../bottom-sheet/bottom-sheet.react.js'; import Button from '../components/button.react.js'; import CommIcon from '../components/comm-icon.react.js'; import Pill from '../components/pill.react.js'; import StatusIndicator from '../components/status-indicator.react.js'; import type { RootNavigationProp } from '../navigation/root-navigator.react.js'; import type { NavigationRoute } from '../navigation/route-names.js'; import { useColors, useStyles } from '../themes/colors.js'; import type { BottomSheetRef } from '../types/bottom-sheet.js'; import Alert from '../utils/alert.js'; +import { useStaffCanSee } from '../utils/staff-utils.js'; +import { setCustomServer } from '../utils/url-utils.js'; export type KeyserverSelectionBottomSheetParams = { +keyserverAdminUserInfo: GlobalAccountUserInfo, +keyserverInfo: KeyserverInfo, }; // header + paddingTop + paddingBottom + marginBottom const keyserverHeaderHeight = 84 + 16 + 16 + 24; type Props = { +navigation: RootNavigationProp<'KeyserverSelectionBottomSheet'>, +route: NavigationRoute<'KeyserverSelectionBottomSheet'>, }; function KeyserverSelectionBottomSheet(props: Props): React.Node { const { navigation, route: { params: { keyserverAdminUserInfo, keyserverInfo }, }, } = props; const { goBack } = navigation; const bottomSheetContext = React.useContext(BottomSheetContext); invariant(bottomSheetContext, 'bottomSheetContext should be set'); const { setContentHeight } = bottomSheetContext; const removeKeyserverContainerRef = React.useRef>(); const bottomSheetRef = React.useRef(); const colors = useColors(); const styles = useStyles(unboundStyles); const insets = useSafeAreaInsets(); const onLayout = React.useCallback(() => { removeKeyserverContainerRef.current?.measure( (x, y, width, height, pageX, pageY) => { if ( height === null || height === undefined || pageY === null || pageY === undefined ) { return; } setContentHeight(height + keyserverHeaderHeight + insets.bottom); }, ); }, [insets.bottom, setContentHeight]); const cloudIcon = React.useMemo( () => ( ), [colors.panelForegroundLabel], ); const onPressDisconnectKeyserver = React.useCallback(() => { // TODO: update this function when we have a way to // disconnect from a keyserver Alert.alert( 'Disconnecting from a keyserver is still not ready.', 'Please come back later.', [{ text: 'OK' }], ); }, []); + const staffCanSee = useStaffCanSee(); + const dispatch = useDispatch(); const onDeleteKeyserver = React.useCallback(() => { dispatch({ type: removeKeyserverActionType, payload: { keyserverAdminUserID: keyserverAdminUserInfo.id, }, }); + if (staffCanSee) { + dispatch({ + type: setCustomServer, + payload: keyserverInfo.urlPrefix, + }); + } bottomSheetRef.current?.close(); - }, [dispatch, keyserverAdminUserInfo.id]); + }, [ + dispatch, + keyserverAdminUserInfo.id, + keyserverInfo.urlPrefix, + staffCanSee, + ]); const onPressRemoveKeyserver = React.useCallback(() => { Alert.alert( 'Delete keyserver', 'Are you sure you want to delete this keyserver from your keyserver ' + 'list? You will still remain in the associated communities.', [ { text: 'Delete', style: 'destructive', onPress: onDeleteKeyserver, }, { text: 'Cancel', style: 'cancel', }, ], ); }, [onDeleteKeyserver]); const removeKeyserver = React.useMemo(() => { if (keyserverInfo.connection.status !== 'connected') { return ( <> You may delete offline keyservers from your keyserver list. When you delete a keyserver, you will still remain in the associated communities. Any messages or content you have previously sent will remain on the keyserver’s communities after disconnecting or deleting. ); } return ( <> Disconnecting from this keyserver will remove you from its associated communities. Any messages or content you have previously sent will remain on the keyserver. ); }, [ keyserverInfo.connection.status, onPressDisconnectKeyserver, onPressRemoveKeyserver, styles.keyserverRemoveText, styles.removeButtonContainer, styles.removeButtonText, ]); return ( {keyserverInfo.urlPrefix} {removeKeyserver} ); } const unboundStyles = { container: { paddingHorizontal: 16, }, keyserverDetailsContainer: { alignItems: 'center', justifyContent: 'space-between', paddingVertical: 16, backgroundColor: 'modalAccentBackground', marginBottom: 24, borderRadius: 8, }, keyserverHeaderContainer: { flexDirection: 'row', alignItems: 'center', }, statusIndicatorContainer: { marginLeft: 8, }, keyserverURLText: { color: 'modalForegroundLabel', marginTop: 8, }, keyserverRemoveText: { color: 'modalForegroundLabel', marginBottom: 24, }, removeButtonContainer: { backgroundColor: 'vibrantRedButton', paddingVertical: 12, borderRadius: 8, alignItems: 'center', }, removeButtonText: { color: 'floatingButtonLabel', }, }; export default KeyserverSelectionBottomSheet;