diff --git a/src/UserPage.js b/src/UserPage.js index 6cc53b1..c8c0a53 100644 --- a/src/UserPage.js +++ b/src/UserPage.js @@ -7,6 +7,7 @@ import { Text, ActivityIndicator, useTheme, + Divider, } from 'react-native-paper'; import { useFocusEffect } from '@react-navigation/core'; import { InAppBrowser } from 'react-native-inappbrowser-reborn'; @@ -15,9 +16,11 @@ import s from '../styles/UserModal.module.css'; import { GlobalContext } from '../App'; import { apiURL, wasteofURL } from './apiURL'; import getColorFromTheme from '../utils/getColorFromTheme'; -import { StatusBar } from 'react-native'; +import { StatusBar, useWindowDimensions } from 'react-native'; +import RenderHtml from 'react-native-render-html'; import { goBackIfCan } from '../utils/goBackIfCan'; import ErrorCard from './components/ErrorCard'; +import linkify from '../utils/linkify'; const UserPage = ({ route, navigation }) => { const { username } = route.params; @@ -169,6 +172,35 @@ const UserPage = ({ route, navigation }) => { ); }; + const WebDisplay = React.memo(function WebDisplay() { + const { width } = useWindowDimensions(); + return ( + + ); + }); const listHeader = () => { return ( <> @@ -231,10 +263,15 @@ const UserPage = ({ route, navigation }) => { )} {data?.bio && ( <> - + About me - {data.bio} + + )} @@ -243,7 +280,7 @@ const UserPage = ({ route, navigation }) => { const renderItem = React.useCallback(({ item }) => , []); return ( <> - + goBackIfCan(navigation)} color={headerTextColor || colors.secondary} diff --git a/src/components/Post.js b/src/components/Post.js index ef632fd..2b3dcec 100644 --- a/src/components/Post.js +++ b/src/components/Post.js @@ -13,8 +13,7 @@ import RenderHtml from 'react-native-render-html'; import ago from 's-ago'; import s from '../../styles/Post.module.css'; import filter from '../../utils/filter'; -import linkify from 'linkify-html'; -import 'linkify-plugin-mention'; +import linkify from '../../utils/linkify'; import UserChip from './UserChip'; import AutoImage from './AutoImage'; import { GlobalContext } from '../../App'; @@ -100,15 +99,11 @@ const Post = React.memo(({ post, isRepost, repostCount, hideUser }) => { /> ); }; - const WebDisplay = React.memo(function WebDisplay({ html }) { + const WebDisplay = React.memo(function WebDisplay() { return ( `wasteof://users/${href}`, - }, - }), + html: linkify(filteredHTML), }} contentWidth={width - 65 * localRepostCount} tagsStyles={{ diff --git a/styles/UserModal.module.css b/styles/UserModal.module.css index 589f82d..fbe7869 100644 --- a/styles/UserModal.module.css +++ b/styles/UserModal.module.css @@ -40,5 +40,4 @@ .heading { margin-left: 25px; - font-weight: bold; } diff --git a/utils/linkify.js b/utils/linkify.js new file mode 100644 index 0000000..dd8c636 --- /dev/null +++ b/utils/linkify.js @@ -0,0 +1,16 @@ +import linkifyHtml from 'linkify-html'; +import 'linkify-plugin-mention'; + +/** + * Returns a linkified copy of the inputted string, including @mentions + * @param {string} content - string to linkify + */ +const linkify = content => { + return linkifyHtml(content, { + formatHref: { + mention: href => `wasteof://users/${href}`, + }, + }); +}; + +export default linkify;