[ptmt#3] Add markdown parser

Author: ptmt

Examples/SimpleChatClient/SimpleChatClient/AppDelegate.m

@@ -105,7 +105,7 @@ - (NSURL *)sourceURLForBridge:(__unused RCTBridge *)bridge
      * then add the `main.jsbundle` file to your project and uncomment this line:
      */
 
-    //sourceURL = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
+    sourceURL = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
 
 #if RUNNING_ON_CI
     sourceURL = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

Examples/SimpleChatClient/SimpleChatClient/main.jsbundle

@@ -14,6 +14,7 @@ var {
 } = React;
 
 import LoadingIndicator from './LoadingIndicator';
+import Message from './Message';
 
 class Channel extends React.Component {
   constructor() {
@@ -67,18 +68,10 @@ class ChatLayout extends React.Component {
       );
     });
 
-    const messages = this.props.messages && this.props.messages.map(message => {
-      const date = new Date(message.timestamp);
-      var time = ('0' + date.getHours()).slice(-2) + ':' +   ('0' + date.getMinutes()).slice(-2);
-      return (
-        <View style={[styles.message]} key={message.id}>
-          <Text style={styles.messageTimestamp}>{time}</Text>
-          <Text style={styles.messageUsername}>{'<'}{message.author.username}{'>'}</Text>
-          <Text style={styles.messageText}>{message.content}</Text>
-        </View>
-      );
+    const messages = this.props.messages && this.props.messages.map((message, i) => {
+      return <Message {...message} key={i} />
     });
-    console.log(!messages)
+
     return (
         <View style={styles.container}>
           <View style={styles.channels}>
@@ -90,12 +83,11 @@ class ChatLayout extends React.Component {
             </ScrollView>
           </View>
           <View style={styles.messages}>
-            {!messages && <LoadingIndicator>Loading messages..</LoadingIndicator>}
             <ScrollView
                 style={[styles.messagesScrollContainer]}
                 autoScrollToBottom={true}
                 showsVerticalScrollIndicator={true}>
-                  {messages}
+                  {messages || <LoadingIndicator>Loading...</LoadingIndicator>}
             </ScrollView>
             <View style={styles.inputWrapper}>
               <TextInput
@@ -192,46 +184,10 @@ var styles = StyleSheet.create({
   // --------- messages
   messages: {
     flex: 1,
-    backgroundColor: 'white',
-    top: 0,
+    backgroundColor: 'white'
   },
   messagesScrollContainer: {
     height: Dimensions.get('window').height - 150,
   },
-  verticallyInverted: {
-    transform: [
-      { scaleY: 2 },
-    ],
-  },
-  message: {
-    flex: 1,
-    flexDirection: 'row',
-    marginLeft: 10,
-    marginBottom: 5,
-  },
-  messageTimestamp: {
-    color: '#999',
-    marginRight: 5,
-    fontFamily: 'Monaco'
-    //fontSize: 12
-  },
-  messageUsername: {
-    color: '#222',
-    width: 100,
-    textAlign: 'right',
-    fontWeight: '600',
-  },
-  messageText: {
-    //position: 'absolute',
-    color: '#222',
-    marginLeft: 4,
-    width: Dimensions.get('window').width - 700 // TODO: why it's not wrap automatically
-  },
-  messageLoader: {
-    fontSize: 20,
-    color: '#333',
-    marginTop: 20,
-    marginLeft: 100
-  },
 });
 module.exports = ChatLayout;

Examples/SimpleChatClient/components/ChatLayout.js

@@ -15,7 +15,7 @@ export default class LoadingIndicator extends React.Component {
   }
   render(): ReactElement {
     return (
-      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
+      <View style={{flex: 1, marginTop: 100, alignItems: 'center', justifyContent: 'center'}}>
         <ActivityIndicatorIOS size="large" style={{width: 40, alignSelf: 'center'}}/>
         <Text>{this.props.children}</Text>
       </View>

Examples/SimpleChatClient/components/LoadingIndicator.js

@@ -0,0 +1,70 @@
+/* @flow */
+'use strict';
+
+import React,  {
+  View,
+  Text,
+  Image,
+  StyleSheet,
+  Animated
+} from 'react-native-desktop';
+
+import Markdown from './SuperSimpleMarkdown';
+
+export default class Message extends React.Component {
+  render(): ReactElement {
+    const date = new Date(this.props.timestamp);
+    const time = ('0' + date.getHours()).slice(-2) + ':' +   ('0' + date.getMinutes()).slice(-2);
+    const attachImage = this.props.attachments && this.props.attachments.length > 0 ?
+      this.props.attachments[0].url : null;
+    return (
+      <View style={[styles.message]} key={this.props.id}>
+        <Text style={styles.messageTimestamp}>{time}</Text>
+        <Text style={styles.messageUsername} numberOfLines={1}>{'<'}{this.props.author.username}{'>'}</Text>
+        {attachImage &&
+          <Image resizeMode={'contain'} source={{uri: attachImage}} style={{width: 300, height: 300}} />
+        }
+        <Markdown>{parseMentions(this.props.content, this.props.mentions)}</Markdown>
+      </View>
+    );
+  }
+}
+
+function parseMentions(text: string, mentions: Array<any>): string {
+  if (!mentions || mentions.length === 0) {
+    return text;
+  }
+  const matches = text.match(/<@[^>]*>/g);
+  matches.forEach(mention => {
+    const id = mention.substring(2, mention.length - 1);
+		text = text.replace(mention, '**@' + mentions.filter(m => m.id === id)[0].username + '**');
+  });
+  return text;
+}
+
+const styles = StyleSheet.create({
+  message: {
+    flex: 1,
+    flexDirection: 'row',
+    marginLeft: 10,
+    marginBottom: 5,
+  },
+  messageTimestamp: {
+    color: '#999',
+    marginRight: 5,
+    fontFamily: 'Monaco',
+    fontSize: 12,
+  },
+  messageUsername: {
+    color: '#222',
+    width: 100,
+    fontSize: 12,
+    textAlign: 'right',
+    fontWeight: '600',
+  },
+  messageText: {
+    color: '#222',
+    marginLeft: 4,
+    fontSize: 12,
+  }
+});