Ians various bug fixes

package.json

@@ -68,7 +68,7 @@
     "react-native-elements": "^1.1.0",
     "react-native-firebase": "^5.3.1",
     "react-native-gesture-handler": "^1.1.0",
-    "react-native-gifted-chat": "^0.7.3",
+    "react-native-gifted-chat": "^0.9.2",
     "react-native-image-crop-picker": "^0.23.1",
     "react-native-keyboard-aware-scrollview": "^2.0.0",
     "react-native-linear-gradient": "^2.5.4",
@@ -78,6 +78,7 @@
     "react-native-simple-radio-button": "^2.7.3",
     "react-native-super-grid": "^3.0.4",
     "react-native-vector-icons": "^6.4.2",
+    "react-native-video": "^4.4.1",
     "react-navigation": "^3.8.1",
     "react-navigation-fluid-transitions": "^0.3.1",
     "react-navigation-props-mapper": "^1.0.1",

src/actions/index.js

@@ -3,17 +3,6 @@ import LoginWithAmazon from 'react-native-login-with-amazon'
 import { fetchConversations, sendMessage as localSendMessage } from '../screens/Messaging/actions'
 import { fetchArtisans, fetchProducts } from '../screens/ArtisanHub/actions'
 
-export function fetchAll(cgaID) {
-  return (dispatch) => {
-    return new Promise(async (resolve) => {
-      let artisans = fetchArtisans(cgaID)
-      let conversations = fetchConversations(cgaID)
-
-      Promise.all([artisans, conversations]).then(() => resolve())
-    })
-  }
-}
-
 export function sendMessage(sender, message, recipients) {
   return localSendMessage(sender, message, recipients)
 }

src/components/UserInput/index.js

@@ -15,7 +15,7 @@ export default class UserInput extends Component {
         <TextInput
           testID={this.props.testID}
           {...this.props}
-          style={[styles.input, this.props.style]}
+          style={[styles.input, this.props.style, {flex: 1}]}
         />
       </View>
     )

src/components/Wallpaper/index.js

