feat(users): linkify about me section

micahlt · Dec 19, 2023 · 0fffbf7 · 0fffbf7
1 parent 83d5701
commit 0fffbf7
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 13 deletions.
diff --git 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 }) => {
       </View>
     );
   };
+  const WebDisplay = React.memo(function WebDisplay() {
+    const { width } = useWindowDimensions();
+    return (
+      <RenderHtml
+        source={{
+          html: linkify(data.bio),
+        }}
+        contentWidth={width}
+        tagsStyles={{
+          a: { color: colors.primary },
+          p: {
+            color: colors.onSurface,
+            fontSize: '1.035rem',
+            marginTop: 0,
+            marginBottom: 0,
+          },
+          h1: {
+            marginTop: 0,
+            marginBottom: 0,
+          },
+          h2: {
+            marginTop: 0,
+            marginBottom: 0,
+          },
+        }}
+        baseStyle={s.bio}
+      />
+    );
+  });
   const listHeader = () => {
     return (
       <>
@@ -231,10 +263,15 @@ const UserPage = ({ route, navigation }) => {
         )}
         {data?.bio && (
           <>
-            <Text variant="bodyLarge" style={s.heading}>
+            <Text variant="titleMedium" style={s.heading}>
               About me
             </Text>
-            <Text style={s.bio}>{data.bio}</Text>
+            <WebDisplay />
+            <Divider
+              horizontalInset={true}
+              bold={true}
+              style={{ marginTop: 5, marginBottom: 15 }}
+            />
           </>
         )}
       </>
@@ -243,7 +280,7 @@ const UserPage = ({ route, navigation }) => {
   const renderItem = React.useCallback(({ item }) => <Post post={item} />, []);
   return (
     <>
-      <Appbar style={{ backgroundColor: brush.headerColor }}>
+      <Appbar style={{ backgroundColor: brush.headerColor, zIndex: 1 }}>
         <Appbar.BackAction
           onPress={() => goBackIfCan(navigation)}
           color={headerTextColor || colors.secondary}

diff --git 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 (
       <RenderHtml
         source={{
-          html: linkify(filteredHTML, {
-            formatHref: {
-              mention: href => `wasteof://users/${href}`,
-            },
-          }),
+          html: linkify(filteredHTML),
         }}
         contentWidth={width - 65 * localRepostCount}
         tagsStyles={{

diff --git 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
@@ -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;