Merge 1c3b57d into 9f9de01

lifeomic · May 1, 2024 · 7bd700e · 7bd700e
2 parents 9f9de01 + 1c3b57d
commit 7bd700e
Show file tree

Hide file tree

Showing 3 changed files with 136 additions and 25 deletions.
diff --git a/src/hooks/Circles/usePrivatePosts.ts b/src/hooks/Circles/usePrivatePosts.ts
@@ -44,7 +44,7 @@ export type PostRepliesQueryResponse = {
 
 export const postToMessage = (
   post: Partial<Post> & Pick<Post, 'id'>,
-): IMessage => {
+): IMessage | IMessage[] => {
   if (!post.authorId) {
     throw Error(
       t(
@@ -54,7 +54,7 @@ export const postToMessage = (
     );
   }
 
-  return {
+  const message = {
     _id: post.id,
     text: post.message || '',
     createdAt: post.createdAt ? new Date(post.createdAt) : new Date(),
@@ -64,6 +64,40 @@ export const postToMessage = (
       avatar: post.author?.profile.picture,
     },
   };
+
+  const markdownImages = message.text.match(/\!\[.+\]\(.+\)/g);
+
+  if (!markdownImages) {
+    return message;
+  }
+
+  const messages: IMessage[] = [];
+  let text = message.text;
+
+  for (let i = 0; i < markdownImages.length; i++) {
+    const imageMarkdown = markdownImages[i];
+    const imageUrl = imageMarkdown.match(/\!\[.+\]\((.+)\)/)?.[1];
+    const parts = text.split(imageMarkdown);
+    text = parts[1].trim();
+
+    messages.push({
+      ...message,
+      _id: `${message._id}-${i}`,
+      text: parts[0].trim(),
+    });
+    messages.push({
+      ...message,
+      _id: `${message._id}-${i}-image`,
+      text: '',
+      image: imageUrl,
+    });
+  }
+
+  if (text.length) {
+    messages.push({ ...message, text });
+  }
+
+  return messages.reverse();
 };
 
 const uniqSort = (userIds: Array<string | undefined>) => {

diff --git a/src/screens/DirectMessagesScreen.tsx b/src/screens/DirectMessagesScreen.tsx
@@ -28,7 +28,8 @@ import {
 import { User } from '../types';
 import { ScreenProps } from './utils/stack-helpers';
 import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
-import { Platform } from 'react-native';
+import { Linking, Platform, StyleProp, TextStyle } from 'react-native';
+import { ParseShape } from 'react-native-parsed-text';
 
 export type DirectMessageParams = {
   users: User[];
@@ -131,20 +132,24 @@ export const DirectMessagesScreen = ({
               left: styles.leftText,
               right: styles.rightText,
             }}
+            nextMessage={props.nextMessage}
             usernameStyle={styles.signatureText}
-            renderTime={(timeProps) => (
-              <Time
-                {...timeProps}
-                timeTextStyle={{
-                  left: styles.leftTimeText,
-                  right: styles.rightTimeText,
-                }}
-                containerStyle={{
-                  left: styles.leftTimeContainer,
-                  right: styles.rightTimeContainer,
-                }}
-              />
-            )}
+            renderTime={(timeProps) =>
+              timeProps.currentMessage?.createdAt !==
+                (timeProps as any).nextMessage?.createdAt && (
+                <Time
+                  {...timeProps}
+                  timeTextStyle={{
+                    left: styles.leftTimeText,
+                    right: styles.rightTimeText,
+                  }}
+                  containerStyle={{
+                    left: styles.leftTimeContainer,
+                    right: styles.rightTimeContainer,
+                  }}
+                />
+              )
+            }
           />
         );
       }}
@@ -187,10 +192,69 @@ export const DirectMessagesScreen = ({
           </Send>
         );
       }}
+      parsePatterns={messageTextParsers}
     />
   );
 };
 
+export const messageTextParsers = (
+  linkStyle: StyleProp<TextStyle>,
+  disabled = false,
+): ParseShape[] => [
+  {
+    pattern: /\!\[(.+)\]\((\S+)\)/,
+    renderText: (_fullString: string, matches: string[]) => `<${matches[1]}>`,
+  },
+  {
+    pattern: /\[(.+)\]\((\S+)\)/,
+    style: linkStyle,
+    renderText: (_fullString: string, matches: string[]) => matches[1],
+    onPress: (url: string) => {
+      const matches = url.match(/\[.+\]\((.+)\)/) || [];
+      Linking.openURL(matches[1]);
+    },
+    disabled,
+  },
+  {
+    type: 'url',
+    style: linkStyle,
+    onPress: (url: string) => Linking.openURL(url),
+    disabled,
+  },
+  {
+    type: 'phone',
+    style: linkStyle,
+    onPress: (url: string) => Linking.openURL(`tel:${url}`),
+    disabled,
+  },
+  {
+    type: 'email',
+    style: linkStyle,
+    onPress: (url: string) => Linking.openURL(`mailto:${url}`),
+    disabled,
+  },
+  {
+    pattern: /\*{3}(.+)\*{3}?/,
+    style: { fontWeight: 'bold', fontStyle: 'italic' },
+    renderText: (match: string) => match.slice(3, -3),
+  },
+  {
+    pattern: /[\*_]{2}(.+)[\*_]{2}?/,
+    style: { fontWeight: 'bold' },
+    renderText: (match: string) => match.slice(2, -2),
+  },
+  {
+    pattern: /[\*_]{1}(.+)[\*_]{1}?/,
+    style: { fontStyle: 'italic' },
+    renderText: (match: string) => match.slice(1, -1),
+  },
+  {
+    pattern: /~{2}(.+)~{2}?/,
+    style: { textDecorationLine: 'line-through' },
+    renderText: (match: string) => match.slice(2, -2),
+  },
+];
+
 const defaultStyles = createStyles('DirectMessagesScreen', (theme) => ({
   activityIndicator: {
     view: {

diff --git a/src/screens/MessageScreen.tsx b/src/screens/MessageScreen.tsx
@@ -29,7 +29,10 @@ import { useUser } from '../hooks';
 import { useProfilesForTile } from '../hooks/useMessagingProfiles';
 import { User } from '../types';
 import { ParamListBase } from '@react-navigation/native';
-import { DirectMessageParams } from './DirectMessagesScreen';
+import {
+  DirectMessageParams,
+  messageTextParsers,
+} from './DirectMessagesScreen';
 import { ComposeMessageParams } from './ComposeMessageScreen';
 import {
   ScreenParamTypes as BaseScreenParamTypes,
@@ -38,6 +41,7 @@ import {
 import compact from 'lodash/compact';
 import Swipeable from 'react-native-gesture-handler/Swipeable';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import ParsedText from 'react-native-parsed-text';
 
 export type MessageTileParams = {
   tileId: string;
@@ -206,7 +210,7 @@ export function MessageScreen<ParamList extends ParamListBase>({
                 style={styles.listItemView}
                 descriptionNumberOfLines={1}
                 descriptionStyle={
-                  node
+                  node.hasUnread
                     ? [styles.listItemSubtitleText, styles.newMessageText]
                     : styles.listItemSubtitleText
                 }
@@ -223,12 +227,19 @@ export function MessageScreen<ParamList extends ParamListBase>({
                   .map((profile) => profile.profile.displayName)
                   .join(', ')}
                 description={
-                  node.latestMessageUserId === userData?.id
-                    ? t('message-preview-prefixed', {
-                        defaultValue: 'You: {{messageText}}',
-                        messageText: node.latestMessageText,
-                      })
-                    : node.latestMessageText
+                  <ParsedText
+                    parse={messageTextParsers(
+                      styles.linkMessagePreviewText,
+                      true,
+                    )}
+                  >
+                    {node.latestMessageUserId === userData?.id
+                      ? t('message-preview-prefixed', {
+                          defaultValue: 'You: {{messageText}}',
+                          messageText: node.latestMessageText,
+                        })
+                      : node.latestMessageText}
+                  </ParsedText>
                 }
                 right={() => renderRight(node.latestMessageTime)}
               />
@@ -375,7 +386,6 @@ const defaultStyles = createStyles('MessageScreen', (theme) => {
     listItemTimeText: { paddingLeft: 15 },
     newMessageText: {
       color: theme.colors.text,
-      fontWeight: '600',
     },
     multiGiftedAvatarView: {
       flex: 1,
@@ -433,6 +443,9 @@ const defaultStyles = createStyles('MessageScreen', (theme) => {
       paddingVertical: 20,
     },
     createMessageIcon: {} as { color: string | undefined },
+    linkMessagePreviewText: {
+      textDecorationLine: 'underline',
+    },
   };
 });