Skip to content

2
2021-090 frontend
Commit 647eef54 authored by A.G.J.L.P RAJAPAKSE - IT17023610's avatar A.G.J.L.P RAJAPAKSE - IT17023610
Browse files
Options

Merge branch 'feature/api-integration' into 'dev' 

Feature/api integration

See merge request !5
parents 0c41d522 4d0f1d0a
Hide whitespace changes
Inline Side-by-side
Showing with 332 additions and 121 deletions
.prettierrc.json 0 → 100644
View file @ 647eef54
{
"trailingComma":"none",
"tabWidth": 4,
"semi": true,
"singleQuote": false
}
\ No newline at end of file
App.js
View file @ 647eef54
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { StyleSheet} from 'react-native';
import { NavigationContainer } from "@react-navigation/native";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { homeStack } from "./Navigations/homeStack";
import { AuthStack } from "./Navigations/AuthStack";
import { FontAwesome } from '@expo/vector-icons';
import { AboutUs } from './screen/AboutUs';
// import {HomeScreen} from './screen/HomeScreen';
// import {HomeScreen} from './screen/HomeScreen'
// import {BottomTab} from './Navigations/BottomTab';
// import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import { RootSiblingParent } from 'react-native-root-siblings';
const Drawer = createDrawerNavigator();
// const Tab = createMaterialBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Authntications">
<Drawer.Screen name="HOME" component={AuthStack} />
<Drawer.Screen name="About Us" component={homeStack} />
{/* <Drawer.Screen name="MainTab" component={MainTabScreen} /> */}
{/* <Drawer.Screen name="About Us" component={AboutUs} /> */}
</Drawer.Navigator>
{/* <HomeScreen/> */}
</NavigationContainer>
<RootSiblingParent>
<NavigationContainer>
<Drawer.Navigator initialRouteName="Authntications">
<Drawer.Screen name="HOME" component={AuthStack} />
<Drawer.Screen name="About Us" component={homeStack} />
{/* <Drawer.Screen name="MainTab" component={MainTabScreen} /> */}
{/* <Drawer.Screen name="About Us" component={AboutUs} /> */}
</Drawer.Navigator>
{/* <HomeScreen/> */}
</NavigationContainer>
</RootSiblingParent>
);
}
......
Navigations/AuthStack.js
View file @ 647eef54
......@@ -25,7 +25,7 @@ export function AuthStack({ navigation }) {
<Stack.Navigator>
<Stack.Screen
name="SignIn"
component={SignIn}
component={HomeScreen}
options={{
// headerLeft: () => {
// return (
......
assets/colors.js
View file @ 647eef54
......@@ -4,7 +4,9 @@ const themeColors = {
TERTIARY_COLOR : '#CECECE',
BLACK : '#191919',
WHITE : '#FFFFFF',
RED : '#DC143C'
RED : '#DC143C',
BLUE : '#0066FF',
MAGENTA : "#9000ff"
};
export default themeColors;
components/add_bid_button.component.js
View file @ 647eef54
import React from 'react';
import React, { useState } from 'react';
import { StyleSheet, TouchableOpacity, View, TextInput } from 'react-native';
import themeColors from '../assets/colors';
import { MaterialIcons} from "@expo/vector-icons";
export const AppAddBid = (props) => {
const [bid, setBid] = useState('');
const handleChange = (val) => {
setBid(val);
}
return(
<View style={styles.bidContainer}>
<TextInput style={styles.input} keyboardType='number-pad' placeholder='Enter bid'/>
<TouchableOpacity onPress={props.onPress} style={styles.bid}>
<TextInput
style={styles.input}
keyboardType='number-pad'
placeholder='Enter bid'
onChangeText={(val) => handleChange(val)}/>
<TouchableOpacity onPress={() => props.onPress(bid)} style={styles.bid}>
<MaterialIcons name="add" size={16} color={themeColors.WHITE} />
</TouchableOpacity>
</View>
......
components/auction.stake.component.js
View file @ 647eef54
import React from 'react';
import React, { useEffect, useState } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import themeColors from '../assets/colors';
export const AppStakeItem = (props) => {
const [bid, setBid] = useState({});
const initialValues = {
id : "1",
name : "Saman",
bidprice : 908
}
useEffect(() => {
if (props.bid === undefined) {
setBid(initialValues)
} else {
setBid(props.bid)
}
}, [])
return(
<View style={styles.stake}>
<View style={styles.stakeWrapperEdges}/>
......@@ -17,12 +30,12 @@ export const AppStakeItem = (props) => {
<View style={styles.stakeDetailsContent}>
<View>
<View style={styles.lotTile}>
<Text style={styles.lotText}>62</Text>
<Text style={styles.lotText}>{bid.id}</Text>
</View>
</View>
<View style={styles.lotDetails}>
<Text style={styles.lotName}>William Grey</Text>
<Text style={styles.label}>Rs. 164.00</Text>
<Text style={styles.lotName}>{bid.name}</Text>
<Text style={styles.label}>Rs. {bid.bidprice}</Text>
</View>
</View>
<View style={styles.stakeSideEdges}>
......@@ -45,7 +58,9 @@ const styles = StyleSheet.create({
flexDirection: 'row',
borderRadius: 10,
backgroundColor: themeColors.PRIMARY_COLOR,
marginHorizontal: 10
marginHorizontal: 10,
marginVertical: 10,
height: 120
},
label: {
fontSize: 22,
......
components/auction_item.component.js
View file @ 647eef54
......@@ -3,15 +3,23 @@ import { StyleSheet, TouchableOpacity, Text, View } from 'react-native';
import themeColors from '../assets/colors';
import { MaterialIcons } from '@expo/vector-icons';
import AppCountDownTimer from './countdown_component';
import moment from 'moment';
export const AppAuctionItem = props => {
const end = moment(props.expire)
const start = moment();
const duration = moment.duration(end.diff(start));
let secs = duration.asSeconds();
secs = Math.round(secs);
return(
<View>
{props.delete ? (
<View style={styles.container}>
<TouchableOpacity onPress={props.onSelect} style={styles.button}>
<TouchableOpacity onPress={props.onPress} style={styles.button}>
<Text style={styles.label}>{props.label}</Text>
<AppCountDownTimer/>
<AppCountDownTimer secs={secs}/>
</TouchableOpacity>
<TouchableOpacity onPress={props.onDelete} style={styles.delBtn}>
<MaterialIcons name="delete" size={24} color={themeColors.WHITE} />
......@@ -21,7 +29,7 @@ export const AppAuctionItem = props => {
<View style={styles.container}>
<TouchableOpacity onPress={props.onPress} style={styles.button}>
<Text style={styles.label}>{props.label}</Text>
<AppCountDownTimer/>
<AppCountDownTimer secs={secs}/>
</TouchableOpacity>
</View>
)}
......
components/countdown_component.js
View file @ 647eef54
......@@ -3,25 +3,35 @@ import React from 'react';
import {Animated} from 'react-native';
import themeColors from '../assets/colors';
const AppCountDownTimer = () => (
const renderTime = (time) => {
return (
<Animated.Text style={{ color: themeColors.WHITE }}>
{time}
</Animated.Text>
);
};
const getTimeDays = (time) => (time / 86400) | 0;
const AppCountDownTimer = (props) => {
return (
<CountdownCircleTimer
isPlaying={false}
isPlaying={true}
size={40}
strokeWidth={5}
duration={20}
duration={props.secs}
initialRemainingTime={props.days}
trailColor={themeColors.WHITE}
isLinearGradient
colors={[
[themeColors.BLACK, 0.4],
[themeColors.SECONDARY_COLOR, 0.4],
[themeColors.RED, 0.2],
[themeColors.BLUE, 0],
[themeColors.MAGENTA, 1]
]}
>
{({ remainingTime }) => (
<Animated.Text style={{ color: themeColors.WHITE }}>
{remainingTime}
</Animated.Text>
)}
{({ remainingTime }) =>
renderTime(getTimeDays(remainingTime))
}
</CountdownCircleTimer>
);
)}
export default AppCountDownTimer
\ No newline at end of file
components/datpicker.component.js
View file @ 647eef54
......@@ -2,7 +2,7 @@ import React, {useState} from 'react';
import {View, StyleSheet, Platform} from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';
export const AppDatePicker = () => {
export const AppDatePicker = (props) => {
const [date, setDate] = useState(new Date());
const [mode, setMode] = useState('date');
const [show, setShow] = useState(false);
......@@ -11,19 +11,7 @@ export const AppDatePicker = () => {
const currentDate = selectedDate || date;
setShow(Platform.OS === 'ios');
setDate(currentDate);
};
const showMode = (currentMode) => {
setShow(true);
setMode(currentMode);
};
const showDatepicker = () => {
showMode('date');
};
const showTimepicker = () => {
showMode('time');
props.onDateSelect(currentDate);
};
return (
......
package-lock.json
View file @ 647eef54
......@@ -7245,6 +7245,11 @@
}
}
},
"react-native-countdown-circle-timer": {
"version": "2.5.4",
"resolved": "https://registry.npmjs.org/react-native-countdown-circle-timer/-/react-native-countdown-circle-timer-2.5.4.tgz",
"integrity": "sha512-wiO+s8EwEMfPt4G16zBWGpIiMwEQQRtSv8shgr7m7QkV69tmKlLrHquesYZjGvLNOQhYRAIZPJSf1ZJNZi1FDA=="
},
"react-native-gesture-handler": {
"version": "1.10.3",
"resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.10.3.tgz",
......
screen/Auction.Detail.Screen.js
View file @ 647eef54
import React from 'react';
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import {View, StyleSheet, Text, ScrollView} from 'react-native';
import { AppStakeItem } from '../components/auction.stake.component';
import { AppContainer } from '../container/container';
......@@ -6,8 +7,55 @@ import themeColors from '../assets/colors';
import { AuctionBottomTab } from '../Navigations/AuctionBottomTab';
import AppCarousel from '../components/carousel.component';
import { AppAddBid } from '../components/add_bid_button.component';
import Toast from 'react-native-root-toast';
const AuctionDetailScreen = (props, {navigation}) => {
const AuctionDetailScreen = ({route, navigation}) => {
const [auction, setAuction] = useState({bids: []});
const [bids, setBids] = useState([]);
console.log(route.params.auctionObject.bids);
useEffect(() => {
setAuction(route.params.auctionObject);
}, [])
useEffect(() => {
setBids(auction.bids)
}, [auction])
const handleAddBid = (bidPrice) => {
const bidObj = {
id: 0,
name: auction.name,
owner: auction.owner,
bidprice: bidPrice
}
const url = "http://127.0.0.1:8085/bids/" + auction._id
axios.post(url, bidObj)
.then( async function (response) {
console.log(response.data);
if (response.data.message === 'Created') {
const successMsg = Toast.show('Your bid has been placed successfully', {
duration: Toast.durations.LONG,
});
setTimeout(function hideToast() {
Toast.hide(successMsg);
}, 1000);
navigation.navigate('AuctionHomeScreen');
} else {
const errMsg = Toast.show('Bid Creation Failed', {
duration: Toast.durations.LONG,
});
setTimeout(function hideToast() {
Toast.hide(errMsg);
}, 1000);
}
})
.catch(function (error) {
const errMsg = Toast.show('Bid Creation Failed', {
duration: Toast.durations.LONG,
});
setTimeout(function hideToast() {
Toast.hide(errMsg);
}, 1000);
});
}
return (
<View style={styles.wrapper}>
<View style={styles.header}>
......@@ -16,22 +64,23 @@ const AuctionDetailScreen = (props, {navigation}) => {
<View style={styles.container}>
<AppContainer>
<View style={styles.titleContent}>
<Text style={styles.auctionHeading}>Auction Item</Text>
<Text style={styles.auctionHeading}>{auction.name}</Text>
<View style={styles.lotContainer}>
<Text style={styles.auctionText}>Lot No : </Text>
<View style={styles.lot}><Text style={styles.lotText}>17839</Text></View>
<Text style={styles.auctionText}>Starting Price : </Text>
<View style={styles.lot}><Text style={styles.lotText}>{auction.starting_price}</Text></View>
</View>
</View>
<Text style={styles.auctionText}>Last Stakes</Text>
<ScrollView horizontal style={{height: 100}}>
<View style={styles.stakesContainer}>
<AppStakeItem/>
<AppStakeItem/>
<AppStakeItem/>
<AppStakeItem/>
{bids.map((bid) => {
return(
<AppStakeItem bid={bid} />
)
})}
</View>
</ScrollView>
<AppAddBid/>
<AppAddBid onPress={(bidPrice) => handleAddBid(bidPrice)}/>
</AppContainer>
<AuctionBottomTab/>
</View>
......
screen/Auctions.List.Screen.js
View file @ 647eef54
......@@ -6,16 +6,31 @@ import themeColors from '../assets/colors';
import { AuctionBottomTab } from '../Navigations/AuctionBottomTab';
const AuctionListScreen = ({navigation}) => {
const [auctions, setAuctions] = useState([]);
useEffect(() => {
axios.get("http://127.0.0.1:8085/auctions")
.then( async function (response) {
setAuctions(response.data);
})
.catch(function (error) {
console.log(error);
})
}, [])
return (
<View style={styles.container}>
<AppContainer>
<Text style={styles.auctionHeading}>Auctions List</Text>
<Text style={styles.auctionHeading}>Auctions</Text>
<ScrollView>
<View>
<AppAuctionItem label='Auction Item 1' onPress = {() => navigation.navigate("SignUp")}/>
<AppAuctionItem label='Auction Item 2'/>
<AppAuctionItem label='Auction Item 3'/>
<AppAuctionItem label='Auction Item 4'/>
{auctions.map((auction) => {
return(
<AppAuctionItem label={auction.name} expire={auction.expire_date} onPress = {() =>
navigation.navigate("AuctionDetailScreen", {
auctionObject: auction})
}/>
)
})}
</View>
</ScrollView>
</AppContainer>
......
screen/Home.Auction.Screen.js
View file @ 647eef54
......@@ -9,7 +9,7 @@ import { AuctionBottomTab } from '../Navigations/AuctionBottomTab';
const HomeAuctionScreen = ({navigation}) => {
const [auctions, setAuctions] = useState([]);
useEffect(() => {
axios.get("http://localhost:5000/auctions")
axios.get("http://127.0.0.1:8085/auctions")
.then( async function (response) {
setAuctions(response.data);
})
......@@ -29,7 +29,10 @@ const HomeAuctionScreen = ({navigation}) => {
<View>
{auctions.map((auction) => {
return(
<AppAuctionItem label={auction.name} onPress = {() => navigation.navigate("AuctionDetailScreen")}/>
<AppAuctionItem label={auction.name} expire={auction.expire_date} onPress = {() =>
navigation.navigate("AuctionDetailScreen", {
auctionObject: auction})
}/>
)
})}
</View>
......
screen/SignIn.js
View file @ 647eef54
......@@ -60,7 +60,7 @@ export function SignIn({ navigation }) {
}
};
const form = new FormData ();
form.append("email", data.email)
......@@ -126,27 +126,26 @@ export function SignIn({ navigation }) {
<TouchableOpacity
style={styles.buttonSub}
activeOpacity={0.5}
onPress={ () =>
axios.post("http://192.168.8.126:5000/login", form)
.then( async function (response) {
// const stngobj = JSON.stringify()
console.log(response.data);
// alert("Successfully Logged in");
await SecureStore.setItemAsync("token", response.data.token);
axios.defaults.headers.common = {
authorization : response.data.token
}
onPress={ () => navigation.navigate("HomeScreen") }
// axios.post("http://192.168.8.126:5000/login", form)
// .then( async function (response) {
// // const stngobj = JSON.stringify()
// console.log(response.data);
// // alert("Successfully Logged in");
// await SecureStore.setItemAsync("token", response.data.token);
// axios.defaults.headers.common = {
// authorization : response.data.token
// }
navigation.navigate("HomeScreen")
// navigation.navigate("HomeScreen")
// return response;
})
.catch(function (error) {
console.log(error);
alert("No User Existed")
})
}
// // return response;
// })
// .catch(function (error) {
// console.log(error);
// alert("No User Existed")
// })
>
<Text style={styles.buttonTextStyle}>LOGIN</Text>
{/* <ImageBackground source={require('../assets/loginex.jpg')} style={styles.imagebutton}/> */}
......
screen/User.Auction.Create.Screen.js
View file @ 647eef54
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import {View, StyleSheet, Text, ScrollView, Image, TouchableOpacity} from 'react-native';
import { AppContainer } from '../container/container';
import themeColors from '../assets/colors';
......@@ -7,9 +8,13 @@ import { AppTextInput } from '../components/text_input.component';
import { AppButton } from '../components/button.component';
import { AppDatePicker } from '../components/datpicker.component';
import { MaterialIcons } from "@expo/vector-icons";
import Toast from 'react-native-root-toast';
const UserAuctionCreateScreen = ({route, navigation}) => {
const [image, setImage] = useState('https://via.placeholder.com/50');
const [auctionName, setAuctionName] = useState('');
const [auctionPrice, setAuctionPrice] = useState('');
const [expireDate, setExpireDate] = useState('');
useEffect(() => {
if (route.params === undefined) {
......@@ -19,6 +24,57 @@ const UserAuctionCreateScreen = ({route, navigation}) => {
}
}, [])
const itemNameChange = (itemName) => {
setAuctionName(itemName);
}
const itemPriceChange = (itemPrice) => {
setAuctionPrice(itemPrice);
}
const handleDateChange = (selectedDate) => {
setExpireDate(selectedDate);
}
const handleSubmit = () => {
let auctionObj = {
name: auctionName,
owner: "Pramodh Rajapakse",
bids: [],
starting_price: auctionPrice,
expire_date: expireDate,
images: [image]
}
axios.post("http://127.0.0.1:8085/auctions", auctionObj)
.then( async function (response) {
if (response.data.message === 'Created') {
const successMsg = Toast.show('Your auction has been created successfully', {
duration: Toast.durations.LONG,
});
setTimeout(function hideToast() {
Toast.hide(successMsg);
}, 1000);
navigation.navigate('AuctionHomeScreen');
} else {
const errMsg = Toast.show('Auction Creation Failed', {
duration: Toast.durations.LONG,
});
setTimeout(function hideToast() {
Toast.hide(errMsg);
}, 1000);
}
})
.catch(function (error) {
const errMsg = Toast.show('Auction Creation Failed', {
duration: Toast.durations.LONG,
});
setTimeout(function hideToast() {
Toast.hide(errMsg);
}, 1000);
});
}
return (
<View style={styles.container}>
<AppContainer>
......@@ -27,11 +83,11 @@ const UserAuctionCreateScreen = ({route, navigation}) => {
</View>
<ScrollView>
<View>
<AppTextInput placeholder='Enter item name'/>
<AppTextInput placeholder='Enter item price' keyboardType='numeric'/>
<AppTextInput placeholder='Enter item name' onChangeText={(val) => itemNameChange(val)}/>
<AppTextInput placeholder='Enter item price' onChangeText={(val) => itemPriceChange(val)} keyboardType='numeric'/>
<View style={styles.dateContainer}>
<Text style={styles.label}>Expire Date</Text>
<AppDatePicker/>
<AppDatePicker onDateSelect={handleDateChange}/>
</View>
<Text style={styles.imgLabel}>Item Image</Text>
<View style={styles.addImagewrapper}>
......@@ -46,7 +102,7 @@ const UserAuctionCreateScreen = ({route, navigation}) => {
</TouchableOpacity>
</View>
</View>
<AppButton label='Add Item'/>
<AppButton label='Add Item' onPress={() => handleSubmit()}/>
</View>
</ScrollView>
</AppContainer>
......
screen/User.Auctions.Screen.js
View file @ 647eef54
import React from 'react';
import React, {useState, useEffect} from 'react';
import axios from 'axios';
import {View, StyleSheet, Text, ScrollView, TouchableOpacity} from 'react-native';
import { AppAuctionItem } from '../components/auction_item.component';
import { AppContainer } from '../container/container';
import themeColors from '../assets/colors';
import { AuctionBottomTab } from '../Navigations/AuctionBottomTab';
import { MaterialIcons } from '@expo/vector-icons';
import Toast from 'react-native-root-toast';
const UserAuctionListScreen = ({navigation}) => {
const [auctions, setAuctions] = useState([]);
useEffect(() => {
axios.get("http://127.0.0.1:8085/auctions")
.then( async function (response) {
setAuctions(response.data);
})
.catch(function (error) {
console.log(error);
})
}, [])
const handleDelete = (auctionId) => {
const url = "http://127.0.0.1:8085/auctions/" + auctionId
axios.delete(url)
.then( async function (response) {
if (response.data.message === 'Deleted!!') {
const successMsg = Toast.show('Your auction has been deleted successfully', {
duration: Toast.durations.LONG,
});
setTimeout(function hideToast() {
Toast.hide(successMsg);
}, 1000);
navigation.navigate('AuctionHomeScreen');
} else {
const errMsg = Toast.show('Auction Deletion Failed', {
duration: Toast.durations.LONG,
});
setTimeout(function hideToast() {
Toast.hide(errMsg);
}, 1000);
}
}).catch(function (error) {
const errMsg = Toast.show('Auction Deletion Failed', {
duration: Toast.durations.LONG,
});
setTimeout(function hideToast() {
Toast.hide(errMsg);
}, 1000);
})
}
return (
<View style={styles.container}>
<AppContainer>
......@@ -17,10 +59,16 @@ const UserAuctionListScreen = ({navigation}) => {
</TouchableOpacity>
</View>
<ScrollView>
<AppAuctionItem label='Auction Item 178' delete onSelect = {() => navigation.navigate("AuctionDetailScreen")}/>
<AppAuctionItem label='Auction Item 2' delete/>
<AppAuctionItem label='Auction Item 3' delete/>
<AppAuctionItem label='Auction Item 4' delete/>
{auctions.map((auction) => {
return(
<AppAuctionItem delete label={auction.name} expire={auction.expire_date}
onPress={() =>
navigation.navigate("AuctionDetailScreen", {
auctionObject: auction})
}
onDelete={() => handleDelete(auction._id)}/>
)
})}
</ScrollView>
</AppContainer>
<AuctionBottomTab/>
......
screen/User.Bids.Screen.js
View file @ 647eef54
// Example of Splash, Login and Sign Up in React Native
// https://aboutreact.com/react-native-login-and-signup/
// Import React and Component
import React from 'react';
import React, {useState, useEffect} from 'react';
import axios from 'axios';
import {View, StyleSheet, Text, ScrollView} from 'react-native';
import { AppAuctionItem } from '../components/auction_item.component';
import { AppContainer } from '../container/container';
import themeColors from '../assets/colors';
import { AuctionBottomTab } from '../Navigations/AuctionBottomTab';
import { AppStakeItem } from '../components/auction.stake.component';
const UserBidScreen = ({navigation}) => {
const [bids, setBids] = useState([]);
useEffect(() => {
axios.get("http://127.0.0.1:8085/bids")
.then( async function (response) {
setBids(response.data);
console.log(response.data);
})
.catch(function (error) {
console.log(error);
})
}, [])
return (
<View style={styles.container}>
<AppContainer>
<Text style={styles.auctionHeading}>My Bids</Text>
<ScrollView>
<View>
<AppAuctionItem label='Auction Item 1' onPress = {() => navigation.navigate("SignUp")}/>
<AppAuctionItem label='Auction Item 2'/>
<AppAuctionItem label='Auction Item 3'/>
<AppAuctionItem label='Auction Item 4'/>
</View>
{bids.map((bid) => {
return(
<AppStakeItem bid={bid} />
)
})}
</ScrollView>
</AppContainer>
<AuctionBottomTab/>
......
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