From 1ddc94930df7fdb1e8b5ad4f3341bc39dbb762d2 Mon Sep 17 00:00:00 2001
From: Rishabh Singh <ris8645208@gmail.com>
Date: Fri, 7 Oct 2022 01:05:25 +0530
Subject: [PATCH] feat: add post request and list all request & custom header

---
 app/components/CustomDrawer/index.js       |  2 +
 app/components/CustomDrawerHeader/index.js | 27 ++++++++++
 app/context/DataContext/index.js           |  2 +-
 app/navigation/DrawerNavigator/index.js    |  5 +-
 app/screens/Home/index.js                  | 58 +++++++++++++++++++---
 5 files changed, 83 insertions(+), 11 deletions(-)
 create mode 100644 app/components/CustomDrawerHeader/index.js

diff --git a/app/components/CustomDrawer/index.js b/app/components/CustomDrawer/index.js
index 6c2ba7c..7dc625a 100644
--- a/app/components/CustomDrawer/index.js
+++ b/app/components/CustomDrawer/index.js
@@ -27,6 +27,8 @@ const CustomDrawer = (props) => {
                 resizeMode: "contain",
                 borderRadius: 50,
                 backgroundColor: "transparent",
+                borderWidth: 2,
+                borderColor: '#DE2A26'
               }}
             />
 
diff --git a/app/components/CustomDrawerHeader/index.js b/app/components/CustomDrawerHeader/index.js
new file mode 100644
index 0000000..28e3b2f
--- /dev/null
+++ b/app/components/CustomDrawerHeader/index.js
@@ -0,0 +1,27 @@
+import { Box, HStack, IconButton, Text } from 'native-base'
+import React from 'react'
+import { Ionicons } from '@expo/vector-icons';
+
+const CustomDrawerHeader = ({ navigation, title }) => {
+
+
+  return (
+    <Box background='#fff' py='4' px='6'>
+      <HStack alignItems='center'>
+        <IconButton
+          variant='solid'
+          rounded='full'
+          _icon={{
+            as: Ionicons,
+            name: "menu",
+            size: "4xl",
+          }}
+          onPress={() => navigation.openDrawer()}
+        />
+        <Text ml='5' fontFamily='body' fontSize='2xl' fontWeight='600'>{title}</Text>
+      </HStack>
+    </Box>
+  )
+}
+
+export default CustomDrawerHeader
\ No newline at end of file
diff --git a/app/context/DataContext/index.js b/app/context/DataContext/index.js
index 95183f6..da2e16e 100644
--- a/app/context/DataContext/index.js
+++ b/app/context/DataContext/index.js
@@ -23,7 +23,7 @@ const DataContextProvider = ({ children }) => {
   const [appIsReady, setAppIsReady] = useState(false)
   const [profile, setProfile] = useState({});
   const [requests, setRequests] = useState([])
-
+  
   const getRequest = (token) => {
     bloodLineApi.get('/request', {
       headers: {
diff --git a/app/navigation/DrawerNavigator/index.js b/app/navigation/DrawerNavigator/index.js
index cc62f3c..6090419 100644
--- a/app/navigation/DrawerNavigator/index.js
+++ b/app/navigation/DrawerNavigator/index.js
@@ -3,6 +3,7 @@ import CustomDrawer from '../../components/CustomDrawer';
 import Home from '../../screens/Home';
 import PostRequest from '../../screens/PostRequest';
 import { Ionicons } from "@expo/vector-icons";
+import CustomDrawerHeader from '../../components/CustomDrawerHeader';
 
 const Drawer = createDrawerNavigator();
 
@@ -32,7 +33,7 @@ const DrawerNavigator = () => {
     >
       <Drawer.Screen name="Home"
         options={{
-          // headerShown: false,
+          header: (props) => <CustomDrawerHeader {...props} title={'Home'}/>,
           drawerLabel: "Home",
           drawerIcon: ({ color }) => (
             <Ionicons name="home-outline" size={25} color={color} />
@@ -41,7 +42,7 @@ const DrawerNavigator = () => {
         component={Home} />
       <Drawer.Screen name="PostRequest"
         options={{
-          // headerShown: false,
+          header: (props) => <CustomDrawerHeader {...props} title={'Post Request'} />,
           drawerLabel: "Post Request",
           drawerIcon: ({ color }) => (
             <Ionicons name="add-circle-outline" size={25} color={color} />
diff --git a/app/screens/Home/index.js b/app/screens/Home/index.js
index b70f470..767782c 100644
--- a/app/screens/Home/index.js
+++ b/app/screens/Home/index.js
@@ -1,22 +1,64 @@
 import React, { useContext, useEffect } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { heightScreen, widthScreen } from '../../utils/layout';
-import { Box, Button, CloseIcon, HStack, Icon, IconButton, Text, VStack } from 'native-base';
-import { AntDesign } from '@expo/vector-icons';
-import { AuthContext } from '../../context/AuthContext';
-import { useNavigation } from '@react-navigation/native';
+import { Box, Button, CloseIcon, HStack, Divider, Icon, IconButton, Text, VStack, FlatList } from 'native-base';
+import { DataContext } from '../../context/DataContext';
+import * as Linking from 'expo-linking'
 
 
 
 const Home = () => {
 
-  const { user } = useContext(AuthContext)
-  const navigation = useNavigation()
+  const { requests } = useContext(DataContext)
 
   return (
     <View style={styles.container}>
-      <Text>Hello</Text>
-
+      <Box pt='4' pb='4'>
+        <Text fontFamily='body' fontWeight='600' fontSize='xl'
+          px="4" pt="4">
+          List of requests for donations
+        </Text>
+      </Box>
+      <FlatList w='full' contentContainerStyle={{ paddingVertical: 15 }} data={requests} renderItem={({ item }) => {
+        return (
+          <Box border="1" mt='3' mb='3' borderRadius="xl"
+            w='full'
+            borderColor='muted.300' borderWidth='1'>
+            <VStack space="2">
+              <Text fontFamily='body' fontWeight='600' fontSize='lg'
+                px="4" pt="4">
+                {item.name}
+              </Text>
+              <Box px="4">
+                {item.email}
+              </Box>
+              <Box px="4">
+                {item.address}
+              </Box>
+              <Box px="4">
+                {item.city}
+              </Box>
+              <Box px="4">
+                {item.pin}
+              </Box>
+              <Box px='4' pb="4">
+                <Button
+                  size='md'
+                  pl='6'
+                  pr='6'
+                  fontSize='xl'
+                  rounded='xl'
+                  onPress={() => {
+                    Linking.openURL(`https://maps.google.com/maps?q=${item.location.lat},${item.location.long}`)
+                  }}
+                >
+                  Donate
+                </Button>
+              </Box>
+            </VStack>
+          </Box>
+        )
+      }} />
     </View>
   );
 }