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

Feature/auction home page

See merge request !1

Navigations/AuctionBottomTab.js

+import React from "react";
+import {
+  StyleSheet,
+  View,
+  Text,
+  TouchableOpacity,
+} from "react-native";
+import { MaterialIcons, Ionicons } from "@expo/vector-icons";
+import { useNavigation } from '@react-navigation/native';
+import themeColors from "../assets/colors";
+
+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} />
+                <Text style={styles.iconText}>Bids</Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity style={styles.barButtonView}
+             onPress={() => navigation.navigate("UserAuctionScreen")}
+            >
+            <MaterialIcons name="gavel" size={24} color={themeColors.PRIMARY_COLOR} />
+                <Text style={styles.iconText}>Auctions</Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity style={styles.barButtonView}
+             onPress={() => navigation.navigate("AuctionHomeScreen")}
+            >
+            <MaterialIcons name="home" size={24} color={themeColors.PRIMARY_COLOR}  />
+                <Text style={styles.iconText}>Home</Text>
+            </TouchableOpacity>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+  iconText: {
+    color: themeColors.PRIMARY_COLOR
+  },
+  bottomBtn:{
+      width:"100%",
+      height:60,
+      flexDirection:"row",
+      justifyContent:"space-between",
+      padding:15,
+      backgroundColor:"white",
+      alignItems:"center"
+
+  },
+  barButtonView:{
+      marginTop:5,
+      flexDirection:"column",
+      alignItems:"center"
+  }
+
+})
\ No newline at end of file

Navigations/AuthStack.js

 import React from "react";
 import { createStackNavigator } from "@react-navigation/stack";
-import { Ionicons } from "@expo/vector-icons";
-import { MaterialIcons } from '@expo/vector-icons';
+import { Ionicons, MaterialIcons } from "@expo/vector-icons";
 import { SignIn } from "../screen/SignIn";
 import { SignUp } from "../screen/SignUp";
 import { HomeScreen } from "../screen/HomeScreen";
@@ -11,6 +10,10 @@ import { gamification } from "../screen/gamification";
 import { IotScreen } from "../screen/IotScreen";
 import { AboutUs } from "../screen/AboutUs";
 import axios from "axios";
+import HomeAuctionScreen from  "../screen/Home.Auction.Screen";
+import UserAuctionListScreen from "../screen/User.Auctions.Screen";
+import UserBidScreen from "../screen/User.Bids.Screen";
+import AuctionListScreen from "../screen/Auctions.List.Screen";
 
 const Stack = createStackNavigator();
 
