auction list props added

assets/colors.js

@@ -4,7 +4,8 @@ const themeColors = {
   TERTIARY_COLOR : '#CECECE',
   BLACK : '#191919',
   WHITE : '#FFFFFF',
-  RED : '#DC143C'
+  RED : '#DC143C',
+  BLUE : '#0066FF'
 };
 
 export default themeColors;

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}>
           <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,36 @@ 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.BLACK, 0],
       [themeColors.SECONDARY_COLOR, 0.4],
-      [themeColors.RED, 0.2],
+      [themeColors.RED, 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

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

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,7 @@ 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")}/>
               )
             })}
           </View>