WIP: update everything and support current cabal-core api

android/.gitignore

@@ -0,0 +1,36 @@
+# Built application files
+*.apk
+*.ap_
+
+# Files for the Dalvik VM
+*.dex
+
+# Java class files
+*.class
+
+# Generated files
+bin/
+gen/
+out/
+
+# Gradle files
+.gradle/
+build/
+
+# Local configuration file (sdk path, etc)
+local.properties
+
+# Proguard folder generated by Eclipse
+proguard/
+
+# Log Files
+*.log
+
+# Android Studio Navigation editor temp files
+.navigation/
+
+# Android Studio captures folder
+captures/
+
+# Intellij
+*.iml

android/.project

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>cabalmobile</name>
+	<comment>Project cabalmobile created by Buildship.</comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>org.eclipse.buildship.core.gradleprojectbuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>org.eclipse.buildship.core.gradleprojectnature</nature>
+	</natures>
+</projectDescription>

android/app/.project

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>app</name>
+	<comment>Project app created by Buildship.</comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>org.eclipse.jdt.core.javabuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+		<buildCommand>
+			<name>org.eclipse.buildship.core.gradleprojectbuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>org.eclipse.jdt.core.javanature</nature>
+		<nature>org.eclipse.buildship.core.gradleprojectnature</nature>
+	</natures>
+</projectDescription>

android/app/build.gradle

