diff --git a/native/invite-links/view-invite-links-screen.react.js b/native/invite-links/view-invite-links-screen.react.js
index 9b75b1dd8..8d5f690c4 100644
--- a/native/invite-links/view-invite-links-screen.react.js
+++ b/native/invite-links/view-invite-links-screen.react.js
@@ -1,167 +1,169 @@
// @flow
import Clipboard from '@react-native-clipboard/clipboard';
import * as React from 'react';
import { Text, View } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { inviteLinkUrl } from 'lib/facts/links.js';
import { primaryInviteLinksSelector } from 'lib/selectors/invite-links-selectors.js';
import { threadHasPermission } from 'lib/shared/thread-utils.js';
import type { InviteLink } from 'lib/types/link-types.js';
import { threadPermissions } from 'lib/types/thread-permission-types.js';
import type { ThreadInfo } from 'lib/types/thread-types.js';
+import { SingleLine } from '../components/single-line.react.js';
import SWMansionIcon from '../components/swmansion-icon.react.js';
import { displayActionResultModal } from '../navigation/action-result-modal.js';
import type { RootNavigationProp } from '../navigation/root-navigator.react.js';
import {
ManagePublicLinkRouteName,
type NavigationRoute,
} from '../navigation/route-names.js';
import { useSelector } from '../redux/redux-utils.js';
import { useStyles, useColors } from '../themes/colors.js';
export type ViewInviteLinksScreenParams = {
+community: ThreadInfo,
};
type Props = {
+navigation: RootNavigationProp<'ViewInviteLinks'>,
+route: NavigationRoute<'ViewInviteLinks'>,
};
const confirmCopy = () => displayActionResultModal('copied!');
function ViewInviteLinksScreen(props: Props): React.Node {
const { community } = props.route.params;
const inviteLink: ?InviteLink = useSelector(primaryInviteLinksSelector)[
community.id
];
const styles = useStyles(unboundStyles);
const { modalForegroundLabel } = useColors();
const linkUrl = inviteLinkUrl(inviteLink?.name ?? '');
const onPressCopy = React.useCallback(() => {
Clipboard.setString(linkUrl);
setTimeout(confirmCopy);
}, [linkUrl]);
const { navigate } = props.navigation;
const onEditButtonClick = React.useCallback(() => {
navigate<'ManagePublicLink'>({
name: ManagePublicLinkRouteName,
params: {
community,
},
});
}, [community, navigate]);
const canManageLinks = threadHasPermission(
community,
threadPermissions.MANAGE_INVITE_LINKS,
);
let publicLinkSection = null;
if (inviteLink || canManageLinks) {
let description;
if (canManageLinks) {
description = (
<>
Public links allow unlimited uses and never expire.
Edit public link
>
);
} else {
description = (
Share this invite link to help your friends join your community!
);
}
publicLinkSection = (
<>
PUBLIC LINK
- {linkUrl}
+ {linkUrl}
Copy
{description}
>
);
}
return {publicLinkSection};
}
const unboundStyles = {
container: {
flex: 1,
paddingTop: 24,
},
sectionTitle: {
fontSize: 12,
fontWeight: '400',
lineHeight: 18,
color: 'modalBackgroundLabel',
paddingHorizontal: 16,
paddingBottom: 4,
},
section: {
borderBottomColor: 'modalSeparator',
borderBottomWidth: 1,
borderTopColor: 'modalSeparator',
borderTopWidth: 1,
backgroundColor: 'modalForeground',
padding: 16,
},
link: {
paddingHorizontal: 16,
paddingVertical: 9,
marginBottom: 16,
backgroundColor: 'inviteLinkButtonBackground',
borderRadius: 20,
flexDirection: 'row',
justifyContent: 'space-between',
},
linkText: {
fontSize: 14,
fontWeight: '400',
lineHeight: 22,
color: 'inviteLinkLinkColor',
+ flex: 1,
},
button: {
flexDirection: 'row',
alignItems: 'center',
},
copy: {
fontSize: 12,
fontWeight: '400',
lineHeight: 18,
color: 'modalForegroundLabel',
paddingLeft: 8,
},
details: {
fontSize: 12,
fontWeight: '400',
lineHeight: 18,
color: 'modalForegroundLabel',
},
editLinkButton: {
color: 'purpleLink',
},
};
export default ViewInviteLinksScreen;