need help creating a delete feed create a new async function called deleteFeedApi which takes in the following parameters: token, feedId. In your src/util/ApiUtil.js file, add code to use Axios and call the delete feed request api in deleteFeedApi function: The code should make a DELETE request to the API endpoint ${API_BASE_URL}/feeds/${feedId} . For The Authorization header, set the value of frameToken(token) where token is the token parameter passed to the function. If the request is successful and the status code is 200, update the response and indicate success using frameResponse(1). If there is an error, execute the catch block. If there is a response available in the error object, update the response with the error message. If there is no response available, the error should be logged to the console. Finally, return the response to the function. In src/pages/App/MyFeeds.js, pass a prop loadOnDelete={getMyFeeds} in FeedCard component under your MyFeeds component. In src/components/App/FeedCard.js, import your deleteFeedApi from src/util/ApiUtil.js. In src/components/App/FeedCard.js, add a new prop loadOnDelete = undefined in your FeedCard component. In src/components/App/FeedCard.js, create a new function called deleteFeed: Check if isFetching is false. Set isFetching to true. The code should make a call to the deleteApi function with the token and feedId as parameters. If the API call returns a status of 1, Call loadOnDelete(0) to update the component in MyFeeds and reload the feeds. Set isFetching to false. {loadOnDelete && ( )}
I need help creating a delete feed
-
create a new async function called deleteFeedApi which takes in the following parameters: token, feedId.
-
In your src/util/ApiUtil.js file, add code to use Axios and call the delete feed request api in deleteFeedApi function:
-
The code should make a DELETE request to the API endpoint ${API_BASE_URL}/feeds/${feedId} .
-
For The Authorization header, set the value of frameToken(token) where token is the token parameter passed to the function.
-
If the request is successful and the status code is 200, update the response and indicate success using frameResponse(1).
-
If there is an error, execute the catch block. If there is a response available in the error object, update the response with the error message. If there is no response available, the error should be logged to the console.
-
Finally, return the response to the function.
-
-
In src/pages/App/MyFeeds.js, pass a prop loadOnDelete={getMyFeeds} in FeedCard component under your MyFeeds component.
-
In src/components/App/FeedCard.js, import your deleteFeedApi from src/util/ApiUtil.js.
-
In src/components/App/FeedCard.js, add a new prop loadOnDelete = undefined in your FeedCard component.
-
In src/components/App/FeedCard.js, create a new function called deleteFeed:
-
Check if isFetching is false.
-
Set isFetching to true.
-
The code should make a call to the deleteApi function with the token and feedId as parameters.
-
If the API call returns a status of 1, Call loadOnDelete(0) to update the component in MyFeeds and reload the feeds.
-
Set isFetching to false.
-
- {loadOnDelete && ( <div className="flex flex-col justify-center m-5" onClick={deleteFeed} > <span className="transition ease-out duration-300 hover:bg-gray-50 bg-gray-100 h-8 px-2 py-2 text-center rounded-full text-gray-100 cursor-pointer"> <svg className="h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" > <path fill="currentColor" d="M7 21q-.825 0-1.413-.588T5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.588 1.413T17 21H7ZM17 6H7v13h10V6ZM9 17h2V8H9v9Zm4 0h2V8h-2v9ZM7 6v13V6Z" /> </svg> </span> </div> )}
Step by step
Solved in 5 steps
