Merge branch 'feature/auction-create-page' into 'dev'

Feature/auction create page

See merge request !4

.gitignore

@@ -11,3 +11,6 @@ web-build/
 
 # macOS
 .DS_Store
+
+#lock files
+yarn.lock

Navigations/AuctionBottomTab.js

@@ -5,7 +5,7 @@ import {
   Text,
   TouchableOpacity,
 } from "react-native";
-import { MaterialIcons, Ionicons } from "@expo/vector-icons";
+import { MaterialIcons } from "@expo/vector-icons";
 import { useNavigation } from '@react-navigation/native';
 import themeColors from "../assets/colors";
 
@@ -13,31 +13,25 @@ export function AuctionBottomTab() {
     const navigation = useNavigation();
     return(
         <View style={styles.bottomBtn}>
-            <TouchableOpacity style={styles.barButtonView}
-             onPress={() => navigation.navigate("AuctionListScreen")}
-             >
-            <Ionicons name="cart" size={24} color={themeColors.PRIMARY_COLOR} />
-                <Text style={styles.iconText}>Buy</Text>
-            </TouchableOpacity>
 
             <TouchableOpacity style={styles.barButtonView}
                 onPress={() => navigation.navigate("UserBidScreen")}
             >
-            <MaterialIcons name="leaderboard" size={24} color={themeColors.PRIMARY_COLOR} />
+            <MaterialIcons name="leaderboard" size={24} color={themeColors.WHITE} />
                 <Text style={styles.iconText}>Bids</Text>
             </TouchableOpacity>
 
             <TouchableOpacity style={styles.barButtonView}
              onPress={() => navigation.navigate("UserAuctionScreen")}
             >
-            <MaterialIcons name="gavel" size={24} color={themeColors.PRIMARY_COLOR} />
+            <MaterialIcons name="gavel" size={24} color={themeColors.WHITE} />
                 <Text style={styles.iconText}>Auctions</Text>
             </TouchableOpacity>
 
             <TouchableOpacity style={styles.barButtonView}
              onPress={() => navigation.navigate("AuctionHomeScreen")}
             >
-            <MaterialIcons name="home" size={24} color={themeColors.PRIMARY_COLOR}  />
+            <MaterialIcons name="home" size={24} color={themeColors.WHITE}  />
                 <Text style={styles.iconText}>Home</Text>
             </TouchableOpacity>
         </View>
@@ -46,17 +40,17 @@ export function AuctionBottomTab() {
 
 const styles = StyleSheet.create({
   iconText: {
-    color: themeColors.PRIMARY_COLOR
+    color: themeColors.WHITE
   },
   bottomBtn:{
-      width:"100%",
     height:60,
     flexDirection:"row",
     justifyContent:"space-between",
-      padding:15,
-      backgroundColor:"white",
+    paddingHorizontal: 30,
+    backgroundColor:themeColors.BLACK,
+    borderTopRightRadius: 30,
+    borderTopLeftRadius: 30,
     alignItems:"center"
-
   },
   barButtonView:{
       marginTop:5,

Navigations/AuthStack.js

@@ -15,6 +15,8 @@ import UserAuctionListScreen from "../screen/User.Auctions.Screen";
 import UserBidScreen from "../screen/User.Bids.Screen";
 import AuctionListScreen from "../screen/Auctions.List.Screen";
 import AuctionDetailScreen from "../screen/Auction.Detail.Screen";
+import UserAuctionCreateScreen from "../screen/User.Auction.Create.Screen";
+import AuctionCameraScreen from "../screen/Auction.Camera.Screen";
 
 const Stack = createStackNavigator();
 
@@ -235,6 +237,24 @@ export function AuthStack({ navigation }) {
           headerTitleAlign: "center"
         }}
       />
+      <Stack.Screen
+        name="AuctionCreateScreen"
+        component={UserAuctionCreateScreen}
+        options={{
+          headerShown: false,
+          title: "Auctions List",
+          headerTitleAlign: "center"
+        }}
+      />
+       <Stack.Screen
+        name="AuctionCameraScreen"
+        component={AuctionCameraScreen}
+        options={{
+          headerShown: false,
+          title: "Auctions List",
+          headerTitleAlign: "center"
+        }}
+      />
       <Stack.Screen
         name="AboutUs"
         component={AboutUs}

assets/colors.js

@@ -3,7 +3,8 @@ const themeColors = {
   SECONDARY_COLOR : '#808080',
   TERTIARY_COLOR : '#CECECE',
   BLACK : '#191919',
-  WHITE : '#FFFFFF'
+  WHITE : '#FFFFFF',
+  RED : '#DC143C'
 };
 
 export default themeColors;

components/auction_item.component.js

@@ -2,6 +2,8 @@ import React from 'react';
 import { StyleSheet, TouchableOpacity, Text, View } from 'react-native';
 import themeColors from '../assets/colors';
 import { MaterialIcons } from '@expo/vector-icons';
+import AppCountDownTimer from './countdown_component';
+
 export const AppAuctionItem = props => {
   return(
     <View>
@@ -9,15 +11,19 @@ export const AppAuctionItem = props => {
       <View style={styles.container}>
         <TouchableOpacity onPress={props.onSelect} style={styles.button}>
           <Text style={styles.label}>{props.label}</Text>
+          <AppCountDownTimer/>
         </TouchableOpacity>
         <TouchableOpacity onPress={props.onDelete} style={styles.delBtn}>
           <MaterialIcons name="delete" size={24} color={themeColors.WHITE} />
         </TouchableOpacity>
       </View>
     ) : (
+      <View style={styles.container}>
         <TouchableOpacity onPress={props.onPress} style={styles.button}>
           <Text style={styles.label}>{props.label}</Text>
+          <AppCountDownTimer/>
         </TouchableOpacity>
+      </View>
     )}
     </View>
 
@@ -35,6 +41,9 @@ const styles = StyleSheet.create({
     fontSize: 16,
     flexGrow: 1,
     marginRight: 10,
+    flexDirection:'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
     backgroundColor: themeColors.PRIMARY_COLOR,
     borderRadius: 20,
     shadowColor: 'rgba(0,0,0, .4)',
@@ -49,6 +58,7 @@ const styles = StyleSheet.create({
     fontSize: 16,
     backgroundColor: themeColors.BLACK,
     borderRadius: 20,
+    justifyContent: 'center',
     shadowColor: 'rgba(0,0,0, .4)',
     shadowOffset: { height: 2, width: 1 },
     shadowOpacity: 1,

components/camera.component.js

+import React, { useState, useRef, useEffect } from 'react';
+import {
+  StyleSheet,
+  Dimensions,
+  View,
+  Text,
+  TouchableOpacity,
+} from 'react-native';
+import { Camera } from 'expo-camera';
+import { AntDesign, MaterialIcons } from '@expo/vector-icons';
+import themeColors from '../assets/colors';
+
+const WINDOW_HEIGHT = Dimensions.get('window').height;
+const CAPTURE_SIZE = Math.floor(WINDOW_HEIGHT * 0.08);
+
+export const AppCamera = (props) => {
+  const cameraRef = useRef();
+  const [hasPermission, setHasPermission] = useState(null);
+  const [cameraType, setCameraType] = useState(Camera.Constants.Type.back);
+  const [isPreview, setIsPreview] = useState(false);
+  const [isCameraReady, setIsCameraReady] = useState(false);
+
+  useEffect(() => {
+    onHandlePermission();
+  }, []);
+
+  const onHandlePermission = async () => {
+    const { status } = await Camera.requestPermissionsAsync();
+    setHasPermission(status === 'granted');
+  };
+
+  const onCameraReady = () => {
+    setIsCameraReady(true);
+  };
+
+  const switchCamera = () => {
+    if (isPreview) {
+      return;
+    }
+    setCameraType(prevCameraType =>
+      prevCameraType === Camera.Constants.Type.back
+        ? Camera.Constants.Type.front
+        : Camera.Constants.Type.back
+    );
+  };
+
+  const onSnap = async () => {
+    if (cameraRef.current) {
+      const options = { quality: 0.7, base64: true };
+      const data = await cameraRef.current.takePictureAsync(options);
+      const source = data.base64;
+
+      if (source) {
+        await cameraRef.current.pausePreview();
+        setIsPreview(true);
+
+        let base64Img = `data:image/jpg;base64,${source}`;
+        let apiUrl =
+          'https://api.cloudinary.com/v1_1/dx8zdylt0/image/upload';
+        let data = {
+          file: base64Img,
+          upload_preset: 'agripreneurs'
+        };
+
+        fetch(apiUrl, {
+          body: JSON.stringify(data),
+          headers: {
+            'content-type': 'application/json'
+          },
+          method: 'POST'
+        })
+          .then(async response => {
+            let data = await response.json();
+            if (data.secure_url) {
+              const imageLink = data.secure_url;
+              props.onAddImage(imageLink);
+            }
+          })
+          .catch(err => {
+            alert('Cannot upload');
+            console.log(err);
+          });
+      }
+    }
+  };
+
+  const cancelPreview = async () => {
+    await cameraRef.current.resumePreview();
+    setIsPreview(false);
+  };
+
+  if (hasPermission === null) {
+    return <View />;
+  }
+  if (hasPermission === false) {
+    return <Text style={styles.text}>No access to camera</Text>;
+  }
+
+  return (
+    <View style={styles.container}>
+      <Camera
+        ref={cameraRef}
+        style={styles.container}
+        type={cameraType}
+        onCameraReady={onCameraReady}
+        useCamera2Api={true}
+      />
+      <View style={styles.container}>
+        {isPreview && (
+          <TouchableOpacity
+            onPress={cancelPreview}
+            style={styles.closeButton}
+            activeOpacity={0.7}
+          >
+            <AntDesign name='close' size={32} color={themeColors.BLACK}/>
+          </TouchableOpacity>
+        )}
+        {!isPreview && (
+          <View style={styles.bottomButtonsContainer}>
+            <TouchableOpacity disabled={!isCameraReady} onPress={switchCamera}>
+              <MaterialIcons name='flip-camera-ios' size={28} color='white' />
+            </TouchableOpacity>
+            <TouchableOpacity
+              activeOpacity={0.7}
+              disabled={!isCameraReady}
+              onPress={onSnap}
+              style={styles.capture}
+            />
+          </View>
+        )}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFillObject
+  },
+  text: {
+    color: themeColors.BLACK
+  },
+  bottomButtonsContainer: {
+    position: 'absolute',
+    flexDirection: 'row',
+    bottom: 28,
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  closeButton: {
+    position: 'absolute',
+    top: 35,
+    right: 20,
+    height: 50,
+    width: 50,
+    borderRadius: 25,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: themeColors.WHITE,
+    opacity: 0.7
+  },
+  capture: {
+    backgroundColor: themeColors.WHITE,
+    borderRadius: 5,
+    height: CAPTURE_SIZE,
+    width: CAPTURE_SIZE,
+    borderRadius: Math.floor(CAPTURE_SIZE / 2),
+    marginBottom: 28,
+    marginHorizontal: 30
+  }
+});

components/carousel.component.js

@@ -79,7 +79,8 @@ export default class AppCarousel extends Component {
           pagingEnabled
           onScroll={
             Animated.event(
-              [{ nativeEvent: { contentOffset: { x: this.animVal } } }]
+              [{ nativeEvent: { contentOffset: { x: this.animVal } } }],
+              {listener: (event) => console.log(event)},
             )
           }
         >

components/countdown_component.js

+import { CountdownCircleTimer } from 'react-native-countdown-circle-timer'
+import React from 'react';
+import {Animated} from 'react-native';
+import themeColors from '../assets/colors';
+
+const AppCountDownTimer = () => (
+  <CountdownCircleTimer
+    isPlaying
+    size={40}
+    strokeWidth={5}
+    duration={10}
+    trailColor={themeColors.WHITE}
+    colors={[
+      [themeColors.BLACK, 0.4],
+      [themeColors.SECONDARY_COLOR, 0.4],
+      [themeColors.RED, 0.2],
+    ]}
+  >
+    {({ remainingTime }) => (
+      <Animated.Text style={{ color: themeColors.WHITE }}>
+        {remainingTime}
+      </Animated.Text>
+    )}
+  </CountdownCircleTimer>
+);
+
+export default AppCountDownTimer
\ No newline at end of file

components/datpicker.component.js

+import React, {useState} from 'react';
+import {View, StyleSheet, Platform} from 'react-native';
+import DateTimePicker from '@react-native-community/datetimepicker';
+
+export const AppDatePicker = () => {
+  const [date, setDate] = useState(new Date());
+  const [mode, setMode] = useState('date');
+  const [show, setShow] = useState(false);
+
+  const onChange = (event, selectedDate) => {
+    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');
+  };
+
+  return (
+    <View style={styles.datepicker}>
+      <DateTimePicker
+        testID="dateTimePicker"
+        value={date}
+        mode={mode}
+        is24Hour={true}
+        display="default"
+        onChange={onChange}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  datepicker:{
+    width: 120,
+  }
+});

components/text_input.component.js

@@ -4,7 +4,7 @@ import themeColors from '../assets/colors';
 
 export const AppTextInput = (props) => {
   return(
-    <TextInput style={styles.input}/>
+    <TextInput style={styles.input} {...props}/>
   )
 }
 
@@ -12,6 +12,7 @@ const styles = StyleSheet.create({
   input:{
     alignItems: "center",
     padding: 10,
+    marginBottom: 20,
     fontSize: 16,
     borderBottomColor: themeColors.SECONDARY_COLOR,
     borderBottomWidth: 1,

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@react-native-community/async-storage": "^1.12.1",
+    "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/masked-view": "0.1.10",
     "@react-navigation/drawer": "^5.12.5",
     "@react-navigation/material-bottom-tabs": "^6.0.5",
@@ -16,6 +17,7 @@
     "@react-navigation/stack": "^5.14.5",
     "axios": "^0.21.4",
     "expo": "~41.0.1",
+    "expo-camera": "^11.2.2",
     "expo-image-picker": "^10.2.3",
     "expo-secure-store": "^10.2.0",
     "expo-splash-screen": "^0.10.2",
@@ -24,12 +26,14 @@
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
+    "react-native-countdown-circle-timer": "^2.5.4",
     "react-native-gesture-handler": "^1.10.3",
     "react-native-image-slideshow": "^1.0.1",
     "react-native-paper": "^4.9.2",
     "react-native-reanimated": "~2.1.0",
     "react-native-safe-area-context": "3.2.0",
     "react-native-screens": "~3.0.0",
+    "react-native-svg": "^12.1.1",
     "react-native-vector-icons": "^8.1.0",
     "react-native-web": "~0.13.12",
     "react-navigation": "^4.4.4",

screen/Auction.Camera.Screen.js

+import React from 'react';
+import { AppCamera } from '../components/camera.component';
+
+const  AuctionCameraScreen =  ({navigation}) => {
+  const handleAddImage = (image) => {
+    navigation.navigate('AuctionCreateScreen', {
+      image: image
+    })
+  }
+  return (
+    <AppCamera onAddImage={(image) => handleAddImage(image)}/>
+  );
+};
+export default AuctionCameraScreen;

screen/Auction.Detail.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 {View, StyleSheet, Text, ScrollView} from 'react-native';
 import { AppStakeItem } from '../components/auction.stake.component';

screen/Auctions.List.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 {View, StyleSheet, Text, ScrollView} from 'react-native';
 import { AppAuctionItem } from '../components/auction_item.component';

screen/Home.Auction.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 {View, StyleSheet, Text, ScrollView} from 'react-native';
 import { AppAuctionItem } from '../components/auction_item.component';

screen/User.Auction.Create.Screen.js

+import React, { useEffect, useState } from 'react';
+import {View, StyleSheet, Text, ScrollView, Image, TouchableOpacity} from 'react-native';
+import { AppContainer } from '../container/container';
+import themeColors from '../assets/colors';
+import { AuctionBottomTab } from '../Navigations/AuctionBottomTab';
+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";
+
+const  UserAuctionCreateScreen =  ({route, navigation}) => {
+  const [image, setImage] = useState('https://via.placeholder.com/50');
+
+  useEffect(() => {
+    if (route.params === undefined) {
+      setImage('https://via.placeholder.com/50')
+    } else {
+      setImage(route.params.image)
+    }
+  }, [])
+
+  return (
+    <View style={styles.container}>
+      <AppContainer>
+        <View style={styles.header}>
+          <Text style={styles.auctionHeading}>Create Auction</Text>
+        </View>
+        <ScrollView>
+          <View>
+            <AppTextInput placeholder='Enter item name'/>
+            <AppTextInput placeholder='Enter item price' keyboardType='numeric'/>
+            <View style={styles.dateContainer}>
+              <Text style={styles.label}>Expire Date</Text>
+             <AppDatePicker/>
+            </View>
+            <Text style={styles.imgLabel}>Item Image</Text>
+            <View style={styles.addImagewrapper}>
+              <View style={styles.imageContainer}>
+                <Image source={{
+                  uri: image,
+                }} style={styles.images}/>
+              </View>
+              <View style={styles.addImageBtnContainer}>
+                <TouchableOpacity style={styles.addImageBtn} onPress={() => {navigation.navigate('AuctionCameraScreen')}}>
+                  <MaterialIcons name="add-a-photo" size={24} color={themeColors.WHITE} />
+                </TouchableOpacity>
+              </View>
+            </View>
+            <AppButton label='Add Item'/>
+          </View>
+      </ScrollView>
+      </AppContainer>
+      <AuctionBottomTab/>
+    </View>
+  );
+};
+export default UserAuctionCreateScreen;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingTop: 30,
+    backgroundColor: '#ffffff'
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    height: 50
+  },
+  auctionHeading: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: themeColors.BLACK,
+  },
+  label: {
+    flex: 1,
+    fontSize: 16,
+    fontWeight: '500',
+    color: themeColors.BLACK,
+    alignSelf: 'center'
+  },
+  imgLabel: {
+    flex: 1,
+    fontSize: 16,
+    fontWeight: '500',
+    marginBottom: 10,
+    color: themeColors.BLACK,
+  },
+  dateContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    marginTop: 20,
+    marginBottom: 40
+  },
+  addBtn:{
+    alignItems: "center",
+    padding: 8,
+    backgroundColor: themeColors.BLACK,
+    borderRadius: 20,
+    shadowColor: 'rgba(0,0,0, .4)',
+    shadowOffset: { height: 2, width: 1 },
+    shadowOpacity: 1,
+    shadowRadius: 1,
+    elevation: 2,
+    height: 33
+  },
+  addImagewrapper : {
+    height: 100,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 20
+  },
+  images: {
+    width: 100,
+    height: 100,
+    borderRadius: 10,
+    resizeMode: 'contain'
+  },
+  imageContainer: {
+    height: 50,
+    marginRight: 50,
+    borderRadius: 50,
+  },
+  addImageBtnContainer: {
+    width: 50,
+    height: 50,
+    borderRadius: 50
+  },
+  addImageBtn: {
+    width: 50,
+    height: 50,
+    borderRadius: 50,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: themeColors.BLACK
+  },
+})
\ No newline at end of file

screen/User.Auctions.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 {View, StyleSheet, Text, ScrollView, TouchableOpacity} from 'react-native';
 import { AppAuctionItem } from '../components/auction_item.component';
@@ -9,23 +5,22 @@ import { AppContainer } from '../container/container';
 import themeColors from '../assets/colors';
 import { AuctionBottomTab } from '../Navigations/AuctionBottomTab';
 import { MaterialIcons } from '@expo/vector-icons';
-const  UserAuctionListScreen =  (props, {navigation}) => {
+
+const  UserAuctionListScreen =  ({navigation}) => {
   return (
     <View style={styles.container}>
       <AppContainer>
         <View style={styles.header}>
           <Text style={styles.auctionHeading}>Auctions List</Text>
-          <TouchableOpacity onPress={props.onPress} style={styles.addBtn}>
+          <TouchableOpacity onPress={() => navigation.navigate("AuctionCreateScreen")} style={styles.addBtn}>
             <MaterialIcons name="add" size={16} color={themeColors.WHITE} />
           </TouchableOpacity>
         </View>
         <ScrollView>
-          <View>
-            <AppAuctionItem label='Auction Item 1' delete onPress = {() => navigation.navigate("SignUp")}/>
+          <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/>
-          </View>
       </ScrollView>
       </AppContainer>
       <AuctionBottomTab/>