How can I ensure my mock server handles these methods correctly?
I’m building a React application that interacts with a mock API. I can successfully perform GET and POST operations, but I’m encountering issues with PATCH and DELETE requests, which return a 404 (Not Found) error. I’ve provided the relevant code below. Could anyone help identify what might be causing these errors?
here’s my code:
App.js:
`import Header from "./Header";
import Footer from "./Footer";
import ListItem from "./ListItem";
import "./index.css";
import { useState, useEffect } from "react";
import AddItem from "./AddItem";
import SearchItem from "./SearchItem";
import ApiRequest from "./ApiRequest";
function App() {
const API_URL = "http://localhost:3500/items";
const [items, setItems] = useState([]);
const [newItem, setNewItem] = useState("");
const [search, setSearch] = useState("");
const [fetchError, setFetchError] = useState(null);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const fetchItems = async () => {
try {
const data = await ApiRequest(API_URL, { method: "GET" });
setItems(data.items || []);
setFetchError(null);
} catch (error) {
setFetchError(error.message);
} finally {
setIsLoading(false);
}
};
setTimeout(fetchItems, 2000);
}, []);
const addItem = async (item) => {
const id = items.length ? items[items.length - 1].id + 1 : 1;
const addNewItem = { id, checked: false, item };
const listItems = [...items, addNewItem];
setItems(listItems);
const postOptions = {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(addNewItem),
};
try {
await ApiRequest(API_URL, postOptions);
setFetchError(null);
} catch (error) {
setFetchError(error.message);
}
};
const handleCheck = async (id) => {
const updatedItems = items.map((item) =>
item.id === id ? { ...item, checked: !item.checked } : item
);
setItems(updatedItems);
const updateOptions = {
method: "PATCH",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ checked: updatedItems.find(item => item.id === id).checked }),
};
try {
await ApiRequest(`${API_URL}/${id}`, updateOptions);
setFetchError(null);
} catch (error) {
setFetchError(error.message);
}
};
const handleDelete = async (id) => {
const remainingItems = items.filter((item) => item.id !== id);
setItems(remainingItems);
const deleteOptions = {
method: "DELETE",
headers: {
"Content-Type": "application/json",
},
};
try {
await ApiRequest(`${API_URL}/${id}`, deleteOptions);
setFetchError(null);
} catch (error) {
setFetchError(error.message);
}
};
const handleSubmit = (e) => {
e.preventDefault();
if (!newItem) return;
addItem(newItem);
setNewItem("");
};
return (
<div className="App">
<Header name="To do List" />
<AddItem
newItem={newItem}
setNewItem={setNewItem}
handleSubmit={handleSubmit}
/>
<SearchItem search={search} setSearch={setSearch} />
<main>
{isLoading && <p><b>Loading Items</b></p>}
{fetchError && <p><b>{`Error: ${fetchError}`}</b></p>}
{!isLoading && !fetchError && (
<ListItem
items={items.filter((item) =>
item.item.toLowerCase().includes(search.toLowerCase())
)}
handleCheck={handleCheck}
handleDelete={handleDelete}
/>
)}
</main>
<Footer length={items.length} />
</div>
);
}`
export default App;
ApiRequest.js:
`const ApiRequest = async (url = "", optionsObj = {}) => {
try {
const response = await fetch(url, optionsObj);
if (!response.ok) {
const errorText = await response.text();
throw new Error(`HTTP error! Status: ${response.status}. Details: ${errorText}`);
}
return response.json(); // Return parsed JSON data
} catch (error) {
console.error('API request error:', error.message);
throw error; // Rethrow the error for handling in calling function
}
};
export default ApiRequest;`
Response:
Failed to load resource: the server responded with a status of 404 (Not Found)
