fixing delete

App.js

@@ -1,16 +1,16 @@
 import React from 'react'
-import { StyleSheet, Text, View } from 'react-native'
-import AddTransaction from './src/Components/AddTransaction'
+import { StyleSheet, View } from 'react-native'
 import { AppProvider } from './src/context/AppState'
-import {TransactionList} from './src/Components/TransactionList'
-import Balance from './src/Components/Balance'
-import IncomeExpense from './src/Components/IncomeExpense'
+
+
 import NavigateScreen from './src/Navigate/NavigateScreen'
+import Test from './src/Components/Test'
 
 const App = () => {
   return (
     <AppProvider>
       <View style={styles.container}>
+      <Test/>
         <NavigateScreen/>
       </View>
     </AppProvider>

__backend/package.json

@@ -4,7 +4,8 @@
   "description": "Backend for expense tracker",
   "main": "server.js",
   "scripts": {
-    "start": "server.js"
+    "start": "server.js",
+    "server": "nodemon server.js"
   },
   "author": "",
   "license": "MIT",

__backend/routes/transaction.js

@@ -21,10 +21,10 @@ router.post("/", async (req, res) => {
 // GET Transaction
 router.get("/", async (req, res,) => {
   try {
-    let transaction = await Transaction.find({}).sort({ date: -1 });
+    let transaction = await Transaction.find().sort({ date: -1 });
     res.json(transaction);
-  } catch (error) {
-    console.error(error.message);
+  } catch (err) {
+    console.error(err.message);
     res.status(500).json({ msg: "Server error" });
   }
 });

__backend/server.js

@@ -6,9 +6,9 @@ const connectDB = require("./config/db");
 
 // Connect DB
 connectDB();
-app.use(cors());
 app.use(express.json());
 app.use(express.urlencoded({ extended: false }))
+app.use(cors());
 
 // Routes
 app.use("/api/transactions", require("./routes/transaction"));

android/app/src/debug/AndroidManifest.xml

@@ -1,7 +1,7 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools">
+    xmlns:tools="http://schemas.android.com/tools" >
 
-    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
 
     <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" />
 </manifest>

src/Components/AddTransaction.js

@@ -19,7 +19,7 @@ const AddTransaction = ({ navigation }) => {
       alert("Add Details");
     } else {
       const newTransaction = {
-        id: Math.floor(Math.random() * 100000000),
+       // id: Math.floor(Math.random() * 100000000),
         text,
         amount,
       };
@@ -43,7 +43,7 @@ const AddTransaction = ({ navigation }) => {
       />
       <Text style={styles.text}>Amount :</Text>
       <TextInput
-        defaultValue={amount}
+
         style={styles.textInput}
         placeholder="expense(-100) or income(+100)"
         placeholderTextColor="grey"

src/Components/Test.js

@@ -0,0 +1,17 @@
+import React, { useEffect, useState } from 'react'
+import { View, Text, Button } from 'react-native'
+
+const Test = () => {
+  const [add, setAdd] = useState(0)
+  useEffect(() => {
+    console.log('USE EFFECT',add)
+  },)
+  return (
+    <View>
+      <Text></Text>
+      <Button title='Add' onPress={() => setAdd(add+1)}/>
+    </View>
+  )
+}
+
+export default Test

src/Components/Transaction.js

@@ -1,11 +1,15 @@
-import React, { useContext } from "react";
+import React, { useContext, useEffect } from "react";
 import { StyleSheet, Text, View, TouchableOpacity } from "react-native";
 import { AppContext } from "../context/AppState";
 
 const Transaction = ({ transaction }) => {
-  const { deleteTransaction } = useContext(AppContext);
+  const { deleteTransaction, getTransaction } = useContext(AppContext);
+  useEffect(() => {
+  //  getTransaction();
+  },[]);
   const sign = transaction.amount < 0 ? "-" : "+";
   const onDelete = (id) => {
+    console.log(id);
     deleteTransaction(id);
   };
   return (
@@ -18,7 +22,7 @@ const Transaction = ({ transaction }) => {
         </Text>
         <TouchableOpacity
           style={styles.deleteButton}
-          onPress={() => onDelete(transaction.id)}
+          onPress={() => onDelete(transaction._id)}
         >
           <Text style={styles.deleteText}>X</Text>
         </TouchableOpacity>

src/Components/TransactionList.js

@@ -4,17 +4,16 @@ import { View, FlatList, Text, StyleSheet, Button } from "react-native";
 import Transaction from "./Transaction";
 import Balance from "./Balance";
 import IncomeExpense from "./IncomeExpense";
-import Test from "./Test";
+import Axios from "axios";
 
 export const TransactionList = ({ navigation }) => {
   const { transactions, getTransaction } = useContext(AppContext);
-  // useEffect(() => {
-  //   fetch('http://localhost:5000/api/transactions')
-  //   .then(res => console.log(res))
-  //   .catch(err => err)
-  //   // Get transaction
-  //  // getTransaction()
-  // },[])
+
+  useEffect(() => {
+    // Get transaction
+    getTransaction();
+    //eslint-disable-next-line 
+  }, []);
   return (
     <View>
       <Balance />
@@ -27,9 +26,9 @@ export const TransactionList = ({ navigation }) => {
       <FlatList
         data={transactions}
         renderItem={({ item }) => (
-          <Transaction key={item.id} transaction={item} />
+          <Transaction key={item._id} transaction={item} />
         )}
-        keyExtractor={(item) => item.id.toString()}
+        keyExtractor={(item) => item._id}
       />
     </View>
   );

src/context/AppReducer.js

@@ -3,6 +3,7 @@ import { ADD_TRANSACTION, DELETE_TRANSACTION, GET_TRANSACTIONS } from "./actionT
 export default (state, action) => {
   switch (action.type) {
     case GET_TRANSACTIONS:
+      console.log(action.payload)
       return {
         ...state,
         transactions: action.payload

src/context/AppState.js

@@ -23,38 +23,51 @@ export const AppProvider = ({ children }) => {
   // GET Contacts
   const getTransaction = async () => {
     try {
-      await fetch("http://localhost:5000/api/transactions").then((res) => {
-        dispatch({
-          type: GET_TRANSACTIONS,
-          payload: res.data,
+      await axios
+        .get("http://192.168.1.8:4000/api/transactions")
+        .then((res) => {
+          //  console.log('RES :', res)
+          dispatch({
+            type: GET_TRANSACTIONS,
+            payload: res.data,
+          });
         });
-      });
     } catch (error) {
       console.log("Err", error);
     }
   };
-  const addTransaction = (transaction) => {
+  const addTransaction = async (transaction) => {
     const config = {
       headers: {
         "Content-Type": "application/json",
       },
     };
-    axios
-      .post("http://localhost:5000/api/transactions", transaction, config)
-      .then((res) => res.data)
-      .catch((err) => err);
-    dispatch({
-      type: ADD_TRANSACTION,
-      payload: transaction,
-    });
+    try {
+      await axios
+        .post("http://192.168.1.8:4000/api/transactions", transaction, config)
+        .then((res) => res.data)
+        .catch((err) => err);
+      dispatch({
+        type: ADD_TRANSACTION,
+        payload: transaction,
+      });
+    } catch (error) {
+      console.log(error);
+    }
   };
 
   // Delete
-  const deleteTransaction = (id) => {
-    dispatch({
-      type: DELETE_TRANSACTION,
-      payload: id,
-    });
+  const deleteTransaction = async (id) => {
+    console.log("ID :", id);
+    try {
+      await axios.delete(`http://192.168.1.8:4000/api/transactions/${id}`);
+      dispatch({
+        type: DELETE_TRANSACTION,
+        payload: id,
+      });
+    } catch (error) {
+      console.log(error);
+    }
   };
   // Return
   return (