able to update and delete from firebase

Author: DonCastillo

screens/ManageExpenses.js

@@ -5,7 +5,7 @@ import { GlobalStyles } from "../constants/styles";
 import Button from "../components/UI/Button";
 import { ExpensesContext } from "../store/expenses-context";
 import ExpenseForm from "../components/ManageExpense/ExpenseForm";
-import { storeExpense } from "../util/http";
+import { storeExpense, updateExpense, deleteExpense } from "../util/http";
 
 function ManageExpenses({ route, navigation }) {
     const expensesCtx = useContext(ExpensesContext);
@@ -21,24 +21,24 @@ function ManageExpenses({ route, navigation }) {
         });
     }, [navigation, isEditing]);
 
-    function deleteExpenseHandler() {
+    async function deleteExpenseHandler() {
         expensesCtx.deleteExpense(editedExpenseId);
+        await deleteExpense(editedExpenseId);
         navigation.goBack();
     }
 
     function cancelHandler() {
         navigation.goBack();
     }
 
-    function confirmHandler(expenseData) {
+    async function confirmHandler(expenseData) {
         if (isEditing) {
             expensesCtx.updateExpense(editedExpenseId, expenseData);
+            await updateExpense(editedExpenseId, expenseData)
         } else {
-            storeExpense(expenseData);
-            expensesCtx.addExpense(expenseData);
-
+            const id = await storeExpense(expenseData);
+            expensesCtx.addExpense({...expenseData, id: id});
         }
-
         navigation.goBack();
     }
 

store/expenses-context.js

@@ -13,10 +13,10 @@ export const ExpensesContext = createContext({
 function expensesReducer(state, action) {
     switch (action.type) {
         case "ADD":
-            const id = new Date().toString() + Math.random().toString();
-            return [{ ...action.payload, id: id }, ...state];
+            return [action.payload, ...state];
         case "SET":
-            return action.payload;
+            const inverted = action.payload.reverse();
+            return inverted;
         case "UPDATE":
             const updatableExpenseIndex = state.findIndex(
                 (expense) => expense.id === action.payload.id

util/http.js

@@ -2,8 +2,10 @@ import axios from "axios";
 
 const BACKEND_URL =
     "https://react-native-course-8ee6a-default-rtdb.firebaseio.com";
-export function storeExpense(expenseData) {
-    axios.post(BACKEND_URL + "/expenses.json", expenseData);
+export async function storeExpense(expenseData) {
+    const response = await axios.post(BACKEND_URL + "/expenses.json", expenseData);
+    const id = response.data.name;
+    return id;
 }
 
 export async function fetchExpenses() {
@@ -20,3 +22,12 @@ export async function fetchExpenses() {
     }
     return expenses;
 }
+
+
+export async function updateExpense(id, expenseData) {
+    return axios.put(BACKEND_URL + `/expenses/${id}.json`, expenseData);
+}
+
+export async function deleteExpense(id, expenseData) {
+    return axios.delete(BACKEND_URL + `/expenses/${id}.json`);
+}