@@ -1,16 +1,13 @@
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import { StyleSheet } from 'react-native'
-import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scrollview'
 import LinearGradient from 'react-native-linear-gradient'
 
 export default class Wallpaper extends Component {
   render() {
     return (
-      <LinearGradient colors={['#50C8C8', '#40B7B7']}>
-        <KeyboardAwareScrollView style={styles.container} bounces='false' contentContainerStyle={[styles.content, this.props.style]}>
-          {this.props.children}
-        </KeyboardAwareScrollView>
+      <LinearGradient style={[styles.content, this.props.style]} colors={['#50C8C8', '#40B7B7']}>
+        {this.props.children}
       </LinearGradient>
     )
   }
@@ -21,10 +18,6 @@ Wallpaper.propTypes = {
 }
 
 const styles = StyleSheet.create({
-  container: {
-    width: '100%',
-    height: '100%',
-  },
   content: {
     flex: 1,
     flexDirection: 'column',

src/screens/ArtisanHub/AddArtisan.js

@@ -123,81 +123,84 @@ export default class AddArtisan extends Component {
 
   render() {
     return (
-      <Wallpaper style={styles.container}>
-        <View style={styles.firstSection}>
-          <AddImage
-            imageUri={this.state.profilePicturePath}
-            onPress={() => this.pickImage()}
-            style={styles.image}
-          />
-          <View style={styles.namePhone}>
-            <View style={this.state.focusedInputs.name ? [styles.focusedInput, styles.inputWrapper] : styles.inputWrapper}>
+      <Wallpaper>
+        <View style={styles.container}>
+          <View style={styles.firstSection}>
+            <AddImage
+              imageUri={this.state.profilePicturePath}
+              onPress={() => this.pickImage()}
+              style={styles.image}
+            />
+            <View style={styles.namePhone}>
+              <View style={this.state.focusedInputs.name ? [styles.focusedInput, styles.inputWrapper] : styles.inputWrapper}>
+                <UserInput
+                  iconName="id-card"
+                  placeholder="Name"
+                  value={this.state.name}
+                  onChangeText={(newText) => this.setState({ name: newText })}
+                  onFocus={() => this.setState({ focusedInputs: { ...this.state.focusedInputs, name: true } })}
+                  onBlur={() => this.setState({ focusedInputs: { ...this.state.focusedInputs, name: false } })}
+                  style={styles.smallInput1}
+                />
+              </View>
+              <View style={this.state.focusedInputs.phoneNumber ? [styles.focusedInput, styles.inputWrapper] : styles.inputWrapper}>
+                <UserInput
+                  iconName="phone"
+                  placeholder="Phone Number"
+                  value={this.state.phoneNumber}
+                  onChangeText={this.onTextChange}
+                  onFocus={() => this.setState({ focusedInputs: { ...this.state.focusedInputs, phoneNumber: true } })}
+                  onBlur={() => this.setState({ focusedInputs: { ...this.state.focusedInputs, phoneNumber: false } })}
+                  style={styles.smallInput2}
+                  keyboardType="number-pad"
+                />
+              </View>
+            </View>
+          </View>
+          <View style={styles.secondSection}>
+            <View style={this.state.focusedInputs.location ? [styles.focusedInput2, styles.inputWrapper2] : styles.inputWrapper2}>
               <UserInput
-                iconName="id-card"
-                placeholder="Name"
-                value={this.state.name}
-                onChangeText={(newText) => this.setState({ name: newText })}
-                onFocus={() => this.setState({ focusedInputs: { ...this.state.focusedInputs, name: true } })}
-                onBlur={() => this.setState({ focusedInputs: { ...this.state.focusedInputs, name: false } })}
-                style={styles.smallInput1}
+                iconName="map"
+                placeholder="Location"
+                value={this.state.location}
+                onChangeText={(newText) => this.setState({ location: newText })}
+                onFocus={() => this.setState({ focusedInputs: { ...this.state.focusedInputs, location: true } })}
+                onBlur={() => this.setState({ focusedInputs: { ...this.state.focusedInputs, location: false } })}
+                style={styles.smallInput3}
               />
             </View>
-            <View style={this.state.focusedInputs.phoneNumber ? [styles.focusedInput, styles.inputWrapper] : styles.inputWrapper}>
+            <View style={this.state.focusedInputs.description ? [styles.focusedInput2, styles.inputWrapper3] : styles.inputWrapper3}>
               <UserInput
-                iconName="phone"
-                placeholder="Phone Number"
-                value={this.state.phoneNumber}
-                onChangeText={this.onTextChange}
-                onFocus={() => this.setState({ focusedInputs: { ...this.state.focusedInputs, phoneNumber: true } })}
-                onBlur={() => this.setState({ focusedInputs: { ...this.state.focusedInputs, phoneNumber: false } })}
-                style={styles.smallInput2}
-                keyboardType="number-pad"
+                placeholder="Describe this artisan"
+                value={this.state.description}
+                onChangeText={(newText) => this.setState({ description: newText })}
+                onFocus={() => this.setState({ focusedInputs: { ...this.state.focusedInputs, description: true } })}
+                onBlur={() => this.setState({ focusedInputs: { ...this.state.focusedInputs, description: false } })}
+                style={styles.largeInputs}
+                multiline={true}
               />
             </View>
           </View>
+          <AsyncButton
+            title="Create"
+            color='#c14700'
+            textColor='white'
+            onPress={this.createArtisan}
+            style={styles.button}
+            spinning={this.state.adding}
+            disabled={false}
+          />
         </View>
-        <View style={styles.secondSection}>
-          <View style={this.state.focusedInputs.location ? [styles.focusedInput2, styles.inputWrapper2] : styles.inputWrapper2}>
-            <UserInput
-              iconName="map"
-              placeholder="Location"
-              value={this.state.location}
-              onChangeText={(newText) => this.setState({ location: newText })}
-              onFocus={() => this.setState({ focusedInputs: { ...this.state.focusedInputs, location: true } })}
-              onBlur={() => this.setState({ focusedInputs: { ...this.state.focusedInputs, location: false } })}
-              style={styles.smallInput3}
-            />
-          </View>
-          <View style={this.state.focusedInputs.description ? [styles.focusedInput2, styles.inputWrapper3] : styles.inputWrapper3}>
-            <UserInput
-              placeholder="Describe this artisan"
-              value={this.state.description}
-              onChangeText={(newText) => this.setState({ description: newText })}
-              onFocus={() => this.setState({ focusedInputs: { ...this.state.focusedInputs, description: true } })}
-              onBlur={() => this.setState({ focusedInputs: { ...this.state.focusedInputs, description: false } })}
-              style={styles.largeInputs}
-              multiline={true}
-            />
-          </View>
-        </View>
-        <AsyncButton
-          title="Create"
-          color='#c14700'
-          textColor='white'
-          onPress={this.createArtisan}
-          style={styles.button}
-          spinning={this.state.adding}
-          disabled={false}
-        />
       </Wallpaper>
     )
   }
 }
 
 const styles = StyleSheet.create({
   container: {
+    flex: 1,
     flexDirection: 'column',
-    justifyContent: 'flex-start',
+    justifyContent: 'space-between',
     padding: '2%'
   },
   image: {

src/screens/ArtisanHub/ArtisanDetail.js

@@ -18,6 +18,7 @@ import {
 } from 'react-native'
 import { withMappedNavigationParams } from 'react-navigation-props-mapper'
 import { FlatGrid } from 'react-native-super-grid'
+
 class ArtisanDetail extends Component {
   static navigationOptions = () => {
     return {

src/screens/ArtisanHub/ArtisanList.js

@@ -9,7 +9,8 @@ import {
   TextInput,
   TouchableOpacity,
   View,
-  Platform
+  Platform,
+  RefreshControl
 } from 'react-native'
 import { ProfilePicture } from '../../components'
 
@@ -69,7 +70,10 @@ export default class ArtisanList extends Component {
   fetchArtisans() {
     this.setState({ fetchingArtisans: true })
     this.props.fetchArtisans(this.props.User.uid).then(() => {
-      this.setState({ fetchingArtisans: false })
+      this.setState({ 
+        fetchingArtisans: false,
+        artisans: this.sortedArtisans()
+      })
     })
   }
 
@@ -160,6 +164,12 @@ export default class ArtisanList extends Component {
             keyExtractor={this._keyExtractor}
             renderItem={this._renderArtisanItem}
             extraData={this.state}
+            refreshControl={
+              <RefreshControl
+                refreshing={this.state.fetchingArtisans}
+                onRefresh={this.fetchArtisans}
+              />
+            }
           />
         }
       </Wallpaper>
@@ -199,14 +209,13 @@ const styles = StyleSheet.create({
     color: '#444444',
     marginLeft: 5
   },
-
   input: {
-    margin: 15,
-    height: 40,
-    padding: 10,
-    backgroundColor: "white",
-    borderColor: '#444444',
-    borderWidth: 1
+    height: 60,
+    backgroundColor: 'rgba(255,255,255,0.85)',
+    paddingHorizontal: 20,
+    borderRadius: 10,
+    margin: 10,
+    fontSize: 20
   },
   submitButton: {
     backgroundColor: '#7a42f4',