@@ -94,15 +94,26 @@ def enableSeparateBuildPerCPUArchitecture = false
 def enableProguardInReleaseBuilds = false
 
 android {
-    compileSdkVersion 23
-    buildToolsVersion "23.0.1"
+    compileSdkVersion 28
+    buildToolsVersion '28.0.3'
 
     defaultConfig {
-        applicationId "com.cabalmobile"
-        minSdkVersion 16
-        targetSdkVersion 22
+        applicationId "chat.cabal.mobile"
+        minSdkVersion 23
+        targetSdkVersion 28
         versionCode 1
         versionName "1.0"
+
+        aaptOptions {
+            ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:.*:!CVS:!thumbs.db:!picasa.ini:!*~'
+        }
+
+        externalNativeBuild {
+            cmake {
+                version "3.7.1"
+            }
+        }
+
         ndk {
             abiFilters "armeabi-v7a", "x86"
         }
@@ -148,10 +159,12 @@ android {
 }
 
 dependencies {
-    compile project(':nodejs-mobile-react-native')
-    compile fileTree(dir: "libs", include: ["*.jar"])
-    compile "com.android.support:appcompat-v7:23.0.1"
-    compile "com.facebook.react:react-native:+"  // From node_modules
+    implementation project(':react-native-gesture-handler')
+    implementation project(':nodejs-mobile-react-native')
+    implementation project(':nodejs-mobile-react-native')
+    implementation fileTree(dir: "libs", include: ["*.jar"])
+    implementation "com.android.support:appcompat-v7:28.0.0"
+    implementation "com.facebook.react:react-native:+"  // From node_modules
 }
 
 // Run this once to be able to run the application with BUCK

android/app/src/main/AndroidManifest.xml

@@ -9,6 +9,7 @@
       android:label="@string/app_name"
       android:icon="@mipmap/ic_launcher"
       android:allowBackup="false"
+      android:usesCleartextTraffic="true"
       android:theme="@style/AppTheme">
       <activity
         android:name=".MainActivity"

android/app/src/main/java/com/cabalmobile/MainActivity.java

@@ -1,6 +1,9 @@
 package com.cabalmobile;
 
 import com.facebook.react.ReactActivity;
+// import com.facebook.react.ReactActivityDelegate;
+// import com.facebook.react.ReactRootView;
+// import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
 
 public class MainActivity extends ReactActivity {
 
@@ -12,4 +15,14 @@ public class MainActivity extends ReactActivity {
     protected String getMainComponentName() {
         return "cabalmobile";
     }
+
+    // @Override
+    // protected ReactActivityDelegate createReactActivityDelegate() {
+    //     return new ReactActivityDelegate(this, getMainComponentName()) {
+    //         @Override
+    //           protected ReactRootView createRootView() {
+    //           return new RNGestureHandlerEnabledRootView(MainActivity.this);
+    //         }
+    //     };
+    // }
 }

android/build.gradle

@@ -3,9 +3,14 @@
 buildscript {
     repositories {
         jcenter()
+        maven {
+            url 'https://maven.google.com/'
+            name 'Google'
+        }
+        google()
     }
     dependencies {
-        classpath 'com.android.tools.build:gradle:2.2.3'
+        classpath 'com.android.tools.build:gradle:3.3.0'
 
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files
@@ -20,5 +25,9 @@ allprojects {
             // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
             url "$rootDir/../node_modules/react-native/android"
         }
+        maven {
+            url 'https://maven.google.com/'
+            name 'Google'
+        }
     }
 }

android/gradle/wrapper/gradle-wrapper.properties

@@ -1,5 +1,6 @@
+#Tue Nov 13 17:25:06 EST 2018
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.1-all.zip

android/settings.gradle

@@ -1,4 +1,8 @@
 rootProject.name = 'cabalmobile'
+include ':react-native-gesture-handler'
+project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android')
+include ':nodejs-mobile-react-native'
+project(':nodejs-mobile-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/nodejs-mobile-react-native/android')
 include ':nodejs-mobile-react-native'
 project(':nodejs-mobile-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/nodejs-mobile-react-native/android')
 

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function (api) {
+  api.cache(true)
+  return {
+    'presets': ['module:metro-react-native-babel-preset']
+  }
+}

frontend/App.js

@@ -1,4 +1,4 @@
-import {createSwitchNavigator, createStackNavigator} from 'react-navigation'
+import { createSwitchNavigator, createStackNavigator } from 'react-navigation'
 import ChannelsList from './screens/ChannelsList'
 import ChatScreen from './screens/ChatScreen'
 import HomeScreen from './screens/HomeScreen'
@@ -50,7 +50,7 @@ export default createSwitchNavigator(
     },
     transitionConfig: () => ({
       screenInterpolator: props => ({
-        transform: [{translateX: 0}, {translateY: 0}]
+        transform: [{ translateX: 0 }, { translateY: 0 }]
       })
     })
   }

frontend/components/Avatar.js

@@ -1,21 +1,33 @@
 import React from 'react'
-import {View, StyleSheet} from 'react-native'
-import strToColor from 'string-to-color'
+import { View, StyleSheet } from 'react-native'
+import Blockies from 'blockies-bmp/react-native-component'
+global.Buffer = require('buffer').Buffer // Import Buffer globally for the Blockies component
 
 const styles = StyleSheet.create({
   avatar: {
-    height: 20,
-    width: 20,
+    height: 40,
+    width: 40,
     borderRadius: 3,
-    marginRight: 6
+    marginRight: 8
+  },
+  avatarImage: {
+    borderRadius: 3
   }
 })
 
 export default class Avatar extends React.Component {
   render () {
-    const {isHidden, message} = this.props
-    const hiddenStyle = isHidden ? {height: 0} : null
-    const colorStyle = {backgroundColor: strToColor(message.author)}
-    return <View style={[styles.avatar, hiddenStyle, colorStyle]} />
+    const { isHidden, message } = this.props
+    const hiddenStyle = isHidden ? { opacity: 0 } : null
+    return (
+      <View style={[styles.avatar, hiddenStyle]}>
+        <Blockies
+          opts={{ seed: message.user.name }}
+          size={40}
+          style={styles.avatarImage}
+          bgColor='#fff'
+        />
+      </View>
+    )
   }
 }

frontend/components/Bubble.js

@@ -8,9 +8,9 @@ import {
   View,
   Platform
 } from 'react-native'
-import {MessageText, MessageImage, Time, utils} from 'react-native-gifted-chat'
+import { MessageText, MessageImage, Time, utils } from 'react-native-gifted-chat'
 
-const {isSameUser, isSameDay} = utils
+const { isSameUser, isSameDay } = utils
 
 export default class Bubble extends React.Component {
   constructor (props) {
@@ -27,7 +27,7 @@ export default class Bubble extends React.Component {
       this.context
         .actionSheet()
         .showActionSheetWithOptions(
-          {options, cancelButtonIndex},
+          { options, cancelButtonIndex },
           buttonIndex => {
             if (buttonIndex === 0) {
               Clipboard.setString(this.props.currentMessage.text)
@@ -67,7 +67,7 @@ export default class Bubble extends React.Component {
 
   renderMessageImage () {
     if (this.props.currentMessage.image) {
-      const {containerStyle, wrapperStyle, ...messageImageProps} = this.props
+      const { containerStyle, wrapperStyle, ...messageImageProps } = this.props
       if (this.props.renderMessageImage) {
         return this.props.renderMessageImage(messageImageProps)
       }
@@ -84,7 +84,7 @@ export default class Bubble extends React.Component {
   renderUsername () {
     const username = this.props.currentMessage.user.name
     if (username) {
-      const {containerStyle, wrapperStyle, ...usernameProps} = this.props
+      const { containerStyle, wrapperStyle, ...usernameProps } = this.props
       if (this.props.renderUsername) {
         return this.props.renderUsername(usernameProps)
       }
@@ -106,14 +106,14 @@ export default class Bubble extends React.Component {
 
   renderTime () {
     if (this.props.currentMessage.createdAt) {
-      const {containerStyle, wrapperStyle, ...timeProps} = this.props
+      const { containerStyle, wrapperStyle, ...timeProps } = this.props
       if (this.props.renderTime) {
         return this.props.renderTime(timeProps)
       }
       return (
         <Time
           {...timeProps}
-          containerStyle={{left: [styles.timeContainer]}}
+          containerStyle={{ left: [styles.timeContainer] }}
           textStyle={{
             left: [
               styles.standardFont,
@@ -188,11 +188,13 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-end'
   },
   username: {
-    fontWeight: 'bold'
+    fontWeight: 'bold',
+    color: '#000'
   },
   time: {
     textAlign: 'left',
-    fontSize: 12
+    fontSize: 14,
+    color: '#111'
   },
   timeContainer: {
     marginLeft: 0,

frontend/components/Message.js

@@ -1,14 +1,14 @@
 import React from 'react'
-import {View, StyleSheet} from 'react-native'
-import {Day, utils} from 'react-native-gifted-chat'
+import { View, StyleSheet } from 'react-native'
+import { Day, utils } from 'react-native-gifted-chat'
 import Bubble from './Bubble'
 import Avatar from './Avatar'
 
-const {isSameUser, isSameDay} = utils
+const { isSameUser, isSameDay } = utils
 
 export default class Message extends React.Component {
   getInnerComponentProps () {
-    const {containerStyle, ...props} = this.props
+    const { containerStyle, ...props } = this.props
     return {
       ...props,
       position: 'left',
@@ -31,7 +31,7 @@ export default class Message extends React.Component {
   }
 
   renderAvatar () {
-    const {currentMessage, previousMessage} = this.props
+    const { currentMessage, previousMessage } = this.props
     const isHidden =
       isSameUser(currentMessage, previousMessage) &&
       isSameDay(currentMessage, previousMessage)
@@ -43,16 +43,12 @@ export default class Message extends React.Component {
     const marginBottom = isSameUser(
       this.props.currentMessage,
       this.props.nextMessage
-    )
-      ? 2
-      : 10
+    ) ? 2 : 10
 
     return (
       <View>
         {this.renderDay()}
-        <View
-          style={[styles.container, {marginBottom}, this.props.containerStyle]}
-        >
+        <View style={[styles.container, { marginBottom }, this.props.containerStyle]}>
           {this.renderAvatar()}
           {this.renderBubble()}
         </View>