Added Donation list tab in navigation bar that lets you view items in…

… donation cart with chnage quantity and remove item functionalities

navigation/DonorStack/DonationList/index.tsx

@@ -0,0 +1,24 @@
+import { createStackNavigator } from '@react-navigation/stack';
+import * as React from 'react';
+import DonationListScreen from '../../../screens/DonationList';
+// import DonationScreen from '../../../screens/DonationScreen';
+
+import {
+  DonationScreenParamList,
+} from '../DonationList/types';
+
+const DonationListScreenStack = createStackNavigator();
+
+function DonationListScreenNavigator() {
+  return (
+    <DonationListScreenStack.Navigator>
+      <DonationListScreenStack.Screen
+        name="DonationScreen"
+        component={DonationListScreen}
+        options={{ headerTitle: 'Donation List Screen' }}
+      />
+    </DonationListScreenStack.Navigator>
+  );
+}
+
+export default DonationListScreenNavigator;

navigation/DonorStack/DonationList/types.tsx

@@ -0,0 +1,3 @@
+export type DonationScreenParamList = {
+    DonationScreen: undefined;
+};

navigation/MainNavBar/index.tsx

@@ -9,6 +9,7 @@ import MapScreenNavigator from '../AdminStack/Map';
 import DonationScreenNavigator from '../DonorStack/DonationForm';
 import DonationsListNavigator from '../AdminStack/DonationList';
 import ProfileNavigator from '../SharedStack/UserProfile';
+import DonationListScreenNavigator from '../DonorStack/DonationList';
 
 import {
   BottomTabParamList,
@@ -46,6 +47,13 @@ function DonorTabs() {
           tabBarIcon: ({ color }) => <MaterialCommunityIcons name="hand-heart" size={30} color={color} style={{ marginBottom: -3 }} />,
         }}
       />
+      <BottomTab.Screen
+        name="Donation List"
+        component={DonationListScreenNavigator}
+        options={{
+          tabBarIcon: ({ color }) => <MaterialCommunityIcons name="cart" size={30} color={color} style={{ marginBottom: -3 }} />,
+        }}
+      />
       <BottomTab.Screen
         name="Me"
         component={ProfileNavigator}

package.json

@@ -64,6 +64,7 @@
     "react-native-geolocation-service": "^5.2.0",
     "react-native-gesture-handler": "~1.8.0",
     "react-native-maps": "0.27.1",
+    "react-native-paper": "^4.9.2",
     "react-native-safe-area-context": "3.1.9",
     "react-native-screens": "~2.15.0",
     "react-native-svg": "12.1.0",

redux/reducers/donationCartReducer/index.ts

@@ -6,7 +6,7 @@ const initialState = {
   ongoing: false,
   status: '',
   imageLink: '',
-  dishes: [],
+  dishes: [{ dishID: 'asd', quantity: 2, _id: `${Math.random()}` }],
   pickupAddress: {
     streetAddress: '',
     buildingNumber: 0,
@@ -31,9 +31,30 @@ const donationCartReducer = createSlice({
   reducers: {
     addToCart(state, action: PayloadAction<DonationDishes>) {
       state.dishes.push(action.payload);
+    },
+    setDonationList(state, action) {
+      state.dishes = [].concat(action.payload);
+    },
+    getDonationList(state) {
+      return state;
+    },
+    deleteDonationList(state: any, action) {
+      const list = state.dishes.filter((f: any) => f._id !== action.payload._id);
+      state.dishes = list;
+    },
+    updateQty(state: any, action) {
+      const item = state.dishes.filter((f: any) => f._id === action.payload.item._id)[0];
+      const list = state.dishes;
+      for (let index = 0; index < list.length; index += 1) {
+        if (list[index]._id === item._id) {
+          list[index].quantity = action.payload.quantity;
+        }
+      }
+      state.dishes = list;
+      console.log(item);
     }
   },
 });
 
-export const { addToCart } = donationCartReducer.actions;
+export const { addToCart, setDonationList, getDonationList, deleteDonationList, updateQty } = donationCartReducer.actions;
 export default donationCartReducer.reducer;