Skip to content

2
2021-090 frontend
Commit e8c4f50e authored by IT18111170-Silva S.H.I's avatar IT18111170-Silva S.H.I
Browse files
Options

commit: after pp2 update

parent 770ef71c
Show whitespace changes
Inline Side-by-side
Showing with 605 additions and 181 deletions
Navigations/UploadImage.js 0 → 100644
View file @ e8c4f50e
import React, { useState, useEffect } from 'react';
import { Image, View, Platform, TouchableOpacity, Text, StyleSheet } from 'react-native';
import { AntDesign } from '@expo/vector-icons';
import * as ImagePicker from 'expo-image-picker';
export default function UploadImage() {
const [image, setImage] = useState(null);
// const addImage=()=>{};
const addImage = async () => {
let _image = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: true,
aspect: [4,3],
quality: 1,
});
console.log(JSON.stringify(_image.uri))
const uri = (JSON.stringify(_image.uri))
if (!_image.cancelled) {
setImage(_image.uri);
}
return uri
}
return (
<View style={imageUploaderStyles.con}>
{
image && <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />
}
<View style={imageUploaderStyles.uploadBtnContainer}>
<TouchableOpacity onPress={addImage} style={imageUploaderStyles.uploadBtn} >
<Text>{image ? 'Edit' : 'Upload'} Image</Text>
<AntDesign name="camera" size={20} color="black" />
</TouchableOpacity>
</View>
</View>
);
}
const imageUploaderStyles=StyleSheet.create({
con:{
elevation:2,
height:150,
width:150,
backgroundColor:'#efefef',
position:'relative',
borderRadius:999,
overflow:'hidden',
},
uploadBtnContainer:{
opacity:0.7,
position:'absolute',
right:0,
bottom:0,
backgroundColor:'lightgrey',
width:'100%',
height:'25%',
},
uploadBtn:{
display:'flex',
alignItems:"center",
justifyContent:'center'
}
})
\ No newline at end of file
package-lock.json
View file @ e8c4f50e
......@@ -2346,6 +2346,11 @@
"invariant": "^2.2.4"
}
},
"@xmldom/xmldom": {
"version": "0.7.5",
"resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.7.5.tgz",
"integrity": "sha512-V3BIhmY36fXZ1OtVcI9W+FxQqxVLsPKcNjWigIaa81dLC9IolJl5Mt4Cvhmr0flUnjSpTdrbMTSbXqYqV5dT6A=="
},
"abort-controller": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
......@@ -3838,11 +3843,159 @@
"fontfaceobserver": "^2.1.0"
}
},
"expo-image-picker": {
"version": "10.2.3",
"resolved": "https://registry.npmjs.org/expo-image-picker/-/expo-image-picker-10.2.3.tgz",
"integrity": "sha512-8VXLYjclXoQJHbdNLI21rdbnxFisBpZ6TgIifHf9kZ/momFBegUNqEKCjosvxVGVM8f7qaQxJV/znNtW0rDM/w==",
"requires": {
"@expo/config-plugins": "^3.0.0",
"expo-modules-core": "~0.2.0",
"uuid": "7.0.2"
},
"dependencies": {
"@babel/code-frame": {
"version": "7.10.4",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
"integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
"requires": {
"@babel/highlight": "^7.10.4"
}
},
"@expo/config-plugins": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/@expo/config-plugins/-/config-plugins-3.1.0.tgz",
"integrity": "sha512-V5qxaxCAExBM0TXmbU1QKiZcAGP3ecu7KXede8vByT15cro5PkcWu2sSdJCYbHQ/gw6Vf/i8sr8gKlN8V8TSLg==",
"requires": {
"@expo/config-types": "^42.0.0",
"@expo/json-file": "8.2.33",
"@expo/plist": "0.0.14",
"chalk": "^4.1.2",
"debug": "^4.3.1",
"find-up": "~5.0.0",
"fs-extra": "9.0.0",
"getenv": "^1.0.0",
"glob": "7.1.6",
"resolve-from": "^5.0.0",
"semver": "^7.3.5",
"slash": "^3.0.0",
"xcode": "^3.0.1",
"xml2js": "^0.4.23"
}
},
"@expo/config-types": {
"version": "42.0.0",
"resolved": "https://registry.npmjs.org/@expo/config-types/-/config-types-42.0.0.tgz",
"integrity": "sha512-Rj02OMZke2MrGa/1Y/EScmR7VuWbDEHPJyvfFyyLbadUt+Yv6isCdeFzDt71I7gJlPR9T4fzixeYLrtXXOTq0w=="
},
"@expo/json-file": {
"version": "8.2.33",
"resolved": "https://registry.npmjs.org/@expo/json-file/-/json-file-8.2.33.tgz",
"integrity": "sha512-CDnhjdirUs6OdN5hOSTJ2y3i9EiJMk7Z5iDljC5xyCHCrUex7oyI8vbRsZEojAahxZccgL/PrO+CjakiFFWurg==",
"requires": {
"@babel/code-frame": "~7.10.4",
"json5": "^1.0.1",
"write-file-atomic": "^2.3.0"
}
},
"@expo/plist": {
"version": "0.0.14",
"resolved": "https://registry.npmjs.org/@expo/plist/-/plist-0.0.14.tgz",
"integrity": "sha512-bb4Ua1M/OdNgS8KiGdSDUjZ/bbPfv3xdPY/lz8Ctp/adlj/QgB8xA7tVPeqSSfJPZqFRwU0qLCnRhpUOnP51VQ==",
"requires": {
"@xmldom/xmldom": "~0.7.0",
"base64-js": "^1.2.3",
"xmlbuilder": "^14.0.0"
}
},
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
},
"json5": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
"integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
"requires": {
"minimist": "^1.2.0"
}
},
"lru-cache": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
"integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
"requires": {
"yallist": "^4.0.0"
}
},
"semver": {
"version": "7.3.5",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
"integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
"requires": {
"lru-cache": "^6.0.0"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"requires": {
"has-flag": "^4.0.0"
}
},
"uuid": {
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.2.tgz",
"integrity": "sha512-vy9V/+pKG+5ZTYKf+VcphF5Oc6EFiu3W8Nv3P3zIh0EqVI80ZxOzuPfe9EHjkFNvf8+xuTHVeei4Drydlx4zjw=="
},
"yallist": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
"integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
}
}
},
"expo-keep-awake": {
"version": "9.1.2",
"resolved": "https://registry.npmjs.org/expo-keep-awake/-/expo-keep-awake-9.1.2.tgz",
"integrity": "sha512-CCuEOQUNLYtMA0rt0sQ9u5LlIMH7lDJG7dImoorfKMsP95yHXy8dl3oCdtaz2zbsPgggVYeom9gE+gQu+Ki4rQ=="
},
"expo-modules-core": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/expo-modules-core/-/expo-modules-core-0.2.0.tgz",
"integrity": "sha512-inpfZ5X/BaTtbj2wG9PA9AC0MN8VyId6KSRlVuEg7+ziurHBy/kKDFxpOddUokhwiln2uhoYPSStJjR/tKypdw=="
},
"expo-secure-store": {
"version": "10.2.0",
"resolved": "https://registry.npmjs.org/expo-secure-store/-/expo-secure-store-10.2.0.tgz",
......
screen/AboutUs.js
View file @ e8c4f50e
......@@ -25,19 +25,15 @@ export function AboutUs({ navigation }) {
</View>
<Text style={styles.heading}>
What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and
typesetting industry Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s when an unknown printer took a galley of type and
scrambled it to make a type specimen book it has?
Agripreneurs solution Application created by the SLIIT final year Software Engineering undergraduates for the Research.
Appreciated very much everyone who help in every way to make success the Application.
</Text>
<Text style={styles.heading}>
What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and
typesetting industry Lorem Ipsum has been the industry's standard dummy text ever
since the 1500s when an unknown printer took a galley of type and
scrambled it to make a type specimen book it has?
Vision: Empower the entrepreneurs who used the Application. guide them to become success entrepreneurs in their way.
Mission: Hope to build the suceess most famous Agriculture Application in Sri Lanka
</Text>
<Text style={styles.heading2}>
125, Galle road, colombo-3. 0775555555
125, New Kandy road, Malabe. 0775555555
All Right Reserved.
</Text>
</ImageBackground>
......
screen/Leaderboard.js
View file @ e8c4f50e
......@@ -21,38 +21,93 @@ import { FontAwesome } from "@expo/vector-icons";
// }
export function Leaderboard({ navigation, data }) {
export function Leaderboard({ navigation }) {
const [image, setImage] = useState('');
const [data, setData] = useState([]);
// const myRefs = React.useRef([]);
// const [loading, setLoading] = useState(true);
const fetchData = async () => {
// const resp = await fetch("http://192.168.8.126:5000/getDetails", {method:"POST"});
axios({
method: "POST",
url: "http://192.168.8.126:5000/getDetails",
})
.then(function (response) {
// console.log(response.data);
// data = response.data
setData(response.data.message)
})
.catch(function (error) {
console.log(error);
});
// let element;
// console.log(resp)
// for (let i = 0; i < resp.length; i++) {
// element = message[i];
// }
// const data = element
// setData(data);
// setLoading(false);
};
useEffect(() => {
fetchData();
}, []);
return (
// <ImageBackground source={require('../assets/agri.jpg')} style={styles.images}>\
<ScrollView style={styles.container}>
{/* <ImageBackground source={require('../assets/gamification.jpg')} style={styles.images}> */}
{/* {stngobj.map((stngobj) => */}
<TouchableOpacity style={styles.touchable} onPress={() => navigation.navigate('PriceScreen')}>
{data.map((data) =>(
<TouchableOpacity style={styles.touchable} onPress={() => navigation.navigate('PriceScreen', {picture: data.userID.prof_img_name})}>
<View style={styles.card}>
<View style={styles.left}>
{/* <View style={styles.left}>
<FontAwesome name="user-circle-o" size={75} size={75} color="black" />
</View> */}
<View style={styles.con}>
<Text>
{
image && <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />
}
</Text>
</View>
<View style={styles.right}>
<Text >Name: Husmitha Silva</Text>
<Text >Earns: 4500</Text>
<Text >District: Colombo</Text>
<Text >Points: 10</Text>
<Text >Name: {data.userID.name}</Text>
<Text >Earns: {data.earns}</Text>
<Text >District: {data.userID.district}</Text>
<Text >Points: {data.points}</Text>
</View>
</View>
</TouchableOpacity>
))}
{/* )} */}
{/* ) )} */}
<TouchableOpacity style={styles.touchable} onPress={() => navigation.navigate('PriceScreen')}>
<View style={styles.card}>
<View style={styles.left}>
{/* <TouchableOpacity style={styles.touchable} onPress={() => navigation.navigate('PriceScreen')}>
<View style={styles.card}> */}
{/* <View style={styles.left}>
<FontAwesome name="user-circle-o" size={75} size={75} color="black" />
</View> */}
{/* <View style={styles.con}>
<Text>
{
image && <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />
}
</Text>
</View>
<View style={styles.right}>
<Text >Name: Husmitha Silva</Text>
......@@ -61,12 +116,22 @@ export function Leaderboard({ navigation, data }) {
<Text >Points: 10</Text>
</View>
</View>
</TouchableOpacity>
<TouchableOpacity style={styles.touchable} onPress={() => navigation.navigate('PriceScreen')}>
</TouchableOpacity> */}
<View style={styles.card}>
<View style={styles.left}>
{/* <TouchableOpacity style={styles.touchable} onPress={() => navigation.navigate('PriceScreen')}>
<View style={styles.card}> */}
{/* <View style={styles.left}>
<FontAwesome name="user-circle-o" size={75} size={75} color="black" />
</View> */}
{/* <View style={styles.con}>
<Text>
{
image && <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />
}
</Text>
</View>
<View style={styles.right}>
<Text >Name: Husmitha Silva</Text>
......@@ -75,12 +140,22 @@ export function Leaderboard({ navigation, data }) {
<Text >Points: 5</Text>
</View>
</View>
</TouchableOpacity>
<TouchableOpacity style={styles.touchable} onPress={() => navigation.navigate('PriceScreen')}>
</TouchableOpacity> */}
<View style={styles.card}>
<View style={styles.left}>
{/* <TouchableOpacity style={styles.touchable} onPress={() => navigation.navigate('PriceScreen')}>
<View style={styles.card}> */}
{/* <View style={styles.left}>
<FontAwesome name="user-circle-o" size={75} size={75} color="black" />
</View> */}
{/* <View style={styles.con}>
<Text>
{
image && <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />
}
</Text>
</View>
<View style={styles.right}>
<Text >Name: Husmitha Silva</Text>
......@@ -89,7 +164,8 @@ export function Leaderboard({ navigation, data }) {
<Text >Points: 5</Text>
</View>
</View>
</TouchableOpacity>
</TouchableOpacity> */}
{/* </ImageBackground> */}
</ScrollView>
......@@ -99,7 +175,7 @@ export function Leaderboard({ navigation, data }) {
const styles = StyleSheet.create({
container: {
// marginTop:20,
backgroundColor: '#8f8f8f',
backgroundColor: 'white',
flex: 1,
color: '#333',
padding: 10,
......@@ -136,5 +212,17 @@ const styles = StyleSheet.create({
// height: '100%',
height: '100%',
justifyContent: 'center'
},
con:{
elevation:2,
height:100,
width:100,
backgroundColor:'#efefef',
position:'relative',
borderRadius:999,
overflow:'hidden',
justifyContent:"center",
alignItems:"center",
alignSelf:"center"
}
});
screen/PriceScreen.js
View file @ e8c4f50e
......@@ -8,6 +8,7 @@ import {
TouchableOpacity,
ImageBackground,
Alert,
Image
} from "react-native";
import { FontAwesome } from "@expo/vector-icons";
import { FontAwesome5 } from "@expo/vector-icons";
......@@ -19,7 +20,30 @@ import { SignIn } from "./SignIn";
import axios from "axios";
import { BottomTab } from "../Navigations/BottomTab";
export function PriceScreen({ navigation, data }) {
export function PriceScreen({ navigation, data, route }) {
const {picture} = route.params
useEffect(() => {
getImage(picture);
}, []);
function name() {
axios
}
const [image, setImage] = useState('');
//get the token and id from headers
//from the id get the
const getImage = async (name) => {
console.log(name)
const q = name.split(' ').join('+')
const img = await fetch(`http://192.168.8.126:5000/getimage/${name}`)
const image = await img.json();
console.log(image)
setImage(image.previewURL)
}
const [details, setDetails] = useState({
name: "",
district: "",
......@@ -46,21 +70,6 @@ export function PriceScreen({ navigation, data }) {
});
}
};
// const handleEarnsChanged = (val) => {
// if (val.trim().length <= 7) {
// setDetails({
// ...details,
// earns: val,
// isValidearns: true,
// });
// } else {
// setDetails({
// ...details,
// earns: val,
// isValidearns: false,
// });
// }
// };
const handleDistrictChanged = (val) => {
if (val.trim().length >= 4) {
setDetails({
......@@ -121,9 +130,9 @@ export function PriceScreen({ navigation, data }) {
style={styles.images}
>
<View style={styles.editUSer}>
<TouchableOpacity>
{/* <TouchableOpacity>
<FontAwesome5 name="user-edit" size={30} color="black" />
</TouchableOpacity>
</TouchableOpacity> */}
</View>
<View style={styles.secondContainer}>
<View style={styles.SectionStyle}>
......@@ -141,8 +150,16 @@ export function PriceScreen({ navigation, data }) {
User Profile{" "}
</Text>
<View style={{ alignSelf: "center", marginBottom: 30 }}>
{/* <View style={{ alignSelf: "center", marginBottom: 30 }}>
<Ionicons name="person" size={50} color="black" />
</View> */}
<View style={styles.con}>
<Text>
{
<Image source={{ uri: `http://192.168.8.126:5000/getimage/${picture}` }} style={{ width: 200, height: 200 }} />
}
</Text>
</View>
<View style={styles.textinputicon}>
......@@ -225,7 +242,7 @@ export function PriceScreen({ navigation, data }) {
alert("update error")
}) }
>
<Text style={styles.buttonTextStyle}>Save Details</Text>
<Text style={styles.buttonTextStyle}>Update Details</Text>
</TouchableOpacity>
<TouchableOpacity
......@@ -361,6 +378,18 @@ const styles = StyleSheet.create({
},
bottom:{
justifyContent:"flex-end",
marginTop:90
}
marginTop:120
},
con:{
elevation:2,
height:100,
width:100,
backgroundColor:'#efefef',
position:'relative',
borderRadius:999,
overflow:'hidden',
justifyContent:"center",
alignItems:"center",
alignSelf:"center"
},
});
screen/SignUp.js
View file @ e8c4f50e
import React, {useState, useEffect} from 'react';
import { StyleSheet, Button, TextInput, View, Text, TouchableOpacity, ImageBackground } from 'react-native';
import { Formik } from 'formik';
import { Entypo } from '@expo/vector-icons';
import { MaterialIcons } from '@expo/vector-icons';
import { Ionicons } from '@expo/vector-icons';
import axios from 'axios';
import * as yup from 'yup';
import React, { useState, useEffect } from "react";
import {
StyleSheet,
Button,
TextInput,
View,
Text,
TouchableOpacity,
ImageBackground,
Image,
} from "react-native";
import { Formik } from "formik";
import { Entypo } from "@expo/vector-icons";
import { MaterialIcons } from "@expo/vector-icons";
import { Ionicons } from "@expo/vector-icons";
import { AntDesign } from "@expo/vector-icons";
import * as ImagePicker from "expo-image-picker";
// import fs from 'fs'
import axios from "axios";
import * as yup from "yup";
import UploadImage from "../Navigations/UploadImage";
// import * as ImagePicker from 'expo-image-picker';
const reviewSchema = yup.object({
name: yup.string().required().min(2),
email: yup.string().required().min(2),
password: yup.string().required().min(2),
district: yup.string().required().min(2)
})
district: yup.string().required().min(2),
});
export function SignUp({ navigation }) {
const [image, setImage] = useState(null);
const [img] = useState();
// let imgvariable ;
const addImage = async () => {
let _image = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
});
console.log(JSON.stringify(_image.uri));
// imgUri = (JSON.stringify(_image.uri))
const img = JSON.stringify(_image);
if (!_image.cancelled) {
setImage(_image.uri);
}
// imgvariable = img
// console.log(img)
return img;
};
// const [submit, setSubmit] = useEffect();
......@@ -39,17 +76,19 @@ export function SignUp({ navigation }) {
// }
return (
<View style={styles.container}>
<ImageBackground source={require('../assets/signup11.jpg')} style={styles.images}>
<ImageBackground
source={require("../assets/signup11.jpg")}
style={styles.images}
>
<Formik
initialValues={{ name: '', email: '', password: '', district: '' }}
initialValues={{ name: "", email: "", password: "", district: "" }}
validationSchema={reviewSchema}
onSubmit= { (values, actions) => {
onSubmit={(values, actions) => {
// console.log(actions.submitForm())
// await actions.submitForm()
console.log(values);
// console.log(values);
// console.log(image);
// actions.submitForm();
// const valuesToBeSent = JSON.stringify({
// "name": values.name,
......@@ -58,28 +97,39 @@ export function SignUp({ navigation }) {
// "district": values.district,
// })
// console.log("")
const form = new FormData ();
// let imgObj = JSON.parse(image)
// console.log(imgObj)
// const uri = addImage();
form.append("name", values.name)
form.append("email", values.email)
form.append("password", values.password)
form.append("district", values.district)
const form = new FormData();
form.append("name", values.name);
form.append("email", values.email);
form.append("password", values.password);
form.append("district", values.district);
form.append("img", image);
// console.log(typeof img);
console.log(form);
// axios.post('http://192.168.8.126:5000/users', form)
axios({
method:"POST",
method: "POST",
url: "http://192.168.8.126:5000/users",
data: form
data: form,
// headers: {
// "Content-Type": "multipart/form-data",
// },
})
.then(function (response){
console.log("abc" + response)
.then(function (response) {
console.log("abc" + response);
actions.resetForm();
alert("User successfully created")
alert("User successfully created");
navigation.navigate("SignIn")
// return response;
})
.catch(function(error){
console.log(error)
})
.catch(function (error) {
console.log(error);
});
// useEffect(() => {
// axios.post('http://192.168.8.126:5000/users', {
......@@ -96,25 +146,42 @@ export function SignUp({ navigation }) {
// console.log(error)
// })
// })
}}
>
{(props) => (
<View>
<Text style={styles.heading}> Sign Up </Text>
<View style={{alignSelf:'center', marginBottom:30}}>
<Ionicons name="person-add" size={50} color="black" />
</View>
<View style={{ alignSelf: "center", marginBottom: 20 }}>
{/* <Ionicons name="person-add" size={50} color="black" /> */}
{/* <UploadImage/> */}
<View style={styles.con}>
{image && (
<Image
source={{ uri: image }}
style={{ width: 200, height: 200 }}
/>
)}
<View style={styles.uploadBtnContainer}>
<TouchableOpacity
onPress={addImage}
style={styles.uploadBtn}
>
<Text>{image ? "Edit" : "Upload"} Image</Text>
<AntDesign name="camera" size={20} color="black" />
</TouchableOpacity>
</View>
</View>
</View>
<View style={styles.container}>
<View style={styles.iconView}>
<Ionicons name="person" size={24} color="white" />
<TextInput
style={styles.input}
placeholder='Name'
onChangeText={props.handleChange('name')}
placeholder="Name"
onChangeText={props.handleChange("name")}
value={props.values.name}
/>
</View>
......@@ -126,65 +193,62 @@ export function SignUp({ navigation }) {
<MaterialIcons name="email" size={24} color="white" />
<TextInput
style={styles.input}
placeholder='Email'
onChangeText={props.handleChange('email')}
placeholder="Email"
onChangeText={props.handleChange("email")}
value={props.values.email}
/>
</View>
<Text style={styles.errorText}>{props.errors.email}</Text>
</View>
<View style={styles.container}>
<View style={styles.iconView}>
<Entypo name="lock" size={30} color="white" />
<TextInput
style={styles.input}
multiline
placeholder='Password'
onChangeText={props.handleChange('password')}
placeholder="Password"
onChangeText={props.handleChange("password")}
value={props.values.password}
/>
</View>
<Text style={styles.errorText}>{props.errors.password}</Text>
</View>
<View style={styles.container}>
<View style={styles.iconView}>
<Entypo name="location" size={24} color="white" />
<TextInput
style={styles.input}
placeholder='District'
onChangeText={props.handleChange('district')}
placeholder="District"
onChangeText={props.handleChange("district")}
value={props.values.district}
/>
</View>
<Text style={styles.errorText}>{props.errors.district}</Text>
</View>
<View>
<TouchableOpacity style={styles.buttonSub} title="Sign Up" onPress={props.handleSubmit} >
<TouchableOpacity
style={styles.buttonSub}
title="Sign Up"
onPress={props.handleSubmit}
>
<Text style={styles.buttonText}>Sign Up</Text>
</TouchableOpacity>
</View>
</View>
)}
</Formik>
</ImageBackground>
</View >
</View>
);
}
const styles = StyleSheet.create({
input: {
borderWidth: 1,
borderColor: '#ddd',
borderColor: "#ddd",
padding: 10,
// paddingTop: 10,
fontSize: 15,
......@@ -193,29 +257,29 @@ const styles = StyleSheet.create({
marginBottom: 10,
marginLeft: 10,
marginRight: 19,
backgroundColor: 'white',
width: '75%',
height:40
backgroundColor: "white",
width: "75%",
height: 40,
},
heading: {
textAlign: 'center',
color: 'black',
fontWeight: 'bold',
textAlign: "center",
color: "black",
fontWeight: "bold",
padding: 10,
fontSize: 18,
fontSize: 30,
},
container: {
flex: 1,
color: '#333',
color: "#333",
padding: 10,
width: "100%",
// justifyContent: 'flex-start',
alignContent: 'stretch',
alignContent: "stretch",
},
buttonSub: {
width: "85%",
padding: 10,
marginTop: 60,
marginTop: 20,
marginLeft: 30,
marginHorizontal: 10,
backgroundColor: "yellow",
......@@ -226,20 +290,41 @@ const styles = StyleSheet.create({
marginRight: 10,
},
iconView: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
color: 'yellow'
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
color: "yellow",
},
images: {
height: '100%',
justifyContent: 'center'
height: "100%",
justifyContent: "center",
},
container: {
container: {},
errorText: {
color: "black",
alignSelf: "center",
},
con: {
elevation: 2,
height: 150,
width: 150,
backgroundColor: "#efefef",
position: "relative",
borderRadius: 999,
overflow: "hidden",
},
uploadBtnContainer: {
opacity: 0.7,
position: "absolute",
right: 0,
bottom: 0,
backgroundColor: "lightgrey",
width: "100%",
height: "25%",
},
uploadBtn: {
display: "flex",
alignItems: "center",
justifyContent: "center",
},
errorText:{
color:"black",
alignSelf:"center"
}
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment