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

Feature/api integration

See merge request !5

.prettierrc.json

+{
+  "trailingComma":"none",
+  "tabWidth": 4,
+  "semi": true,
+  "singleQuote": false
+}
\ No newline at end of file

App.js

-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 (
-
+    <RootSiblingParent>
       <NavigationContainer>
         <Drawer.Navigator initialRouteName="Authntications">
           <Drawer.Screen name="HOME" component={AuthStack} />
@@ -32,6 +20,7 @@ export default function App() {
         </Drawer.Navigator>
           {/* <HomeScreen/> */}
       </NavigationContainer>
+  </RootSiblingParent>
   );
 }
 

Navigations/AuthStack.js

@@ -25,7 +25,7 @@ export function AuthStack({ navigation }) {
     <Stack.Navigator>
       <Stack.Screen
         name="SignIn"
-        component={SignIn}
+        component={HomeScreen}
         options={{
           // headerLeft: () => {
           //   return (

assets/colors.js

@@ -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

-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

-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

@@ -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

@@ -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

@@ -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

@@ -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",

package.json

@@ -23,6 +23,7 @@
     "expo-splash-screen": "^0.10.2",
     "expo-status-bar": "~1.0.4",
     "formik": "^2.2.9",
+    "moment": "^2.29.1",
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
@@ -31,6 +32,7 @@
     "react-native-image-slideshow": "^1.0.1",
     "react-native-paper": "^4.9.2",
     "react-native-reanimated": "~2.1.0",
+    "react-native-root-toast": "^3.3.0",
     "react-native-safe-area-context": "3.2.0",
     "react-native-screens": "~3.0.0",
     "react-native-svg": "^12.1.1",

screen/Auction.Detail.Screen.js

-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

@@ -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

@@ -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

@@ -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);
+              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
-                    }
+                //     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

 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

-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

-// 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/>