I have been designing an application that tracks the expiration of food items displayed in a restaurant. The user inputs the food details when it is transferred from the kitchen to the display, triggering a timer based on the intended display duration (1 hour, 2 hours, etc).
I save the time in local storage with a unique identifier linked to each food type. However, I am encountering issues with my code that is supposed to remove the food name from local storage upon expiration.
import React, { useState, useEffect } from "react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import customFetch from "../utility/customFetch";
function TimeFunction({ shelfLife, productId, id, status, expireIn }) {
// let updatedProductAdded = [];
const queryClient = useQueryClient();
const { mutate: updateAddedProduct, isLoading } = useMutation({
mutationFn: (updatedProductAdded) => {
console.log(updatedProductAdded);
return customFetch.patch(`/updateAddedProductOne`, updatedProductAdded);
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["addedProducts"] });
console.log("updated");
},
onError: (error) => {
console.log(error);
},
});
if (isLoading) {
return <h3>Loading...</h3>;
}
...