@@ -38,7 +41,7 @@ export function AuthStack({ navigation }) {
           // headerRight: () => {
           //   return (
           //     <MaterialIcons name="logout"
-          //      size={30} 
+          //      size={30}
           //      color="black"
           //       />
           //   );
@@ -84,7 +87,7 @@ export function AuthStack({ navigation }) {
           headerRight: () => {
             return (
               <MaterialIcons name="logout"
-               size={30} 
+               size={30}
                color="black"
                onPress={() => axios.get("http://192.168.8.126:5000/logout", )
                .then(function (response) {
@@ -112,7 +115,7 @@ export function AuthStack({ navigation }) {
           headerRight: () => {
             return (
               <MaterialIcons name="logout"
-               size={30} 
+               size={30}
                color="black"
                onPress={() => axios.get("http://192.168.8.126:5000/logout", )
                .then(function (response) {
@@ -140,7 +143,7 @@ export function AuthStack({ navigation }) {
           headerRight: () => {
             return (
               <MaterialIcons name="logout"
-               size={30} 
+               size={30}
                color="black"
                onPress={() => axios.get("http://192.168.8.126:5000/logout", )
                .then(function (response) {
@@ -168,7 +171,7 @@ export function AuthStack({ navigation }) {
           headerRight: () => {
             return (
               <MaterialIcons name="logout"
-               size={30} 
+               size={30}
                color="black"
                onPress={() => axios.get("http://192.168.8.126:5000/logout", )
                .then(function (response) {
@@ -187,6 +190,41 @@ export function AuthStack({ navigation }) {
           },
         }}
       />
+      <Stack.Screen
+        name="AuctionHomeScreen"
+        component={HomeAuctionScreen}
+        options={{
+          title: "Auctions",
+          headerTitleAlign: "center"
+        }}
+      />
+      <Stack.Screen
+        name="UserAuctionScreen"
+        component={UserAuctionListScreen}
+        options={{
+          headerShown: false,
+          title: "My Auctions",
+          headerTitleAlign: "center"
+        }}
+      />
+      <Stack.Screen
+        name="UserBidScreen"
+        component={UserBidScreen}
+        options={{
+          headerShown: false,
+          title: "My Bids",
+          headerTitleAlign: "center"
+        }}
+      />
+      <Stack.Screen
+        name="AuctionListScreen"
+        component={AuctionListScreen}
+        options={{
+          headerShown: false,
+          title: "Auctions List",
+          headerTitleAlign: "center"
+        }}
+      />
       <Stack.Screen
         name="AboutUs"
         component={AboutUs}

assets/colors.js

+const themeColors = {
+  PRIMARY_COLOR : '#11493E',
+  SECONDARY_COLOR : '#808080',
+  TERTIARY_COLOR : '#CECECE',
+  BLACK : '#191919',
+  WHITE : '#FFFFFF'
+};
+
+export default themeColors;

components/auction_item.component.js

+import React from 'react';
+import { StyleSheet, TouchableOpacity, Text } from 'react-native';
+import themeColors from '../assets/colors';
+
+export const AppAuctionItem = (props) => {
+  return(
+    <TouchableOpacity onPress={props.onPress} style={styles.button}>
+      <Text style={styles.label}>{props.label}</Text>
+    </TouchableOpacity>
+  )
+}
+
+const styles = StyleSheet.create({
+  button:{
+    alignItems: "center",
+    padding: 20,
+    fontSize: 16,
+    backgroundColor: themeColors.TERTIARY_COLOR,
+    borderRadius: 20,
+    shadowColor: 'rgba(0,0,0, .4)',
+    shadowOffset: { height: 2, width: 1 },
+    shadowOpacity: 1,
+    shadowRadius: 1,
+    elevation: 2,
+    marginVertical: 10
+  },
+  label: {
+    fontSize: 20,
+    color: themeColors.WHITE
+  }
+});
+

components/button.component.js

+import React from 'react';
+import { StyleSheet, TouchableOpacity, Text } from 'react-native';
+import themeColors from '../assets/colors';
+
+export const AppButton = (props) => {
+  return(
+    <TouchableOpacity onPress={props.onPress} style={styles.button}>
+      <Text style={styles.label}>{props.label}</Text>
+    </TouchableOpacity>
+  )
+}
+
+const styles = StyleSheet.create({
+  button:{
+    alignItems: "center",
+    padding: 10,
+    fontSize: 16,
+    backgroundColor: themeColors.PRIMARY_COLOR,
+    borderRadius: 20,
+    shadowColor: 'rgba(0,0,0, .4)',
+    shadowOffset: { height: 2, width: 1 },
+    shadowOpacity: 1,
+    shadowRadius: 1,
+    elevation: 2,
+    marginVertical: 10
+  },
+  label: {
+    fontSize: 20,
+    color: themeColors.WHITE
+  }
+});
+

components/icon_button.component.js

+import React from 'react';
+import { StyleSheet, TouchableOpacity, Text } from 'react-native';
+import themeColors from '../assets/colors';
+
+export const AppIconButton = (props) => {
+  return(
+    <TouchableOpacity onPress={props.onPress} style={styles.button}>
+      <Text style={styles.label}>{props.label}</Text>
+    </TouchableOpacity>
+  )
+}
+
+const styles = StyleSheet.create({
+  button:{
+    alignItems: "center",
+    justifyContent: 'center',
+    padding: 10,
+    fontSize: 16,
+    width: 150,
+    height: 55,
+    backgroundColor: themeColors.BLACK,
+    borderRadius: 20,
+    shadowColor: 'rgba(0,0,0, .4)',
+    shadowOffset: { height: 2, width: 1 },
+    shadowOpacity: 1,
+    shadowRadius: 1,
+    elevation: 2,
+    marginHorizontal: 10
+  },
+  label: {
+    fontSize: 20,
+    color: themeColors.WHITE
+  }
+});
+

components/text_input.component.js

+import React from 'react';
+import { StyleSheet, TextInput } from 'react-native';
+import themeColors from '../assets/colors';
+
+export const AppTextInput = (props) => {
+  return(
+    <TextInput style={styles.input}/>
+  )
+}
+
+const styles = StyleSheet.create({
+  input:{
+    alignItems: "center",
+    padding: 10,
+    fontSize: 16,
+    borderBottomColor: themeColors.SECONDARY_COLOR,
+    borderBottomWidth: 1,
+  },
+  Text: {
+    fontFamily: 'Poppins-Black',
+    fontSize: 22,
+    color: themeColors.WHITE
+  }
+});
+

container/container.js

+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+export const AppContainer = (props) => {
+  return(
+    <View style={styles.container}>
+      {props.children}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container:{
+    flex: 1,
+    marginHorizontal: 20
+  }
+});
+

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';
+import { AppContainer } from '../container/container';
+import themeColors from '../assets/colors';
+import { AuctionBottomTab } from '../Navigations/AuctionBottomTab';
+
+const  AuctionListScreen =  ({navigation}) => {
+  return (
+    <View style={styles.container}>
+      <AppContainer>
+        <Text style={styles.auctionHeading}>Auctions List</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>
+      </ScrollView>
+      </AppContainer>
+      <AuctionBottomTab/>
+    </View>
+  );
+};
+export default AuctionListScreen;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#ffffff'
+  },
+  header: {
+    height: '35%',
+    marginBottom: 25,
+    backgroundColor : themeColors.PRIMARY_COLOR
+  },
+  btnRowContainer: {
+    maxHeight: 100
+  },
+  contentContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    margin: 20
+  },
+  auctionHeading: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: themeColors.SECONDARY_COLOR
+  }
+})
\ No newline at end of file

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';
+import { AppContainer } from '../container/container';
+import themeColors from '../assets/colors';
+import { AuctionBottomTab } from '../Navigations/AuctionBottomTab';
+
+const  HomeAuctionScreen =  ({navigation}) => {
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}/>
+      <AppContainer>
+        <Text style={styles.auctionHeading}>Auctions List</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>
+      </ScrollView>
+      </AppContainer>
+      <AuctionBottomTab/>
+    </View>
+  );
+};
+export default HomeAuctionScreen;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#ffffff'
+  },
+  header: {
+    height: '35%',
+    marginBottom: 25,
+    backgroundColor : themeColors.PRIMARY_COLOR
+  },
+  btnRowContainer: {
+    maxHeight: 100
+  },
+  contentContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    margin: 20
+  },
+  auctionHeading: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: themeColors.SECONDARY_COLOR
+  }
+})
\ No newline at end of file

screen/HomeScreen.js

@@ -61,7 +61,7 @@ export function HomeScreen({ navigation }) {
         <View>
           <TouchableOpacity
             style={styles.Auction}
-            onPress={() => navigation.navigate("gamification")}
+            onPress={() => navigation.navigate("AuctionHomeScreen")}
           >
             <Ionicons name="game-controller" size={24} color="black" />
             <Text style={styles.buttonText}>Auction</Text>
@@ -92,7 +92,7 @@ export function HomeScreen({ navigation }) {
         </View>
 
         </View>
-{/* 
+{/*
         <Text style={styles.heading}>
         AGRIPRENEURS. Agriculture solution provider.
         </Text>

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} 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';
+
+const  UserAuctionListScreen =  ({navigation}) => {
+  return (
+    <View style={styles.container}>
+      <AppContainer>
+        <Text style={styles.auctionHeading}>Auctions List</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>
+      </ScrollView>
+      </AppContainer>
+      <AuctionBottomTab/>
+    </View>
+  );
+};
+export default UserAuctionListScreen;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#ffffff'
+  },
+  header: {
+    height: '35%',
+    marginBottom: 25,
+    backgroundColor : themeColors.PRIMARY_COLOR
+  },
+  btnRowContainer: {
+    maxHeight: 100
+  },
+  contentContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    margin: 20
+  },
+  auctionHeading: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: themeColors.SECONDARY_COLOR
+  }
+})
\ No newline at end of file

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 {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';
+
+const  UserBidScreen =  ({navigation}) => {
+  return (
+    <View style={styles.container}>
+      <AppContainer>
+        <Text style={styles.auctionHeading}>Auctions List</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>
+      </ScrollView>
+      </AppContainer>
+      <AuctionBottomTab/>
+    </View>
+  );
+};
+export default UserBidScreen;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#ffffff'
+  },
+  header: {
+    height: '35%',
+    marginBottom: 25,
+    backgroundColor : themeColors.PRIMARY_COLOR
+  },
+  btnRowContainer: {
+    maxHeight: 100
+  },
+  contentContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    margin: 20
+  },
+  auctionHeading: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: themeColors.SECONDARY_COLOR
+  }
+})
\ No newline at end of file