add user screen and login with fabric

components/HomeScreen.js

@@ -41,9 +41,10 @@ const HomeScreen = () => {
   );
 };
 
+
 const styles = StyleSheet.create({
   viewRoot: {
-    backgroundColor: '#fffff2',
+    backgroundColor: '#ffffff',
     height: '100%',
   },
   heading: {

components/LoginUserScreen.js

@@ -44,7 +44,7 @@ const LoginUserScreen = ({navigation}) => {
       email: username,
       password: password,
     };
-    await fetch('http://192.168.29.141:5000/users/login', {
+    await fetch('http://locaft.ap-south-1.elasticbeanstalk.com/users/login', {
       method: 'POST',
       headers: {
         Accept: 'application/json',
@@ -59,10 +59,7 @@ const LoginUserScreen = ({navigation}) => {
       })
       .then(async function (response_data) {
         console.log('\n data ', response_data);
-        console.log(
+        console.log('\nuser data success');
-          '\n data success',
-          response_data.success + typeof response_data.success,
-        );
         if (response_data.token) {
           await setKey('token', response_data.token);
           setToken(response_data.token);
@@ -70,6 +67,56 @@ const LoginUserScreen = ({navigation}) => {
         } else {
           setMessage(response_data.msg);
         }
+        if (response_data.user.organization) {
+          if (response_data.user.organization === 'mod') {
+            login_fabric(response_data.user.id, 'Org1');
+          }
+          if (response_data.user.organization === 'tenant') {
+		console.log("if in org condition");
+            login_fabric(response_data.user.id, 'Org2');
+          }
+
+          if (response_data.user.organization === 'owner') {
+            login_fabric(response_data.user.id, 'Org3');
+          }
+        }
+        var key_token = await getKey('token');
+        console.log('retrived key_token ' + key_token);
+      })
+      .catch(error => {
+        setError(error);
+        console.log('error ' + error);
+      });
+  };
+  const login_fabric = async (username_fab, orgname_fab) => {
+    var data = {
+      username: username_fab,
+      orgName: orgname_fab,
+    };
+    await fetch('http://192.168.29.141:4000/users', {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(data),
+    })
+      .then(function (response) {
+        console.log('response ', response);
+        //const cred = await Keychain.setGenericPassword(JSON.stringify(response));
+        return response.json();
+      })
+      .then(async function (response_data) {
+        console.log('\n data ', response_data);
+        console.log(
+          '\n fabric data success',
+          response_data.success + typeof response_data.success,
+        );
+        if (response_data.success) {
+          await setKey('token', response_data.token);
+          setToken(response_data.token);
+          setMessage(response_data.message);
+        }
         var key_token = await getKey('token');
         console.log('retrived key_token ' + key_token);
       })

components/UserProfile.js

@@ -5,32 +5,97 @@ import {
   Text,
   View,
   TouchableHighlight,
-  TextInput,
   ScrollView,
   Dimensions,
   TouchableOpacity,
+  FlatList,
 } from 'react-native';
 import {Icon} from 'react-native-elements';
+import HouseCard from './helpers/HouseCard'
 
-const UserProfile = () => {
+const deviceWidth = Math.round(Dimensions.get('window').width);
+
+const homes = [
+  {
+    name: 'Prestiage Villas',
+    categories: 'Desserts, Cakes and Bakery',
+    deliveryTime: '35 min',
+    distance: '3.7 km',
+    image: require('../assets/house_1.jpg'),
+    id: 1,
+  },
+  {
+    name: 'lakeView Apartment 203',
+    categories: 'Beverages, Desserts, Cakes and Bakery',
+    deliveryTime: '45 min',
+    distance: '4.3 km',
+    image: require('../assets/house_2.jpg'),
+    id: 2,
+  },
+  {
+    name: 'Central Villas',
+    categories: 'Cakes and Bakery, American, Sandwiches, Burgers',
+    deliveryTime: '25 min',
+    distance: '3 km',
+    image: require('../assets/house_1.jpg'),
+    id: 3,
+  },
+  {
+    name: "grand flat 405",
+    categories: 'Fast Food, Burgers, Desserts',
+    deliveryTime: '20 min',
+    distance: '2.5 km',
+    image: require('../assets/house_2.jpg'),
+    id: 4,
+  },
+  {
+    name: 'exlusive villa',
+    categories: 'Fast Food, Burgers, Desserts',
+    deliveryTime: '25 min',
+    distance: '3.1 km',
+    image: require('../assets/house_1.jpg'),
+    id: 5,
+  },
+];
+const UserProfile = ({navigation}) => {
   return (
     <>
       <StatusBar backgroundColor="#ffffff" barStyle="dark-content" />
       <View style={styles.viewRoot}>
-        <View
+        <View style={styles.iconContainer}>
-          style={{
-            flexDirection: 'row',
-            justifyContent: 'flex-start',
-            alignItems: 'flex-start',
-            marginTop: '-40%',
-          }}>
           <TouchableHighlight
             onPress={() => navigation.goBack()}
             style={{activeOpacity: 1, underlayColor: 'red', color: 'white'}}>
             <Icon name="arrow-back" type="ionicon" size={36} color="#206ba5" />
           </TouchableHighlight>
+          <TouchableHighlight
+            onPress={() => navigation.goBack()}
+            style={{activeOpacity: 1, underlayColor: 'red', color: 'white'}}>
+            <Icon name="settings-outline" type="ionicon" size={36} color="#206ba5" />
+          </TouchableHighlight>
+        </View>
+	<View style={styles.headingContainer}>
+        <Text style={styles.heading}>John Doe</Text>
+	<Text style={styles.subHeading}>Tenant</Text>
+
+	<View style={{flexDirection: 'row', marginTop: 30}}>
+         <Icon name="card-outline" type="ionicon" size={36} color="brown" />
+	<Text style={[styles.pricingHeading]}>Basic Member</Text>
+	</View>
+	</View>
+        <View style={styles.cardContainer}>
+          {/* <Card /> */}
+          <StatusBar barStyle="dark-content" />
+
+          <FlatList
+            data={homes}
+            renderItem={({item}) => {
+              return <HouseCard info={item} />;
+            }}
+            keyExtractor={restaurant => restaurant.id.toString()}
+            showsVerticalScrollIndicator={false}
+          />
         </View>
-        <Text style={styles.heading}>Username</Text>
       </View>
     </>
   );
@@ -42,57 +107,53 @@ const styles = StyleSheet.create({
     height: '100%',
     flex: 1,
   },
+  iconContainer: {
+    width: deviceWidth,
+    height: 60,
+    backgroundColor: 'white',
+    justifyContent: 'space-between',
+    paddingBottom: 20,
+    paddingLeft: 5,
+    paddingRight: 5,
+    flexDirection: 'row',
+  },
+  labelStyle: {
+    fontSize: 24,
+    fontWeight: '700',
+  },
+  headingContainer: {
+
+		marginLeft: 20,
+	},
   heading: {
     color: '#1C254E',
     fontSize: 60,
-    textAlign: 'center',
+    textAlign: 'left',
     fontFamily: 'Ubuntu-Bold',
   },
+  subHeading: {
+    color: '#1C254E',
+    fontSize: 30,
+    textAlign: 'left',
+    fontFamily: 'Ubuntu-Regular',
+  },
+  pricingHeading: {
+    color: 'brown',
+    fontSize: 30,
+    textAlign: 'left',
+    fontFamily: 'Ubuntu-Regular',
+    paddingLeft: 10,
+  },
   icon: {
     alignSelf: 'flex-start',
     marginLeft: '28%',
     flexDirection: 'row',
   },
-  btnNormal: {
+  cardContainer: {
-    borderRadius: 10,
+    flex: 1,
-    height: 45,
+    backgroundColor: 'white',
-    width: 140,
-    backgroundColor: '#1C254E',
     alignItems: 'center',
-    justifyContent: 'center',
+    // justifyContent: 'center',
-  },
-  btnText: {
-    textAlign: 'center',
-    fontSize: 22,
-    color: 'white',
-  },
-  btnPress: {
-    borderRadius: 10,
-    height: 45,
-    width: 140,
-    backgroundColor: '#1C254E',
-    justifyContent: 'center',
-  },
-  input: {
-    height: 60,
-    width: 280,
-    margin: 12,
-    borderRadius: 15,
-    padding: 10,
-    color: 'black',
-    backgroundColor: '#c4c4c4',
-  },
-  inputHeading: {
-    fontSize: 25,
-    margin: 12,
-    justifyContent: 'center',
-    fontFamily: 'Ubuntu-Bold',
-    color: '#1C254E',
-  },
-  dropdownText: {
-    margin: 20,
-    fontSize: 20,
-    fontWeight: 'bold',
   },
 });
 

components/helpers/HouseCard.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import { View, Text, StyleSheet, Dimensions, Image } from 'react-native';
+
+import IconLabel from './IconLabel';
+
+const iconColor = 'white';
+const HouseCard = ({ info }) => {
+  const { name, categories, deliveryTime, distance, image } = info;
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.cardContainer}>
+        <Image style={styles.imageStyle} source={image} />
+        <View style={styles.infoStyle}>
+          <Text style={styles.titleStyle}>{name}</Text>
+
+          <View style={styles.iconLabelStyle}>
+            <IconLabel name="ios-time" label={deliveryTime} color={iconColor} />
+            <IconLabel name="ios-pin" label={distance} color={iconColor} />
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const deviceWidth = Math.round(Dimensions.get('window').width);
+const offset = 40;
+const radius = 20;
+const styles = StyleSheet.create({
+  container: {
+    width: deviceWidth - 20,
+    alignItems: 'center',
+    marginTop: 25,
+  },
+  cardContainer: {
+    width: deviceWidth - offset,
+    backgroundColor: '#1C254E',
+    height: 200,
+    borderRadius: radius,
+
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 5,
+      height: 5,
+    },
+    shadowOpacity: 0.75,
+    shadowRadius: 5,
+    elevation: 9,
+  },
+  imageStyle: {
+    height: 130,
+    width: deviceWidth - offset,
+    borderTopLeftRadius: radius,
+    borderTopRightRadius: radius,
+    opacity: 0.9,
+    alignContent: 'center',
+    alignSelf: 'center',
+  },
+  titleStyle: {
+    fontSize: 20,
+    fontWeight: '800',
+    color: 'white',
+  },
+  categoryStyle: {
+    fontWeight: '200',
+  },
+  infoStyle: {
+    marginHorizontal: 10,
+    marginVertical: 5,
+  },
+  iconLabelStyle: {
+    flexDirection: 'row',
+    marginTop: 10,
+  },
+});
+
+export default HouseCard;

components/helpers/IconLabel.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { Icon } from 'react-native-elements';
+
+const IconLabel = ({ name, label, color }) => {
+  return (
+    <View style={styles.container}>
+      <Icon
+        name={name}
+        type="ionicon"
+        size={14}
+        color={color}
+        style={styles.iconStyle}
+      />
+      <Text style={styles.labelStyle}>{label}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    marginRight: 10,
+    alignItems: 'center',
+  },
+  labelStyle: {
+    fontSize: 12,
+    color: 'white',
+  },
+  iconStyle: {
+    marginRight: 2,
+  },
+});
+
+export default IconLabel;