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
Hide 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 @@ ...@@ -2346,6 +2346,11 @@
"invariant": "^2.2.4" "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": { "abort-controller": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz", "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
...@@ -3838,11 +3843,159 @@ ...@@ -3838,11 +3843,159 @@
"fontfaceobserver": "^2.1.0" "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": { "expo-keep-awake": {
"version": "9.1.2", "version": "9.1.2",
"resolved": "https://registry.npmjs.org/expo-keep-awake/-/expo-keep-awake-9.1.2.tgz", "resolved": "https://registry.npmjs.org/expo-keep-awake/-/expo-keep-awake-9.1.2.tgz",
"integrity": "sha512-CCuEOQUNLYtMA0rt0sQ9u5LlIMH7lDJG7dImoorfKMsP95yHXy8dl3oCdtaz2zbsPgggVYeom9gE+gQu+Ki4rQ==" "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": { "expo-secure-store": {
"version": "10.2.0", "version": "10.2.0",
"resolved": "https://registry.npmjs.org/expo-secure-store/-/expo-secure-store-10.2.0.tgz", "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 }) { ...@@ -25,19 +25,15 @@ export function AboutUs({ navigation }) {
</View> </View>
<Text style={styles.heading}> <Text style={styles.heading}>
What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and Agripreneurs solution Application created by the SLIIT final year Software Engineering undergraduates for the Research.
typesetting industry Lorem Ipsum has been the industry's standard dummy text ever Appreciated very much everyone who help in every way to make success the Application.
since the 1500s when an unknown printer took a galley of type and
scrambled it to make a type specimen book it has?
</Text> </Text>
<Text style={styles.heading}> <Text style={styles.heading}>
What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and Vision: Empower the entrepreneurs who used the Application. guide them to become success entrepreneurs in their way.
typesetting industry Lorem Ipsum has been the industry's standard dummy text ever Mission: Hope to build the suceess most famous Agriculture Application in Sri Lanka
since the 1500s when an unknown printer took a galley of type and
scrambled it to make a type specimen book it has?
</Text> </Text>
<Text style={styles.heading2}> <Text style={styles.heading2}>
125, Galle road, colombo-3. 0775555555 125, New Kandy road, Malabe. 0775555555
All Right Reserved. All Right Reserved.
</Text> </Text>
</ImageBackground> </ImageBackground>
......
screen/Leaderboard.js
View file @ e8c4f50e
...@@ -21,38 +21,93 @@ import { FontAwesome } from "@expo/vector-icons"; ...@@ -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 ( return (
// <ImageBackground source={require('../assets/agri.jpg')} style={styles.images}>\
<ScrollView style={styles.container}> <ScrollView style={styles.container}>
{/* <ImageBackground source={require('../assets/gamification.jpg')} style={styles.images}> */} {/* <ImageBackground source={require('../assets/gamification.jpg')} style={styles.images}> */}
{/* {stngobj.map((stngobj) => */} {data.map((data) =>(
<TouchableOpacity style={styles.touchable} onPress={() => navigation.navigate('PriceScreen')}>
<TouchableOpacity style={styles.touchable} onPress={() => navigation.navigate('PriceScreen', {picture: data.userID.prof_img_name})}>
<View style={styles.card}> <View style={styles.card}>
<View style={styles.left}> {/* <View style={styles.left}>
<FontAwesome name="user-circle-o" size={75} size={75} color="black" /> <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>
<View style={styles.right}> <View style={styles.right}>
<Text >Name: Husmitha Silva</Text> <Text >Name: {data.userID.name}</Text>
<Text >Earns: 4500</Text> <Text >Earns: {data.earns}</Text>
<Text >District: Colombo</Text> <Text >District: {data.userID.district}</Text>
<Text >Points: 10</Text> <Text >Points: {data.points}</Text>
</View> </View>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
))}
{/* ) )} */}
{/* )} */} {/* <TouchableOpacity style={styles.touchable} onPress={() => navigation.navigate('PriceScreen')}>
<TouchableOpacity style={styles.touchable} onPress={() => navigation.navigate('PriceScreen')}>
<View style={styles.card}> <View style={styles.card}> */}
<View style={styles.left}> {/* <View style={styles.left}>
<FontAwesome name="user-circle-o" size={75} size={75} color="black" /> <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>
<View style={styles.right}> <View style={styles.right}>
<Text >Name: Husmitha Silva</Text> <Text >Name: Husmitha Silva</Text>
...@@ -61,12 +116,22 @@ export function Leaderboard({ navigation, data }) { ...@@ -61,12 +116,22 @@ export function Leaderboard({ navigation, data }) {
<Text >Points: 10</Text> <Text >Points: 10</Text>
</View> </View>
</View> </View>
</TouchableOpacity> </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" /> <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>
<View style={styles.right}> <View style={styles.right}>
<Text >Name: Husmitha Silva</Text> <Text >Name: Husmitha Silva</Text>
...@@ -75,12 +140,22 @@ export function Leaderboard({ navigation, data }) { ...@@ -75,12 +140,22 @@ export function Leaderboard({ navigation, data }) {
<Text >Points: 5</Text> <Text >Points: 5</Text>
</View> </View>
</View> </View>
</TouchableOpacity> </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" /> <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>
<View style={styles.right}> <View style={styles.right}>
<Text >Name: Husmitha Silva</Text> <Text >Name: Husmitha Silva</Text>
...@@ -89,7 +164,8 @@ export function Leaderboard({ navigation, data }) { ...@@ -89,7 +164,8 @@ export function Leaderboard({ navigation, data }) {
<Text >Points: 5</Text> <Text >Points: 5</Text>
</View> </View>
</View> </View>
</TouchableOpacity> </TouchableOpacity> */}
{/* </ImageBackground> */} {/* </ImageBackground> */}
</ScrollView> </ScrollView>
...@@ -99,7 +175,7 @@ export function Leaderboard({ navigation, data }) { ...@@ -99,7 +175,7 @@ export function Leaderboard({ navigation, data }) {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
// marginTop:20, // marginTop:20,
backgroundColor: '#8f8f8f', backgroundColor: 'white',
flex: 1, flex: 1,
color: '#333', color: '#333',
padding: 10, padding: 10,
...@@ -136,5 +212,17 @@ const styles = StyleSheet.create({ ...@@ -136,5 +212,17 @@ const styles = StyleSheet.create({
// height: '100%', // height: '100%',
height: '100%', height: '100%',
justifyContent: 'center' 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
...@@ -7,7 +7,8 @@ import { ...@@ -7,7 +7,8 @@ import {
Text, Text,
TouchableOpacity, TouchableOpacity,
ImageBackground, ImageBackground,
Alert, Alert,
Image
} from "react-native"; } from "react-native";
import { FontAwesome } from "@expo/vector-icons"; import { FontAwesome } from "@expo/vector-icons";
import { FontAwesome5 } from "@expo/vector-icons"; import { FontAwesome5 } from "@expo/vector-icons";
...@@ -19,7 +20,30 @@ import { SignIn } from "./SignIn"; ...@@ -19,7 +20,30 @@ import { SignIn } from "./SignIn";
import axios from "axios"; import axios from "axios";
import { BottomTab } from "../Navigations/BottomTab"; 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({ const [details, setDetails] = useState({
name: "", name: "",
district: "", district: "",
...@@ -46,21 +70,6 @@ export function PriceScreen({ navigation, data }) { ...@@ -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) => { const handleDistrictChanged = (val) => {
if (val.trim().length >= 4) { if (val.trim().length >= 4) {
setDetails({ setDetails({
...@@ -121,9 +130,9 @@ export function PriceScreen({ navigation, data }) { ...@@ -121,9 +130,9 @@ export function PriceScreen({ navigation, data }) {
style={styles.images} style={styles.images}
> >
<View style={styles.editUSer}> <View style={styles.editUSer}>
<TouchableOpacity> {/* <TouchableOpacity>
<FontAwesome5 name="user-edit" size={30} color="black" /> <FontAwesome5 name="user-edit" size={30} color="black" />
</TouchableOpacity> </TouchableOpacity> */}
</View> </View>
<View style={styles.secondContainer}> <View style={styles.secondContainer}>
<View style={styles.SectionStyle}> <View style={styles.SectionStyle}>
...@@ -141,8 +150,16 @@ export function PriceScreen({ navigation, data }) { ...@@ -141,8 +150,16 @@ export function PriceScreen({ navigation, data }) {
User Profile{" "} User Profile{" "}
</Text> </Text>
<View style={{ alignSelf: "center", marginBottom: 30 }}> {/* <View style={{ alignSelf: "center", marginBottom: 30 }}>
<Ionicons name="person" size={50} color="black" /> <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>
<View style={styles.textinputicon}> <View style={styles.textinputicon}>
...@@ -225,7 +242,7 @@ export function PriceScreen({ navigation, data }) { ...@@ -225,7 +242,7 @@ export function PriceScreen({ navigation, data }) {
alert("update error") alert("update error")
}) } }) }
> >
<Text style={styles.buttonTextStyle}>Save Details</Text> <Text style={styles.buttonTextStyle}>Update Details</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity <TouchableOpacity
...@@ -361,6 +378,18 @@ const styles = StyleSheet.create({ ...@@ -361,6 +378,18 @@ const styles = StyleSheet.create({
}, },
bottom:{ bottom:{
justifyContent:"flex-end", 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 React, { useState, useEffect } from "react";
import { StyleSheet, Button, TextInput, View, Text, TouchableOpacity, ImageBackground } from 'react-native'; import {
import { Formik } from 'formik'; StyleSheet,
import { Entypo } from '@expo/vector-icons'; Button,
import { MaterialIcons } from '@expo/vector-icons'; TextInput,
import { Ionicons } from '@expo/vector-icons'; View,
import axios from 'axios'; Text,
import * as yup from 'yup'; 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({ const reviewSchema = yup.object({
name: yup.string().required().min(2), name: yup.string().required().min(2),
email: yup.string().required().min(2), email: yup.string().required().min(2),
password: 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 }) { 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(); // const [submit, setSubmit] = useEffect();
// function handleSubmit() // function handleSubmit()
// { // {
// useEffect(() => { // useEffect(() => {
// axios.post('http://192.168.8.126:5000/users', { // axios.post('http://192.168.8.126:5000/users', {
// district: values.district, // district: values.district,
// email: values.email, // email: values.email,
// name: values.name, // name: values.name,
// password: values.password, // password: values.password,
// }) // })
// .then(function (response){ // .then(function (response){
// console.log(response + "logged") // console.log(response + "logged")
// // return response; // // return response;
// }) // })
// .catch(function(error){ // .catch(function(error){
// console.log(error) // console.log(error)
// }) // })
// }) // })
// } // }
return ( return (
<View style={styles.container}> <View style={styles.container}>
<ImageBackground source={require('../assets/signup11.jpg')} style={styles.images}> <ImageBackground
source={require("../assets/signup11.jpg")}
style={styles.images}
>
<Formik <Formik
initialValues={{ name: '', email: '', password: '', district: '' }} initialValues={{ name: "", email: "", password: "", district: "" }}
validationSchema={reviewSchema} validationSchema={reviewSchema}
onSubmit={(values, actions) => {
onSubmit= { (values, actions) => {
// console.log(actions.submitForm()) // console.log(actions.submitForm())
// await actions.submitForm() // await actions.submitForm()
console.log(values); // console.log(values);
// console.log(image);
// actions.submitForm(); // actions.submitForm();
// const valuesToBeSent = JSON.stringify({ // const valuesToBeSent = JSON.stringify({
// "name": values.name, // "name": values.name,
...@@ -58,133 +97,158 @@ export function SignUp({ navigation }) { ...@@ -58,133 +97,158 @@ export function SignUp({ navigation }) {
// "district": values.district, // "district": values.district,
// }) // })
// console.log("") // console.log("")
const form = new FormData (); // let imgObj = JSON.parse(image)
// console.log(imgObj)
form.append("name", values.name) // const uri = addImage();
form.append("email", values.email)
form.append("password", values.password) const form = new FormData();
form.append("district", values.district)
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({ axios({
method:"POST", method: "POST",
url: "http://192.168.8.126:5000/users", url: "http://192.168.8.126:5000/users",
data: form data: form,
}) // headers: {
.then(function (response){ // "Content-Type": "multipart/form-data",
console.log("abc" + response) // },
actions.resetForm();
alert("User successfully created")
// return response;
}) })
.catch(function(error){ .then(function (response) {
console.log(error) console.log("abc" + response);
}) actions.resetForm();
alert("User successfully created");
navigation.navigate("SignIn")
// return response;
})
.catch(function (error) {
console.log(error);
});
// useEffect(() => { // useEffect(() => {
// axios.post('http://192.168.8.126:5000/users', { // axios.post('http://192.168.8.126:5000/users', {
// district: values.district, // district: values.district,
// email: values.email, // email: values.email,
// name: values.name, // name: values.name,
// password: values.password, // password: values.password,
// }) // })
// .then(function (response){ // .then(function (response){
// console.log(response + "logged") // console.log(response + "logged")
// // return response; // // return response;
// }) // })
// .catch(function(error){ // .catch(function(error){
// console.log(error) // console.log(error)
// }) // })
// }) // })
}}
}}
> >
{(props) => ( {(props) => (
<View> <View>
<Text style={styles.heading}> Sign Up </Text> <Text style={styles.heading}> Sign Up </Text>
<View style={{alignSelf:'center', marginBottom:30}}> <View style={{ alignSelf: "center", marginBottom: 20 }}>
<Ionicons name="person-add" size={50} color="black" /> {/* <Ionicons name="person-add" size={50} color="black" /> */}
</View> {/* <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.container}>
<View style={styles.iconView}> <View style={styles.iconView}>
<Ionicons name="person" size={24} color="white" /> <Ionicons name="person" size={24} color="white" />
<TextInput <TextInput
style={styles.input} style={styles.input}
placeholder='Name' placeholder="Name"
onChangeText={props.handleChange('name')} onChangeText={props.handleChange("name")}
value={props.values.name} value={props.values.name}
/> />
</View> </View>
<Text style={styles.errorText}>{props.errors.name}</Text> <Text style={styles.errorText}>{props.errors.name}</Text>
</View> </View>
<View style={styles.container}> <View style={styles.container}>
<View style={styles.iconView}> <View style={styles.iconView}>
<MaterialIcons name="email" size={24} color="white" /> <MaterialIcons name="email" size={24} color="white" />
<TextInput <TextInput
style={styles.input} style={styles.input}
placeholder='Email' placeholder="Email"
onChangeText={props.handleChange('email')} onChangeText={props.handleChange("email")}
value={props.values.email} value={props.values.email}
/> />
</View> </View>
<Text style={styles.errorText}>{props.errors.email}</Text> <Text style={styles.errorText}>{props.errors.email}</Text>
</View> </View>
<View style={styles.container}> <View style={styles.container}>
<View style={styles.iconView}> <View style={styles.iconView}>
<Entypo name="lock" size={30} color="white" /> <Entypo name="lock" size={30} color="white" />
<TextInput <TextInput
style={styles.input} style={styles.input}
multiline multiline
placeholder='Password' placeholder="Password"
onChangeText={props.handleChange('password')} onChangeText={props.handleChange("password")}
value={props.values.password} value={props.values.password}
/> />
</View> </View>
<Text style={styles.errorText}>{props.errors.password}</Text> <Text style={styles.errorText}>{props.errors.password}</Text>
</View> </View>
<View style={styles.container}> <View style={styles.container}>
<View style={styles.iconView}> <View style={styles.iconView}>
<Entypo name="location" size={24} color="white" /> <Entypo name="location" size={24} color="white" />
<TextInput <TextInput
style={styles.input} style={styles.input}
placeholder='District' placeholder="District"
onChangeText={props.handleChange('district')} onChangeText={props.handleChange("district")}
value={props.values.district} value={props.values.district}
/> />
</View> </View>
<Text style={styles.errorText}>{props.errors.district}</Text> <Text style={styles.errorText}>{props.errors.district}</Text>
</View> </View>
<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> <Text style={styles.buttonText}>Sign Up</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
)} )}
</Formik> </Formik>
</ImageBackground> </ImageBackground>
</View > </View>
); );
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
input: { input: {
borderWidth: 1, borderWidth: 1,
borderColor: '#ddd', borderColor: "#ddd",
padding: 10, padding: 10,
// paddingTop: 10, // paddingTop: 10,
fontSize: 15, fontSize: 15,
...@@ -193,29 +257,29 @@ const styles = StyleSheet.create({ ...@@ -193,29 +257,29 @@ const styles = StyleSheet.create({
marginBottom: 10, marginBottom: 10,
marginLeft: 10, marginLeft: 10,
marginRight: 19, marginRight: 19,
backgroundColor: 'white', backgroundColor: "white",
width: '75%', width: "75%",
height:40 height: 40,
}, },
heading: { heading: {
textAlign: 'center', textAlign: "center",
color: 'black', color: "black",
fontWeight: 'bold', fontWeight: "bold",
padding: 10, padding: 10,
fontSize: 18, fontSize: 30,
}, },
container: { container: {
flex: 1, flex: 1,
color: '#333', color: "#333",
padding: 10, padding: 10,
width: "100%", width: "100%",
// justifyContent: 'flex-start', // justifyContent: 'flex-start',
alignContent: 'stretch', alignContent: "stretch",
}, },
buttonSub: { buttonSub: {
width: "85%", width: "85%",
padding: 10, padding: 10,
marginTop: 60, marginTop: 20,
marginLeft: 30, marginLeft: 30,
marginHorizontal: 10, marginHorizontal: 10,
backgroundColor: "yellow", backgroundColor: "yellow",
...@@ -226,20 +290,41 @@ const styles = StyleSheet.create({ ...@@ -226,20 +290,41 @@ const styles = StyleSheet.create({
marginRight: 10, marginRight: 10,
}, },
iconView: { iconView: {
flexDirection: 'row', flexDirection: "row",
justifyContent: 'center', justifyContent: "center",
alignItems: 'center', alignItems: "center",
color: 'yellow' color: "yellow",
}, },
images: { images: {
height: '100%', height: "100%",
justifyContent: 'center' 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"
}
});
\ No newline at end of file
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